Apps

How do I... Animate photographic elements with masks in Flash?

Manipulating heavier graphic elements in Flash increases file size and can make your animation sluggish. But there is another way to get some great, high-functioning animation effects with bitmap graphics using Masks. John Lee shows you how simple it is to give life and motion to photographic elements in Flash CS3 by animating a Vector-shape mask over it.

One of the reasons Flash files and applications are so popular across the Web is that the combination of vector-based graphics and the ActionScript scripting language provides lightweight, fast-loading files that have almost limitless interactive possibilities.

But what if you want to animate in Flash using a bitmap-based graphic, such as a JPEG, PNG, or GIF? It is true that manipulating those heavier graphic elements increases file size and can make your animation sluggish as the timeline struggles to move the bitmap graphic across the screen. But there is another way to get some great, high-functioning animation effects with bitmap graphics using masks.

I'm going to show you how simple it is to give life and motion to photographic elements in Flash CS3 by animating a vector-shape mask over it. If you don't own a copy of Flash CS3, you can download a fully functioning 30-day trial from Adobe.

This blog post is available in PDF as a TechRepublic download, which also includes an example Flash file.

ActionScript

Open Flash CS3 and from the File menu, select New. In the dialog box that appears, select the Type: Flash File ActionScript 3.0. We won't be using ActionScript at all in this example, but let's keep the file up to date with the newest version of ActionScript in case you get a taste for Flash and want to punch this up later.

The screen should look like Figure A.

Figure A

The default layout of the Flash CS3 workspace

Save your file now. I always encourage people to save their files as soon as they create them, no matter what program they're working in. This makes it much easier to quickly hit the [Ctrl]S keys every few minutes, and saving your work will quickly become second nature.

Unless a creative brief states otherwise, I never build animations on a white stage; it's too boring. Our mask animations will have a little more impact on a black background. Go to the bottom of the screen, and in the Properties palette, click the Background color box and choose a black swatch.

As long as you're down in the Properties palette, select the Frame Rate field and change the number from 12 to 24. Most film animation displays 24 frames per second so this setting will look objectively smoother to the eye, and many computers these days can handle this more taxing graphic setting. Figure B shows how the Properties palette appears with these changes.

Figure B

Making the background of the Flash movie black and changing the Frame Rate to 24 frames per second (FPS)

Now we need a photograph to place on the stage. From the File menu, select Import and from there choose the Import To Stage option. In the dialog box that appears, select a screen-resolution (72dpi) JPEG from your hard drive. Click Open to place the photo on the center of the stage.

If you do not have a screen-resolution JPEG handy, you can visit stock.xchng to download plenty of free stock photos. See Figure C for how the stage should now appear.

Figure C

Importing the JPEG file onto the stage
Once the photo is on the stage, we need to organize our layers and prep them for keyframe animation. Go back to the Timeline and double-click on the words Layer 1 and rename the layer Photo. Then,  place your mouse into the 24th frame in the Photo layer. Right-click in the selection and from the pop-up menu that appears, choose the option Insert Keyframe. Your Timeline palette should look like Figure D.

Figure D

Inserting a keyframe at the end of the animation
The next step is to lock the Photo layer. It is important that you do this, because you are about to draw and animate masking objects, and Flash's Timeline can animate only one object on a layer. If you should accidentally draw your masking objects directly on the Photo layer, your animation will not run properly and Flash will give you no error message whatsoever to warn you. Besides, all professional Flash developers create their animations by keeping all of their stage objects on separate layers. Like saving often, it's a good habit to fall into. See Figure E below if you aren't sure how to lock the Photo layer.

Figure E

Locking the Photo layer
While you are in the Timeline, hit the New Layer button again and rename the new layer Mask. This is the layer in which we will do all of our animation. Your Timeline should appear similar to Figure F.

Figure F

Creating the new Mask layer

Masks in the Flash Timeline function like this: Any object that appears on a masking layer will act as a window, through which objects on the layer below will appear, and any area outside this object on the layer below will be masked out. If you're having trouble picturing what I'm talking about, just follow along. It will all become clear shortly.

In the Timeline, select Frame 1 of the Mask layer by clicking on it with your mouse. Then, select the Rectangle tool from the toolbox on the far left. For the fill color, choose red. Since we are drawing a mask, it really doesn't matter what color the rectangle is, but it will be easier for us to work with a red rectangle since our background is black. Also, make sure that there is no Stroke option selected; otherwise, when you draw the rectangle on the stage, it will have a line around it. Refer to Figure G if you are unfamiliar with the Toolbox.

Figure G

Selecting the Rectangle tool with a Red fill and no stroke in the Toolbox
With the Rectangle tool, go back to the stage and draw a small, horizontal rectangle. Don't worry too much about the exact proportions; just make it wider than it is tall. See Figure H for an example.

Figure H

Drawing the Rectangle on the stage

We are almost ready to animate our masking rectangle, but there's one more step. Flash can't animate vector objects unless they exist as Symbols in Flash's Library. Here's how to make the rectangle a symbol.

Select the rectangle on the stage, then right-click on it to bring up a contextual menu. Choose the Convert To Symbol option. A dialog box will appear, as in Figure I. Name the Symbol Masking Rectangle and select the Graphic option. Click OK to return to the stage, where you'll notice that the rectangle has a blue bounding box around it.

Figure I

Converting the rectangle into a symbol

Now, it's time for some old-fashioned graphic design.

From the Window menu at the top of the screen, choose Align to display the Align palette in the workspace. The Align palette is going to help ensure that our animated mask is precisely aligned to the photo for maximum effect. Go to the Align palette and click on the To Stage option. This will force the Rectangle symbol to align itself to the stage. Then, click the Align Horizontal Center and Align Vertical Center buttons to place your Rectangle symbol dead center on the stage. See Figure J if you are unfamiliar with the Align palette.

Figure J

Using the Align palette
Here is where the animation finally comes into play. Select KeyFrame 1 in the Timeline, then go to the Toolbox and select the Transform tool (Figure K).

Figure K

The Transform tool
Now go back to the Stage and click and drag on the middle top and end handles until the rectangle mask resembles a much smaller rectangle. as in Figure L. Zoom in on the stage if you need to.

Figure L

Shrinking the Rectangle mask in Keyframe 1
Next, go back to the Timeline and insert a keyframe at Frame 12. Select the Free Transform tool again, but this time, extend only the width of the Rectangle mask, so that it extends beyond the borders of the photo on the stage. Your rectangle mask should appear similar to the example in Figure M.

Figure M

Widening the Rectangle mask in Keyframe 12
Go back to the Timeline again and insert a keyframe at frame 24. Take the Free Transform tool back to the stage and modify the length of the rectangle so that red masking rectangle covers the entire photograph. (Figure N)

Figure N

The final keyframe of the Rectangle mask animation

Now, it is time for the actual animation.

Go back to the Timeline and select Frame 1 of the Mask layer. Right-click the frame and choose the option Create Motion Tween. The first half of the Mask layer will turn blue, with an arrow leading from Keyframe 1 to Keyframe 12. Repeat this step after selecting Keyframe 12 to complete the animation. If you press the [Enter] key, you will get a preview of the animation, as the mask morphs from a small square to cover the entire photo. Your Timeline should look like Figure O.

Figure O

Creating Motion Tweens on the Mask layer
One last step and the masking animation is complete. In the Timeline, right-click the Mask layer. From the pop-up menu, choose the Mask option. The Mask layer will convert to a true masking layer and the Timeline will show that the Photo layer is now being masked by the layer above it. (Figure P)

Figure P

Converting the Mask layer into a functioning Mask layer

Save the file and then Press [Ctrl] [Enter] to test your movie. You'll see that the Red masking rectangle now acts as a revealing element that dramatically animates the appearance of your photograph.

That's all there is to animating with masking layers and objects in Flash. This was just one simple example, so if this excites you, explore with more complex vector shapes and animations in the Mask layer.

John Lee is a consultant specializing in design and illustration and a freelance technical writer. You can visit his Web site at johnleestudio.com.

0 comments

Editor's Picks