How to Animate an iPod Ad in Flash

Have you ever wondered how they make the new iPod ads? They look pretty amazing: a model filled with one band of moving color dancing over a moving background with a different gradient spill. You can come pretty close with your own model and the animation capabilities of Flash.

Difficulty: Easy

Instructions

Things You'll Need:

• Camera
• Tripod
• Image editing program

1. Take still photographs of your model dancing against a solid colored wall or backdrop. Work with lighting that casts as few shadows as possible. A high-resolution digital camera with fast frame motion capability mounted on a tripod will give you the best results. Have the model move slowly to avoid blurring and capture at least 24 frames.

2. Use an image editing program to silhouette the model in each photo. For the best results select and delete the background then select and fill the dancer with black. Save the file in PNG format to keep the background transparent. Name the silhouette files in sequence to keep track of the order.

3. Import the silhouette sequence to the Flash library. The image will come in as both a bitmap and a symbol (the symbols will be numbered in the same sequence as the files.) Double click on each symbol to edit it, and choose "Trace Bitmap" from the Modify menu Bitmap submenu.

4. Create three layers in the Flash timeline. Add a rectangle object on the bottom layer with a radial fill and another rectangle object on the middle layer with a linear fill. You can use the colors in the iPod ad, or choose your own.

5. Determine how many frames you will need to display each motion image. Select that frame number in all three layers and choose "Frame" from the Modify menu Timeline submenu. Type F6 to add keyframes to the last frame of each layer. Add a keyframe to every frame in the top layer.

6. Select the final frame of the bottom gradient layer. Use the Gradient Transform tool to change the gradient's center, focal point, rotation and width. Do the same with the linear gradient layer. Select both layers and choose "Create Motion Tween" from the Insert menu Timeline submenu to animate the changes.

7. Mask the linear gradient layer with the dancer. Drag each of the motion symbols into its corresponding frame on the top layer of the timeline. Right click the layer and choose "Mask" from the pull-down menu. When you play back your animation the linear gradient will only show inside the dancer.

Tips & Warnings

• You want to shoot still images rather than video because the resolution quality tends to be better with photographs.
• If you have Flash CS3 you can add a pattern layer above the background layer and use the blend and color alpha settings in the Properties palette to add texture.
• Once you position your first motion frame on stage, drag guides to indicate where the additional motion images should be positioned in each frame. This will keep the dancer from jerking around the stage.
• To make the ad more authentic add a fourth layer with a white object in the dancers hand. Make sure to tween the object layer so that it moves relative to the dancer's hand.