Learn Create Animations involving Masks in Flash CS4
Need a Website? Contact Us Now!
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.
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.
We need to apply this as a mask, so click on the mask layer and right click and apply mask like the one below.
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.
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.
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.
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.
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.
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
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.
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.
So you now know how to animate using mask.
Flash CS4 Tutorials
- Flash CS4 Tutorial
- Introduction to flash CS4 authoring environment
- Panels and Panel workspace in flash CS4
- Drawing in flash CS4
- Use of polystar tool in flash CS4
- Object drawing Mode in Flash CS4
- How the Line tool, Pencil tool, brush tool and pen tool work in in Flash CS4
- How to use Ink bottle and paint bucket tool in flash CS4
- How to manage layers in Flash CS4
- How to make an image big on rollover in flash CS4
- Creating Mask in Flash CS4
- Moving Ball Animation in Flash CS4
- How to create a shape tween in Flash CS4
- How to create a motion guide in Flash CS4
- Learn how to create a bouncing ball in Flash CS4
- Learn how to put multiple classic tween on stage at the same time in Flash CS4
- Learn Complex Text Animation in Flash CS4
- Learn Create Animations involving Masks in Flash CS4
- Learn to create a movie clip that fades as the user moves the cursor away from it in Flash CS4
- Learn to create cloud animation in Flash
- Learn to import sound in Flash CS4.
- Learn 3D Art in Flash CS4.
- Learn to create a customizable pop-up window using Flash CS4.
- How to get an url in a blank window in a flash CS4 action script
- How to get an url in a blank window in an xml file
- How to put your favorite icon in the browser
- How to create a scroll bar in Flash CS4
- How to create a basic layout in Flash CS4
- How to load pictures in flash CS4 dynamically using the loader component
- Load External swf as2
- Upload a Website/ FTP
Tags: Learn Create Animations involving Masks in Flash CS4
Posted in Flash CS4 Tutorial | No Comments »