Learn Create Animations involving Masks in Flash CS4

Need a Website? Contact Us Now!

This entry is part 18 of 32 in the series Flash CS4 Tutorials

There are two type of animations one where the mask itself is moving and the other one is where something is moving  behind the mask.
Animation where the mask itself is moving:
Lets go and import an image on stage, so go to File on the main menu>Import> to stage, pick an image from your image folder and import to stage, lets rename this later to Scene and lock the scene layer.
Learn Create Animations involving Masks in Flash CS4
Let’s create a new layer above the scene layer and call it mask. Lets go an create a spot light to the extreme left on frame 1 of the mask layer, so select the oval tool and pressing shift drag it selecting a fluorescent green with no stroke color, remember the color of the spot light has no relevance at all, so it does’nt matter what color you choose for a spot light, you will see something like the one below.
Learn Create Animations involving Masks in Flash CS4
We need to apply this as a mask, so click on the mask layer and right click and apply mask like the one below.
Learn Create Animations involving Masks in Flash CS4
Now remember when you apply this mask to this layer you will see nothing at all on the stage, the reason for that is the mask itself is not touching the scene, if you test your movie, you will see a blank white screen.
Now we need to animate the mask across the stage, so lets unlock the mask layer, click on the mask itself on the stage, we need to animate it to the extreme right of the stage, so we need to give it an ending keyframe, lets say we want this animation to take 3 seconds, so go to Frame 36 in the mask layer remember and press F6 for your ending keyframes, so we must drag the spot light over to the extreme right, so we need to create a classic tween in the mask layer, so click inbetween frame 1 and frame 36 and right click and select classic tween.
Now we need to make sure that the scene layers remains visible through out the animation, right now its only available only on frame1, so lets go to frame 36 and press F5 to insert Frames. Now go an lock the mask layer and test your movie now.
Learn Create Animations involving Masks in Flash CS4
That’s it you now know how to animate where the mask itself is moving.
Lets now learn how to animate where there is something moving behind the mask.
Lets say we want to create a ball moving from left to right weaving between poles, the ball coming in front of one pole and going behind another pole and so on.
Lets go and make simple multiple colums on stage, so select the rectangle, select a fill color red and do not opt for a stroke color and draw multiple columns on stage like the one below.
Learn Create Animations involving Masks in Flash CS4
Remember everywhere your mask touches you are going to see the ball, now create three layers, rename the layers with columns in it to column, then make another layer above the column layer and call it ball and another layer above the ball layer and call it ball mask like this one below.
Learn Create Animations involving Masks in Flash CS4
Go to the ball layer and draw a ball on stage, lets say we want a blue color ball, so choose the oval tool, select the color blue and draw a ball on the extreme left of the stage like this one below.
Learn Create Animations involving Masks in Flash CS4
Remember you must draw the blue ball on the ball layer, so we have red columns in the columns layer, the blue ball in the ball layer.
So now we want to animate this blue ball moving from the left of the stage to the right, and lets say we want this animation to take 3 seconds, so stay on ball layer and go upto frame 36 in the timeline and press F6 to add a new keyframe and move the ball to the extreme right side of the stage pressing Shift key so that it stays on the same line, create a classic tween and scrub the timeline to see if the ball is moving across the stage, we also need the columns upto frame 36, so go to columns layer and go to frame36 on your time line and press F6 to add a new keyframe.
Now lock the columns and ball layer and lets start working on the mask layer, go to frame 1 in your mask layer and draw a giant screen to cover the entire stage like this one below.
Learn Create Animations involving Masks in Flash CS4
Go up to frame35 in the mask layer and press F5 to insert some frames.
Now we need to select some columns where the ball pass behind the columns lets say 1,3,5,7 etc, so lets to and close the eye in the mask layer and lock the ball layer and open the lock in the columns layer.
So select column 2,4,6,8 copy it by pressing Ctrl+C, lock the columns layer and ball layer, make the mask layer visible and press Ctrl+Shift+V to paste it in place in the mask layer, you will see something like the one below
Learn Create Animations involving Masks in Flash CS4
Be very careful now, deselect the columns by clicking anywhere on the green patch and then select the red columns 2,4 and 6 and press delete, It will not look like we have deleted because we have already these columns in the columns layer, you can see this by clicking (closing) on the eye icon in the columns layer, you will see something like this.
Learn Create Animations involving Masks in Flash CS4
Now having locked the columns layer and the ball layer, apply the mask on to the mask layer, so right click on the mask layer and click mask and check your movie clip by pressing Ctrl+Enter.
Learn Create Animations involving Masks in Flash CS4
So you now know how to animate using mask.

Series Navigation«Learn Complex Text Animation in Flash CS4Learn to create a movie clip that fades as the user moves the cursor away from it in Flash CS4»
Share and Enjoy:
  • Digg
  • del.icio.us
  • Facebook
  • Google
  • E-mail this story to a friend!
  • LinkedIn
  • MySpace
  • StumbleUpon
  • Technorati

Tags:
Posted in Flash CS4 Tutorial | No Comments »

Post a Comment