source: http://www.nicolasrapp.com/pharmawater_update/
In this lab, you'll learn to use masking to create interesting animation effects
Phase 6: Masking animations
Step 1: Hospital water animation
a. Start by saving a copy of "DrugAnimation_Scenes.fla" as "DrugAnimation_Masks.fla".
There are 4 animations that use masks (you'll get an explanation of what a mask is soon) - the three water-through-pipes animations, and the bubbling-water animation. The simplest is the water going through the pipe under the hospital so we'll start with that.
Notice that in the pharmaceuticals video, the animation showing water flowing out from the hospital is not happening during the transition into or out of the hospital scene - it only happens when the hospital is in the middle and the scene-to-scene animation has paused (which is frame 24). So you'll create the animation in frame 24.
b. Lock all of the layers except for the "Hospital pipe mask" layer. Go to frame 24 and click on the pipe below the hospital (it should look like the image below when it is selected).
You will be modifying this movieClip to make it show the water flowing out of the hospital using "masking."
c. Watch this video explaining masking.
d. Scrub the playhead to position the hospital in the middle of the stage, then double-click the hospital water mask to get into the movieClip timeline. Name the current layer in the timeline "Mask" and lock it. This layer contains the copy of the pipe (which is blue in my case). This shape will become the window through which you'll see the water flow. (NOTE: this object is the version of the pipe that you turned into a shape using "outline stroke" - if you accidentally use the pipe version that is made from a line, the mask won't work - masks can't be made from lines, only from shapes).
e. Create a new layer called "Hospital Water" and drag it below the "Mask" layer. This is the layer on which you'll draw the water that will show through the mask window.
f. In the "Hospital Water" layer, draw the water - a rectangle like the one below - it's at least as wide as the pipe and it starts white at the top, blends into orange, and then back into white (here's the video on gradients in Flash again if you want a review):
In the video, the water takes about 2 seconds (24 frames) to flow through the pipe, then the pipe is empty for 2 seconds (another 24 frames) before the water flows through again.
i. Insert a keyframe in frame 24 on both layers then select the water rectangle and move int down on the page so the top is below the pipe coming out of the hospital:
h. Create a Classic Tween between the two keyframes. When you scrub the playhead, the water rectangle should now move from above the hospital pipe to below it.
i. You want the pipe to be empty for the next 2 seconds so insert a blank keyframe in frame 25, then insert a keyframe in frame 48. This will make the animation 48 frames (4 seconds) long with nothing visible during the last 2 seconds.
Now it's time to make the masking happen.
j. Right-click on the "Mask" layer (if you don't have a right button on your mouse, hold down the Control key and click), and select "Mask" from the menu.
k. Run the movie to see the result (when you're on the hospital scene, you should see water flowing from the pipe):
The first masking movie clip is complete.
Step 2: Final pipe water
The next most straightforward masking animation is the water flowing through the pipe from the final treatment plant to the house. Notice that the animation starts when you move into the scene with the treatment plant. At the end of the transition, it looks like this:
This isn't a looping animation. It doesn't repeat itself. This suggests that it happens in the main timeline rather than in a movieClip timeline.
a. Go to the main timeline and create a layer just under the "Final pipe mask" layer called "Final water"
b. Lock all of the layers except the "Final water" layer.
c. The animation starts just before the treatment plant gets centered on the page - around frame 90. So insert a keyframe on the "Final water" layer in frame 90.
If you watch the video closely, you'll see that the entire pipe, from the treatment plant to the house, gets filled with water.
d. Draw the water rectangle. It needs to be at least as long as the distance from the treatment plant to the faucet. Make it a gradient from orange (#F9662A) to transparent orange (i.e. make the color orange, then set alpha = 0%):
e. Move the rectangle into place to the left of the pipe exiting the treatment plant, as you see below:
Watch the video again and notice that, while it looks like water ismoving through the pipe, it's really the case that the water is staying in place and the scene is moving past it so you don't actually have to move the water rectangle during the animation so...
f. Turn the "Final pipe mask" layer into a mask layer by right-clicking (or Control-clicking) on the layer name to bring up the menu, and choosing "Mask."
g. Test the movie. You should see the water flowing through the pipe from the final treatment plant to the house.
Step 3: Toilet flush
The toilet flush animation is triggered in either one of 2 ways: If you stay at the initial scene and wait for the initial, pill-popping animation to finish, the toilet flush will be triggered at the end of that animation. But if you click NEXT before the pill-popping animation is complete, the toilet flush is triggered at that point, as the scene moves. We'll deal with this second situation first.
a. This is another animation that is part of the main timeline rather than a movieClip, so create a new layer in the main timeline. Call it "Main water" and move it just below the "Main pipe mask" layer. Lock all of the other layers.
b. On the first frame, draw a gradient rectangle just to the left of the pipe exiting the house:
This is another situation in which the water doesn't move...it stays in place while everything else moves past it.
c. Turn the "Main pipe mask" layer into a mask and test the movie. It should look approximately correct.
The next challenge is to initiate the flushing animation when the man flushes the toilet in the movieClip. There may be other ways to achieve this, but the one I figured out is to create a second version of the same animation and place it within the movieClip.
d. Copy the mask pipe from the "Main water mask" layer (you'll need to change it to a regular layer and unlock it to do this, then be sure to change it back to a mask layer and lock it again once you've copied the pipe)
e. Open the "Library" panel and double-click on "eatingMan_mc" to go to the movieClip timeline.
f. Create a layer called "Pipe mask," and paste the pipe mask into this layer on the first frame. Adjust it so the pipe lines up with the toilet:
e. Go back to the main scene (Scene 1), go to the "Main water Mask" layer, copy the gradient rectangle, then go into the "eatingMan_mc" movieClip again, create a layer called "water" just under the "Pipe mask" layer, paste it, and move it to the left of the pipe:
Now you'll make the water pass through the pipe at the appropriate time.
h. At frame 96 (near the end of the time when the guy is in the bathroom), insert a keyframe on the "Water" layer, then insert another keyframe at cell 103 (just before he opens the door to exit the bathroom). This is the span of time during which the flush will take place. On frame 103, move the water so it fills most of the pipe that will be visible in this first scene:
i. Create a classic tween between these two keyframes.
j. Now turn the "Pipe mask" layer into a mask layer. Then test the movie. It should look complete. You may find that there is a little problem during the first scene change - there might be a slight shift in the eating man movie clip which makes the pipe in the movie clip fail to line up with the pipe in the main timeline (you can see it more clearly if you go to frame 24 of the main timeline:
This happened during the modification of the eating man movie clip. There's an easy fix:
k. Go to frame 24 on the "Eating man" layer and remove the key frame by right clicking (or Command + click), and choose "Clear keyframe". Now insert a new keyframe in frame 24 and shift the eating man movie clip until the pipes are aligned in frame 24:
l. run the movie again to ensure that the fix worked.
Step 4: Bubbling Water
The final masking animation is the one that creates the bubbling water effect. If you watch the video, you'll see that the sequence of events goes like this:
a. Lock all the layers except the "Orange bubbles" layer
b. This animation only runs when the scene is centered on the open water so go to that frame (frame 72).
c. Select the orange bubbles object - it isn't hard to do since the other layers are locked making the orange bubbles the only selectable element on the page.
d. Orange bubbles should have already been turned into a movie clip from the last phase.
There will be two objects passing by - the orange bubbles and the orange block. Both will be visible only when they're covering the orange water (you now know how to make something visible only when it's in a certain area....by using a mask).
e. Go into the orangeBubbles_mc movie clip by double clicking it on the stage (don't open it through the library) and name the initial layer "Bubbles"
f. Make a layer just above this and call it "Bubbles mask"
f. Make a layer just above this and call it "Orange block"
g. Make a layer just above this and call it "Orange block mask"
Note: I'm going to assume at this point that you'll know when to lock/unlock layers so I won't bother telling you specifically to do so.
h. On the two mask layers, draw rectangles that cover the area of the bubbles (it doesn't matter what color they are):
The bubbles start moving a little less than a second after the scene is centered, so...
i. insert a keyframe at frame 12 on the "Bubbles" layer.
j. It takes about 2 seconds for the bubbles to pass through, so put another keyframe at frame 36. Then use the right-left arrow keys to position the bubbles to the right of the water on this frame, but at the same level horizontally, and put a Classic Tween between them (the image below was captured before the tween was created - once the tween is created, it will turn the bubbles into a symbol and they'll look more like the pictures later on this page):
k. Less than a second later, the bubbles come in from the right, so insert a keyframe on cell 46 and position the bubbles to the left of the open water (again, you might want to use arrow keys to do this to keep the bubbles on exactly the same horizontal level):
l. They pass through at the same speed they passed through before, but this time they'll go twice as far, so insert a keyframe at frame 94 and position the bubbles to the right of the open water again, then insert a Classic Tween:
m. Go to the "Bubbles mask" layer. Insert a keyframe into frame 94 to ensure that the mask is in place during the entire animation. Then turn "Bubbles mask" into a mask layer.
n. Test your movie to be sure it's working properly.
The final step is to add the orange block that follows the bubbles in.
o. On the "Orange block" layer, insert a keyframe at frame 70 and draw the orange block just before the bubbles:
p. Insert a keyframe at frame 94 and move the block before the bubbles, which have moved to the right, then create a Classic Tween:
q. Add frames to the "Orange block mask" layer and make it a mask.
r. Test your movie!
FINAL PRODUCT: DrugAnimation_Masks.fla
SUMMARY