Create the image animation

In this section, you'll create the tweened animation that transitions between images of each special. When you've completed this section, the animation plays through without stopping. Later in the tutorial, you'll add navigation and ActionScript that lets the user control the animation with the device's right soft key.

To create the animation, you'll use a prebuilt movie clip that contains images of all of the specials arranged in a vertical column. You'll use a masking layer to make only one of the images visible. Then you'll create a series of tweens that move the movie clip upward, so that a different image is visible. The last image in the movie clip is a duplicate of the first one, so that the animation sequence can return to its initial state after the user views the final image. These concepts are illustrated in the following example:

In the last section of the tutorial, you'll add ActionScript and user interface elements that let the user control the animation sequence.

Open the file you saved in Create the menu for the home screen.
In the Timeline, select the keyframe in Frame 10 in the layer named Images.
Open the Library panel, and drag the symbol named Specials movie clip to the Stage.
The rest of this tutorial refers to this movie clip simply as the Images movie clip.
With the new movie clip instance selected, set the movie clip's x and y coordinates both to 0 in the Property inspector.
This aligns the upper-left corner of the images movie clip with the upper-left corner of the Stage.
In the Images layer, insert keyframes in Frames 20, 30, 40, and 50, as the following image shows:
In the Timeline, select the keyframe in Frame 20.
On the Stage, select the Images movie clip, and set its y coordinate to -100 in the Property inspector.
This moves the movie clip upward on the Stage 100 pixels.
Select the keyframe in Frame 30 in the Timeline, select the images movie clip, and set its y coordinate to -200 in the Property inspector.
Select the keyframe in Frame 40, select the images movie clip, and set its y coordinate to -300 in the Property inspector.
Select the keyframe in Frame 50, select the images movie clip, and set its y coordinate to -400 in the Property inspector.
Select the keyframe in Frame 10, and select Motion from the Tween pop-up menu in the Property inspector.
This tweens the Images movie clip's position between the keyframes in Frames 10 and 20.
To create transitions between the other images, repeat step 11 for the keyframes located in Frames 20, 30, and 40.
To create the mask layer, select the Images layer in the Timeline, and then select Insert > Timeline > Layer (or click Insert Layer in the Timeline).
Insert a keyframe in Frame 10 of the new mask layer.
Using the Rectangle tool in the Tools palette, create a rectangle over the first (uppermost) image in the Images movie clip.
It doesn't matter what fill color you use for the rectangle, but it must be completely opaque.
To make sure the rectangle covers the entire image area, double-click the rectangle to select it, and then use the Property inspector to set its x and y coordinates both to 0, its width to 176, and its height to 100.
Right-click (Windows) or Control-click (Macintosh) the Image Mask layer in the Timeline, and select Mask from the context menu.
The layer is converted to a mask layer, indicated by a mask layer icon. The layer immediately below it is linked to the mask layer, and its contents show through the filled area on the mask. For more information about working with mask layers in Flash, see the mask laters sections in Using Flash.
Save your changes (File > Save).

At this point, if you were to test the application in the emulator, the animation you created would play through to the end and then stop. In Add navigation and text to the specials screen, you'll add ActionScript that stops the animation at each keyframe, as well as user interface elements that let the user navigate between images.

Flash CS3