I was so excited at Flash's quick and easy animation capability that I thought I'd share some secrets with you in a whirl-through-Flash tutorial. We'll glide over some important steps and leave some intuiting up to you, but hey, that's the best way to learn.

Though I'm geeky enough to make mini website "cards" for Christmas, I still need to doodle on paper to plan a project. That's the first step, or else you'll get stuck in the midst of layers, keyframes, symbols, and objects.

Huh? Read on.

Plan Your Movie

Before you even open Flash, draw your ideas on a piece of paper. We'll start with something simple, so save your dreamy aspirations for a future project and go with something easy. Once you've sketched your idea in a storyboard of sorts, note which graphics, text, sound, and motion you will need. Include notes to remind yourself what all the different doodles mean.

Flash can handle lots of different file types, but they differ between the Mac and the PC. Check in the Flash Help guide under Using Imported Artwork to see what works for you. I recommend GIF, JPG, and PNG. They're easier to compress, which shrinks your file size. Better yet, import vector graphics from Illustrator or create them directly in Flash.

Now open Flash, choose File, New to begin a new movie. Go to Modify, Movie to choose the size, background color, and frame rate of your movie. You are now ready to meet the components.

Flash Components

Flash combines theater with flip-book animation and adds it's own dash of fancy to make animation easy. Your work area appears as a big square in the middle of the screen. You can think of this as the stage where your characters-- or objects-- will meet, transform, and interact with each other and the audience.

Bring objects onto the stage or create them as you go. Store each object as a symbol in your library and you can use it over and over. This saves file size because you can modify a symbol a gazillion times, but only the original file and its changes are saved.

The timeline sits above the work area. Picture a flip-book. Each layer has a different action which, when flipped through, creates an illusion of motion. The timeline allows you to do just this in two different directions: through layers and through frames.

Each layer can hold a new image, or situation. They stack transparently on top of each other and offer you great control. To the right you will see a series of rectangles. These are the frames. Each frame represents a progression in time. So the simplest animation you can create would involve moving an object in a layer to a different spot in each frame. As you can imagine, this can get tedious. Fortunately Flash has a feature known as tweening that creates the animation for you. We'll get back to that later.

You also have a number of tools that create, modify, and arrange objects. Many of the tools' icons should look familiar to you, but trying them out will help you understand how they work.

Let's leave Flash features out for now so we can hurry and see something move.

Simple Animation Made Easier

We will make a simple animation the hard way and the easy way. This will give you an idea of how frames work and why tweening is your friend.

Double-click on Layer 1 (A) and give it a name. This is good practice as you may have a lot of layers to look after and good Flash housekeeping will keep you organized. Select the square button (B) from the toolbar on the left. Before you make the square, you can choose a color fill (C) and a corner radius (D) (to make rounded corners). I chose a radius of ten (E). Once draw your square, a black dot appears in the first frame of layer SQUARE. This is a keyframe.

Anytime you want to change an object, you need a keyframe. A keyframe will appear any time you add an object to a layer, but once you have an object, you can add as many keyframes as you need. Now go to frame fifteen (the numbers appear above the frames), click in the frame and press F6 to add a keyframe. This ensures that your square will exist for those fifteen frames. With frame fifteen highlighted, use the arrow in the toolbar to move your square to the right side of the work area.

Now click in frame two, press F6 to add another keyframe and move the square to the right a bit. You can use the arrow keys on your keyboard to make small and precise movements. Continue these steps for all the keyframes in between. Select the first frame and press Enter. You will see your square scoot across the screen. Wow! Now the best news-- Flash can do all that in between work for you with a tween.

Create a new layer by clicking on the little page icon with a plus under the layer area. Name it circle. Click in the first frame to make it active and select the circle button. Draw a circle on the right side of the screen. Go to Insert, Convert to Symbol, select Graphic, and name it circle. Now select frame fifteen, press F6, and move the circle to the left. Now double click on any frame between one and fifteen. Click on the Tweening tab (A), choose Motion (B), and click OK. Select frame one and press enter. Ta da.

Get Fancy

Not only can you get Flash to tween a motion, but you can make your images follow a path that you create. Any line or shape can become a path for your animation.

• Create a new layer and name it Loop.
• Select the first frame and using the pencil tool draw a triangle.
• Use the paint bucket tool to fill your triangle with a new color.
• Choose Insert, Convert to Symbol (F8), and give the graphic a name.
• Add a keyframe to frame fifteen by pressing F6 and move the triangle to the other side of the screen.
• Double-click between the frames and choose Motion from the Tweening tab.
• Select Snap to Guide at the bottom and click OK.
• Now right-click on the Loop layer and choose Add Motion Guide.
• Use the pencil to draw a big loop.
• Select the first frame of the triangle and drag it to the beginning of the loop. You will see a circle appear when the center aligns with the guide.
• Select frame fifteen and match the center with the end of the loop.
• Click on the dot under the image of an eye on the motion guide layer to hide the guide.
• Press enter to see your motion guide.

To get a bit fancier, you can choose a rotation in the Tweening tab.

Read the first Flash tutorial to find out how to embed this movie into your website and stay tuned for more Flash projects.

Once you get the gist of what the tools are for and what your options are, get cozy with Flash. Make up assignments for yourself if you don't have any. Find a holiday, a reason for an invite, an announcement, or a poem to illustrate and then get to work-- uh, I mean play. Have fun.