Effects with Shapes

We'll start with a few relatively simple features of Shapes and then work up to more advanced techniques. I say "shapes" but these work with Drawing Objects as well. The point is, you can't do the following tricks with Text blocks, grouped objects, or symbol instances. You can go inside a symbol and use these techniques on any shapes contained. This section is almost like a defense for shapes which, after all my praise for symbols serves as a good balance.

Painting with Bitmaps

You've already seen how to create and modify gradients. You can also use as the fill or stroke color an imported bitmap (really any raster graphic is fine). The way you create and modify a bitmap color is comparable to gradients: you use the Color Mixer to select the image and you use the Gradient Transform tool to modify it. It's really easy and pretty cool, even if it's not terribly practical.

Try It Yourself: Use an Imported Bitmap as a Fill Color in a Hall of Mirrors

After you start painting with a bitmap you'll experiment with some special effects.

1.	In a new file, open the Color Mixer panel and make sure the Fill Color swatch is selected (click it). From the Type drop-down menu, select Bitmap. Because this is a new file you'll be faced with the standard Import dialog. So, select any raster graphic you have on your computer. (If you already have a bitmap in your library, selecting Bitmap from the Type drop down menu displays a set of "swatches" each with a preview of the imported bitmap.)
2.	Select the Rectangle tool and set the stroke to "no stroke" (the diagonal red line). Draw a square on stage. The fill should contain your, now imported, raster graphic.
3.	Select the Gradient Transform tool and click the fill of your square. You can modify the size and location of the bitmap fill. Notice the bitmap repeats when it's smaller than the rectangle. Interestingly, the Gradient Transform has additional handles to change just the width or height as well as the skew of the fill options that don't apply to Linear Gradients. Let the cursor change help you figure out the modification type for each handle.
4.	So the bitmap fill is pretty cool, what about something more practical? Here's just one: an easy hall of mirrors. Use the Gradient Transform to set the contained image as big or bigger than the square that is, make sure the image doesn't repeat.
5.	Select the rectangle and open the Transform panel. Type 80 into both the width and height fields then repeatedly press the "Copy and apply transform" button near the bottom right of the Transform panel. The result should look like Figure 13.1. Figure 13.1. Multiple copies of a shape filled with a bitmap makes the hall-of-mirrors effect.
6.	Often I find it's best to use the Gradient Transform tool to make some final tweaks on the location of the fill of the smallest rectangle. For example, I moved the eyes in the photo so that they were visible. The mirror effect still looks good.

Using a bitmap as your fill or stroke color can be a bit cheesy. I'm sure you can restrain the urge to be too garish. With that warning in hand, let me tell you it's possible to tween a shape whose bitmap fill changes over time. That is, make one keyframe containing a shape with a bitmap fill, then in a second keyframe use the Gradient Transform to tweak the bitmap fill. Then do a Shape tween from the first frame to the second. The thing to remember is that you need to use Shape tween (not Motion).

Breaking Apart Text

Text is much like a Drawing Object in that it won't eat away other shapes in the same location (the way shapes drawn in merge mode do). If you select a text block and choose Modify, Break Apart the first time it breaks the text into a separate block for each character. The second time (or if the text block is only one character long) Modify, Break Apart turns the text into shapes. Why is this useful? Well, if you want to animate each character of the text independently, you'll need to make symbols out of each character. Plus, if you want to change the shape or fill with a gradient even mixed color then the text must be a shape. You can experience both effects in the following two tasks.

Try It Yourself: Animate a Block of Text, One Character at a Time

1.	In a new file select the Text tool, pick a very large font size like 60 click the stage, and type DROP.
2.	Select the Selection tool and single click the entire block of text. Position the text where you want the animation to end for example at the bottom of the stage. Choose Modify, Break Apart (or press Ctrl+B). Each letter is a separate block of text now.
3.	With all the letters selected, choose Modify, Timeline, Distribute to Layers. Delete the layer with nothing in it by clicking "Layer 1" and then clicking the trashcan icon in the timeline.
4.	Before we animate these letters they each need to be a Movie Clip instance. Click once to select the D and select Modify, Convert to Symbol (F8), name it "D" and make sure it's a Movie Clip. Do the same for the other letters (but name them appropriately). Did you Know?: Repeating Symbols If you repeat this task with a word containing duplicate characters (say the two Os in ZOOM) you probably realize you shouldn't make two symbols based on the letter O. But as a way to ensure the second O lines up perfectly, do this: when you get to the second O, go ahead and make another symbol maybe call it temporary O. Then, select the instance on stage (that's in place) and click the Swap button in the Properties panel. Swap it with the first O. Then delete the temporary O in the library. This way everything lines up and you didn't need to drag or eyeball anything.
5.	Because the letter instances are perfectly in place the way we want them to end, let's not mess them up. We'll duplicate these keyframes later in the timeline however. First, click once in each layer at frame 50 and insert a frame (F5). Then in the D layer, click frame 10 and insert a keyframe (F6). In the R layer, insert a keyframe in frame 15. In the O layer, insert a keyframe in frame 20. In the P layer, insert a keyframe in frame 25.
6.	Return to frame 1 by clicking above the 1 in the timeline. Click on the D and hold shift then drag up so the letter appears above the stage. Do the same for the other letters. Finally, click the keyframe in frame 1 of the D layer and select Motion tween from the Properties panel (or right click and select Create Motion Tween). Do the same for the first keyframe in the other layers.
7.	Test the movie. You're welcome to modify the timing and make other tweeks.

Turning Text into a Shape

Text blocks are like but not exactly the same as Drawing Objects, symbol instances, and groups. Of course you can put text in any of the above object types but it's not necessary because text won't get eaten away the way a plain shape will (when two shapes overlap). However, there are several reasons why you may want to turn text into a shape. As a shape you can distort the text in any manner you want. In addition you can fill it with gradient or mixed colors. For that matter, you can add a stroke to the text if it's a shape. Alas, once you convert text to a shape you can never edit the characters again they're shapes not text. So, understand in this section you'll learn special effects for text that's locked down and won't likely change.

The way you convert text to a shape is easy. Select Modify, Break apart twice. The first time you Break Apart it will break a text block into individual text blocks that are one character each. Once the text is a shape you can do any sort of shape maneuver: use the Free Transform tool's Distort and Envelop options; apply a stroke and remove the fill; change the stroke or fill to a gradient or bitmap; or just stretch and reshape using the Selection or Subselection tools. The next task lets you play with all these options.

Try It Yourself: Convert Text to a Shape for Special Effects

1.	In a new file select the Text tool and pick a large and very bold graphic font and type a word on the stage. Use the Selection tool to select the block (not the contained characters as you would with the text tool) and then select Modify, Break Apart. Without clicking (which would deselect) select Modify, Break Apart again. Now all the letters are shapes.
2.	Use the selection tool to stretch and bend the characters. Don't distort things so much that you can't read the word, but realize you can reshape any way you want. I find it interesting to modify the shape for the particular word at hand. For example, in Figure 13.2 I made the facing "p" and "a" almost mirror each other and the "c" fits into the adjacent "a" like a jigsaw puzzle. I adjusted the letter spacing too. Figure 13.2. You can go wild reshaping text once it has been converted to a shape.
3.	Before we go wild filling this shape, let's make a dramatic shadow. Select all the shapes and choose Modify, Group. This will make the shapes safe from erasing the shadow. Copy the group and paste it. Position the duplicate out of the way of the original. With the duplicate selected choose Modify, Transform, Flip Vertical. Then select Modify, Ungroup.
4.	Use the Free Transform tool and first select all shadow characters. Use the Distort option and hold shift while you drag the bottom right corner out to make the shadow get bigger the way it might appear when the sun is low. See Figure 13.3. Figure 13.3. A dramatic shadow only takes a little bit of tweaking with the Free Transform tool.
5.	Select all the shadow letters and set the color to something a little lighter than the primary letters. With all the shadow selected choose Modify, Convert to Symbol (F8) and select Movie Clip.
6.	If you have Flash Professional 8 select the shadow clip and use the Filters panel to apply a Blur effect. In any case you can use the Properties panel to change the alpha to something like 75%.
7.	Now change the fill color on the letters. Double-click to enter the primary letters' group. Open the Color Mixer panel and, for the fill color, select the default white-to-black radial gradient (or create your own gradient). Select the Paint Bucket tool and make sure the Lock Fill is not selected. Click in the top left corner of the leftmost letter. Then, turn on Lock Fill and click once in each of the other letters. Finally, use the Gradient Transform tool to control the position and fall off of the gradient. It should spread across all the letters.
8.	Now, to push this over the edge, we can animate. First do a Shape Tween with the main letters. Go back up to the main timeline and select the main letters. Choose Edit, Cut (Ctrl+X) and then select Modify, Timeline, Insert Layer (or just click the little "Insert Layer" button at the base of the timeline). Make sure the new layer is active, and select Edit, Paste in Place (or Ctlr+Shift+V). Select the letters again and choose Modify, Break Apart. Finally, go to frame 20 and insert a keyframe. Use the Gradient Transform to move the highlight of the gradient to the right most letter. Select the keyframe in frame 1 and use the Properties panel to set a Shape tween.
9.	The shadow is a little bit easier. Click on the cell in the shadow's layer under frame 20 and insert a keyframe. Use the Free Transform tool and skew the bottom of the shadow to the left. You might need to nudge it a bit so it looks lined up with the main letters. Finally, return to the keyframe in frame 1 of the shadow's layer and use the Properties panel to set Motion tween. Don't worry too much about how the shadow looks during the tween it's really only necessary that it looks good in the last frame.

By the way, in the section on Masking later this hour you'll see an alternative to converting text to shapes when you only need to modify the fill. You can have any color or gradient that gets revealed by a block of text that is, the text is the mask.

Using Filters for Special Effects

In the preceding task you used the Blur filter to soften the shadow, but notice you didn't use the Drop Shadow filter. In fact, you can't distort the shadow when using that filter. So before you jump into the following examples using Filters, remember that sometimes you just have to draw or animate by hand what you want to show. Filters are like decorations on a cake the filling has to taste good too.

You've already seen Filters pop up in other parts of this book, and they'll appear again. Here I've just included two general effects that can be enhanced by filters: depth and motion.

Showing Depth with Shadows

You don't need a degree in optical physics to know some basics about shadows. Figure 13.4 shows two simple principles: the closer an object is to a light source the bigger the shadow; and, the farther away from where the shadow gets cast the bigger and blurrier that shadow becomes. For example, in the preceding task the wider you made the shadow the closer the light source seemed to be. Using these two simple relationships in your animations will both add depth and communicate a sense of scale to the user subconsciously.

Figure 13.4. Understanding how light is cast will help you simulate depth.

Adding a subtle shadow can go a long way to add depth to your animations. Here's a great task that proves that.

Try It Yourself: Add a Shadow to Show Depth and Distance

1.	In a new file draw a circle near the top of the stage, select it, and convert it to a Movie Clip (F8).
2.	Click frame 10 and insert a keyframe and another in frame 20. Now that frame 1 and 20 are the same, go to frame 10 and hold shift while you drag the instance of the circle down almost to the bottom of the stage.
3.	Select the keyframes in frame 1 and 10 (click one, hold shift, then click the other) and from the Properties panel select Motion tween. Test the movie to see the basic bouncing ball. (In Hour 22 you'll add advanced animation techniques to make this animation more realistic, but we're just looking at the shadow effect for now.)
4.	Select the circle instance and copy it (you'll use it for the shadow in the next step.) Name the sole layer Circle then lock the layer and then insert a new layer for the shadow. Name that layer Shadow. You can click and drag to move the stacking order of the layers so that the Circle layer is above the Shadow layer where we're about to animate the shadow.
5.	In the Shadow layer select Edit, Paste in Place (Ctrl+Shift+V) and the circle instance you just copied will appear. Move the red current frame marker to frame 10. The shadow must move to the "floor" and that must be below the circle when it hits the bottom. Hold shift and drag the circle down so it's just below the circle. Move the red current frame marker back to frame 1 to edit the way the shadow will appear at the start.
6.	Back in frame 1, select the shadow and use the Free Transform tool to squash it and widen it just a tad. Use the Properties panel to set the color style to Tint, 100%, and pick the black swatch. If you have Flash Professional 8, keep the shadow selected and use the Filters panel to set a Blur. Set both the X and Y direction to 50.
7.	Click the cell in frame 10 of the Shadow layer and insert a keyframe (F6). Before modifying the shadow, also insert a keyframe in frame 20. This way the first and last keyframes will match. Move the frame 10 and select the shadow. Use the Filters panel to set the Blur X and Y to a value near 40. You can use the Free Transform tool to make the shadow a little smaller.
8.	Click the keyframes in frames 1 and 10 and set Motion tween. Test the movie. It's okay, but I think the shadow should be both tinted black and have an alpha effect. To add both, select the shadow in frame 1 and use the Properties panel to change the Color Style to Advanced. Click the Settings button that appears and change the alpha percentage from 100 down to, say 30 (or whatever looks good). Change the alpha the same for the instance in frame 30. You're welcome to change the alpha similarly for the instance in frame 10, but I'll bet it will look best with its alpha set higher.

Adding a Motion Blur

The Blur filter is great for making an out-of-focus version of an instance, but it's not so great for showing motion with direction. While you can set the X and Y Blur factors independently, the blur appears on both sides (left and right or top and bottom) in equal amounts. To show that something is both moving fast and going in a particular direction, the blur should only appear on one side the trailing side like a comet.

You already know that animation is a series of still images, so any motion blur you add is added to a single frame at a time. Naturally, you can tween filters so Flash does the interpolation between keyframes. The point is that any blur you add is added to a single frame at a time. (And, I should add, is used in addition to keyframes where the object appears in different locations.)

There are three general ways to add a trailing blur:

• Have two objects: one with the Blur filter and another on top with no blur. The blurred object can even be a different shape. Figure 13.5 shows an example.

  Figure 13.5. The Blur is applied to the object underneath while the object on top is left unchanged.

  

  
  

• Simply use the Drop Shadow filter. Simply set the shadow color to match the object and set the direction to the position from which the object is supposed to be leaving (that is, behind the object). Figure 13.6 shows an example.

  Figure 13.6. A Drop Shadow filter in the same color as the object is a very effective way to show a motion trail.

  
  
  

• Draw lines or some other custom graphic. You can make the lines long to make the object look like it's moving faster, or short to make it slower. Figure 13.7 shows an example.

  Figure 13.7. You might think a few simple lines won't work, but simply watch an old cartoon frame-by-frame and you'll see it really does.

  

  
  

You'll have to wait until Hour 22, "Advanced Animation Techniques," for a task that steps you through using one of these motion blur techniques (namely, the Drop Shadow). In addition, Hour 22 teaches you other ways to imply motion as well as add depth. There are so many subtle touches you can do to communicate an idea.

Masking Effects

As you should remember from Hour 11, the shapes you draw into a layer with its Layer Properties set to Mask will show through to the objects in any layer or layers directly underneath with their Layer Properties set to Masked. That is, the mask layer defines what is visible in the masked layers. One of the tasks in Hour 11 was the spotlight effect where the spotlight (the mask) moved to reveal a bright version of a skyline. To add realism you added a third layer not masked or a mask itself, just a normal layer containing a dim version of the skyline so that the user would see a darkened version of the skyline where the spotlight was not revealing the bright skyline. I'm bringing this up because masking often requires you carefully plan out your layers. And, often, the important layers are the ones that aren't part of the mask! In any event, it can be tricky to work things out in your head but I think you have to.

One of the apparant limits of masking is the fact masks are a all-or-none effect. That is, the mask is either on or off. What if you wanted the mask to have a gradient? It's actually very simple: add another (non-mask) layer on top containing a gradient. If the mask moves (as in the case of the spotlight) just move that gradient at the same rate. The next task does nearly the same thing, but this time the mask will look like a magnifier (to reveal a larger version of some text in a lower non-masked layer). To add realism you'll make the magnifier have a reflection like a regular lens would. That reflection will simply follow the same path as the actual mask. Check it out.

Try It Yourself: Create a Magnifier Effect with Masking

1.	In a new file draw a circle. Convert the circle to a Movie Clip named Circle. Name the sole layer Circle.
2.	Insert a new layer (Insert, Timeline, Layer) and name this layer Big Text. Select the Text tool, set the font about as tall as your circle was drawn, and set the text type to Static. Click on stage and type one long word. Use the Selection tool to move the text so the circle covers the first letter in your word; then convert the block of text into a Movie Clip named MyText. Drag the Big Text layer so it's underneath the Circle layer. Set the Circle layer to Mask.
3.	Because we want the mask to reveal a large version of the text, we need a small version of the text underneath everything else. Insert a new layer and name this layer Small Text. Drag that layer so it's below the other two layers. If the Small Text layer is set to masked then use Modify, Timeline, Layer Properties to set it back to Normal. (You can also click and drag the layer down to the left.) Unlock all the layers and copy an instance of the MyText symbol. Turn all the layers invisible except for the Small Text layer. Choose Edit, Paste in Place (or Ctrl+Shift+V). Select the Free Transform tool, hold shift, and resize MyText instance (in the Small Text layer) so it's about 80% of the original size.
4.	Make all the layers visible and lock all the layers in order to see the masking effect as shown in Figure 13.8. The first issue is that while the large text is revealed by the mask, you can see through to the small text underneath. You only want to see through where the mask isn't. It's actually really simple to fix: the text needs an opaque background. So, open the Library and access the master version of MyText. Select the Rectangle tool, choose white for your fill color (or whatever you plan for the background color) and "no stroke." Then draw a rectangle at least as big as the block of text. Select the drawn rectangle and choose Modify, Send to Back. Go back to your main timeline and the masking effect should look good. Figure 13.8. You'll need the three layers oriented as shown.
5.	At this point we can tween the Circle. For each layer click the cell in frame 30 and insert a frame (F5). For the Circle layer add a keyframe at frame 15 and another at frame 30. Go back to frame 15 and move the circle so that it covers (or when masking, reveals) the right most letter in your MyText instance. Set the tweening for frames 1 and 15 in the Circle layer to Motion Tween. Test the movie. The mask works fine but there's really no way to "see" the edge of the mask.
6.	Go inside the master version of the Circle symbol via the Library. Select the circle and use the Color Mixer to select the default white-to-black radial gradient. With the Circle's fill selected, use the Color Mixer to edit the gradient so the white is 0% alpha (click the little arrow above the white portion and change the alpha value to 0). Test the movie again and you should see no change because the mask is either on or off.
7.	Go back to your main timeline and insert another layer. Drag the new layer above all other layers. Click once on the Circle layer's name (to select all the frames), then right click on any frame in the Circle layer and select Copy Frames. Right click into frame 1 of the new (empty) layer and select Paste Frames. The new layer will probably get extended longer than all the others. In that case remove the excess frames by holding Ctrl and dragging the end frame all the way to the left.
8.	Test the movie. It's pretty cool. There's one last issue you might adjust and that's if the large version of MyText doesn't seem to line up perfectly. Go to the Big Text layer and add a keyframe in frame 30. Then, in frame 1, set Motion tween. Finally, nudge the MyText instance in frame 1 and 30 (of the Big Text layer) until the magnifier effect looks best.

In the preceding task you started with large text and then scaled it down for the smaller version. It wouldn't have made any difference if you started with the small text and scaled it up because text inside Flash behaves like a vector graphic. If, on the other hand, you want to use a raster graphic in place of the MyText I would definitely recommend leaving the revealed (larger) version at 100% of its normal scale.

Then, for the smaller one, scale it down. A scaled raster graphic never looks great, but enlarging a raster graphic always looks grainy.

Before you move on to explore still another masking effect, try to ponder how the preceding magnifier task is nearly identical to the spotlight task in Hour 11. In both cases you had two layers under the mask: one with the large text (or bright buildings for the spotlight task) and one with small text (or dim buildings) that doesn't get masked at all. In the task above, there was one extra step to make the non-mask version of the Circle follow the same path as the mask version.

Next you'll get to play with a pretty cool masking trick that's actually very effective. It's a way to reveal an image using a hand-drawn effect. Basically, the mask is going to build one frame at a time, but look like someone is changing an image by painting one line at a time. I'm sure you've seen the effect before but there's still plenty of room to make it original looking.

Try It Yourself: Create a Hand-drawn Masking Transition

1.	In a new file import two photos that are the same size. Place each one at 0x 0y in its own layer. Name the layer on top End and the layer underneath Start. You'll initially see the image in the Start layer and then it will transition to the image in the End layer. Make both layers last 60 frames by clicking in frame 60 of each layer and pressing F5 (to insert a frame).
2.	Insert a third layer above the other two layers, name the layer Transition. You'll do the rest of this task in this layer (so you're welcome to lock the other layers). The Transition layer should automatically last 60 frames as the other layers. Use the Brush tool to draw a small blob offstage. Click frame 20 (or whenever you want the transition to begin) and insert a blank keyframe (F6). Make sure the Brush size option is nice and large. Paint one little blob in the top left corner of the stage as Figure 13.9 shows. Now keep the Brush tool in one hand (well, your mouse) and place the other hand on the F6 key. Press F6 (which will duplicate the blob you have in frame 20). Then draw a little more to cover up the photo. You can go pretty fast because you have another 40 frames (or how ever many frames it takes you to cover the photo entirely add frames in all three layers as needed). Figure 13.9. A blob, drawn freehand, is the start of the mask that will fully engulf the stage size to reveal a second photo (on top of the first).
3.	When you're done with your frame-by-frame animation that covers the photo simply set the Transition layer to Mask; the End layer to Masked; and make sure the Start layer stays as Normal. Test the movie.

The hand-painted feeling in the preceding task is not the only way to do a transition. For example, you could do a Shape tween or even just a simple Motion tween where a small circle tweens to be bigger than the entire stage. No doubt you've seen this sort of wipe in old movies. Transitions are easy: have one layer with the starting content below everything else. Then have the masked layer go from having a tiny part revealed through its mask to having it entirely revealed because the mask grows.

In case you think masking can't do much, I've included one more example. When I visualize how the layers work in the next task I think of a stencil. That is, we're going to have a gradient that does a shape tween but only reveal through a mask (the stencil).

Try It Yourself: Use a Mask As a Stencil

Perhaps you'll be more psyched if I called this task "adding an animated glow" because that's what you'll be doing. Here are the steps:

1.	In a new file select the text tool, pick a large bold font, set the color to red, and set the text type to Static. Click and type a short headline. Use the Selection tool to select the block of text and convert it into a Movie Clip and name it Headline. Name the sole layer Base. Click frame 60 and insert a frame (F5). (This simply makes the rest of the layers 60 frames long.) Select the instance of Headline and copy (Ctrl+C).
2.	Insert a new layer and then select Edit, Paste in Place (Ctrl+Shift+V). Name this layer Stencil and set the layer properties to Mask.
3.	Insert a third layer and name this layer Glow. Arrange the layers so that Glow is in the middle (and set to masked) and Headline is at the bottom (and set to Normal) as Figure 13.10 shows. Lock all the layers except for Glow. Also, make the Stencil layer invisible. Figure 13.10. You'll need the layers oriented as shown.
4.	In the Glow layer draw a rectangle with no stroke that's slightly bigger than the entire Headline instance. Use the Color Mixer and select a linear gradient for the rectangle's fill. Edit gradient so that it has three steps: 0% alpha yellow on both ends and 100% alpha yellow in the center as shown in Figure 13.11. Figure 13.11. The three-step gradient (clear-yellow-clear) will be used in the masked layer starting as a diagonal band at the top left.
5.	Use the Gradient Transform tool to rotate, move, and set the falloff so that the gradient appears as a small diagonal band over the top left of the Headline instance (also shown in Figure 13.11).
6.	Select frame 20 of the Glow layer and insert a keyframe (F6). Use the Gradient Transform tool to just move the position of the gradient's center to the right just to the right of the last letter in your Headline instance.
7.	Go back and click frame 1 of the Glow layer and use the Properties panel to set Shape tween. Test the movie.

Looking back I realize many of these special effects involved text. There's no rule written that says you can't apply special effects to other shapes including logos or anything else for that matter.