North Georgia Technology Fair 2006

Shelby the Bear
Animated Graphic Design
3–4

by Rosa Westfall

¨

Introduction

In my project, the three concepts that were explored were:
1.	write down what I did (documenting the process),
2.	the right tools for the right job, and
3.	animation.

I documented the process so that anybody else could make their own characters. It's written below.

I learned how to use two software packages. Adobe Illustrator was used to draw the characters first. This program has tools that are easy to use for drawing. Then I used Macromedia Flash to make the animations. It has the programming stuff and timeline that is needed to make animations.

I learned about lots of images viewed along a timeline. This is called animation. It is the same thing as a thumb book. The images look almost identical except one small thing is changed in each one.

The Process

Here is basically what I did (overview). First, I had to figure out what to draw and how to draw it. I read and used paper and pencil for sketches:
1.	Research the subject.
2.	Plan what emotions to illlustrate, and how their expressions will look.
3.	Decide what face parts need to change to make the different expressions.

Then I used Adobe Illustrator:
4.	Draw the characters.

Then I used Macromedia Flash:
5.	Animate the drawings.
6.	Test the animations.

I decided to make up a story with our animated characters in it (my brother made one, too — Murray the Squirrel). I didn't have time to do it all by myself, but I put it here to show how our animated characters could be used (step 7, below). If I knew what story I wanted to tell from the beginning, I would research how the characters should look, and plan the expressions that would be needed (steps 1 – 3, above).

Below are the details for each of the steps above:

1.	Research the subject.
a.	read books on how to draw cartoons
b.	ask an artist on how to make different expressions
2.	Plan what emotions to show, and how their expressions should look (sketches).
a.	surprised
b.	angry
c.	scared
d.	in love
3.	Decide what face parts need to change to make the different expressions.
a.	mouth
b.	face shape
c.	eyes
d.	eyebrows
e.	a prop (something else that is different from character to character)
4.	Draw the characters.
a.	Draw each face part  (a –e) on a separate layer
b.	Draw the alternate views of the face parts that change on separate layers
5.	Animate the drawings. For each character, do the following:
a.	put the drawings of face parts of one expression in separate layers in the first frame (the beginning of the expression) of the timeline (each character has his own timeline; it will have all the frames and layers for that character).
b.	for each layer that has a changing face part, insert a keyframe about four frames after the first frame, in the fifth spot (for each layer that doesn't have a changing part, just insert a regular frame in the fifth spot)
c.	in the keyframe, put the alternate view of the face part (the end of the expression)
d.	in the frames between the first frame and the fifth frame, add a shape tween (it automatically fills in the steps in between, and saves a lot of time!)
e.	make a keyframe in the next space (sixth frame) and duplicate the first frame. This will be the beginning of the next expression. Repeat steps b – e for each expression.
6.	Test the animations. For each character, do the following:
a.	make three extra layers, one each for actions, labels and buttons
b.	set up the "actions" and "labels" layers
•	in the action layer, insert a keyframe at the the ending of each expression; put a "stop" action in the first frame, and in each keyframe
•	in the label layer, insert a keyframe at the the beginning of each expression; name each one the name of the emotion (the first frame should be called "normal")
c.	make the test buttons (each test button has its own mini timeline four frames long; these test buttons will go in the first frame on the buttons layer, and show in all the frames)
•	draw a rectangle with the word of the emotion in it, and put it in the first frame of the button ("up" frame)
•	repeat this drawing in three other frames — one for when the mouse is hovering over the button ("over" frame), one for when the mouse is clicked down on the button ("down" frame), and one for where the active space is ("hit" frame)
•	change the "over" and "down" frames slightly, so the user knows that they have discovered a "hit" space (in ours, we made the rectangle different shades of the same color)
•	tell the button what to do (write the script). For example, the "surprise" button will make the playhead in the character's timeline go to the frame labeled "surprised" and play until it reaches the first "stop" action that it comes to; then it will stop.
c.	test the animation (click on the test buttons to see if they go to and play the correct expressions)
d.	make adjustments as needed

Here are the details for the story part:

7.	Make a story with the animated characters in it (the story will have its own timeline).
a.	place the scene in the first frame of a layer called "scene" (our scene are some bushes and trees)
b.	place the characters in the first frame of another layer, called "characters" (remove the test buttons before you put the characters in your story)
c.	make a layer for the text and buttons in the story (we called it "text")
d.	make "label" and "action" layers
e.	write your first paragraph in the first frame on the text layer
f.	make an invisible button (it has its own mini timeline four frames long)
•	duplicate one of the test buttons
•	remove the name of the emotion in all four frames ("up", "over", "down" and "hit")
•	remove the rectangle in the first frame only
g.	place the hidden button on top of the "trigger" word or object in the text/button layer (in our first paragraph, it was the word "fuming")
h.	write the script for the button (we told the playhead to go to the "angry" frame in Murray's timeline and play until it reaches a "stop" action in Murray's timeline)
i.	make the arrow button (it has its own mini timeline four frames long)
•	draw an arrow in the first frame
•	duplicate it in the "over" and "down" frames, making it slightly different so users will know they have discovered a "hit" space.
g.	place the arrow button in the first frame on the text/button layer
h.	write the script for the button (we told the playhead to go to the next frame in the story timeline)
i.	make another keyframe in the next frame of each layer of the story timeline
j.	repeat steps steps e – i, replacing the paragraph in each new keyframe with the next paragraph of the story. Change the script on the invisible button so that it goes to the correct emotion of the correct character to show the new expression. Don't forget to move this button so that it is on top of the "trigger" word. Also, change the arrow button script so that it goes to the next keyframe. On the last keyframe, you'll want this arrow button to go to the first frame to start over again.