Using the Custom BlurFader Component

So far, much of the material and artwork used in this presentation could have been accomplished with a traditional HTML page layout in Macromedia Dreamweaver with GIF or JPEG graphics. In this section, you will add a fade effect to each of the video items in the videoEquip symbol. We created a custom component that can be applied to any Movie Clip instance on the Stage. This component will fade in or out a Movie Clip instance, based on settings in the Property inspector. To see this fade effect in action, open the main.swf file from the ch20 folder in Flash Player 8. When you go to the Video Equipment section, each item will fade in. In other words, the alpha of the each Movie Clip instance animates from 0 to 100 percent.

New Feature 

In this edition of the Flash Bible , we've fully updated the fade component used in previous editions. This new version is built with ActionScript 2.0 and uses the new blur filter effect available in Flash Player 8.

The BlurFader component snaps to Movie Clip instances. Because we built the component for you, you won't find the BlurFader component in the Component panel along with the Flash 8 components. The BlurFader component is located in the starter document's Library and has been saved in each version of the main_ document that you've created in previous sections. Here's how to add the BlurFader component to the video items in the videoEquip symbol:

1. Open your saved Flash document from the previous section. On frame 20 of the content layer, double-click the videoEquip instance on the Stage to edit the symbol.

2. Select frame 1 of the items layer, and open the Library panel. Drag the BlurFader component to the mcTape instance on the Stage. When you release the mouse button, the BlurFader component should snap to the top-left corner of the mcTape instance, as shown in Figure 20-19. We made a custom icon for this BlurFader component: a little gradient box with the text BF. This icon will not show up in the actual Flash .swf file — it is displayed only in the authoring environment.

3. You can view the default settings for the BlurFader component instance in the Property inspector. Select the component instance at the top-left corner of the mcTape instance, open the Property inspector, and click the Parameters tab. This component has three options, as shown in Figure 20-19: Direction (in to fade in the targeted instance, out to fade out the targeted instance), Duration (how long the transition should last, in seconds), and Target Clip (the Movie Clip instance that the BlurFader component instance has snapped to).

4. Save the Flash document as main_600.fla, and test it (Ctrl+Enter or z+Enter). When you click the Video Equipment button, the first video item will fade into the Stage.

5. Repeat Step 2 for the other Movie Clip instances on frames 2, 3, 4, 5, and 6 of the items layer.

6. Save the Flash document again, and test it. After you click the Video Equipment button, click the Next button. Each video item will fade into the Stage.

Figure 20-19: The BlurFader component snaps to the top-left corner of the Movie Clip instance.

If you want to use the BlurFader component in other Flash documents, simply drag the BlurFader component from one Library to another document's Library. Alternatively, you can copy and paste the BlurFader component instance from one document to another. Try different Duration values for the BlurFader component (in the Property inspector) to see how the fade animation is affected in the Flash movie.

Note 

The BlurFader component adds about 2 KB to the file size of your Flash movie file (.swf).

On the CD-ROM 

You can find the completed document, main_600.fla, in the ch20 folder of this book's CD-ROM.