Beginners Adobe Flash Tutorial – Timeline Basics

The Flash Interface – Using the Timeline

This tutorial covers Flash 8, CS3 & CS4

When you open the Flash authoring environment, you’ll see a number of different sections displayed. In addition to the default display, various other controls are accessible if you choose the Window menu from the top toolbar. Don’t feel overwhelmed by the interface, to begin creating Flash movies you’ll really only need to worry about a few parts of it; the rest you’ll gradually familiarise yourself with as you work along.

The Stage

The main area you should see in the centre of the screen is the stage area, which will look like a white rectangle:

You can use the scrollbars to the bottom and right of the stage to view the various parts of your stage. Use the zoom control above the stage area at the top right of the central section; select from the drop-down list or type in a percentage amount, default is 100%:

To modify the size of your Flash Movie, select Modify > Document from the top toolbar:

Use this to specify the dimensions and framerate (number of frames per second – leave this at the default to begin with). The settings that you specify here will determine the properties of your final exported SWF file.

Be a little wary of specifying the background colour here, as if your Flash movie is going to be deployed on the Web, this will not always be displayed consistently across browsers.

The Flash Timeline

The Timeline is the key to creating animated effects in Flash. You’ll see it running across the top of the main panel:

The red square with the line pointing downward is the Playhead, and the white squares under it are the frames in your movie. When the movie plays, whatever is on the stage when the Playhead is over a certain frame is what will be visible while that frame is playing. Whenever you export an SWF movie, it will automatically start at the first frame on the root timeline (the default) and play until it either reaches the end or receives some command telling it to stop. Additionally, it will play the SWF continuously on a loop while the movie is open.

Try it out by using the following steps:

Draw a circle on the stage: select the oval tool from the left-hand-side ;

click and drag on the stage (keep within the white area as this is the area that will be visible in the final movie):

-you’ll see that Frame 1 of the current layer (Layer 1) has turned grey, indicating that there’s something on it Next create a Keyframe by clicking on the second frame (to the right of the grey one) and pressing F6:

-flash has automatically carried your circle onto the second frame of the movie.

Move the circle by clicking and dragging on the centre of it – move it to another area of the stage; this is where the circle will appear on Frame 2.

Now to see the effect of what you’ve done, place the Playhead at the first frame by clicking at Frame 1, either on or above Layer 1. Press enter and your movie will play – it’s a bit boring at the moment but should give you a basic understanding of how the Timeline works.

Now export your movie either by pressing CTRL+Enter or choosing Control > Test Movie from the menu. You’ll see that your effect loops over and over again as the SWF continually returns to the start each time it finishes.

Experiment with the Timeline by selecting a frame further along (e.g. 10) and creating a keyframe there, then moving the circle again. You’ll quickly see that some sort of transition between the different stages in your movie is going to be necessary for smooth animation – this is where Tweening comes in! Which will be covered in-depth in another tutorial.