Often, especially in animation, it is useful to work
on a drawing from a still life, or a photographic study. I have
done this extensively during my "Oratory Hell 2" project.
Left is a little example of the process employed to create a
simple drawing of a cartoon car from a photograph. If you click
anywhere on the picture to the left it should fade into another
picture, taken later on during the process.
The process illustrated left:
First I opened a clear, crisp photo of Harris's entire BMW
Then I removed the background using a magic selection tool
(magic because it help select only edges)
I then placed this into my animation package (Flash5) and
traced the car (the red lines)
Then I added some more outlines of details
Using the eyedropper tool (colour selector) I created a gradient
that matched the photograph
I then outlined the reflection, filled it in using the colour
selector; only this time I removed the lines afterwards to give
a softer, more reflective look
Then I traced the hub-caps and placed them in separate symbols
on separate layer for easy animating later on.
One of the large difficulties with traditional animation
is keeping character design consistent. The effect of animation
is created by very quick, successive, images being flash on the
screen. A very simple animation can consists of three pictures.
Left you can see a very primitive and simple animation. The three
sections on the left are the three picture, or frames, played
in a loop on the right. As you can see there arrow head appear
to move to downwards over and over. This is the method behind
The above also demonstrates the problem of inconsistency. The
three sections on the left are not identical (ignoring the height
of the mark). The three arrowheads are different, and if you observe
the animated arrow head on the right you can see that it appears
to wobble a little as it goes down. This animation is called "frame-by-frame"
animation, because the movement is made up completely of different
In Flash, these frames should more correctly be referred to as
key frames. A key frame is a frame that is new; it is different
from its surrounding frames. In other words if I were to put my
moving arrow head on to a picture there would be two possible
way of doing this:
Key Frames Only
Frames and Key Frames
The black dots represent key frames on the timeline, while the
grey area represents frames. On the right I have introduced a
different layer, and under my original animation I have placed
a picture, this picture does not change during any of the 4 frames
of animation and hence it has one key frame (its appearance) and
then normal frames (it does not change).
The cruder version of the right places the picture in each key
The mixture of key frames and normal frames has many advantages
over the other. If I decided to change the picture in the background
I would have to go through every section on left version, however
for the right hand version I would only have to change one key
frame on the picture layer - and voila! Knowing these techniques
streamlines the production of full-length features (such a Walt
This leads to symbols, the most important part of making a Flash
animation for the web. A symbol (in Macromedia Flash terms) is
a graphical object, which can contain its own layers, and timeline.
There are two main advantages of using a symbol; the most obvious
one is in repetition. Suppose you want to draw a street with a
few streetlamps in it. You could draw the streetlamps separately;
but it is more likely that you would draw one and then copy &
paste it to a new location. What if you want to change the streetlamps
look? You would have to redraw one of them, and then copy &
paste it to the other locations.
There is better way. Draw the streetlamp once, and then convert
it to a symbol and copy & paste the symbol. What this does
effectively is it puts a placeholder in the scene that says "Put
streetlamp here" and so if you change the symbol, you will
change all your streetlamps at once. It is good practice to make
anything repeated (even if only repeated once) into a symbol,
this way if you want to change it (the streetlamp in my case)
you can do so very easily. Also it saves file space, which is
very important in web presentations.
There are three different flavours of symbol, known as "behaviours":
The Graphic Behaviour - the
most common type, the timeline of this symbol moves and stops
with the root (main) timeline
The Button Behaviour - used
for making buttons, with four key frames possible - normal,
mouseOver and mouseClick (these are the names I use for them),
there is also a key frame for the Hit area ( an invisible marker
for the boundaries of the button ). The timeline of the Button
Behaviour depends on the mouse.
The Movie Behaviour - this
is a graphic symbol, except that the timeline is independent
(it can play while the main timeline is stopped, or any other
combination). This is very useful for interactive Flash projects;
I use them mostly for the loading screen, because they can be
controlled through Flash's simple programming language: "Action
Examples of the three symbol types:
is the main timeline. Only one layer is populated - it is filled
with the symbol "Flashback", this allows easy scaling
of the entire scene; because it is contained in the symbol.
On the right it the symbol's timeline, as you can see the scene
is not zoomed in (enlarged) and the timeline is quite populated.
This shows the benefit of using a symbol. Symbols can be just
as complex as any root (main) timeline! But it has to be kept
in mind that too many layers slow down the playback. This slowdown
is mostly because the animation is rendered in real-time upon
playing. A nice way to get around this is to export the entire
root timeline to a video file (such as DivX AVI, or Quicktime
MOV). This allows for much more complex scenes, and much smoother
animation with higher sound quality, but the file size is usually
too large for a web presentation.