Working Example

The best way to learn something is through doing it. Let's build a simple example of a Web site splash page. Once finished, it will include two shapes and the text "Welcome" moving around the screen. To get started, open Flash 4 and make sure you have a clean working area. Just for style reasons, open the Modify> Movie menu and set the width to 400px, the height to 300px, and the background color to black. Now we are ready to create the first object.

Fig. 2 - Building our Circle symbol

Select the circle item from the toolbar and draw a small circle of any color (besides black) in your work area. Using the arrow item, select the circle and drag it to the top right corner of your work area so that it is outside the black background. This way the circle will not show until the animation starts. Now double click on the layer in the Timeline and rename it "circle." This will automatically create a keyframe at the first frame. Make sure the circle is selected and go to Insert> Convert to Symbol. Give it a name and leave the behavior as graphic. Creating symbols for the movie is that easy! To make the circle move, we need to use the "Motion Tween" functions built into Flash. Right-click or click and hold on the first frame and select "Create Motion Tween" from the popup menu. Now click on the box representing frame 25 and go to Insert> Keyframe. You can see that making a new keyframe copies the symbol into the frame. From here you can edit what the symbol will look like in this frame and as long as you have created the motion tween, Flash will make the inbetween steps of the animation for you.

Fig. 3 - Our Timeline

Select the circle and drag it to the center of the black box that is your work area. Double-click on the circle in its new position to open what is called the Instance Properties. Under the color effect tab, choose "Tint" and then pick a new color and adjust the settings until the preview on the left looks like you want it to. For my animation, I increased the size of the circle. To do this, make sure you have the circle in frame 25 selected and the Inspectors window open. Under the Inspectors> Transform tab is a scale feature. Change the percentage to 300 and then click on "apply" or press return. Now select the first frame in the Timeline and press return to preview your animation. To make this more interesting, add a keyframe to frame 15 and drag the circle to the bottom of the work area. Now preview your animation again. You can see that Flash will do everything to make your symbol reflect the changes you made to the last keyframe.

Continue on to see a sample of what we just made and review the animation steps.

Next: The animation steps