blog top 101 other stuff

a quick introduction to flash animation

introducing the timeline

In order to animate these graphics we need to tell Flash how many frames to use to complete the motion. In the Timeline each box represents one frame and our movie is set to 12 frames per second (set in the Document Properties window). This part of our animation is going to take 2 seconds.

9. Click on frame 1 in the Rectangle layer and then drag the rectangle off the bottom of the stage. (Hint: hold down the Shift key while you drag to assure that it moves in a straight line)

10. Click on frame 1 in the Vacation Text layer and then drag the text off stage right (same hint). This puts these two elements at their starting point for the animation. We now need to establish the ending point and the position of the two elements at the end.

11. Right-click in frame 24 of the Rectangle layer and select Keyframe from the menu. Do the same for frame 24 in the Vacation Text layer. Your Timeline should look similar to the one below.

12. Right-click anywhere on the Rectangle layer in the Timeline between frames 1 and 24. From the menu select Create Motion Tween. Do the same for the Vacation Text layer. Your Timeline should now look like the one below.

You've just told Flash to figure out for you the positions of both the rectangle and the text box in every frame from the first where they're both off stage to the last where they're centered.

Save your work and test your animation by pressing the return or enter key. When you're finished, continue to the next section.

other types of animation

Images can move in a Flash movie but they can also change size, color or in other ways.

13. The next part of the animation will take 1 second so we need a Keyframe at frame 36 in both layers. Right-click on frame 36 and select Insert Keyframe from the menu. Do the same two steps for the Vacation Text layer.

14. Click on frame 36 in the Rectangle layer. Drag the rectangle to the top of the stage. In the Toolbar click on the Free Transform tool.

15. Your rectangle now has eight white "handles" on it. Hold down both the Shift key and the Alt key (also called Option key on the Mac). Click and hold on the box in the lower right corner and use it to make the rectangle smaller (about half the size should do). Repeat the same process for the text. The final effect will be the text centered in the rectangle, but smaller, and at the top of the stage.

Save your work and preview your animation by pressing the return or enter key. When you're happy with the way things are going, it's time to move on to the Next Page -->