source: http://www.nicolasrapp.com/pharmawater_update/
Phase 5: Scene animation
In this phase, you'll create the transitions between scenes that happen each time the viewer clicks on the NEXT button. You'll do this by moving EVERYTHING to the left each time, like this:
scene 1:
scene 2:
scene 3:
etc...
pre-Step:
a. Save a copy of "DrugAnimation_Loops_CreateJS.fla" as "DrugAnimation_Scenes.fla"
Step 1: Set up the NEXT button
The user will click on the NEXT text to move to the next scene. In this step, you'll turn the NEXT text into a button in preparation for doing that.
a. Lock all of the layers and unlock the "Next button" layer.
b. Select the NEXT text and convert it into a button symbol (Modify->Convert to Symbol) called "btnNext". Then go to the Properties panel and give it the instance name "next_btn".
c. Double-click on this new button to see its button timeline:
Here's a video about the button timeline.
We'll use this timeline to make the button behave the way it does in the video; it turns red when you move your cursor over it, and it does so before the cursor has actually touched the letters (i.e. the area of the button is slightly larger than the text itself).
d. Right-click in the Over frame and insert a keyframe (or Insert -> Timeline -> Keyframe).
e. Use the text tool to select the text, if it isn't already selected. Then go to the Properties panel and change the color of the text to red:
f. Now put a keyframe in the "Hit" frame and draw a rectangle that covers the NEXT text and goes beyond the text slightly (it doesn't matter what color it is, this won't be visible, it just defines the area that will be treated as the button):
g. Test your movie to see that when you move your mouse close to the NEXT text, it turns red.
Step 2: Turn the other layers into symbols (for compatibility with CreateJS)
You will be using Classic Tweens to move everything smoothly from one scene to the next. Reminder: Classic Tweens create transitions between symbols (not shapes or other elements). If you create a Classic Tween between elements that are not yet symbols, Flash will turn them into symbols for you. It will create new symbols at each keyframe...which isn' t a aproblem in Flash, but it IS a problem in CreateJS (you'll get an error about multiple instances of a symbol), hence this first step which will make sure that the tweens happen between instances of the SAME symbol each time...
You've just turned the contents of the "next button" layer into a symbol (a button) and the layers with the looping animations already contain symbols so you don't need to do anything with them (eating man, smokestack, drinking water, wavy water, plant water, plant water 2 and drinking man)
b. For the others (listed below), do this:
The layers you need to do this with are: text; hospital pipe; hospital pipe mask; orange bubbles; white bubbles; main pipe; main pipe mask; final pipe; final pipe mask ; drinking man; buildings and ground.
Step 2: Create the scene tweens
The transition from one scene in the video to the next takes about 2 seconds. Since the frame rate is 12 fps (frames per second), it will take about 24 frames for each transition.
b. Insert a keyframe at frame 24 for all layers, except next, background, and actions (reminder, you can select an entire column of frames, then hit control or command on the layers you don't want, then insert a keyframe on all of the selected layers simultaneously).
c. For the next, background, and action layers, insert a keyframe at 120
d. You're going to move everything over for the next scene except for the gradient background and the NEXT button which will stay in place. So unlock all of the layers, but lock "Background" and "Next button" layers.
e. Move the playhead to frame 24, if it isn't already there, then select everything and shift it all over to the left until the hospital is centered on the stage (hint: if you use the arrow keys to move everything, you don't have to worry about accidentally moving things up or down):
f. Now insert a keyframe at frame 48, move the playhead there and shift everything over until the first treatment plant is centered on the stage. Then make a keyframe at 72 and move everything so the open water is centered, then the second treatment plant at keyframe 96 and finally the man drinking at keyframe 120.
g. Now select a column of frames anywhere between the first and 24th frames and insert a Classic Tween (Insert->Classic Tween).
As a test to ensure that you don't have any errors at this point that will be hard to spot later...
h. Publish this file using the CreateJS toolkit to make sure you don't have any errors. If you have an error saying "Layers with classic tweens must contain only a single symbol instance," you missed creating a symbol for one of the layers. (NOTE: You will see a flashing red next button, ignore that for now.)
Back to Flash...
i. Scrub the playhead from cell 1 to 24 to see that everything moves smoothly past.
j. Put Classic Tweens between the other 4 pairs of keyframes.
k. Test your movie (you may see a message about streaming...just ignore it). The scenes should flow past smoothly then jump to the beginning and start again.
l. To prevent the animation from running automatically, open the Actions panel and write stop(); as the first line
Step 3: Add functionality to the NEXT button
a. Go back to the main timeline, the open the Actions panel and remove the 'stop();' line. When you run the movie, you'll see that the NEXT button now stays in place while the scenes scroll by.
Next you'll write code so the animation pauses at every keyframe and only moves to the next frame when you click on the NEXT button.
b. Go to the Actions panel and write these comments (It doesn't matter whether it's before or after the existing code):
//Make the animation stop at every keyframe
// Run the animation when the NEXT button is clicked
Think about how to do these things. Go ahead and try writing the code if you want. Then continue with these instructions (if you've written functional code and prefer it to what I suggest, feel free to keep your own).
c. If you want the animation to stop at every keyframe, you need to first figure out how to test for when the animation is on a keyframe. Think back to the code you wrote for the Medals animation. You used an event listener to know when the frame had changed, then tested every frame to see if it was your target frame. Do the same here - paste the following code to add an event listener that will listen for every time the animation enters a new frame, then will call a function that checks to see the the frame number matches one of the keyframe numbers:
stage.addEventListener(Event.ENTER_FRAME,checkForKeyframe);
function checkForKeyframe(e:Event):void{
switch (currentFrame) {
case 1:
stop();
break;
case 24:
stop();
break;
case 48:
stop();
break;
case 72:
stop();
break;
case 96:
stop();
break;
case 120:
stop();
}}
e. To restart the animation when the button is clicked, the button needs to listen for when it's clicked, then call a function that will restart the animation:
next_btn.addEventListener(MouseEvent.MOUSE_UP,continueAnimation);
function continueAnimation(e:Event):void{
play();
}
f. Put the "stop();" line back at the begining of your code so the first transition will wait until the button is clicked. Text the movie. You should now be able to control the animation.
Step 4: Control appearance of text
Notice that when you move from scene the scene in the video, the title and description text disappear when you click on the NEXT button and appear when you arrive at the next keyframe scene. We could turn that text into buttons and write code to have them appear/disappear at the appropriate times. But we can also just change when they appear in the timeline:
a. First remove the tweens in the "Text" layer that makes the text move along with everything else (right click and choose "Remove Tween" or "Insert -> Remove Tween"
Think about what should happen to the text now that you've done that...then test the movie and see what happens.
You want the text to disappear when you click on the next button and only reappear when you arrive at the next keyframe. So...
b. Remove the text as soon as the animation starts up again by placing a blank keyframe in the cell after each keyframe (right click or Insert->Timeline->Blank Keyframe)
c. Run your movie and see that the text appears/disappears just as in the video.
d. You may find that on some of the scenes, you can see text from the previous scene. We could fix it, but it's not worth it for this purpose so ignore it for now
You're all done with this phase.
Final Product: DrugAnimation_scenes.fla
SUMMARY
Reinforced many concepts you've already encountered - using symbols, keyframes, classic tweens, controlling animation, the switch case structure.