Creating

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 all animation.

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 frames.

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 frame.

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 Disney cartoon).

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 script"

Examples of the three symbol types:

Graphic:

Left 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.