Wednesday, May 6, 2009

Flash 8: Animating an object

With the text created and formatted, let's animate the text. The following instructions will explain how to animate the 'Flash 8' text you entered:

Select the text and drag it to your left where it is not visible on the main working area. In other words, ensure that the text is moved left so that no portion of the text is visible on the beige background:


Go to your timeline. Right click on the vertical box below the 25 and select 'Insert Keyframe':


Once you select the Insert Keyframe command, you will see a small black dot displayed in the box under 25. The box under 25 is called a frame. From hereafter, when I refer to Frame 25, I am referring to the box under Frame 25:


Select the keyframe on Frame 25. Note that the text on your work area is also selected. Select the text with your mouse cursor, and press the right arrow to move the text to your right. I recommend you press Shift + Right Arrow to make the text move to your right even faster. Stop once the text has gone of the movie area on the right:


Now, we are ready to animate the text between frame 1 and frame 25. Select the keyframe on Frame 25. Notice that the Flash 8 text is on the left of the window. Flash's job is to seamlessly make the text transition from the left side of the drawing area to the right side of the drawing area.

Select all the frames in your timeline by clicking on Frame 1 and dragging all the way to Frame 25. Make sure that you are not dragging the actual keyframe toward Frame 25. Once you have selected all the frames, your timeline will be blackened as seen in the following image:


The frames should be selected. Right click on any selected frame and choose 'Create Motion Tween':


Your timeline will now be shaded a purple color. Click anywhere on the timeline, and you will notice that your text is moving from the left to the right.

You have just animated the text in Flash 8. Save the file now. Go to File | Publish Preview | HTML. You will see the animation scrolling from left to right inside your browser. [^_^]

We are still not done. We have to add a background and use some layers.

No comments:

Post a Comment