How To Create A Simple Flash Animation

As we all know, one option for our final project is to create a flash project. So I decided to learn how to do a very simple Flash animation by messing around. First off, you should get familiar with the interface for Flash CS4. It’s quite similar to the other Adobe programs, and resembles a mixture of Photoshop and Premiere, in my opinion. Whenever you create a new project, click on “Flash file (Actionscript 3.0)”.

You have your tools on the extreme right hand side. Your timeline towards the bottom of the interface.

Your properties panel, which is directly to the left of the tools. And your actual workzone which is smack dab in the center.

Okay, so now that you’ve got the basics down, let’s create an animation. I created a little green man drowning and then a boat comes to save him. Please excuse my artwork, for I am a horrible artist. Notice that you have layers, much like Photoshop. For my layer 1, I imported a nice picture of a lake (go to File, Import, then Import to Stage). Okay, now I created two more layers. One for my little green man and one for the boat. I then clicked on the boat layer and clicked on the brush tool (same as in Photoshop) and drew the first part of the boat coming in. For the little green man, I did the same, I clicked on the layer for him and drew him in the water. See picture below for example. Another important note here is keyframes, which are in integral part of Flash. For example, my animation is about 30 keyframes. So right click, 30, for example and click “Insert Key Frame”. Do this for each layer as to have that image appear throughout the entire animation.

Okay, now to make the image animated. Click on the next key frame (example below…the key frame is highlighted in blue under the red playhead.)

Now right click and click “Insert key frame”. Do this for each layer. Now, click on your selector tool and drag the boat to the right a bit. Click on the brush and draw the rest of the boat. You’re going to do this in order to move the move for EVERY key frame that you want an animation to occur on. For the little green man, I redrew his arms after every other keyframe to make it look like he is really drowning by using the eraser tool, followed by redrawing his arms in a different position. After about 20 keyframes, the boat came through to the rescue and we have to draw our green man getting onto the boat. To do this, I erased him completely and redrew him. An image is below of this.

Over the next few keyframes, our little green man is in the boat. I redrew him standing straight as the boat reaches the shoreline.

Then, in the next key frame, I have him on the shore, and the boat no longer in moving. I then created about 4 more keyframes of the little green man jumping up and down, happy to have been saved by this little red boat. Then, click enter and voila! We can witness our animated boat saving our green friend.

Make sure you save as a .fla file before you export. Then, hit File, Export, then export the .fla as a .swf (so you can upload it to your website and show it off to your friends).

Congrats on your first animation! Hopefully it looks a little more artistic than mine! Check out the finished product on my website. Click here and click on Digital Composition, then How-To Blogs and look at DIY Blog 9.

Tiffany Nebraska


~ by spiffytiffy2009 on March 7, 2010.

%d bloggers like this: