Flash Web Design oder: the art of motion graphics

The FeedRoom spot was designed for broadband viewers still to ensure a steady stream, a looping animation is run while images and audio preload. In the loading sequence, a woman appears to walk in from the left while carrying a "Loading" sign above her head. She reaches center, holds for a moment and then walks off backward to the right. This animation, if it were to stand alone in its own movie, would consist of 32 frames of fluid motionyet, it would only weigh 14k! The trick is that the animationwhich is 32 frames is really only made of 14 unique vector graphics. If you look closely, the figure's motion is mirrored from left to right. The second half of her walk is exactly the same as the first halfonly it's in reverse.

Figure 06:12 shows an abbreviated version of the animation. The frames following the center frame (only three are depicted here) are simply a reverse of the first frames.

This animation could have been shot straight through, but there was really no reason for that. Reversing movement gives the same results, and is quite easy and very economical (from a file- size perspective). Flash 4 can be scripted to play in reverse, but this isn't our only option. For a quick solution that involves zero scripting, follow these steps:

1. Create the vectorized video in the Symbol Editor as described in the earlier section "Video to Vectors: Converting a Bitmap to a Vector Graphic in Flash."

2. After the final keyframe of the original movement, insert several frames to hold the central image: the Loading sign.

3. Create another keyframe after the action is completed.

4. Choose Modify > Instance to open the Instance Properties dialog.

5. In the Definition tab, enter the second-to-last frame number of the sequence in the First Frame field.

   For example, for the FeedRoom spot, the loading vector video is 13 frames long; in the First Frame field for the initial reverse keyframe, I would enter 12.

6. Create another keyframe and repeat steps 4 and 5, decreasing the frame count by one.

7. Repeat step 6 until you reach frame number 1 in the First Frame field.