Creating HTML5 Canvas | Reusing ActionScript 3.0 assets | Flash Pro CC – Part 2

This post in the 2nd and last of the two-part series of Converting and reusing ActionScript 3.0 assets in an HTML5 Canvas document.

Recap

In my previous post, we learned how to run the JSFL script (Commands > Convert to HTML5 Canvas AS3 document formats) to convert legacy ActionScript 3.0 assets and reuse them in an HTML5 Canvas document. We also examined the conversions that were applied on each of layers and objects within the AS3.0 file.

Did you observe?

If you read through the previous post entirely, you must have wondered why the Tap to Jump button in the HTML5 animation wouldn’t work (unlike the SWF where it worked). Like I explained in my previous post, during the conversion ActionScript code is commented out. So, as a final step of the conversion process, we will replace the ActionScript code with equivalent JavaScript. You will be happy to know that Flash Pro CC fully supports JavaScript coding, with additional code-hinting and auto-format features.

Frames 114, 141, 142, & 278

These frames contained fully-functional ActionScript code in the original Banner.fla file, which was commented out during the conversion. Let us pick each of these frames individually and add equivalent JavaScript code for the same:

  1. Go to Frame 114, and select the keyframe on the Code layer.
  2. Press F9 or select Window > Actions to bring up the Actions Panel. You will see the ActionScript code is commented out.
  3. From the table below, copy the JavaScript code below copy the JavaScript code below the AS code and close the Actions Panel.
  4. Similarly, add JavaScript code for frames 141, 142, and 278, as well.
Frame number ActionScript Code Equivalent JavaScript Code
114

var self = this;this.btnJump.onClick = function() {self.gotoAndPlay(“endWait”);}

var self = this;this.stop();this.btnJump.addEventListener(‘click’, onClickJump);function onClickJump() {self.gotoAndPlay(“endWait”);

}

141

removeEventListener(MouseEvent.CLICK,onClickJump);gotoAndPlay(“startWait”);

removeEventListener(MouseEvent.CLICK,onClickJump);this.gotoAndPlay(“startWait”);

142

removeEventListener(MouseEvent.CLICK,onClickJump);

this.instance.removeEventListener(“click”, onClickJump);

278

import flash.events.MouseEvent;btnPlay.addEventListener(MouseEvent.CLICK, onClickEnd);function onClickEnd(pEvent : MouseEvent) : void {navigateToURL(new URLRequest(“http://www.adobe.com/”),”_blank”);}

stop();

this.stop();stage.onClick = function() {window.open(“http://www.adobe.com”, “_blank”);}

And finally…

Publish (Ctrl+Enter on Windows and Command + Enter on MAC) the HTML5 Canvas document again to see the fully functional animation running smoothly on your default browser.

Video tutorial

I created this video tutorial to make it easier for you to understand the conversion process:

Creating HTML5 Canvas | Reusing ActionScript 3.0 assets | Flash Pro CC – Part 1

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.

HelpQuestions_Flash-01

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:

  1. Manually copy layers, symbols, and other library items to a new HTML5 Canvas document.
  2. 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.

Command

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:

  1. In Flash Pro CC, select Commands > Convert to HTML5 Canvas from AS3 Document Formats option.
  2. 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!

Introducing Native HTML5 Canvas in Flash Pro CC

HTML5 Canvas workflow

Have you ever wondered what it would be like to create animated content using a familiar authoring environment, while being able to target a diverse set of platforms like HTML5 Canvas, in addition to Flash Player and AIR?

Great news – the latest version of Flash Professional CC, available now, includes native HTML5 Canvas support. As you may recall, Flash Professional CC was released in June, marking its rebirth as a modernized 64-bit authoring tool for multiple platforms. This update continues that theme, emphasizing its focus on HTML5.

The new HTML5 Canvas support lets you create interactive content leveraging well-established Flash Pro paradigms of timeline, frame-scripts and creation tools, all customized for the HTML5 Canvas platform. Add frame-script using native support for JavaScript including code-hinting, code-coloring, and more.

Check out more details here, or download the free trial.

Thanks and we hope you enjoy this update!

Rich Lee, Sr. Product Marketing Manager
Ajay Kumar Shukla, Sr. Product Manager

Flash Professional CC Update 1 – now available!

Hello everyone,

Firstly, a BIG thank you for providing feedback and reporting bugs. Your inputs have gone a long way in helping us investigate and fix these bugs. We are happy to announce that Flash Pro CC Update 1 (13.0.1) is now live! The update contains fixes for the following bugs:

  • The first curve, drawn using a Wacom tablet, is straightened out.
  • Flash Pro CC freezes when closing the application, intermittently.
  • Flash Pro CC crashes on setting some specific fonts in code editor preferences.
  • Flash Pro CC crashes on exporting images and SWF files on Mac 10.6.

For more information and full list of bugs fixes, see the release notes.

Cheers,

Suhas Yogin