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:
- Go to Frame 114, and select the keyframe on the Code layer.
- Press F9 or select Window > Actions to bring up the Actions Panel. You will see the ActionScript code is commented out.
- From the table below, copy the JavaScript code below copy the JavaScript code below the AS code and close the Actions Panel.
- 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: