First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Brendanharris90 | Website: http://www.xenonmovies.tk

[if !vml]FBF Animation tutorial[endif]

My website

FBF (Frame by frame) animation tutorial by Brendan Harris aka snoophogg


Warning: you should be familiar with most of the flash tools.

1) There are many flash programs including flash dream weaver and cold fusion but make sure you have opened the right one, I have flash mx.

2) Draw a simple stickman using the brush tool located on the left of the stage. ig you can't see the toolbox, look at the top of the screen and press window and then make sure toolbox is selected with a tick

3) Next insert a layer, this will be for the other stickman. Reason for layer: Layers are like tissue papers, it is a way of organizing flash movies easier. If you have one object e.g. a tree and want a person to walk past it you would draw the tree on one layer and insert another layer for the person to walk past. It makes it easier to edit things, you will understand better when you start to get more into flash. When ever you have two objects on the stage always put them on different layers, it will be far far far less work.

4) Your stage and timeline should now look like this

5) OK your doing great so far, now right click the black dot which is in the timeline on layer 1 and you should have a number of options for you to do. Choose "inset frame". Next right click the same black dot again and click inset key frame.

6)Now rub out the stickman which is on layer 1 completely, Leave the stickman on layer 2 for now. Click which ever onion skin button you want, the onion skin button is for seeing where you last drew the picture. So for example, if you had a man dancing and you rubbed him out but you couldn't tell where he was before, you would use this tool to see where he was previously. click the button and you will understand what I mean..

7) Now that you can see the outline of the stickman from frame 1, draw the stickman in a different position. for example, if the stickman was standing up straight and you wanted him to kick then slightly move his leg up a bit. Just redraw the stickman except with his leg up a but

8) Now repeat this process again by inserting another frame, then a key frame. Next erase the stickman on frame two which you just drew and draw him again on frame 3 in another position. So let me explain this a bit better. If he was standing up straight on frame 1, and he moved his leg up 25 degrees on frame 2 then you would draw his leg up even more further up to his leg on frame 3 because you want him to look like he's kicking his enemy.

9) Were nearly finished, so stay awake, I apologize again for this long tutorial, I just want you to understand flash animation.

10) Now insert another frame and key frame for frame 4. The stickman on layer 1 should of reached near stickman 2 head by now. Click on layer 2 just by clicking where it says "layer 2" near the timeline, this will make sure it's selected. Now that the stickman on layer 2 is selected rub him out and draw him again flying backwards. So that he looks like he's been hut with a harsh Jackie Chan kick.

11) Insert another layer. To change the name of the layer right click it and go to properties (I think), I can't remember because I don't have flash at the moment, this is whole tutorial is written from memory. So change the name of layer 3 to blood so you can tell what's on what, you can also change the name of layer 1 and 2 if you want.

12) Animate the blood the same way you have animated the stickman and you should now have a stickman getting kicked.

So there you have it, a Long frame by frame tutorial on how to animate in flash. If you didn't understand this tutorial then i shall give you links to other tutorials which might help you, if your still having trouble then just e-mail me, my contact info is on My site and on the contact page. Leave a message in my guestbook to tell me what you thought of my tutorial and my site.

Good luck!

[if !vml]Tips[endif]

1) Make sure you cartoon has good smooth animations, to achieve good smooth animations you need to make more frames in your fighting human moves. For example if a person was going to kick someone you wouldn't let the stickman's leg reach his enemy's leg with one frame, you would slowly let his foot reach his enemy's head so the stickman's foot would probably reach his enemy's head at about frame 5. I'm kind of bad at explaining things but you will understand better when you start to learn flash yourself.

2) Be patient, don't rush your flash movies, good things take a long amount of time.

3) Don't let your friends put you down, if you make a movie and show your friends and they say it's crap don't stop animating, keep practicing, They don't know how much effort is put into animating so they can't completely judge your movie yet.

4) Try different styles of animations, if you can't make stickman cartoons (like me) then try anime cartoons, anime is a Japanese style of animation, look up the word on Google to find more info about anime .

5) Always make a preloader for a movie/game. A preloader is just a loading screen just like when you play a game on your console at home. Here is a helpful tutorial for creating a pre-loader. http://www.newgrounds.com/portal/view/175909 , if you are struggling with this tutorial then download the new grounds pre loader located here

6) Always add sound to your movie's, no one likes a movie without sound. To learn how to add sound to a movie go here

[if !vml]Another frame by frame tutorial

http://www.newgrounds.com/portal/view/180407 - This tutorial shows you how to do many things in flash including animating, definitely check out this place.

My website - If you have any trouble, go to my website and check out my contact information.

» Level Basic

Added: 2005-06-01
Rating: 4 Votes: 20
» Author
blah blah
» Download
Download the files used in this tutorial.
» Forums
More help? Search our boards for quick answers!
Featured Flash FLA
» Author: Inocreato
» Title: RaiseTheBlocks
» Description: Raise all the blocks to win the game
Featured Sound Loops
Image for equalize

Audio Player

» Author: TomCat Carty
» Title: The Wood
» Description: Just a little game ending or it can maybe be looped. Recorders with music box and percussion to give the feel of well, I don't know, the woods? Free to use, just credit me. thank you
Latest Font
» Author: Fábio FAFERS
» Description: I created this font for free use. Everyone can apply it in personal or business texts. Its free, but I want to be communicated in case of business use. Donations are accepted to keep the project of free fonts alive! Thank you all
Featured Sound Fx
Image for equalize

Audio Player

» Author: Davisigner
» Description: Hmm... what to say about this one? It's reminiscent of the closing notes of the opening music from the Three Stooges done in a church organ style with a closing cymbal crash. I'll give this one away gratis, but feel free to check out my free loops and potential upcoming license-mandated ones over in the respective part of Flashkit.