CreateJS Extension for Flash CS6

CreateJS Extension for Flash CS6
One of the most awaited new features for FlashR CS6 is the ability to publish your Flash animations as HTML5, which can be used in several ways including web and mobile devices. The Toolkit for CreateJS is a great breakthrough for Flash lovers who want to continue to use Flash to create animations for games, advertising and more but want to take advantage of the new HTML5 Canvas that's supported by mobile and desktop browsers.

The Toolkit exports the necessary HTML and JavaScript that control the preloading, graphics, sound and animations. Once you have these Flash assets converted to HTML5 assets, you are ready to build your HTML5-based game or project outside of Flash.

Your first step is to download the free binary file for Toolkit for CreateJS from the Adobe website.

  1. Open Adobe Extension Manager CS6.

  2. Click the Install button and find the Toolkit-for-CreateJS.zxp file that you just downloaded. Once the new extension is listed in the Extensions window, you can close the Manager dialog box.

  3. Open Flash CS6. For testing purposes, let's draw a rectangle on the stage. Convert it to a Movie Clip called box.

  4. Insert a frame on Frame 50 of the Timeline, add a Keyframe and move the box to the other side of the stage.

  5. Right-click anywhere on the Timeline and add a Classic Tween.

  6. Click Control - Test Movie - In Flash Professional and the box moves across the stage.

  7. To open the new CreateJS panel, click Window - Other Panels - Toolkit for CreateJS. You can dock this panel with the others on the side of the workspace.

    As you can see, we have several settings. For this example, let's keep the default settings and just click the Output button to choose a location for our files to be stored.

  8. Click the Publish button and a browser will open and display your animation as HTML5.

As of now, you can use this new feature to export vectors, bitmaps, classic tweens, and sound to HTML5. It does not support bitmap fills, shape tweens, IK, masks or blends. For example, I tested this on the Flash lip synch sample template file and it couldn't convert the complex animation. But it's a start.

*Adobe provided a copy of this software to me for review purposes.

Copyright 2018 Adobe Systems Incorporated. All rights reserved. Adobe product screen shot(s) reprinted with permission from Adobe Systems Incorporated. Adobe, Photoshop, Photoshop Album, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst and Flash Paper is/are either [a] registered trademark[s] or a trademark[s] of Adobe Systems Incorporated in the United States and/or other countries.

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2019 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.