Animating the Page with Flash 5

This chapter is from the book

Essential Flash 5 for Web Professionals

Learn More Buy

This chapter is from the book

This chapter is from the book 

Essential Flash 5 for Web Professionals

Learn More Buy

Movement Tweening

The animation you will perform more than any other will be movement tweening. This consists of giving an object a starting and an ending location and letting Flash interpolate the frames in between. Movement tweening also interpolates on the basis of object size and rotation.

Animating the Tan Background Curve

For our first animation trick, we will be making the brown background curve move. Figure 2–8 shows the path of this object. Only the outlines of the object are shown. In Flash, this view is called onion-skinning.

FIGURE 2–8 The animated path of the tan background object. The darker lines indicate the most recent events.

1. Begin by selecting the Background 2 layer and hiding all the others, using the Layer menu.

2. Click on the first keyframe. This is the frame located at 1 on the timeline that has a solid black circle in it.

3. You will be moving the curve partly off the movie stage. To allow you to see it, choose View → Work Area. You may also find it useful to use the Zoom drop-down box (located on the bottom left edge of the current movie) set to 50% or smaller.

4. Change to the Arrow tool. Select the curve and move it to the left and down, as shown in Figure 2–9.

   FIGURE 2–9 Tan curve location at first keyframe.

5. Add a keyframe at 14 by clicking at the 14 mark on the Background 2 layer and selecting Insert → Keyframe.

6. Click on this new keyframe.

7. Move the curve up, as shown in Figure 2–10.

   FIGURE 2–10 Tan curve location at second keyframe.

8. Click on a frame anywhere between the first and second keyframes. Choose Window → Panels → Frame to open the Frame panel. You can also right-click (PC) or Ctrl-click (Mac) and select Panels → Frame from the pop-up menu.

9. Select Motion from the Tweening drop-down box on this panel. Scale should be checked, and Rotate should be set to Auto. The Easing slider should be set to 0. See Figure 2–11.

   FIGURE 2–11 Frame panel.

10. Click on a frame anywhere between the second and third keyframes, and repeat step 9.

11. To test your animation, press the Enter key, or select Control → Play.

A Quick Word about Onion-Skinning

Flash has a very nice feature that allows you to see the stages of an animated object over time. This is known as an onion-skin view. It displays the graphic in each frame at the same time, giving you a picture of the path it is taking. The first frames are fainter than the later frames.

To use it, select the Onion Skin button, shown selected at the bottom of Figure 2–12. Notice the handles that appear on the timeline above all the layers. Change the frame interval by dragging the right handle to frame 30. This image also shows the Onion Skin markers on the timeline. The color changes over time, with the faintest images representing the early frames. Turn it off by clicking on the Onion Skin button again. If you only wish to see the outlines, click on the Onion Skin Outlines button.

FIGURE 2–12 Onion Skin markers on the timeline.

Animating the Link Circles

The link circles will start out fairly large and centered on the Products circle. They will shrink and move outward to their appropriate places. They will also initially be transparent and fade in. Don't worry, this sounds more complex than it actually is!

1. Begin by selecting the Products layer and hiding all the others, using the Layers Menu → Hide Others option.

2. Click on the red X next to the names of the other six link circle layers to make them appear. You should now see seven circles against the tan background, as in Figure 2–13.

   FIGURE 2–13 Link circles.

3. Hold down the Ctrl key and select the fifteenth frame on each of these layers and choose Insert → Keyframe. See Figure 2–14.

   FIGURE 2–14 Inserting a keyframe.

4. Select the center circle with the Arrow. The Products layer should now be selected.

5. Drag the Products layer below the other circle layers.

6. Click on the first keyframe of the Products layer, located at frame 1. The circle in this layer should be selected.

7. Open the Info panel if it is not open, by choosing Window → Panels → Info.

8. On the Info panel, there is a cluster of nine small boxes. Click on the box in the center, as shown in Figure 2–15, and change the Width (w) and Height (h) each to 300. Press Enter.

   FIGURE 2–15 Info panel.

9. Make sure the first keyframe is still the current one selected. Using the Arrow and Shift keys, select all of the circles.

10. Open the Align panel by choosing Window → Panels → Align.

11. We want all the circles to be 300 pixels by 300 pixels and in the same location. To do this, click on the two middle buttons under the Align label. Look at the buttons shown in Figure 2–16.

    FIGURE 2–16 Align panel.

12. Now click on the Match Size button on the right. This will make all the circles 300 pixels by 300 pixels and centered, so only one will be visible, with the rest stacked under it.

13. We need to set the tweening for the circle layers. For each of the seven link circle layers, click on a frame anywhere between the first and second keyframes. Open the Frame panel.

14. Select the Tweening tab on the Frame panel. Choose Motion from the drop-down list. Scale should be checked, and Rotate should be Automatic. The Easing slider should be 0.

15. Take a look at the animation you just added by pressing Enter.

We still need to make the circles start transparent and fade in. We will do this by changing the transparency for the circles at the first keyframes of each layer. This should be clearer to you in a moment.

1. Open the Effect panel. You can do this by clicking on the tab labeled "Effect" on the Frame panel dialog, or from Window → Panels → Effect. See Figure 2–17.

   FIGURE 2–17 Effect panel.

2. The Effect for the circles at the first keyframe needs to be changed. Click on the Products layer and hide the others.

3. Click on the first keyframe in this layer. The large circle visible on the stage should be selected.

4. Choose Alpha from the drop down box on this panel. Set the value to 0%.

5. Repeat steps 2 through 4 for each of the other six layers. Make sure you are making this change on the large circle located at the first keyframe!

6. Select Show All from the Layer menu.

We are getting closer, but still have a few more animations to add.

Animating the Address Text

Let's make the Address Text really large when the animation begins. It will also change color, but we'll do that a bit later in the section on Fading. To preview what the Address Text will be doing, look at Figure 2–18, which shows the onion-skinned version of the animation.

FIGURE 2–18 Onion-skin view of address text animation.

1. Click on the first keyframe of the Address Text layer.

2. Select View → Work Area. Use the Zoom Control and change the zoom to 50% or less.

3. Use the Layer menu to hide all the layers except for the Address layer. With the Arrow, select the address text. Click on the red X next to the Background 2 layer to make it visible also.

4. We need to turn the address text into a symbol so we can animate it. Make sure you are on the first keyframe and choose Insert → Convert to Symbol. Name it "Address Text," change its behavior to Graphic, and click OK.

5. Now we have a small problem. The address text in the first keyframe is a symbol, but the address text in the last keyframe is not. We need to replace it with the symbol version. It's easy enough to do. Click on the last keyframe on the Address Text layer and choose Insert → Clear Keyframe.

6. Now put a keyframe back at this location by choosing Insert → Keyframe. The Address Text symbol we just created will now be present.

7. Select the first keyframe of the Address Text layer and make sure the Address Text symbol is selected.

8. Click on the Scale button on the bottom of the toolbar. Using the handles or Object Inspector, stretch the address text until it is approximately 1000 pixels wide and 1060 pixels high. You may want to do this with the Info panel instead of scaling it.

9. Reposition and resize until the word "Shelley" is located on top of the visible part of the tan curve, as in Figure 2–19. No other words should overlap the visible part of the tan curve.

   FIGURE 2–19 Address text stretched and moved.

10. Click on a frame between the two keyframes on the Address Text layer. Open the Frame panel.

11. Select the Tweening tab on this dialog box. Choose Motion from the drop-down list. Scale should be checked, and Rotate should be Automatic. The Easing slider should be set to 0.

12. To see the results, press Enter.

Animating the Text Links

The text links will be very small and on the right side of the screen, then grow in size and move left. Figure 2–20 shows the onion-skinned path of these objects.

FIGURE 2–20 Onion-skin view of text links with page border shown.

1. Begin by selecting the Link Text layer and hiding all the others, using the Layers menu.

2. Click on the first keyframe.

3. Open the Info panel and resize the group of links to approximately 40 pixels \ 40 pixels and to move it to an (X, Y) location of (500, 250).

4. Click on a frame between the two keyframes on this layer. Open the Frame panel.

5. Select the Tweening tab on this dialog box. Choose Motion from the drop-down list. Scale should be checked, and Rotate should be Automatic. The Easing slider should be set to 0.

6. To see the results, press Enter.

Animating the Header Text

Figure 2–21 shows the onion-skinned path of this object.

FIGURE 2–21 Onion-skin view of header text with page border shown.

1. Begin by selecting the Header Text layer and hiding all the others, using the Layers menu.

2. Click on the first keyframe.

3. Open the Info panel. Resize the Header Text to approximately 130 pixels by 10 pixels and to move it to an (X, Y) location of (630, 90).

4. Click on a frame between the two keyframes on this layer. Open the Frame panel.

5. Select the Tweening tab on this dialog box. Choose Motion from the drop-down list. Scale should be checked, and Rotate should be Automatic. The Easing slider should be set to 0.

6. To see the results, press Enter.

If you haven't viewed the entire page animation already, select Show All from the Layers menu. Press Enter. You have now added all the motion tweening to the page. Now let's do some Shape tweening.