Recently I have gotten in to animation. I’ve known how to use Adobe Flash basics since before Adobe bought it from Macromedia, but I never got around to animating anything substantial. Well that’s changing. Recently I’ve been in contact with some app developers and they asked me to create a demo animation for them.

I’ll be writing some articles explaining the basics of animation from moving simple shapes to drawing frame by frame animations. Flash animations can also be interactive so I will show you how to create buttons and interface objects. Flash was used to create whole websites in the past but since the dawn of html5 and Java it’s been pushed to the side as those are far better options for doing that sort of thing. Still for animating nothing beats Flash for me.

The tools

Before you can start animating you need to get familiar with Adobe Flash and it’s environment. The tools we are going to focus on are the pencil, brush, pen, fill bucket, transformation and shape tools.

How shapes are constructed

Flash uses strokes and fills to create shapes and lines you can manipulate. That’s important to know because both act differently in different circumstances. To explain select the shape tool (doesn’t matter what shape) and draw a shape on your art board. Now select the selection tool (the black arrow) and click on the center of the shape you drew. You will notice that little dots will cover the center of the shape. That means you have selected the fill of the shape. Now click on the stroke. Same thing happens only now you have selected the stroke. If you double click on the shape you will select both. Both can be manipulated in the properties panel on the right.

You can delete either and the other will stay put on the stage. The colors of both are determined on the left side with the color selector. The one with the little pencil determines the stroke color. The on with the little color bucket determines the fill color.

BE WARNED! Flash may be a vector program but in most instances it does not act like Adobe Illustrator. If you draw another shape on the same layer overlapping an already existing shape it will basically delete anything under the new shape. That can be used to your advantage (seeing as flash does not have a pathfinder tool) or it can cause some gray hairs if you are not careful.

The pen tool

Strokes can also be drawn with the pen tool. For the most part it acts exactly the same as in Photoshop and Illustrator. The same can be done using the pencil tool if you want to freehand the stroke. The pencil can be set to straighten or smoothen out your lines automatically. If you don’t care for those options you can set it to ink.

The fill bucket

Once you draw a shape with the pen or pencil tool you can use the fill bucket tool to fill in the color. At the bottom of the tools panel you can set the gap options of the bucket tool. If the gap option is set to “don’t close gaps” the tool fill not fill in anything if there is a gap in your shape.

The brush

The brush tool is a way to draw fills (not strokes) freehand. It’s a bit more flexible than the pencil tool since it can be pressure sensitive and has a variety of different tips to use.

Transforming

If you wish to change the size of anything on the stage you need to select it with the transformation tool. Then select a corner and drag out the selection to the required size. The same can be done in the properties panel or the transform window (window/transform).

The timeline

That covers the basic tools of Flash. But we still want to make an animation. How do we doo that? At the top (or bottom, depends on your layout) you have a timeline. That timeline will contain all the animation frames and layer we will need to create our animation. To create a new frame you select the frame where you want to put it and press f5. To add a new key frame you press f6 or f7 to create a blank key frame. Key frames are frames that define a change of properties or a copy of an object in the timeline.

Sounds complicated? Don’t worry I was lost the first time too. You’ll get the gist of it through experience and trial and error.

Let’s try it out

Let’s make a simple frame by frame animation to get you started. Draw a shape on the left portion of the stage in the first frame. Now create a new key frame on the second position with f6. With the second frame selected select the entire shape and move it a bit to the right (press the right arrow button 5 times for example). Create another key frame and repeat the process a few of times (you need 24 frames for 1 second of animation).

When you have these frames created your shape should now be on the right side of the stage (or at least more to the right) in the last frame. Press enter to start the animation. To save the animation as a .swf or .html file you first need to save your project (file/save as) then publish it (file/publish). The .swf and .html files will be saved in the same folder as your project file (.fla).

There you go. You just created your first frame by frame animated object. There is a WAY easier way to animate the same thing we did now but I made you do this so you could understand the basics of timeline frames. We’ll cover the easy way with motion tweens in the next blog :).

If you like what I do and appreciate my posts and freebies, please consider supporting my work.