Adding animation to a web site can be a fun and effective way to liven thing up, and with all of the powerful capabilities of Macromedia Flash it¡¯s also practical in terms of speed and download time.

The Timeline is the heart and soul of creating animations in Flash.  It is essential that you become familiar and comfortable with this feature.

KEY TIMELINE ELEMENTS

Layers:  This panel is located on the left-hand side of the Timeline.  You use layers to control and organize your animations, and there are several options within it such as "Show/Hide All Layers," "Lock/Unlock All Layers," and "Show All Layers As Outlines."

Playhead:  This is found near the top of the Timeline, and is used to view the frame you are currently editing, or for quickly reviewing what you have already created.  You simply slide, or "scrub" it to the desired location.

Keyframe:  A Keyframe is a specific moment in your animation.  You can insert a blank Keyframe, or fill it with actions.

Timeline Header:  This is the total time bar for your project, broken down into seconds.  The longer your animation, the longer the header will be.

Other:  At the bottom of the Timeline, you will have three boxes - "Current Frame," "Frame Rate," and "Elapsed Time."  These will tell you which frame you are working on currently, the frame rate at which your whole animation will play, and how much time has elapsed from the first frame to the current Playhead location.

CREATING YOUR FIRST FLASH ANIMATION

For the purpose of this article, we will do a simple frame by frame animation using Keyframes.

1. Click on File --> New... --> then highlight 'Flash Document' and click OK.  This will open a brand-new document for your creation.

2. To change the size of the document, click on the 'Size:' box on the bottom of the screen.  It will more than likely be set to a default of 550 x 400 pixels.  Click on the box and change the picture size to 400 x 200 pixels.  *Note: You can also change the frame rate from the same screen.  Frame rates determine the number of frames your animation will play per second, and is directly related to how long it will play all together.  You can leave it at 12 frames per second for now.

3. To change the background color, click on the color square next to the word 'Background' on the bottom of the screen.  Select any color you like.

4. Notice that in your Layer panel, "Layer 1" has been automatically created for you, and your Playhead is currently on the first blank Keyframe - Frame 1.  This is your animation starting point.

5. Select the BRUSH tool from the "Tools" menu on the left hand side of the screen - *Hint: the Brush tool button is a picture of a paintbrush.  Once you click on it, you will notice another "Options" menu pop below the Tools.  There, you can choose the thickness and shape of your brush stroke, as well as the color.  Choose a color that will look nice against the background color you chose earlier.  You should also select one of the smaller brush sizes for easier writing.

6. We are going to be writing and animating the word "HELLO" in all capital letters.  With your brush draw the first line of the letter "H" ONLY.  Notice that the blank Keyframe in Frame 1 has a black dot in the middle of it showing you that it contains some content - the line you just drew.

7. On your Playhead, select Frame 2, right-click, and "Insert Keyframe."  You can also use the F6 key as a shortcut for future reference.  The line you just drew has been copied into the new Keyframe.

8. Select your Brush tool again, and draw the second vertical line for your "H" letter.

9. Now you will select Frame 3 on your Playhead, and insert another Keyframe just like you did in step 7.  Each time you add in a new Keyframe, everything you drew already will be automatically copied into the new one.

10. Select your Brush tool again and draw the final horizontal connecting line for the "H."

11. Repeat the process of inserting a Keyframe for every line you draw in the word "HELLO."  Each line should be in its own Keyframe.

12.  Once you're finished drawing the whole word press the "Enter" key on your keyboard for a preview of your animation.

You just made your very first Flash animation!  Congratulations!!  If you want an even better view of your new creation, click on "Control" at the top of the screen, and select "Test Movie."  You will get a looped playback of your movie.

This is a basic example of a simple Flash animation, but it's a great place to start.  There are a lot of really great books available at your local book store or library that can teach you how to create even more fun and exciting animations.  You can also check out Macromedia's online Flash Support center for tutorials, troubleshooting, and help.