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 (exp 3pod.com) 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:

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:

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.