The latest update to Flash Professional CC includes support for the new HTML5 Canvas document type. You can either convert an ActionScript 3.0 FLA file to a Canvas document, or start with a Canvas document and build from scratch. This article is an overview of key concepts for building HTML5 content from scratch and converting Flash content to HTML5 content. Along the way, you can explore example files based on a classic Flash jigsaw puzzle project (see Figure 1).
The workspace also supports converting an existing ActionScript 3.0 file to an HTML5 Canvas file. If you convert an ActionScript 3.0 file to an HTML5 Canvas file, Flash Professional CC attempts to bring everything forward. However, some elements do not directly map to HTML5 (including 3D transformations, some filter features, and ActionScript 3.0 code).
Check out Video 1, and the sections that follow for an overview of what to expect.
If you'd like to deconstruct the project or follow along with the tutorial, be sure to download the project files and install the Adobe tools you’ll need.
One of the great things about Flash Professional CC is that it has many expressive design features that don’t exist in other tools I’ve explored. To prove the point, I chose to bring back a classic Flash training project – the interactive jigsaw puzzle. Essentially, this is a simple drag-and-drop game in which you import a single image, split it into multiple puzzle pieces using a line template, and then build the puzzle from there. In the end, you’ll create sixteen puzzle pieces from the original image. Once you have created the initial project, you can swap out the image for another to update all 16 pieces at once.
You can create animations in an HTML5 Canvas document the same way you would in an ActionScript 3.0 file. For example, you can draw a shape and use the same tools you used in earlier versions of Flash to animate the shape along a motion guide. You can build your own motion tweens and shape tweens, or you can build your own motion tweens and shape tweens (see Figure 4).
Check Video 2 for a demonstration of the steps in the project.
Download the supplied files (ZIP, 5.8 MB) folder to use as your project folder. You’ll start with a supplied image (see Figure 5), but in the end you can swap it out for your own.
With Flash you can break bitmap images apart, and delete pixels as needed. You’ll use this feature, combined with a line template drawn in Illustrator CC (see Figure 6), to create the puzzle pieces. You’ll place the template above the image, and break both graphics apart. This causes the lines to cut curved sections into the image. From there, you’ll copy each puzzle piece section into a symbol.
Flash Professional CC also has new publishing settings and features for working with an HTML5 Canvas document (see Figure 9).
One of the best parts of the puzzle template is that you can update it by simply swapping the sunflower image for another (see Figure 10). Simply replace the sunflower.jpg image in the images folder with another image with the same name. That’s it. Updating a single image updates all sixteen puzzle pieces in the game.
When you run the command, Flash Professional translates everything as closely as possible into the HTML5 format. However, not everything is brought forward. The linkage names are preserved even though no class files are linked to them. Also, during conversion, all of the assets are preserved. The linkages (i.e., external .as files) are lost and the ActionScript code in FrameScripts are commented out (see Video 3).
See the Unsupported features | HTML5 Canvas page in Flash Professional Help for more information on which Flash features translate to HTML5.
Now that you’ve completed a tour through the new HTML5 Canvas features in Flash Professional CC, I encourage you to try experimenting by creating your own animations or interactive games using the HTML5 Canvas. Take some time to look at the CreateJS examples and documentation.
Check out the following resources for more information about the new features in Flash Professional CC:
Dan Carr is lead developer of Dan Carr Design in San Francisco. With 15 years’ experience collaborating with Adobe and Macromedia, Dan has produced training materials, technical articles, and features available in Flash, Flex, and more. Dan’s most recent work specializes in gaming and video for Flash, HTML5, and iOS.