[Macromedia Flash]: Basic Stickman Animation


Here I am again in my blog teaching you how to create a simple Stick man movement! When I say simple it is really simple, I just want you to learn what I learn from experimenting in Macromedia Flash so the GIF below will be the output when you follow the instructions that will be in the next paragraphs. By the way, I made my flash into GIF because i want you to see what will be the output after this blog post and I’m still not good in using Flash.


Well first if you haven’t used Macromedia Flash so Click “File” or (Alt + F) and then Click “New” then Choose “Flash Document”. I haven’t tried some other functions so… let’s stick with the Flash Document.

Creating a Scenery

By default your current is layer 1 and there is the Timeline and the Timeline is distinguished by frames, look on the image that there are 5, 10, 15 etc. in the Timeline that is a frame and are you thinking how many seconds does a frame does? Well, when you looked closely again below the Timeline there is a “12.0 fps” meaning 12 Frames per Second. If you want to adjust the Frames per Second double click that “12.0 fps”. Well this is Optional if you just want a simple Stick man animation without a fictional land to land on when their jumping. So choose the box option in the toolbox and for the colors(Below the View box) The white Pencil Icon(with a colored box beside) is like the border color of your specific shape or something like that while the Bucket Icon is for the color of the inside of a specific shape. In the image below my Border is Black while the Content is Brown.

Creating a New Layer

We will create a New Layer because we don’t want to draw the so called “Land” every frame so how do we create a new layer? Look at the image below. When you see this three Icons click the White flipped paper Icon and that is how to create a new layer. LOL

The Onion Skin

We need to enable Onion Skin before we start animating! So what does an Onion Skin do? Onion Skin enables you to see the previous frame with low opacity to ease our animation. So to enable Onion Skin Look at the image below again.When you see this three icons click the Icon which there is a Black and White paper combination. LOL

Drawing the Stick man!

Now lets go back when you clicked the new layer button you’ll be in the layer 2 right now. Well this is the most easiest part drawing the Stick man! Just draw a stick man using the brush tool and adjust the brush size. The Brush tool is beside the Yellow Pencil Icon.

Creating the Next Frame

Now when you’re done with the First frame of your Stick man Press “F7” it is a shortcut key to create a new frame. So when you create the next frame while the Onion Skin is enabled you will see the previous frame of your animation with low opacity and I have drawn the 2nd frame Stick man which is the Black Stick man.

For the 3rd frame you can still see the previous frames to know where to draw next so I will teach you a technique, when the Stick man jumps off  in a straight direction right click the 2nd frame(the 2nd box with a black dot in the Timeline) and then copy frame and then paste it(warning do not use CTRL + V, use right click then paste frame) into the 3rd frame then move it with the arrow keys to adjust it to its next movement. In case that you clicked somewhere and the stick man that you pasted does not move so click the 3rd frame box and move the arrow keys again. Now Continue doing that.

Now when if you decided to change the direction of your Stick man then Create the next frame and then Draw your desired Stick man and do the copy frame and paste frame and adjust. Like what I did below.

And then if you want to change direction again do the Draw the Stick man and then Create next frame and then Copy Frame and then Paste Frame and then adjust! and then and then and then LOL.

The Long Frame

Now Finally our Stick man landed so if you want to make the frame longer right click into your desired next frame so I chose 35th frame and right clicked there and next click Insert Keyframe. and it will create a long frame but it has no land to step on so click layer 1 and then right click again into the 35th frame and click Insert Keyframe to make it long too so that’s it the output is shown at the top by the way if you want to change the background color instead of white click the “12.0 fps” again or just double click it and then find the background color and then choose your desired color. So stay tune for the next Stick man animation madness >:)

Thanks for reading 😀


One thought on “[Macromedia Flash]: Basic Stickman Animation

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s