First time here? First time here? Newsletter Signup Newsletter
Search tutorials
Author: Robert White

Creating your First Cartoon

The Basics in Flash:

I’m writing this tutorial to teach you the basic skills you need to animate in flash. I’m assuming you know how to open a program so lets move on from there and get started with the good stuff of animation.

Things may be different if you have chosen Flash 8 Professional or Basic but its all pretty much the same. So keep that in mind if you can’t find a button that I’m referring too. I’m using Flash 8 Pro because it Owns. Lets get started:

First up we are going to create a scene then put a stickman in it and have an anvil squash him to a gory death. I’m going teach you keyframe animation and about how to use layers.

1> Open Flash and hit Create New Flash Document.

2> When you first install flash you get a screen full of windows and clutter. Close down all the windows you don’t need until you have a screen like mine:

3> Rename Layer 1 to “Background.” Right Click “Layer 1” --> Properties --> Name.

4> Now on the screen start drawing your background. I’m going to start by drawing a tree and showing you how to use some of the tools.

5> Click the Pencil tool and then select smooth from the tools options. Like this:

6> Now draw a tree in your document and some hills. (Doesn’t matter if you draw outside the box. This can be fixed with masks that you will learn about later on).

Note: It is easier to set the view to fit in window mode and not have your layers window up the top too long or else drawing becomes hard.

7> Now when you go to fill your scene it won’t work because the borders aren’t closed off. To do this Select the square box and choose no fill like so:

8> Now draw the square perfectly around the documents borders. If its out of place by a pixel then you will notice when you go to play it.

9> Now its time to fill the scene with colour. (We won’t get into shading and gradients yet just choose plain colours from the fill swatch and use paint bucket to fill. You may need to adjust the fill bucket in options from “Close Small Gaps to Close Large Gaps” If it still won’t fill try zooming out and muck around with the Close Gaps option until it does. Another trick is to break up huge filling areas with the pencil tool set to the colour you want to fill. Like for instance drawing lines from the top of the border in your sky to the mountain tops to break up the filling area for the blue etc.)

10> Now we will lock this layer so we don’t accidentally draw in it while we animate. We will also give it a set amount of frames to show in and create a new layer for the stickman.

11> On the layers window move down to about 100 frames and right click on the 100th frame and hit insert frame.

12> Now click on the dot underneath the lock symbol to lock this frame.

13> Create a new layer by clicking on the Insert Layer Icon and rename it Stickman.

14> Starting with the head using the circle tool. Draw a circle and fill it with whatever colour you want to the left of your document. (Note: If Snapping is annoying you go to View --> Snapping Then untick all the ticks.)

15> Now we are going to convert it to a symbol so we don’t have to keep redrawing it every frame. Using the Black Mouse Pointer in the tool set pull out a selection box around the head. Now right click the head and click on Convert To Symbol.

16> Name it Head and check the Graphic option. Like This:

17> Click ok. Select the Pencil Tool and open up the properties for it on the bottom of your screen and set the size and smoothing to what I’ve got in the picture:

18> Now minimize the properties tool bar and draw the body of your character. Remember use CTRL Z a lot to undo work that doesn’t look good. I sometimes end up drawing a body 4 times until I like it.

19> Now its time to start the tedious work of keyframe animation. Create a new keyframe in frame 2 by right clicking and hitting Insert Keyframe.

20> Now turn on Onion Skin so we can see what was drawn on the last frame. You will have to adjust the sliders so it only spans out one frame behind of the one your working on. Like this:

» Level Basic

Added: 2006-05-13
Rating: 7.67 Votes: 165
» Author
Robert White Qld Australia ColdHonor@hotmail.com
» 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.