James Clayton

Animation production diary

Aim 14/02: Begin to create/gather my assets such as graphics and audio.

Evidence:
The first asset Ill be creating is the background for the
animation. I will be using Photoshop for this. The first step in
creating this graphic was to set the canvas size to the same
size as my animation will be, 832x624.

Using the paint bucket tool I coloured the background in green, I did this so I can
put all other aspects of the graphic over the top of the grass.
To select the colour green I used the colour selection panel.

To add the paved area I made a new layer above the grass and
drew the concrete out using the line tool and then filled the
empty area with the paint bucket tool.

To create this building I used the line tool, fill tool and the
perspective tool. The perspective tool allows you to adjust the
rotation and perspective of a graphic so that it looks like it is on
an angle. I used this tool to create the doors.

1
James Clayton

These are all the layers I have so far. The grass and concrete layers
are locked because I dont need to edit them anymore.

This is the finished background graphic for my

animation. I completed the rest of the drawing such
as the track and the lights using the shape tool and
the text tool for the numbers. I then rotated the
numbers using the free transform tool.

These are all of the different layers that make up the background
graphic.

To complete the graphic I saved it as a PNG. I also saved a

Photoshop copy so I can come back and change it if needed.

The next graphic I began working on was the orange character. This
is what it currently looks like with just the body and face. Everything
here was made using the circle shape tool, except the mouth which
was drawn on with the brush tool. Each aspect of the character is on
its own layer.

This is the now completed character. To make it easy to animate I

will now make each separate aspect of the character a separate
image. Im doing this so I can use the bone tool to animation the
character.

These are all the aspects of the orange

character. I will now begin to create the
sugar cube character.

2
James Clayton

Just like I did with the orange character I split the sugar cube
character into separate limbs, this is the body of the character. I
will be using the same arms for all characters but the legs are
individual to each character because their shoes are the same
colour as they are. To make the sugar character I only used the
shape tool. The body is a square and the eyes are made up of two
different coloured circles.
This is what the very basic body shape of the last character
looks like. I have to remove the top off this character in the
animation so I will be making that a separate image. This so
far was made using the shape tool. Too ovals for the top
and bottom and then a rectangle for the middle.

To add this white stripe going around the body of the

character I used the polygonal select tool to select
the area and then used the paint bucket tool to fill it
in.

To add the text I simply used the text tool to type

out the letter and then used the free transform
tool to rotate and move it into position. I
repeated this process for all three letters I then
rubbed out the part of the C that extended past
the edge of the character.

This is the lid which goes on the cola character. It was

made using the shape and paint brush tool.

3
James Clayton

This is what the legs look like for the cola character, they are the same as the
other characters legs but are red.

All of the graphics are now completed except for the starter person who starts the race.

Learnt:
Completed almost all of the graphics for my animation.

Aim 15/02: Continue to create my graphics and begin my animation.

Evidence:
Before I can start on my animation I need to create the starter
character.
To create the body of this character I used the shape tool to create
a simple oval shape. I then drew the darker lines of the body using
the line tool. I then selected the area around the body of the
character and deleted the excess from the lines. To create the eyes
I used the same technique as with the other characters. This can
now be saved and the legs can be created.

As all the characters legs are identical I just have

to change the colour of the shoes to make them
match the character. To do this I got the legs from
the cola character and selected the shoe using the
lasso tool. Once the shoe was selected I went to image, adjustments, hue/saturation. This
opens up a window where you can adjust the colour of the selected area.

4
James Clayton

Here you can see the hue/saturation window and the

selected shoe being changed. Once I adjusted the
colour to match the character I clicked OK to confirm
the changes.

The last graphic I have to create is the starter gun. As this is for a childrens animation the
gun wont have any detail on as that wouldnt be appropriate.

These are all of the graphics I will use in my

animation, they are saved in a separate folder
called animation assets so they can be easily
found.

I can now start work on my animation. The first step was to open
flash and create a new Actionscript 3.0 project and change the
stage size to 832x624. I can now begin to import my assets and
create appropriate layers.
To import my background onto the stage I went to
File, import, import to stage. I used import to stage
as it automatically imports the graphic onto the stage
so just removes one extra step of me adding the
imported graphic to the stage.

I renamed the layer Background and locked it since it wont need

to be edited anymore.

Before I begin to add character I need to add my logo which introduces the animation. To do
this I created a very quick logo on Photoshop and then imported it into the Flash project on
its own layer titles Logo. To make the logo stay on the screen I went to frame number 60
and pressed F5, this creates a new frame and fills the gap between the first frame and this

5
James Clayton

new frame with whatever is on the first frame. Once I had done that I converted the logo to
a symbol so that I could add a motion tween to it. To add this motion tween I right clicked
on the logo and selected create tween. I then plotted the movement of the logo along the
60 frames which I previously dedicated for the logo.

Now my background and logo introduction are completed I

am able to start adding and constructing the characters. The
first character I put together was the Cola Character. I did this
by importing all of the parts of the character into Flash and then converting them into
symbols. I added the body onto a new layer and double clicked on it, doing this means you
can edit that character and add new layers without it clogging up the main layers.
This is what the character is currently made up of, 6 different layers
that all contain individual body parts.

I will now repeat this process for all the other characters.
Heres the orange character after it was constructed.
It has the same layer setup as the Cola character in that each
aspect that makes up the character is a separate layer.

These are all of the characters which will take part in the
animation. They are all constructed the same way which
means they can be easily animated using the bone tool. All
the characters are also on their own layer so they dont
overlap.

6
James Clayton

All of the characters are now positioned in the correct

place on the stage for when I animate them walking on.
The next step in the production of my animation is to
animate the characters. The first scene is them walking
onto the stage and warming up.

Before I go any further with my animation I

am going to save it so I dont lose all of the
work I just did. To save the project I simply
went File, Save as and saved it in my
animation folder.

Before I can actually start animating my characters I need to apply the

bone tool to them, to do this you select the bone tool from the tool
bar, click and drag from the main part of the character to a limb, then
you click in the same place where you previously clicked and drag to
another limb. Repeat until the character has purple lines going to all
limbs. Like in this picture.

After I connected all the limbs I turned off joint rotation

so they move from the point where they connected. To
do this I clicked on one of the purple lines until it turned
green, I then went to the properties on the right of the screen and un ticked enabled under
the JOINT: ROTATION heading.
This is the sugar character after I applied the bone tool to it. I did this
using exactly the same method as with the previous character.

7
James Clayton

Same process again for the Orange character and the Cola character,

After around 40 minutes of messing around with the animations trying to get them to do
what I want I finally managed to figure out how to do it.
This is some of the animation for
the starter character. I previously
didnt have the different poses in
the correct position on the
timeline which meant everything
was playing at the wrong time. I finally figured out the easiest way to do the animation is to
have it all on one armature and just leave parts on the timeline blank where you want the
character to stand still. You can do this because the timeline is identical to the main one for
the animation meaning you can just match the frames up for where the movements need to
start and finish.
To make the character move across the stage I used a motion
tween which starts after the introduction text has finished.
At the end of the tween the character stays in the same
position but the animation which they have keeps playing so
it looks like theyre starting the race.
Now that this character has been animated I can move onto the next. I will be animating
each character fully and then moving onto the next as that way I can just leave the
characters alone and not have to go back and finish their animations off.
The next character Im animating is the sugar cube. The first step
I will do is map out the motion tween to make him walk upto the
track and then run down the track. I am doing this first so I can
then go and add the animating after as I will then know the
frames where the character needs to be doing certain actions.

8
James Clayton

This is the second motion tween I have on the sugar cube

character. He begins to move when the starter moves his arm
down but stops in the middle of the track as in the animation
he gets stuck in a spilt drink later on in the race.

To have two separate animation tweens I split the tween

apart so It had a separate section where I wanted the
second area of movement.

To make it easier when Im doing the animation on the

character I wrote down the frame numbers of when different
events happen. This means I dont have to keep going back
and checking Im animating the correct movements.

Learnt:
Began my animation and completed around 25% of the animation.

Aim 27/02: Continue to work on my Flash animation whilst updating my Diary.

Evidence:
These are the positions that make up the first
section of the animation where the character
is walking from one part of the stage to
another. For some reason the timelines dont
seem to be synced up perfectly so I had to adjust the start and end times of the animation
to make it match the motion tween of the character. I can now create the second part of
this characters animation where they are warming up.
These are the second section
of poses which make up the
character animation. You can

9
James Clayton

see theres a gap between the two different animation segments which means the character
is standing still.
So far the character has an animation for walking over to the start of
the track and warming up before he runs. Now I need to create his
running animation, I will do thus by using the same technique as
before of just adding the different poses on the characters armature.

To animate the character I simply have to move their limbs on one frame,
move the next frame and move their limbs again. Im able to do this as I
created all the characters using the bone tool which makes it easier to
animate.

The character now has a running animation.

These are the frames that make up

that section of the characters
animation.

The next character I began animating was

the cola character. Just like with the other
characters the first thing I did was to
create a motion tween of the characters
movements. The orange line going across
the stage shows where the character will
move.
In the animation the cola character falls over as hes running too
fast. To do this I had to split the motion tween as I needed to make
the character rotate and the only way I could do this was by using
the rotation feature on the
motion tween. If I didnt split

10
James Clayton

the motion tween the character would rotate through the whole animation and not just at
the correct point.

When the cola character falls over he spills the drink over the track. To animate this I simply
drew four different size puddles that show after each other.
These are the four frames that make up the spilt drink. The last one extends to
the end of the animation as the drink needs to stay there.
The last character I now have to animate is the orange character who runs and wins the
race.
The first step in animating this charcter was to add the
motion tween where they walk onto the stage and into
position. I then made the character run down the track
and jump at the end after theyve won. The pink line is
the path they take.

This is what the last

bit of the armature
looks like for the
orange character.
The long section of animation is him running down the track, and the last 3 positions is him
lowering his arms as he raised them whilst crossing the finish line. Just like with every other
character I animated this one the same by matching the animation on the armature timeline
to the timeline of the actual animation.
After crossing the finish line the character jumps up and down twice. I
made them do this using the motion path.

11
James Clayton

The dots after the selected

frame are the different
position which make him
jump. The first dot is him
on the ground, the next is him in the air, and then back on the ground for the third dot. The
last two are the same with him finishing stood on the ground.
At the end of the animation after the character has won he walks over
to the other characters and and points at them whilst the narrator will
be talking about why healthy food Is better.

Now all the character animating is done I can focus on the

sounds and end credits. I created this bit of text in photoshop
using the text tool and then adding an outline and controur effect
using the layer settings. I then rotated it and saved it as a PNG.

To import this new graphic into the animation I went to file,

import, import to library.

I created a new layer called Eat Healthy and moved it above all
the other layers so when I add the imge onto the layer it is
infront of all the other assets.
I then converted the image to a symbol so I could add a
motion tween to it.

12
James Clayton

To make the way the text appears more interesting I

made it spin into place and then spin back off the stage.
To do this I created a motion tween which moved the
text from off the stage to the centre, on this motion
tween I told it to rotate the text by changing rotation
options in the properties tab. The text then stays in the
centre for around 1.5 seconds and moves off again using
the same rotation feature.

Stationary text. Rotating text

Rotating text exiting the stage.
entering the stage.

For the end credits I also produced them in

Photoshop as it meant I could make the text
more interesting. I saved and imported it the
same way I did with the Eat Healthy! text.

After importing and adding the text to the timeline I

converted it to a symbol so I could add a motion tween.

This is what the end credits look like. They first move
down into the centre of the screen and stay there for a
second. They then move down off the screen. I made sure
to include the BBC logo since this animation is for the
BBC.

All the animating is now completed and I just have to do the audio next. I first need to
record these which I will do at home for next session. The audio I will need is the narration
which goes over the animation and the sound effects.

13
James Clayton

Learnt:
Completed the animation part of my animation, now just need to add voice overs and sound
effects.

Aim 28/02: Add sounds to my animation.

Evidence:
The first bit of sound Im going to add to
my animation is the background music,
for this Ive chosen the rocky theme
tune. I downloaded it off YouTube in the
form of an MP3, I then opened It up in
Audacity and changed a few things. The
bit of editing I did to the audio was to cut it down to length, I then lowered the overall
volume as it was too loud. I checked how long the intro was shown for and then lowered the
music volume once the intro has finished. You can see on the image the change in volume.
The last thing I did was to add a face out effect to the end of the music. I then exported it as
an MP3.
To add the music onto the animation I created a new layer
named music and imported the audio file to the first frame.

This is what the timeline looks like with the background music
added. You can see the audio track as the red line going along
the timeline.
Heres the whistle sound effect in Audacity. I saved it and imported it in exactly the
same way as I did with the background music.

The bottom audio track is the whilst sound effect. Its currently too loud so
I will lower the volume in Flash.

To change the volume I went to sound, edit sound envelope.

14
James Clayton

That opens up this window where you can lower the volume by dragging
the small white square on the left size of the window down.

Heres the sound cheering audio file opened in Audacity. All I did to this
audio clip was shorten it and add a found out effect. I then saved it as a MP3
and imported it into Flash.

To add the cheering sound effect I went to where I

wanted it to start on the timeline, created a blank
keyframe and dragged the sound file from the
library onto the stage.

The last sound effect I added was when the Eat Healthy! Text appears on the
screen. I added this the same way as all the other sound effects.
All I have left to do now is add the narration but I havent recorded that yet so
will be doing that in the next session.

Learnt:
Added all of my sound effects to the animation, just have the narration left to do.

Aim 01/03:
Finish my animation off by adding the voice overs and any finishing touches.

Evidence:
These are all the voice
recording I have to now
add to my animation. Im
first going to open them
all in Audacity to remove any excess audio that isnt needed and then adjust the volume and
pitch if needed.

15
James Clayton

Once I imported the first audio track into Audacity and

removed the excess audio I lowered the volume. I did this
by going to effects, amplify and setting the value to -5.35.
I will be doing this on all of the audio recordings. I then
saved it as an MP3 so its ready to be imported into Flash.
To make it easier to identify each sound track I named
it accordingly.
These are all the voice over assets saved in my
RAW asset folder. They are all named accordingly
so I know which one Im importing into Flash.
I will now add them onto my animation.
Before I can go ahead and add the voice overs I first had to
create a new layer for them. Here you can see the new layer
named Voiceovers. The next step was to then import all of the
voice recordings. To do this I went to file, import, import to library.
Once I found the spot where I want the first voice over to
start I created a blank keyframe so I can add the audio file. To
do this I right clicked on the frame, making sure I was on the
correct layer, and clicked convert to blank keyframe. I then
dragged the correct audio file out of the library and onto the
stage.
Here you can see the audio was successfully added to the animation.

I can now go ahead and add the other 5 voice over files to the animation using exactly the
same technique.

Heres what the voice over layer looks like with all the voice overs added.
The animation is now completed and can be published.

16
James Clayton

Publishing Evidence

To get to this publish settings screen I went to file,

publish settings. On this window I changed the
output name of the finished animation and made
sure it will be published in the correct format.

Once I checked everything was correct I clicked

publish at the bottom of the window.

Heres the completed animation

in my animation folder. You can
see its saved as a SWF movie
compared to the unpublished
version of the animation that is a
Flash Document.

The finished animation playing on the

computer.

Learnt: Completed my animation by adding the voice overs and publishing it.

17