In this lab, you'll create a JavaScript -based version of the looping animations you created in Flash, using the CreateJS Toolkit.
pre-Step: Stop the eating map loop...again
In the previous CreateJS lab, you made the eating map animation run just once by adding some JavaScript code. Since you're now working with a different version of that same animation, you'll make the same fix here.
a. Open DrugAnimation_Loops.fla and save it as DrugAnimation_Loops_CreateJS.fla
b. Open the libary panel and double-click on the movie clip symbol to the left of "eatingMan_mc":
c. Add a new layer "actions"
d. Go to frame 120 in the actions layer, insert a keyframe, open the actions panel and type the same code you typed last time:
/* js
this.stop();
*/
Step 1: Addressing CreateJS warnings
a. Click on the "publish" button in the Toolkit for CreateJS panel. If you are getting error "Unexepected error occured during export. The following Javascrip errors..." Please disregard that and continue with the assignment. We will be checking for exporting during grading.
...it partially works - the first animation loops continually (we know how to fix that), and the text button has disappeared
b. Look at the output panel [NOTE: Depending upon the version of CreateJS you're using, you may or may not see these same errors. It won't hurt to follow the directions for the fixes either way]:
WARNINGS:
Feature not supported: TLF text. Use classic text instead. (39)
Shape tweens are not supported. (9)
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls.
Let's deal with the "TLF text" problem first.
c. Be sure the "next button" layer is unlocked, click on the NEXT text and look at the properties panel:
d. Choose "Classic Text" from the drop-down menu
e. Publish the file with CreateJS again...the NEXT text now appears! But we still have the same error message since there is other TLF text in the file. So unlock the text layer and change all of those text elements to classic text (I found I had to increase the width of some of the text boxes to accommodate the classic text). When you're done and publish the file to CreateJS again, that error message should be gone and the title text should be appearing in the first frame:
The next warning message says "Text support is limited. It is generally recommended to include text as HTML elements (see DOMElement)." We won't worry about this since we aren't doing anything fancy with the text.
The next warning says: Shape tweens are not supported and you've used them in several animations...fortunately, you can learn some useful things in the process of fixing these... [NOTE: The latest version of CreateJS does support Shape tweens]
Step 2: Fix the SmokeStack
a. Open the library panel and double-click on the icon next to smoke_mc to open and edit it.
b. View the timeline to see that this movieClip uses shape tweens (they're green):
These tweens change the transparency (the "alpha") of the smoke bubbles. Fortunately, that's an effect that can be achieved with Classic Tweens as well. You could just replace the Shape Tweens with Classic Tweens, but that will provoke a new error when with output with CreateJS "Layers with classic tweens must contain only a single symbol instance."
To see this, save your file (so you can undo what you're about to do later) and then:
c. Right-click on one of the tweens and choose "Remove tween". Then right-click and choose "Create Classic Tween". It will now be blue:
d. Click on the first keyframe to select that frame and show its element on the stage (it's transparent so you just see the selection box, the registration point and the transformation point):
e. Now click on that element so you can see its properties in the Property panel:
notice that it is an "Instance of: Tween 1"
f. Click on the second keyframe in the same layer, select that element:
...and look at its properties:
notice that it is an instance of Tween2. The other was an instance of Tween1 so saving it with CreateJS would trigger the error message "Layers with classic tweens must contain only a single symbol instance."
But there is a solution:
c. Undo what you've done, or close it without saving and go back to the saved version.
You'll start by turning the bubble into a symbol, but before you do that, you'll make the bubble opaque (you'll later change the opacity of the symbol rather than the opacity of the graphic).
d. Click on the first frame of the first layer, then click on the bubble so you can see its properties in the properties panel:
e. Click on the fill rectangle and change the alpha to 100% (be sure the color stays #54423F - it can be easy to accidentally change it):
f. Now convert it to a movieClip symbol (give it a name like "smokeBubble1_mc").
g. Remove the tween:
h. Clear the second keyframe and then insert a keyframe (which will now contain a copy of the symbol from frame 1.
i. Create a Classic Tween between these two keyframes:
Next, you'll change the alpha of the symbol in the first frame to 0 - remember that to change the alpha of the graphic, you opened the fill color dialog. To change the alpha of the symbol, you'll create a "Color Effect."
f. Go to the property panel and choose alpha from the list of Style options:
g. Set Alpha to 100 by dragging the slider to the right or typing 100 in the box:
h. Scrub the playhead to see that the first smoke bubble fades in, just like it did when you were using a Shape Tween.
i. Next clear and replace the 3rd and 4th keyframes, put a Classic Tween between them, and set the Alpha of the symbol in the final frame to 0:
i. Do the same for all of the other layers (a little tedious, but you can do it pretty quickly and hopefully it will solidify the concept in your memory). The sequence again is:
Step 3: Fix the drinking water animation
Another place you used shape tweens is in the drinking water animation
a. Open the library panel and double click on "drinkingWater_mc"
You can't morph shapes with classic tweens, but we can approximate morphing with frame-by-frame animation and take advantage of the shape tweens to help with this. Right now, this movie clip has one layer which contains 3 keyframes and two shape tweens:
b. Move the playhead to frame 5 and insert a keyframe - it will capture the partially morphed form that is created by the tween in that frame:
c. Insert keyframes every 5 frames:
d. Now remove the tweens:
e. Scrub the playhead to see that it produces a passable imitation of the animation.
f. Do the same with treatmentWater_mc (remember that an easy way to access it is from the Library panel):
g. And do the same with wavyWater_mc:
You're done! (a little unsatisfying since you can't actually see the animations in the finished product yet...but that will come in the next CreateJS lab
FINAL PRODUCT: DrugAnimation_Loops_CreateJS.fla
