A Tutorial: NextWeb- Adobe CreateJS Toolkit; Export ... - fen-om data

A Tutorial: NextWeb- Adobe CreateJS Toolkit; Export HTML Animations from FlashSandro Alberti; salberti@siggraph.orgIf you like this, please help us support the promotion of computer graphics and interactivity:SETUPHardware/software:You'll need a laptop, preferably with an HTML editor (Adobe Dreamweaver, MS Visual Studio, ...) orjust a simple text editor will do.Adobe Flash CS6 ProfessionalAdobe CreateJS toolkit; available here: www.adobe.com/devnet/createjs.htmlFiles:Folder called 'start' and included files; save this on your Desktop.Download the files in ZIP formatOverview of Adobe CreateJS toolkit, found in this document:'HTML-CSS Animation'Materials:None.INTRO"With the Flash Professional Toolkit for CreateJS, you can now easily export assets and animations toJavaScript using the open source CreateJS framework. The output generates nicely formatted, readable,and editable JavaScript code."Adobe.comIn this tutorial, we'll go through the official Adobe tutorial for CreateJS toolkit: 'the flying platypusgame'. New in this document: step-by-step instructions on how to actually make the animation work,starting with the basic Flash file.See the final project hereOpen Flash (and the CreateJS panel), and launch the PlatypusGame.fla file. Run a Test Movie to see theSWF output. You’ll see a terrifying looking platypus launching an aerial attack using a balloon.Try publishing the FLA to CreateJS (simply press the Publish button in the CreateJS panel). The buttonwill display “Wait”, and after a moment your default browser should open with the output. It looksidentical to the SWF, but it’s now in HTML & JavaScript.

Examining the Flash file, you can see that it consists of just 3 elements: the background imagery ('bg';movie clip), game score ('scoreTxt'; classic text), and animated platypus on balloon ('platypus'; movieclip). Notice the timeline: each of these 3 is on its own layer. Digging further into each of these 3elements, we can see:• Background images: Inside one single symbol, we have the cliff (bitmap), the sky (shape withgradient), and the clouds (all transformations of one single graphic instance).• Game score: Totally straightforward: just text.• Platypus: Inside the 1st level of this movie clip, we see the 2 animations having to do with theballoon: either the platypus swinging idly ('PlatypusIdle'; movie clip), or balloon pop/ platypusfalling ('PlatypusPop'; movie clip). These get played depending on whether the timeline playsframe 'idle' or frame 'pop'/ frame 'fall'. (and inside each of the 2 platypus movie clips are themore complex animations showing the body movements of the platypus while swinging orfalling). Every component is carefully labeled: the balloon ('Balloon'; movie clip), platypus bodyparts ('Body', 'Beak', 'LegFront', etc; graphic instances); that way they can later be manipulatedprecisely through JavaScript (like when clicking on the balloon, pops it).Notice that the looping script uses not only Actionscript, but also JavaScript. For example, toreturn to frame 'idle' from frame 60, we have this Actionscript code:gotoAndPlay("idle");... but also this JavaScript code:this.gotoAndPlay("idle");As covered in 'HTML-CSS Animation', both of these can coexist (JavaScript is only used afterexporting the file with CreateJS).Also noteworthy, on frame 61 of the main Platypus animation ('labels' layer), you'll find an audiofile (instance of pop.mp3), which will play when the balloon is popped.Exit Flash and take a look at the files that were exported by CreateJS. As expected, the cliff image is inthe 'images' folder (all other images are actually vector graphics that are part of the Flash code). Andpop.mp3 is in the 'sounds' folder.Open PlatypusGame.html with a text or html editor, and you'll see the basic exported layout. It’s verystraightforward. It imports the required libraries, uses PreloadJS to load any media, then sets up anEaselJS stage pointing at a Canvas element and adds an instance of the root timeline (PlatypusGame) tothe stage. Finally, it sets the framerate on Ticker and adds stage as a listener. This establishes theheartbeat (similar to enterFrame) for the whole animation, updating and redrawing the stage 20 timesper second.Now open PlatypusGame.js. This is the main JavaScript file, where the real meat of the output lives. It'scomprised of a number of self-contained, instantiable JavaScript classes that roughly map to what yousee in the library in Flash.How can these files be modified so that we can actually play a game? The basics: the platypus has tomove from right to left sides of the screen, and the balloon has to be able to detect a mouse click, inorder to pop and drop the platypus (adding points to your score).

Make a new JavaScript file called GameDev.js and copy all the header scripts into this file from the htmlfile. Then, link to it from the header of the html file:We'll use this new *.js file to add our 'gaming' code.Add these new variables:var platypii = [];var score = 0;var oneInstance = 0;In the handleComplete function, change this:Ticker.addListener(stage)to this:Ticker.addListener(window);And add these lines:Touch.enable(stage);exportRoot.removeChild(exportRoot.platypus);And remove:stage.update();This sets up the stage so that it will now listen locally for looping and updates, and removes the originalplatypus (allowing us to reinsert it as an instance that can be manipulated; below, in function tick). Wehave also just enabled touch interactions on our stage, so this game can be played on an iOS device.In order to make the platypus move from right to left, add this function: (this function, tick, is set up byCreateJS to be called on every running frame of the animation; it's sort of like an 'onEnterFrame')function tick() {if (oneInstance == 0) {var platypus = new lib.Platypus();platypus.scaleX = platypus.scaleY = 1;platypus.x = 800;platypus.y = 50;platypus.velX = -6;platypus.velY = 0;}platypii.push(platypus);exportRoot.addChild(platypus);for (var i=platypii.length-1; i>=0; i--) {platypus = platypii[0];platypus.x += platypus.velX;platypus.y += platypus.velY;}oneInstance = 1;}stage.update();In order for the balloon to detect a click and pop, add these 2 functions:function handleBalloonClick(eventObj) {

}var platypus = eventObj.target.parent.parent;platypus.gotoAndPlay("pop");function handleBalloonPopped(platypus) {platypus.falling = true;}And refer to them in the ticker function:platypus.platypusIdle.balloon.onClick = handleBalloonClick;platypus.onPopped = handleBalloonPopped;Now the platypus needs to fall to its death when the balloon pops. For that, we just need to add anaccelerating Y velocity to the basic platypus movement (which currently only involves X across thescreen):if (platypus.falling) { platypus.velY += 3; }Finally, let's get some points for that shot! Add this function:function updateScore(delta) {score = Math.max(0,score + delta);exportRoot.scoreTxt.text = "SCORE: "+score;}And refer to it in the ticker function (basic platypus movement):if (platypus.y > 450) {platypii.splice(i,1);exportRoot.removeChild(platypus);updateScore(100);}Yes, we get points, not when the balloon pops, but when the platypus crosses the bottom of the screen.That's so that we can get points and remove the platypus from memory, all at the same time. And wecan actually expand this same boundary-detection code to include the case where the platypus reachesthe left edge of the screen: (also remove from memory, but don't add points)if (platypus.x < -platypus.nominalBounds.width*platypus.scaleX || platypus.y > 450) {platypii.splice(i,1);exportRoot.removeChild(platypus);// add +100 points if it fell or 0 if it escapedupdateScore(platypus.y > 400 ? 100 : -500);}