Adobe Flash Professional has long been used to create applications, games, and other interactive content for a variety of platforms. These days, Flash Professional CC continues to evolve by enabling you to publish HTML5 content for modern browsers without requiring a plug-in.
A SWF generated from a Flash Professional project with ActionScript has the look and feel of the same project targeting HTML5 Canvas (see Figure 1).
Before you convert an existing SWF project, it will help to know how to create a simple HTML5 Canvas project from scratch. The workflow for generating the new documents within Flash Professional is similar to the workflow used to create FLA and AS projects:
Note: The 3D Rotation tool in the toolbar of the Flash Professional CC workspace is disabled when creating HTML5 Canvas documents because it is specific to SWF projects and not supported in the HTML5 specification (see Figure 3).
Follow these steps to convert a Flash project to an HTML5 Canvas project:
removeEventListener(MouseEvent.CLICK,onClickJump); /* js this.btnTapToJump.removeEventListener("click", onClickJump); */
When you migrate a Flash project to HTML5 Canvas, the Output panel displays pertinent warnings (see Figure 5) to help you identify and fix any issues as necessary.
When you export a Canvas document, you'll see different options in the Publish Settings dialog box. Follow these steps to see the settings available when generating a Canvas document:
The page loads and the Canvas file exported from Flash Professional plays in the browser without requiring a plug-in.
If you want to see how the file uses CreateJS libraries, view the HTML source code. Notice the links to the CreateJS libraries listed in the <head> section of the page (see Figure 7).
Flash Professional CC is an all-in-one animation tool for deploying engaging multimedia to a variety of platforms. You can create compelling web content that plays well on any screen while working in the familiar Flash Professional workspace. Try using the new export features and see how Flash projects play back on your favorite machine or device. Check out the video, Publish to HTML5 using the Adobe Flash Professional Toolkit for CreateJS, for more information about how Flash Professional integrates the CreateJS framework to facilitate the generation of HTML5 projects.
Here are some additional resources for you to explore these concepts further:
Paul Trani is a worldwide web evangelist at Adobe focusing on workflows that empower designers to create for the web and mobile devices.