Recipe 7.4. Adding Drop Shadows to Text

Problem

You want to add drop shadows to your text.

Solution

Use the drop shadow filter.

If publishing to Flash Player 7 or lower, consider using the drop shadow timeline effect.

Optionally, create a copy of the original text, and offset it from the original to create a shadow effect.

Discussion

If you are publishing to Flash Player 8 and higher, you can use the drop shadow filter effect to apply the most convincing effect versus the other options that are readily available. The drop shadow filter allows you to set a variety of parameters. Likely the most relevant parameters are the blur, angle, distance, and color. You can apply a filter by selecting the text on stage and clicking on the Filters tab in the Property inspector.

The blur parameter determines how soft an edge the drop shadow has. The blur parameter is what visually differentiates the filter drop shadow from the other techniques described in this recipe. Prior to Flash 8 and filter effects, Flash did not have a built-in way to achieve a convincing lighting effect with drop shadows, because the edges were always too crisp. But with the blur parameter, you can soften the edges to make the drop shadow appear as though it is actually cast from an object with natural lightingwhich causes a diffusion. Though not necessarily required, most frequently the blur applied to the x and y directions is equal for drop shadows. The greater the number, the softer the edges are. A value of 0 makes a drop shadow that duplicates the hard edges of the object from which it was cast.

The angle determines the direction from which the light source appears to be originating. The value is specified in degrees, which you can control via the dial that pops up from the Property inspector. The default value is 45, which casts a shadow as though the light source is located at the upper left of the object.

The distance is the number of pixels the drop shadow is cast from the object (in two-dimensional space). The default is 5. The greater the number, the further away the object appears from the surface onto which the drop shadow is cast. A value of 0 lines up with the edges of the object. That means the drop shadow isn't visible, and it appears as though the object is resting on the surface. Using a value of 0 is only useful if you are tweening to or from that value to give the appearance that the surface is nearing the object.

Drop shadows are the optimal technique, not only because they provide the most convincing effects, but also because they are so easily animated. You can apply motion tweens to changes in the parameter values for filter effects. For example, if you apply a drop shadow to text on frame 1, you can then add a new keyframe (F6) at frame 20, change the drop shadow filter parameters on frame 20 so they differ from those on frame 1, and then apply a motion tween between frames 1 and 20. Flash will automatically animate the transition between the settings.

Note that the drop shadow filter applies exactly what the name suggestsdrop shadows. It does not apply perspective shadows, in which the light source appears to be at the side of the object, such that the shadow that is cast is a skewed version of the object. If you want to apply a perspective shadow, continue reading the last portion of this recipe.

If you are authoring to an earlier version of Flash Player, you cannot use filter effects. Perhaps the simplest way to add a drop shadow in that case is to use a timeline effect. In order to apply the drop shadow using the built-in timeline effect, complete the following steps:

1. Select the text instance on stage using the Selection tool.

2. Select Insert Timeline Effects Effects Drop Shadow. Alternatively, you can right-click/Control-click on the instance, and choose Timeline Effects Effects Drop Shadow from the context menu.

3. Apply the drop shadow by clicking Apply.

You should see the drop shadow applied to the text instance you had selected. If you want to edit the effect, you can select the instance on the stage and choose Modify Timeline Effects Edit Effect. Alternatively, you can right-click/Control-click the instance and select Timeline Effects Edit Effect from the context menu. The dialog box opens, and you can adjust the settings and then reapply them.

The drop shadow timeline effect works. However, it has several drawbacks. One drawback is that it automatically places the text inside a graphic symbol. That result may or may not be an issue, depending on what you plan to do with the text later on. Another drawback of the built-in drop shadow effect is that it really doesn't look much like an actual shadow. It is just a simple duplication of the text with different color, alpha, and x- and y-coordinate settings. A much more realistic drop shadow effect can be achieved with the following steps:

1. Add your text to the stage. Consider naming the layer something descriptive, such as Original Text.

2. Select the text and copy it.

3. Add a new layer below the layer with the original text. Give the layer a descriptive label, such as Drop Shadow Text.

4. Paste the copy of the original text into the new layer you just created in step 3. You may find it helpful to use the paste-in-place feature so that the copy is placed on the stage with the same coordinates as the original. Use the mouse and/or keyboard to place the copy at an appropriate offset from the original text.

5. Adjust the color of the copy text. Often black is an appropriate shadow color choice. You don't need to make the color of the shadow too light yet. You can accommodate that in just a few steps when you lower the alpha.

6. Make sure that the copy text (the shadow) is selected, and break it apart twice so that it is treated as shapes instead of text. You can break apart the text by choosing Modify Break Apart. Alternatively, you can use the keyboard shortcut of Ctrl-B or Command-B. Remember to break it apart twice. If you break it apart only once, each character will still be treated as text.

7. Shape Expand Fill.

8. With all the shapes still selected, press F8 to convert them to a symbol. You may choose to convert them to either a movie clip or a graphic symbol. Make sure to give the symbol an appropriate name, such as Drop Shadow Text.

9. The artwork should be converted into an instance of the symbol. With the instance selected, open the Property inspector, and select Alpha from the Color Styles menu.

10. Using the control to the right of the Color Styles menu, adjust the alpha setting to an appropriate value. Values under 35% typically work well.

You can also convert your drop shadow into a perspective shadow with just a few extra steps. A drop shadow appears as though the object casting the shadow is parallel with the surface onto which the shadow is being cast. A perspective shadow, on the other hand, appears as though the object is nonparallel to the surfacetypically as though it is perpendicular. In other words, a perspective shadow is the kind of shadow your text casts if it is standing up. To create such a shadow, simply complete steps 1 through 11 in the previous list, and then use the Free Transform tool to skew and shorten the height of the shadow instance.