Creating 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 will play 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 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 has viewed the final image. The following image illustrates these concepts:

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

To create the image animation:

Open the file you saved in the previous section (see Creating the menu for the main screen).
In the Timeline, select the keyframe on Frame 10 on the layer named Images.
Open the Library panel, and drag the symbol named Specials Images 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 top-left corner of the images movie clip with the top-left corner of the Stage.
On the Images layer, insert keyframes on Frames 20, 30, 40, and 50, as the following image shows:
In the Timeline, select the keyframe on 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 on Frame 30 in the Timeline, select the images movie clip, and set its y coordinate to -200 in the Property inspector.
Select the keyframe on Frame 40, select the images movie clip, and set its y coordinate to -300 in the Property inspector.
Select the keyframe on Frame 50, select the images movie clip, and set its y coordinate to -400 in the Property inspector.
Select the keyframe on 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 on Frames 10 and 20.
To create transitions between the other images, repeat step 11 for the keyframes located on Frames 20, 30, and 40.
To create the mask layer, select the Images layer in the Timeline, and then select Insert > Timeline > New Layer (or click the Insert Layer button in the Timeline).
Insert a keyframe on Frame 10 of the new mask layer.
Using the Rectangle tool in the Tools panel, create a rectangle over the first (top-most) 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 "Using mask layers" 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 the next section (see Adding 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.