Intro to CreateJS
You've already been introduced to Adobe Edge Animate which is a Flash-like alternative that creates HTML and JavaScript output and relies on the JQuery JavaScript library. The CreateJS Toolkit works with Flash to create HTML5/JavaScript content that relies on the CreateJS JavaScript libraries.
If you want to know more, I'd recommend the series of videos you'll find here.
The CreateJS toolkit is free and it is constantly being upgraded. You can get it here (you need to have the latest version of Flash to use it)
Step 1: Eating Man in HTML/Canvas
a. Open DrugAnimationMan.fla and save as DrugAnimationMan_CreateJS.fla
b. Go to WIndow -> Other Panels -> Toolkit for CreateJS
c. Click on the "publish" button. The output will be shown in the default browser - pure HTML & javascript (uses the Canvas element which you'll learn more about later):
You can add a little JavaScript to stop the animation from looping endlessly.
d. Go back to Flash and create an Actions Layer
You're about to violate the rule I told you about only putting code in the first frame, but this seems to be the way they do things in this context...
e. Go to the final frame (frame 120), insert a keyframe, and type this code into the actions pane:
/* js
this.stop();
*/
Code that is put between /* js and */ will be interpreted as JavaScript code by the CreateJS toolkit.
f. Publish to CreateJS again. The animation should run once and stop (and run again if you reload the page).
That's all for now (you'll do more in future labs).
FINAL PRODUCT: DrugAnimation_Man_CreateJS.html, DrugAnimation_Man_CreateJS.js