Note: This is the first of the two part series I am writing for Converting AS3 to HTML5 Canvas.
Flash Professional CC allows native HTML5 Canvas authoring! Yes, you heard it right! With its latest update, you can create HTML5 Canvas content right from within Flash Professional CC using the new HTML5 Canvas document type. This means you can use Flash Professional CC to produce rich, interactive content that adapt to the modern web needs. Flash Pro CC also allows you to add interactivity using JavaScript, as well.
What about legacy ActionScript content?
If you have created SWFs and other ActionScript 3.0 content types in the past, it is certainly not the end of the road! Flash Pro CC allows you to migrate and reuse ActionScript 3.0 content within an HTML5 Canvas document type. When you want to migrate, you have two options:
- Manually copy layers, symbols, and other library items to a new HTML5 Canvas document.
- Automatically port all layers, symbols, library items, and code-snippets to a new HTML5 Canvas document using the Convert AS3 to HTML5 Canvas document.
In this article, I will explain the second option in detail. To get started, download and extract the contents of Banner.zip file, and open Banner.fla in Flash Professional CC.
When you publish the file, here’s how the SWF output looks:
Converting ActionScript 3.0 assets to HTML5 Canvas
To convert the ActionScript assets and reuse them in an HTML5 Canvas document, do the following:
- In Flash Pro CC, select Commands > Convert to HTML5 Canvas from AS3 Document Formats option.
- Flash Pro CC creates a new document, and when prompted, provide a meaningful name (for example, Banner_HTML5.fla) and save the document. The new document contains all layers, symbols, library items, and code-snippets (absolutely)! You will observe that the layers and library items in the new HTML5 Canvas document are composited in just the same way as that of Banner.fla file. The Output panel shows warnings generated while copying/importing AS3 document assets into the HTML5 Canvas doc.
The effect of Conversion
- The (Canvas) suffix besides the file name indicates that it is an HTML5 Canvas document.
- Ensure that you study the warnings in the Output panel. These warnings help you understand all the content conversions that occurred during the migrations. Since not all ActionScript 3.0 features are supported by HTML5 Canvas, Flash Pro CC applies defaults to or removes all such unsupported content types. For information, see this article. In the Banner.fla, you can notice the following conversions:
- Label (Layer) – this is a normal label layer, and is migrated without without any changes.
- Code (Layer) – this layer has frame scripts (ActionScript code) in frames 114, 141, 142, and 278.
- The layer is copied and the objects on stage are intact.
- ActionScript code is commented out for all 4 frames (114, 141, 142, and 278).
- Lines (Layer) – this layer contained a dashed stroke in the original ActionScript 3 document.
- The layer is copied and the object on stage is intact.
- Dashed stroke is not supported with HTML5 Canvas and hence, is converted to a solid stroke.
- Txt (Layer) – this layer has 3 instances of Text symbols.
- AntiAlias of text is not supported with HTML5 Canvas, and is converted to DeviceFonts.
- AutoKern is not supported with HTML5 Canvas, and is removed.
- LineType is not supported with HTML5 Canvas, and is converted to MultiLineNoWrap.
- StaticText is not supported with HTML5 Canvas, and is converted to DynamicText.
- All other layers are copied as is.
- ActionScript code is preserved, but commented out. As a post-migration step, it is important that you write JavaScript code that substitutes functionality of ActionScript code. This will be explained in the next post, as part of this series.
Try publishing the HTML Canvas file by pressing Ctrl + Enter (Command +Enter for MAC) or go to File > Publish to launch the output in your default browser.
The output is a smoothly running HTML5 Canvas animation, with underlying standard compliant HTML and JavaScript code. Here’s how it looks:
In my next part, I am going to tell you how to convert the ActionScript bits in to JavaScript to build interactivity. Stay tuned!
