The Flash Timeline - Flash and Animation

When creating animations, slideshows or other Flash based projects, you will find that most of the work is done on the Flash Timeline. So what is the Timeline and how do we use it?

Flash Timeline

Our sample project is still blank, so the Timeline is empty. Let's add a few things to the Flash^R Timeline as we take a tour.

In Flash we create a frame-based linear animation. You can think of the timeline as frames of a movie. However, instead of the frames in a vertical orientation as in the old film strips, our frames are horizontal along a linear timeline. Right now, we have only one empty frame on our Flash Timeline. Let's add 50 frames.

Click on the frame under the number 50 on the Timeline to select that frame. Right-click and choose Insert Frame from the pop-up menu.

Now our Flash project has 50 empty frames and one layer named Layer 1. That's not a very descriptive layer name. As you work on your Flash projects, you will have many layers. Try to give each layer a name that indicates what objects are on that layer. Let's rename Layer 1 to "bg" which is an abbreviation of background layer.
Double-click on the layer name and type "bg" into the text area.

Let's fill this bg layer with green color. Select the first frame on the Timeline. As you do this the Playhead (pink rectangle over the frame numbers) moves back to the first frame. The Playhead indicates which frame is the active frame.
Select the Rectangle tool in the Tools panel.
Click on the Fill color box to open the Color Picker. Choose a green color from the swatches.
Click on the Stroke color box and choose the null setting (white box with red diagonal line).

Now we can draw a rectangle on the stage that will be filled with the color green and will not have a stroke around the edge.
Beginning at the upper corner of the stage, click and drag to draw a green rectangle. Now switch to the Selection tool and click on the rectangle to select it.
Open the Properties panel where we can set the dimensions for our rectangle.

As you can see, the rectangle that we drew on the stage is called a Shape which is the most basic type of object in Flash. We will soon create other types of objects.

The Fill and Stroke boxes in the Properties panel reflect our color settings. We could click on either of these boxes to change the settings. Because we have the Stroke color set to null, the Stroke controls for styling the stroke are unavailable.

In the Position and Size section of the panel, we can adjust the size and position of the selected object on the stage - the rectangle. We want the rectangle to cover the entire stage. Therefore, we need to resize the rectangle to the same dimensions as the stage - Width 1024 pixels and Height 768 pixels.
In the Width and Height text boxes, enter the correct dimensions.

If you draw as poorly as I do, the rectangle is probably not directly over the stage. We can adjust the position by changing the X and Y coordinates so that the rectangle covers the entire stage. We will do that by aligning the upper left corner of the rectangle to the upper left corner of the stage.

If you don't have the ruler visible, click View - Rulers. As you can see, the upper left corner of the stage is at the 0 pixel location on the X and Y axes. Therefore, to align the rectangle, we will set its X and Y values to 0.
Type 0.0 in both the X and Y axes text boxes.

Next →

Join us in the Flash forum. | Join us in the Digital Art and Design forum.

|