| In Chapter 6, you learned about Flash's ability to create mask layers that hide and reveal objects on lower layers. Sometimes, the best way to create the illusion of movement is to animate a mask so that it gradually hides or reveals objects. Imagine a line that starts at the left edge of the Stage and goes all the way to the right edge. If you create a mask that reveals the line bit by bit, you create the illusion of a line that draws itself. Reverse the process, and you have a line that gradually erases itself. Creating rotating and shape-tweened mask graphics can give you some interesting effects. The more familiar you are with using animated masks to reveal stationary items, the better sense you'll have of when to use this technique. For practice, try animating a mask that creates a growing rainbow. To create a stationary graphic and a moving mask that reveals it 1. | Create a Flash document that has two layers.
Name the bottom layer Rainbow and the top layer Rotating Rectangle.
| 2. | In keyframe 1 of the Rainbow layer, on the Stage, use the drawing tools to create a rainbow graphic.
One way to create the rainbow is to use the oval tool in Merge Drawing mode to draw a perfect circle. Give the circle a radial-gradient fill that has distinct bands of color. Then erase the bottom half of the circle (Figure 11.48).
Figure 11.48. An easy way to create a rainbow is to fill a circle with a multiple-color radial gradient and then delete the bottom half of the circle. Here, bisecting a merge-shape circle by drawing a line through it (middle) makes deletion easy; select the line and the bottom half of the circle (bottom), and press Delete. 
What's left is your rainbow shape. For safety, convert the rainbow to a symbol (select the rainbow on the Stage, choose Modify > Convert to Symbol, choose
Graphic as the type, name the symbol, and click OK) so you'll have a copy of the rainbow in case you accidentally delete the original.
| 3. | In the Timeline, Control-click (Mac) or right-click (Windows) the Rotating Rectangle layer.
The contextual menu for layers appears.
| 4. | Choose Mask.
Flash converts the layer to a mask, links the Rainbow layer to the mask, and locks both layers (Figure 11.49).
Figure 11.49. When you create a mask layer, Flash automatically links the layer directly below the mask layer in the Timeline and locks both layers. 
| 5. | In the Timeline, click the padlock icons in the Rotating Rectangle and Rainbow layers to unlock them.
| 6. | On the Stage, in keyframe 1 of the Rotating Rectangle layer, use the rectangle tool to draw a rectangle just below the bottom of the rainbow (Figure 11.50).
Figure 11.50. To create a mask that reveals the entire rainbow, draw a rectangle that's wider and taller than the rainbow. Positioning the rectangle below the rainbow hides the rainbow completely. 
The rectangle is your mask. Any items that lie directly below the rectangle on a linked layer appear; everything else is hidden.
Make the rectangle a bit larger than the rainbow so the mask can cover the whole rainbow. Using a transparent fill color lets you see the rainbow through the mask rectangle and helps you verify the mask's position. (To make the rectangle's fill color transparent, select it and then, in the Color Mixer panel, assign it a low Alpha percentage.)
|
 Tip
You can use any of the three types of animation on a mask layer: frame-by-frame, motion tweening, or shape tweening. You can also use an animated graphic symbol or movie-clip symbol. Advanced ActionScripters can also use ActionScript to tell one movie-clip symbol to mask another and to create transparent masks.
To prepare the mask for rotational animation 1. | Select the rectangle, and choose Modify > Convert to Symbol.
Because you want to create rotational animation, you must use a motion tween for the mask, which means the mask graphic must be a graphic-object. You could use a drawing-object or a grouped element, but it's a good idea to use a symbol so that you can easily reuse the mask.
The Convert to Symbol dialog appears.
| 2. | In the Name field, enter a name for the symbol, choose Graphic as the symbol type, and click OK.
| 3. | Using the free-transform tool, select the rectangle on the Stage, and position the pointer over the white circle that indicates the transformation point of the object.
A small white circle appears next to the arrow pointer, indicating that you can move the selected object's transformation point.
| 4. | Drag the transformation-point circle straight up until it rests in the middle of the top edge of the rectangle (Figure 11.51).
Figure 11.51. Use the free-transform tool to reposition the point around which a symbol (or grouped item) rotates. Drag the circle that indicates the transformation point to a new position. A small circle previews the new transformation-point location. 
Now you can rotate the rectangle so that it swings up and over the rainbow.
|
To complete the rotating-mask animation 1. | In the Timeline, in the Rainbow layer, select frame 15, and choose Insert > Timeline > Frame.
| 2. | In the Timeline, in the Rotating Rectangle layer, select frame 15, and choose Insert > Timeline > Keyframe.
| 3. | In keyframe 15, with the rectangle selected on the Stage, use the free-transform tool's Rotate and Skew modifier to reposition the rectangle; click and drag the bottom-left corner of the rectangle and rotate it so that the rectangle covers the rainbow (Figure 11.52).
Figure 11.52. In the final keyframe of your sequence, position the mask to cover the item(s) it should reveal. Here the free-transform tool rotates the rectangle mask over the rainbow graphic. 
The mask that covers the rainbow in authoring mode will reveal the rainbow in the final movie.
| 4. | In the Timeline, in the Rotating Rectangle layer, select any of the frames in the keyframe 1 span (frames 114).
| 5. | In the Frame Properties tab of the Property inspector, from the Tween pop-up menu, choose Motion.
| 6. | From the Rotate pop-up menu, choose CW.
| 7. | Enter 0 in the Times field.
This step sets up the motion tween that rotates the rectangle 180 degrees, swinging it up and over the rainbow until it fully covers the rainbow (Figure 11.53).
Figure 11.53. In the final keyframe with the completed motion tween for the mask object, the mask covers the rainbow completely. Giving the mask a transparent fill lets you see the objects to be revealed through it as you work. The transparency of objects on the mask layer doesn't appear in the final movie. 
|
To preview the animation - Choose Control > Test Movie, or choose Control > Test Scene.
or
- In the Timeline, click the lock icon to lock both layers to see the masked rainbow; then play the movie to see the mask reveal the rainbow.
If the rainbow isn't fully revealed during the tween, you may need to enlarge or reposition the rectangle. Unlock both layers, and move the playhead through the movie to see where the rectangle is in each in-between frame (Figure 11.54).
Figure 11.54. As you play the movie with the layers unlocked (left), you can see the in-between positions of the mask graphic. When you lock the layers (right), you see the masking as it will appear in the final exported movie. 
Tips To make the rainbow appear to fade in gradually, tween a change in its transparency. Select frame 15 of the Rainbow layer and press F6, duplicating the rainbow symbol instance in a new keyframe. In keyframe 1, select the rainbow symbol instance; in the Properties tab of the Property inspector, from the Color menu, choose Alpha; in the Value field, enter a low percentage; from the Tween pop-up menu, choose Motion.
A Note about Flash Professional 8's Blend Modes and Filters One of Macromedia's goals in Flash 8 is to give designers greater control over the graphics in Flash. Two special new graphics featuresblend modes and filtersare available only in Flash 8 Professional. The specifics of creating special graphic effects with blends and filters are beyond the scope of this QuickStart Guide, but here's a brief overview to give you a glimpse of the possibilities for these tools. Blends: Anyone familiar with using blends in Macromedia Fireworks or Adobe Photoshop already has an idea about what Flash's blend modes can do, because they work similarly. Blends let you force overlapping images to interact in ways that create new colors and interesting effects. Artists often use blend modes for compositing, overlapping multiple images so that parts of each appear in one combined image (for example, superimposing an image of a child's face on an image of a balloon to make a balloon with a face). Photographers use blend modes to enhance or correct flaws in digital photos (for example, using a blend to lighten the areas of a photo where there is too much shadow). You apply a blend to an instance of a movie clip on the Stage. Flash calculates new colors pixel by pixel, modifying the RGB values of each pixel in the movie clip according to a formula dictated by the chosen blend mode. Whether a particular pixel changes color depends on the type of blend, the color of the pixel in the movie clip, and the color of the pixel that lies on the layer below the movie clip. The pixels on lower layers may be other movie clips, graphic elements, or the background color of the Stage. You apply blends to selected movie-clip instances through the Properties tab of the Property inspector (Figure 11.55). Figure 11.55. On the Stage, select a movie clip to which you would like to apply a blend; then choose a mode from the Blend menu in the Properties tab of the Property inspector. These two ovals are movie clips lying on a layer above the bar graphics. On the left, the ovals have a Blend property of Normal; they don't interact with the layer below. On the right, the ovals have a Blend property of Darken. Flash evaluates each pixel. Where the pixels in the object to which the blend is applied (the ovals) are lighter than the pixels in the underlying layer, Flash changes the pixels to the darker color. 
Filters: You can apply filters to instances of movie-clip symbols, button symbols, or text boxes. Filters modify the filtered item to create special effects such as drop shadows, beveled edges, and glows. Because Flash applies filters directly to a symbol instance, filters can be easier to use and modify (and have less effect on file size) than the Timeline effects that Macromedia provides. (Timeline effects create multiple symbols to make drop shadows and blurs.) You apply filters to selected text boxes or button or movie-clip instances through the Filters tab of the Property inspector (Figure 11.56). You can apply multiple filters to the same object, rearrange the order in which they're applied, and create presets to apply the same filter settings to other objects. Figure 11.56. To apply filters (Flash Professional 8 only), select a movie clip, button, or text box on the Stage. In the Filters tab of the Property inspector, click the Add Filter menu and choose a filter effect. The settings for the effect appear on the Filters tab. 
|
|
