source: http://www.nicolasrapp.com/pharmawater_update/
In this lab you'll create movieClip animations that run independently of the scene-to-scene animation
Phase 5: MovieClip animations
Step 1: Import the new elements into Flash
a. Create a new Flash file and save it as "DrugAnimation_Loops.fla"
b. Import "DrugAnimation_finalDrawings.ai." Make sure the "Set stage to same size..." button is NOT checked (since your drawing is much wider than the final animation window).
Illustrator gradients aren't compatible with Flash gradients so the gradient background has disappeared. You'll recreate it soon.
You may encounter this problem as you work on this lab:
When you zoom out to see everything, sometimes part of your image is obscured like this:
The good news is that your image isn't lost and you haven't done anything wrong. If you find yourself wanting to see something that has been cut off (for example, if you were looking at this view, but wanted to see the waste water plant), one trick is to select something that is not visible - so, for example, you could select the contents of the "Buildings and ground" layer, which includes the waste water plant. That should adjust the view and allow you to see everything that has been selected.
Since you told Flash NOT to set the stage size to the size of the imported file, it is currently set to the default size of 550px wide x 400px high.
c. Right click and select "Document Properties," or go to Modify -> Document...and set the stage width to 750 px and height to 550 px. It should look something like this:
d. Delete the Screenshots layer
e. Set the frame rate to 12 fps (you don't need a high frame rate since this animation is so simple).
f. Lock all of the layers, except for the Background layer in preparation for the next step.
g. Watch this video about gradients in Flash and recreate the gradient on the Background layer (you can just guess at the orange color or you can use the eye-dropper tool or retrieve the color from your Illustrator file, whichever you prefer). The background just needs to cover the stage area as shown below.
Step 2: Create simple tween animations
There are 3 animations which involve a simple shape tween that is repeated over and over:
a. Lock all of the layers except for the "Drinking water" layer. If you're having trouble seeing the drinking water because of the problem mentioned above, try this: Double-click on the first frame of the "Drinking water" layer and then change the magnification to 400%.
b. If it isn't already, select everything on that layer:
c. Then turn it into a movieClip symbol called "mcDrinkingWater" with an instance name "drinkingWater_mc"
d. Double click or go to Edit -> Edit Symbols to get into this movieClip and view its timeline.
The animation you're copying moves between the thin version of the water and the thick version. To create this effect, you'll start with one version, tween to the other, then tween back to the first. So you'll need 3 keyframes.
e. Insert keyframes at frame 15 & 30.
f. At frame 1 & 30, select and delete the shape that is on top (whether it's the thick or the thin version of the water).
g. At frame 15, select and delete the shape that is underneath (the version that you didn't remove in the previous step). An easy way to do this is to select the shape that is on top, go to Modify -> Arrange and select Send to Back to make it easy to select the shape that is now on top and delete it
Make sure you only have one object on each frame (don't accidentally delete both objects!)
h. Insert shape tweens between the three frames (as shown below), then scrub the playhead to see that the water morphs between the thick version and the thin version (just like in the video).
i. Back out of this object and lock the "Drinking water" layer.
Next, you'll create the plant water animation.
j. Unlock the "Plant water" layer and verify that all other layers are locked.
k. Selected everything on the "Plant water" layer and turn it into a movieClip named "mcTreatmentWater" and an instance name "wastewater_mc."
l. Open the movieClip and create an animation that tweens between the two versions of the waste water (just as you did with the two versions of the drinking water).
Make sure you only have one object on each frame (don't accidentally delete both objects!)
The next step will be to create a second instance of this movieClip to represent the water in the drinking water treatment plant.
m. Lock the "Plant water" layer and create a new layer called "Plant water 2"
n. Zoom in on the drinking water treatment plant (if you're having trouble with this because the display is cut off, temporarilly unlock the "Buildings and ground" layer and double-click on the first frame of that layer to select everything - this should adjust the display and make the treatment plant visible so you can zoom in on it.
o. Open the Library panel
...and drag a copy of mcTreatmentWater into place:
p. Give it the instance name "drinkingWaterPlant_mc"
Next, you'll create the wavy water animation.
q. Bring the wavy water into view, unlock the "Wavy water" layer, lock all other layers.
r. Follow the same steps as before to create the animation. Call the movieClip and the instance "wavyWater_mc"
Step 3: Create the smoke animation
In the smoke animation, circles fade in sequentially, then fade out in the same order (watch the video again to see this: http://www.nicolasrapp.com/pharmawater_update/). You'll use shape tweens to create the fade-in effect and put each circle on a different layer to make it easy to have them appear/disappear on appropriate frames.
a. Create a layer called "smokestack".
b. Make the smoke stack visible on your screen:
c. Draw the first circle (colored #54423f) and turn it into a movieClip ("mcSmoke") as shown below:
d. Double-click to enter the movieclip, and name the current layer "Circle 1"
At the beginning of the animation, this circle will be invisible. It will fade in and be visible in frame 4.
e. Insert a keyframe at frame 4, then move back to frame 1.
f. Open the Property panel and click on the circle to get access to its properties:
g. You want to make the circle transparent. So click on the dark gray-brown fill box to get to the color selection dialog and set alpha to 0%:
h. Create a shape tween between the two keyframes and scrub the playhead to see that the smoke fades in over those 4 frames.
g. If you watch the video, you'll see that this circle is present for about 3 seconds (while the other circles fade in), then it fades out. So... put a keyframe in frame 36 and another at frame 40.
h. Set the alpha of the circle to 0% in the last keyframe and insert a shape tween between 36 & 40.
i. Scrub the playhead and see that the circle fades in....stays dark for a while, then fades out. The first smoke circle is done.
j. Lock this layer and create a new layer called "Circle 2". Look at the screenshot below to see the general size and position of the circle. This circle appears after the first circle is fully visible, so inset a keyframe at frame 5, and draw the circle there (don't worry if the size and position are not precisely accurate).
k. Watch the video to see how long it takes the little circle to fade in, how long it stays visible, and when it fades out. Then create the keyframes, tweens and alpha settings to make that happen.
l. Repeat the above steps to create the final 4 circles.
The movieClip is done.
Step 4: Bring in the eating man animation
You've created the eating man animation in a separate file ("DrugAnimation_Man.fla"). In this step, you'll put that animation into a movieClip in the current file. (The method I'll show you may not be the best strategy, but I've experimented with others and find this works well).
a. Lock all of the layers and create a new layer called "Eating man".
b. Draw a shape - it doesn't matter what it looks like, you just need something that you can turn into a movie clip which you will later edit:
c. Turn this rectangle into a movieClip called "mcEatingMan" and name the instance "eatingMan_mc"
d. Go into this movieClip to bring up its timeline.
e. Open "DrugAnimation_Man.fla," select all of the frames by clicking on the first frame, holding down Shift and clicking on the last frame:
f. Right-click and select "Copy Frames" (or Edit -> Timeline -> Copy Frames)
g. Go back to "DrugAnimation_Loops.fla" and the where you can see the timeline for "eatingMan_mc" and click on the first frame.
h. Right-click and select "Paste Frames" (or Edit -> Timeline -> Paste Frames). You'll now see the first frame of the movie clip on the stage, though probably not in the correct location:
i. Go back to Scene 1 (i.e. get out of the movie clip), and adjust the position of the movie clip so the toilet lines up with the pipe below it:
j. Test the movie. You should see the eating man animation running...over, and over again.
Unlike the other animations, you don't want this one to loop continuously.
l. To keep the movie clip from looping, add an "actions" layer at the top (in the main timeline) and write the following code:
//Stop eatingMan_mc after it has run through the animation once
eatingMan_mc.addEventListener(Event.ENTER_FRAME,stopAnimation);
function stopAnimation(e:Event):void{
if (eatingMan_mc.currentFrame == eatingMan_mc.totalFrames){
eatingMan_mc.stop();
}
}
You're done for now. In the next phase, you'll create the animation that will move you from scene to scene in the movie.
FINAL PRODUCT: DrugAnimation_loops.fla
Challenge yourself: How would you do this?
Here are some flash animations that use embedded movie clips, think about how these may have been created:
Check out the rotating red things (click to go to the site)
Think about how you would create these animations (drag the slider to see more)
SUMMARY
For this lab you created 3 animations that involved shape tweens between 2 versions of a drawing:
Then you created the smokestack animation which involved tweening between transparent and opaque versions of a drawing, and using layers and keyframes to make elements disappear/appear in sequence:
Finally, you learned how to paste frames from another .fla file into a movie clip: