Flash 101 - Part 2: Lights, Camera, Flash!

Lights, Camera, Action!

Now that you know the theory, it's time to put it into practice. Over the next few pages, I'm going to walk you through the process of creating a simple Flash movie, exporting it, and embedding it in a Web page. With the exception of the technique used to create the animation, this is the typical process you would use to create any Flash movie.

If you haven't already done so, start Flash with a new movie. Pop open the Modify->Movie box, and define attributes for the movie you're about to create; this includes attributes like movie width and height, background colour and frame rate.

For this next example, select a width and height of 300x300 pixels. Leave everything else the way it is.

Back on the Stage now. Select frame #1 on layer 1 and then draw a square box in the work area. Fill it with a colour you like using the Paint Bucket Tool.

Next, select frame #2 and insert a new keyframe via the shortcut menu.

Notice how the playhead (the red bar on the top row of the timeline) moves to frame #2, indicating that frame #2 is now the active frame.

Select the box you just drew and move it a few pixels to the right.

Repeat this process for frames #3 through to #5.

Now, at frame #6, insert a new keyframe, and move the square a few pixels down. Repeat this process for frames #7 through #10.

At this point, you've created your first animation sequence - you just don't know it yet. To test it, select Control->Play, or tap the Enter key. Flash will play the animation clip for you by displaying each frame in succession - you should see something like this:

Note that you can loop the clip via the Control->Loop Playback command.

At this point, you should know that what you've just created is a traditional frame-by-frame animation, in which every single frame is a keyframe. This is not a technique you'll be using very often, since Flash comes with powerful "tweening" functions that can automatically generate many of the in-between frames of an animation clip. Tweening, together with other animation tips and tricks, will be covered in future articles.

Now, let's add something else to this movie. Create a new layer via the Insert Layer button (bottom right of the timeline) and name it "dot" by double-clicking on the pencil icon (while you're at it, change the name of Layer 1 to "square" as well). Select frame #1 on the new layer, and draw a circle in the top right corner with the Circle tool.

Next, select frame #2, select the circle you just created with the Arrow tool and move it to another random position on the Stage. Repeat this process for frame #3 through #10 on layer "dot". When you play the clip, you'll now see something like this:

Yes, it *will* give you a headache if you watch it for too long.

Copyright Melonfire, 2000. All rights reserved.