Posts in Category "Toolkit for CreateJS"

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:

Flash Professional CS6 Update2 | Now Available

We are happy to announce the availability of Flash Professional CS6 Update 2 (Ver:12.0.2)! As promised earlier, the update brings you several exciting features, but importantly, Flash Professional CS6 will now extend support for AIR 3.4 and Flash Player 11.4, courtesy the Update! Quite an incentive to revise your target versions when developing AIR applications, no?

  • The Direct Deployment to iOS Devices feature allows you to deploy an AIR application on iOS devices without having to use iTunes. (Please note that iTunes 10.5.0 or greater must be installed on the user’s machine to use this feature.)
  • The Native iOS Simulator Support feature facilitates testing and debugging AIR applications for iOS devices on the native iOS Simulator. This is a MAC only feature, where Flash Pro can be integrated with the Simulator by installing XCode.
  • The High Resolution Retina Display Support feature provides High-resolution Retina Display support for newly introduced iOS devices like iPAD3. Earlier, this feature was available only for iPhone and iPod devices but now richer content, with the concept of pixel doubling, is available for iPAD devices too.

Detailed descriptions for the new features is available in the What’s New for Flash Professional CS6 doc. Also, look at the Release Notes and Known Issues docs to avoid surprises, should you encounter any issues while trying the new and exciting features. The update also has Toolkit for CreateJS 1.1 bundled along with it. Soon as the update completes installing, the Adobe Extension Manager CS6 is launched to install Toolkit for CreateJS 1.1. The new version of the Toolkit has added support for converting Shape Tweens, Motion Tweens, Mask Layers, and Multiframe bounds to HTML5. The update includes fixes for several critical bugs you reported to us on Adobe Flash forums and various other channels:

  • Flash Professional CS6 crashes on launching – without warnings! An issue that occurred due to the presence of corrupt fonts, and one that several users reported on forums.
  • Rendering content using Stage 3D targeting Starling framework rendered content inappropriately.
  • ANEs would go unrecognized when referenced using relative paths in Flash Professional CS6, throwing compilation errors.
  • XML files generated by XFL files have an inconsistent end of lines between the CDATA section and the rest of the file.
  • Adobe Debug Launcher crashes when publishing AIR application for desktop with AIR 3.2.

For a complete list of all issues fixed in this Update, see this link.

[Updated on October 19th, 2012]  The Flash Professional CS6 Update 2 now facilitates silent installation. See this link.

Atari and Adobe Flash Professional

It is highly unlikely that you are reading this blog post and have not played an Atari game ever before. For gamers, passionate or otherwise, casual or obsessive, skilled or talented, Atari games would have been one of the common starting points for developing gaming acumen. Do you know that Atari is taking its historic games to the mobile platform across multiple screens? Empowered by CreateJS libraries, Atari will deliver its games targeting the HTML5 platform to ensure compatibility across multiple mobile platforms and screens. For more information, watch this video.

The project involved creating multitudes of animated assets to create touch-friendly games with rich content. Yes, you guessed it right, Flash Professional CS6 along with the Toolkit for CreateJS extension and some custom JSFL was used to carry out this mammoth task of preparing assets. To know more about Toolkit for CreateJS, see this DevNet article. Also, visit gskinner.com to know more about Grant Skinner, creator of CreateJS and a prime contributor to the Atari HTML5 project.