FlaExporter is a new way to publish high-performance HTML5 content directly from Adobe Flash or Animate without having to restructure your.fla files. HTML5 Canvas and FlaExporter both allow you to publish HTML5 from Adobe Flash CC and Adobe Animate.
- “Wallaby” Flash-to-HTML5 conversion tool now available. (at least relative to Canvas). It would be good to fact-check that belief via the Wallaby forum. BFD, can it convert a flash application with user interactivity, database connectivity and video to HTML 5? That would be a game changer.
- Now Adobe is turning its HTML5 attentions to Flash with the release of Wallaby, a new Flash-to-HTML5 converter. Wallaby is a free Adobe AIR application that allows designers and developers to convert Adobe Flash files (FLAs) into standards-based HTML5, CSS 3 and Javascript files.
Html5 Canvas Library
The HTML5 Canvas document type and the associated design and performance capabilities in Flash Professional CC helps you create performance-optimized HTML5 creatives with ease. You can obviously create new ads targeting the HTML5 platform using Flash Professional CC, but you may also have have some existing Flash ads that you want to convert to HTML5 Canvas for targeting them for multiple platforms, especially mobile devices. Here is how you do it:
- Convert your ActionScript document to HTML5 Canvas document using the document type converter.
- Replace the ActionScript code commented out as reference in the actions panel with their HTML5 Canvas equivalents. You can use the HTML5 Canvas code snippets panel (Window > Code Snippets) in Flash CC 2015 to get started.
Now, let’s see this in action. We are going to convert a Flash ad to HTML5 Canvas.
The converted HTML5 Canvas file should look like this:
Converting an ActionScript document and assets to HTML5 Canvas
- Download the BannerNewFeatures_AS3.zip file, extract the files, and open the BannerNewFeatures_AS3.fla file. You can preview the contents by opening BannerNewFeatures_AS3.swf.
- Click Commands > Convert to other document formats to convert the document to HTML5 Canvas document.
- In the Document Type Converter dialog box, select HTML5 Canvas and click Browse to select a location to save the converted FLA.
- Click OK. The ad has now been converted in to HTML5 Canvas. Open the .html file in the output directory you specified in the previous step to check the converted output. You can see that all your art assets have been converted in to HTML5 Canvas. However, the ad runs in a continuous loop. This change happened because we do not automatically convert the ActionScript code to the equivalent JavaScript code.
Note: Flash Professional does not auto-convert any ActionScript code to JavaScript code because there is no foolproof way to get it completely right. However, our HTML5 Canvas (CreateJS) JavaScript APIs mimic ActionScript code fairly closely. We also have some built-in Code Snippets in Flash CC to help you get started with some commonly used actions.
Converting ActionScript code to JavaScript in your HTML5 Canvas document
- Click Window > Actions to open the Actions panel. All your ActionScript code in FrameScript are displayed as commented out to help you convert them to HTML5 Canvas.
- In the Actions panel, click the ActionScript code that you want to replace and type in the JavaScript equivalent (if an equivalent code snippet is available in the the HTML5 Canvas section of the Code Snippets panel, you can just double-click on it) For example, the following image shows that the stop () ; function that is commented out in ActionScript has been replaced with its HTML5 equivalent, this.stop () ;
- Press Shift+Alt+F12 to publish and check your output.
- To see how all the ActionScript code in the example document were converted in to HTML5 Canvas, downloadBannerNewFeatures_Canvas.zip and open the BannerNewFeatures_Canvas.fla file. To view the final output in HTML5, download Published-Banner-HTML5.zip. and open the BannerNewFeatures_Canvas.html file.
The following are some of the commonly used ActionScript codes and their equivalent JavaScript codes:
- Symbol Instances are referenced as this.instanceName instead of directly using the instanceName:
ActionScript HTML5 - Variable types and function return types should not be specified in JS:
ActionScript HTML5 - trace() is not supported and should be replaced by console.log() or alert():
ActionScript HTML5 - Commonly used events in ActionScript and JavaScript:
ActionScript HTML5 - Commonly used timeline actions in ActionScript and JavaScript:
ActionScript HTML5 Refer the EaselJS documentation for more information about other events. Check out the mapping of ActionScript codes and their equivalent JavaScript codes for HTML5 Canvas platform for a comprehensive list of actions.
- Click Window > Code Snippets.
- In the Code Snippets panel, expand HTML5 Canvas to see the HTML5 equivalents of your ActionScript codes under different categories.
- Creating and publishing an HTML5 Canvas document
Behind the scenes of HTML5 Canvas rendering performance
I have a .fle (flash ads) file and I wanted to convert it into HTML5 not into an SWF file.I am already using Wallaby by Adobe but it causes an error.Please tell me how can I do this conversion.
1 Answer
You can try the steps described in this tutorial using the Document Type Converter.
StackedStacked