Animating with the New Flash Professional 8 Filters
- Animating with the Blur Filter
- Animating with the Drop Shadow Filter
- Animation Refinements
- Flash Filter Checks
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
The latest professional version of Flash, Flash 8, includes a collection of image-compositing effects called blending modes and image special effects called filters. Using blending modes and filters you can now achieve sophisticated, eye-catching graphic effects with graphic content created within Flash. In earlier versions of Flash you had to create this content in a program such as PhotoShop and then import it into Flash, dramatically increasing the file size of the project.
These new blending and filter capabilities now make it possible to create this content directly within Flash 8 Professional, giving you more flexibility and control and much smaller file sizes. What’s more, you can now animate symbols and text by changing their blending and filter attributes across keyframes.
A graphic filter is a method of processing the content of a graphic object to produce a specific effect. For example, you can apply a bevel filter to an object to make its edges appear rounded, apply a blur filter to make them appear more diffuse or softer, or apply a drop shadow filter to make it appear to cast a shadow behind it (see Figure 1).
)
Figure 1 The same graphic symbol with the bevel, blur, and drop shadow effect applied to it.
Animated filters are created in much the same way you create other tween animations. Set up two or more keyframes, place movie clips or button symbols (filters do not work with graphic symbols) into them, and apply the tween. Objects on separate keyframes joined by a tween have the parameters for corresponding filters tweened on intermediate frames.
Let’s see this new capability of Flash with a few examples. You will need the professional version of Flash 8 to compete the following exercises.
Animating with the Blur Filter
- Download and open the blurAnimation.fla file into Flash 8. This file has filter applied to produce a colorizing effect. The first animation example involves changing the properties of the blur filter over three keyframes and animating these changes over 12 frames.
- Make sure that the Properties inspector is open. If not, choose Window >
Properties > Properties or press Ctrl+F3 (Windows) or Cmd+F3 (Mac). Click
the Filters label on the Properties inspector to open the Filters tab. Select
the image in Frame 1 of the overlay layer. On the Filter tab, click the small
icon of the lock to unlock the Blur X: and Blur Y: settings. Set the Blur X
value to 0 and leave the Blur Y: value to 20 (see
Figure 2).
Figure 2 Set the blur filter settings of the first keyframe to the values illustrated here.
- Click Frame 6 on the overlay layer of the Timeline and press F6 to add a
keyframe. This procedure copies the contents, including the blur filter, of
Frame 1 to Frame 6. On the layer named bw pic, select Frame 12 and press F5 to
add frames (see Figure 3).
Figure 3 Add a keyframe to Frame 6 of the overlay layer and add additional frames out to Frame 12 of the bw pic layer
- Click Frame 6 in the overlay layer and click the overlay image in Frame 6 to
select it. In the Filters tab of the Properties inspector set Blur X: to 20 and
Blur Y: to 0 (see Figure
4).
Figure 4 Set the blur properties of the second keyframe.
- In the Timeline, click anywhere between Frame 1 and Frame 6 in the overlay layer to select a frame. In the Properties inspector click the Properties tab and choose Motion from the Tween drop-down menu.
- Click Frame 12 in the overlay layer and then click the overlay image in
Frame 12 to select it. In the Filters tab of the Properties inspector set Blur
X: to 0 and Blur Y: to 20 (see
Figure 5).
Figure 5 Set the blur properties of the third keyframe.
- In the Timeline, click anywhere between Frame 6 and Frame 12 in the overlay layer to select a frame. In the Properties inspector click the Properties tab and choose Motion from the Tween drop-down menu. This procedure adds the second filter tween.
- Move the playback head back to Frame 1 and press Enter (Windows) or Return (Mac) to view the motion tween. You should see the blur around the border shrink and then grow out from the center.
)
)
)
)
Animation tweening the filter settings of two or more keyframes is a simple but effective way to add more visual interest and polish to your Flash artwork. Let’s work through another example to get a better appreciation of the potential and power of animating Flash filters.