g Text Version
Beauty & Self
Books & Music
Food & Wine
Health & Fitness
Hobbies & Crafts
Home & Garden
News & Politics
Religion & Spirituality
Travel & Culture
TV & Movies

Bored? Games!
Take a Quiz
Rate My Photo

Natural Living
Folklore and Mythology
Distance Learning

All times in EST

Full Schedule
g Flash and Animation Site

BellaOnline's Flash and Animation Editor


The Flash Timeline

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 FlashR 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.

  1. 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.

  2. 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.

  3. Select the Rectangle tool in the Tools panel.

  4. Click on the Fill color box to open the Color Picker. Choose a green color from the swatches.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.


Add The+Flash+Timeline to Twitter Add The+Flash+Timeline to Facebook Add The+Flash+Timeline to MySpace Add The+Flash+Timeline to Del.icio.us Digg The+Flash+Timeline Add The+Flash+Timeline to Yahoo My Web Add The+Flash+Timeline to Google Bookmarks Add The+Flash+Timeline to Stumbleupon Add The+Flash+Timeline to Reddit


RSS | Related Articles | Editor's Picks Articles | Top Ten Articles | Previous Features | Site Map

For FREE email updates, subscribe to the Flash and Animation Newsletter

Past Issues

Printer Friendly
tell friend
Tell a Friend
Email Editor

Content copyright © 2015 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.


g features
Subtle Animation Website Trends

Wix Editor - Background Video

Video on Wix Websites

Archives | Site Map


Past Issues

Less than Monthly

BellaOnline on Facebook

| About BellaOnline | Privacy Policy | Advertising | Become an Editor |
Website copyright © 2016 Minerva WebWorks LLC. All rights reserved.

BellaOnline Editor