Animate characters in Flash 45

Illustrator and Flash

Animate
characters
in Flash
Character animator
Tom Baker takes you
through the basics on
how to import, set up
and animate simple 2D
characters in Flash
Life is about progression. For those artistic types out
there, your first dalliances into creativity might have been
scribbling on a piece of paper with a pencil or crayon. Over the
years, you may have progressed from pencil to pen, from pen to
paint, and finally from paint to the graphics tablet. You can now
produce images that would have dazzled your crayon-wielding
former self, but why stop here? It’s now time for you to take the next
step: to make your characters move.
This project is ideal if you can create characters in either
Illustrator or Photoshop, but have limited experience with Flash.
Over the following steps, I demonstrate how simple it is to set up
character files and simple animations in Flash, with minimal need
for redraws using character ‘setup’ files created in Illustrator.
Here, I use my file, skullman.ai, which you’ll find on your
cover disc – but there’s no reason why you can’t use your own
character. Detailed knowledge of Flash isn’t required, but before you
start it would be helpful to be familiar with basic Flash CS3 and
have some knowledge of how to make symbols, the timeline,
onion-skinning, and how to navigate between symbols.

On your disc Skills

Tom Baker You’ll find the Break your
London-based resources you need characters into
Baker is a character to work along with moveable parts
animator whose this project on your Work with shape 01 Open up skullman.ai in Illustrator. This file contains
clients include
Cartoon Network,
cover disc, in the
Resources folder.
and motion tweens a character ‘setup’ file – similar to those that might be used at 02 Open up Flash. So that you can follow my
Nickelodeon, Master keyframe Cartoon Network, for example – including a head, body and screenshots, set the workspace to the default layout
Channel 4, Sony animation in Flash limbs with various facial expressions, arm positions, leg (Window>Workspace>Default). Then select Modify>Document
and Green Thing. positions and hand positions. Essentially, there are enough to open the document Properties window, and fix the screen’s
www.baker parts here to get started with animating in Flash, reducing the dimensions to 1024x576 pixels and frame rate to 25fps. You’re
animator.com need for redraws to a minimum. now ready to import the assets from skullman.ai on your disc.

www.computerarts.co.uk February 2010_ Computer Arts Projects

CAP133.tut_learnflash 45 11/1/10 3:08:2 pm

 46 Project two Diversify your skills

04 If any layer
is saved as hidden in
Illustrator, or falls
outside the artboard
bounding box, by
default Flash will not
import them. You can
choose to select
these hidden layers
by checking the
respective boxes.
Make sure the ‘Convert
Layers To’ dropdown
menu is set to Flash
Layers, uncheck
everything else, and
click OK.

03 Create a graphics symbol called ‘skullman’, into which you’ll import directly.
The easiest way to create a symbol is to draw a blob-shape, select it, and go to Modify>
Convert To Symbol. Now click File>Import>Import To Stage, and select skullman.ai. The
Import dialog box shows a list of all the layers in the Illustrator file, with a tick next to
the layers that will be imported.

06 You’re now ready to convert the body parts into graphics symbols. Remember, it’s important to
always use graphics symbols in animation. Essentially you will be repeating the same process with each body
part, and the simplest to start with is the body itself. Click on the body group, and convert it into a graphics
symbol called ‘body’. Now hide all the layers except the body and the left arm, by checking them beneath the
eye icon at the top-left-hand side on the timeline.

07 You can now make the

strings. Strings are graphics
symbols of the various body parts
containing different frames of
animation. You can see some I’ve
prepared earlier if you open up
strings.fla on your disc, which is
a finished character setup of
skullman. Double-click on the
skullman symbol on the main
stage, and scrub through to view
05 You should now see the character and assets laid out in the same way in the sequences for each body
Flash within the skullman symbol. Notice how it maintains the same layer stack as in shape. For the first 50 frames the
Illustrator, with the same names, so that all the left arms, right arms, heads and so on symbols are looping, and from
are in the corresponding layer. By keeping your Illustrator files well organised in this frame 50 onwards they’re holding
way, you will save time setting up files in Flash. the same frame.

Computer Arts Projects _February 2010  www.computerarts.co.uk

CAP133.tut_learnflash 46 11/1/10 3:08:3 pm

 Animate characters in Flash 47

Moving multiple frames at once

Sometimes it’s useful to move several frames at once, such as when you’re creating
walk cycles. Select the Edit Multiple Frames icon beneath the timeline (next to Onion Skinning),
and go to Edit>Select All, to select the frames.

08 Now return to your working file and add some more keyframes to the timeline. Select frame 100
across all the layers, and go to Insert>Timeline>Frame. The left arm is a simple animation of three frames and
you want to put each of these frames in sequence. The easiest way to do this is to select the first three frames
on the timeline in the left arm layer, and convert them to keyframes by pressing F6.

Which symbol to use
When animating, always use graphics symbols. These enable you to view all the animation that’s happening within
that symbol. You can also choose whether to have the symbol play once, loop or hold on a single frame by selecting the symbol
on the stage, and choosing from the dropdown menu options in the Properties window.
09 You now have three keyframes, each with all three arms. Delete two arms
from each keyframe so the first frame has the straight arm, the second frame the
curved arm, and the third frame the bent arm. Turn on Onion Skinning (the icon at the
bottom-right of the timeline), and ensure you can see all three arms by dragging the
onion skin selection area at the top of the timeline (the grey area with two little circles).
Line up the arms so the top of the shoulder connects with the body for each frame.

10 You now want to convert this into a graphics symbol. Select the three
frames on the timeline, and Ctrl/Right-click and select Copy Frames. Create a new
layer also called ‘left arm’, and create a new symbol called ‘left arm’ (by drawing a blob
again, and pressing F8). Select it and double-click to edit the left arm symbol, and
then Ctrl/Right-click and paste the frames onto the timeline within the symbol. Exit
left arm, and use the Outline mode to line it up with the old left arm layer below.
11 Delete the old left arm layer, and repeat this process for the right arm and left hand. The head is
slightly more complicated and will involve placing string symbols within symbols. The head is essentially
composed of seven separate elements: the skull, sockets, pupils, blink, top jaw, bottom jaw and brows, as
illustrated in the head.ai file.

www.computerarts.co.uk February 2010_ Computer Arts Projects

CAP133.tut_learnflash 47 11/1/10 3:08:4 pm

 48 Project two Diversify your skills

12 There are different ways to do this stage, but it might be easier to work from
the head.ai file, as the different head positions are already lined up. Delete the existing
heads layer in the skullman symbol, and create a new layer, ‘head’. Now create a
symbol also called ‘head’, and import layers head 1, head 2, head 3 and head 4 (but not
‘elements’) from heads.ai – but this time import them as keyframes (select Keyframes
from the Convert Layers To dropdown menu in the Import window).

Using shape tweens to create inbetweens 13 You should now have a four-frame head string. Break the groups (Ctrl/Cmnd+B) on each of these
This project focuses on the use of motion tweens, but what about shape tweens? layers, and start to separate out the head elements onto different layers. You should have a layer each for the
Shape tweens are difficult to use well, but allow one shape to change into another without the
brows, lower jaw, upper jaw and so on.
need to redraw it. In my example file, I’ve used shape tweens to go between the two brow shapes
on the brows layer. Double-click the symbol Brows Copy to study the effect.

14 Now create symbols and strings for the head parts in the same way as you
did for the body parts. Some of these are the same for each frame, such as the pupils
and eye sockets. The skull layer has two different shapes for the happy and sad
expressions, and likewise with the lower jaw. There are three different frames for the
brows and upper jaw. See my example in the strings.fla file for guidance.
15 You can now start animating. To see what’s possible, open up animated_skullman.fla. The easiest
way to make a character appear alive is to create blinks and eye movement. By separating the pupils onto
different layers and animating them with motion tweens (Ctrl/Right-click>Create Motion Tween) the eyes
appear to look around. Using my file as reference, animate the eyes and blinks.

Computer Arts Projects _February 2010  www.computerarts.co.uk

CAP133.tut_learnflash 48 11/1/10 3:08:5 pm

 Animate characters in Flash 49

16 Likewise, the character can appear to talk by moving the jaw symbols.
Create a rotation hinge about the top-left-hand corner of the lower jaw symbol by
selecting Symbol>Modify>Transform>Free Transform, and moving the white dot to
the top-left-hand corner. Now motion-tween between an open-mouth position and
closed-mouth, once again using my file as reference if need be.
17 By motion-tweening the other face symbols (brows, upper jaw) and changing the frame number, a
host of expressions can be achieved without the hassle of redrawing. If you look at frame 105 in my example,
it’s even possible to create the illusion of the head turning.

Bugs in Flash
Unfortunately, Flash is buggy. If you’re eagle-eyed you might be confused as to why I
split the top teeth layer in two at frame 80 in the head symbol, in animated_skullman.fla. This is
because dragging these frames onto the same layer no longer enables you to specify the correct
frame number for the jaw top symbol at frame 80. There’s no reason for this – it’s just a bug – and
one that can be simply fixed by separating the layers out.

18 Now return to the top level within the skullman symbol, and apply the same
principle to animating the body. To create the walk cycle, I simply positioned the feet
and legs I had drawn out in sequence, and moved the body and head accordingly.
Creating walk cycles requires a tutorial in its own right, but once again you can refer
to my example for reference.
19 Finally, import a background from the background.ai file to put the character into an environment,
and add simple shadows. For this, create a circle filled with a dark red colour from the background, and
reduce the opacity to about 30%. Convert the shadow to a symbol, and animate it with motion tweens to
follow the skullman character around. Now you’re ready to animate your own characters – have fun!

www.computerarts.co.uk February 2010_ Computer Arts Projects

CAP133.tut_learnflash 49 11/1/10 3:08:6 pm