Sound Bitmaps and Interactivity
Pythonise Yourself
In this work we will look at ways that we may process graphics and sound in our animation. We will
also look at how to add simple interactivity using Action script 3.
Before we begin let’s take a look at the finished animation we will be creating.
The animation is inspired by the Director and Animator Terry Gilliam, who apart from creating the
animations for Monty Python directed such films as Twelve Monkeys, The Fifth Element and The
Time Bandits.
The animation begins with a “pythonised” version of my face acting as the “main menu” for the
application.
Clicking on an eye or the jaw of the animation makes that item fly away from the face with added
sound effects like so...
Admittedly this is visually quite bizarre (but that is the point) however it gives us plenty to play with
as we explore graphics, sound and interactivity.
Adding and Processing the Bitmaps
If we have a suitable bitmap image there is absolutely no reason why we cannot use that in or Flash
animation. There are a however few issues that we do need to consider in using bitmaps.
1. Flash is primarily a vector drawing package. As such it is best to convert any bitmaps we use into
vector graphic images.
2. Having imported a bitmap into Flash and converted it into a vector we have the chance to do
additional editing of the image helping us to create more professional looking animations.
Importing a Bitmap
The first step is to create a new animation in flash using Actionscript 3.
Versions 2 and 3 of Actionscript are quite different languages. Version 3 is now a full object oriented
scripting language with slightly different syntax to the previous versions.
With our new animation file we may import the images to the library...
You may select all of the images at once or process them one by one.
Once you have done this your library should look something like this...
Organising your Library
At this point it is worth adding some folders to the library to help us organise the symbols.
Right click on the library and select New Folder
Name the folder Bitmaps and drag all of the bitmap graphics into the folder so that it looks like this...
The next step is to create a new symbol and process the bitmap turning it into a vector graphic.
Create a new symbol called Face and drag and drop the face bitmap into the centre of it...
Notice that as well as the bitmap of the face (the bit we want to use) we also have a white
background to the bitmap (which we do not want).
Face
Background
By processing the bitmap and turning it into a vector we have the opportunity of removing this
background giving us more control over the graphics in the animation.
With the face graphic selected from the menu select Modify – Bitmap – Trace Bitmap...
This command allows us to turn the bitmap into a vector.
You should see the following screen appear...
Deciding what settings to use is at times trial and error.
The colour threshold determines the amount of colour is preserved in the conversion.


The higher the selected threshold the fewer colours
The lower the value the more colours
The minimum are of pixels determines the level of image resolution applied during the conversion.
High colour threshold
Low colour threshold
If we go for a value of 40 for colour threshold and 8 pixels for the minimum area we get a reasonable
compromise between level of detail preserved and image complexity (you may use your own values
here if you like).
Now that we have converted the bitmap to a vector we are able to process it and remove the white
background.
Deselect the image and then click on the white area around the mouth selecting it...
Pressing delete on the keyboard will remove this white area. Do the same for all of the white
background around the head and the eye sockets.
The advantage of removing the background from our processed bitmaps comes in when we display
one image in front of another.
If we look at the image against a background prior to processing it in this way we get the following
effect...
The image has this unsightly white border.
If we convert to a vector graphic and remove the border we get a much better effect...
Now that we have turned the bitmap into a vector we need to process the other bitmaps in a similar
way. Once they are processed you will need to create a new folder called Symbols...
Creating Animated Symbols
So far in using Flash we have used the main timeline to create our animations. One useful feature of
the environment is that each symbol has their own timeline and therefore may be animated in their
own right.
In this example we shall create an animated eye symbol that moves left and right.
Create a new symbol called EyeAnimation and set the symbol type to Movie Clip...
Inside this symbol drag and drop the eye symbol (not the eye bitmap).
Place the eye just off centre in the new Movie Clip...
Rename the layer to Eye and create a new motion tween which moves the eye to exactly the
opposite side of the centre of the movie clip...
Right click on the frames for the tween and select copy frames...
Click on the next frame after the tween...
And then right click and select paste frames...
This will create a second copy of the frames. Right click on these frames and select reverse
keyframes...
This will reverse the animation.
The effect you will get is that the eye moves from left to right and then back again.
Close this new symbol and make sure you place it into the symbols folder. Create two more
animated movie clips for the face and for the mouth...
Creating the Menu
Now that we have set up the symbols we plan to use we may start building the rest of the
animation.
The finished animation will consist of four scenes...
Menu
Mouth
RightEye
LeftEye
The Menu will allow us to click on an eye or the jaw and the click will activate the appropriate scene.
When that scene is finished control will be returned to the menu.
The simplest way to approach this is to start by making the menu scene with enough frames in the
timeline to allow us to see the movement of the animated symbols...
Once the main menu is created we may duplicate the scene...
To give us the scene to control the right eye...
This saves us creating the scene from scratch. Al that we need to do now is modify this new scene
such that the right eye pops out of the socket and leaves the stage...
Once this scene is set up you will need to set up the other two scenes. One for the left eye and the
other for the mouth...
Left eye...
Mouth...
The last things to add to the scenes are the sound effects.
Adding Sound
The process for importing sound is the same as importing bitmaps...
Again create a folder for the sounds so that the library is organised...
To add a sound to the scene, create a new layer in the scene and then drag and drop the audio file to
the first frame of that layer...
Adding the Interactivity
Now that the animation and sound are working we shall set about stitching the whole thing together
with some action script.
If you play the animation now you should see that it plays each scene one after the other. This is not
the effect we are looking for. The first thing is to place the menu scene on a loop so that the
animation only plays the other scenes when we want it to.
Add a new layer to the menu scene called Actions...
Actions will contain the action script for this scene along with markers allowing us to jump to
different parts of the scene.
Create a new blank key frame at frame 1 for this layer.
Click once on this first frame and set the label (in the top right of the program) to Start...
Next click once a frame or two in of the new layer...
Add a blank key frame at this point and set its label to SilentStart.
Just to point out that we don’t need to use labels we could call then frame 1 & 3 however when we
start to reference frames further along the timeline it means we have to know what number frame
we want. Setting a label makes it easier to identify points in the animation.
Notice that we have set two starts to this scene.


Start is the true start which will activate the music
SilentStart is a second start point beyond the start of the music allowing us to loop without
continually setting off the music
Adding some Action Script
In the last frame of the actions layer for this scene add a new blank key frame. Right click on the new
key frame and select Actions...
You should see a window appear allowing us to type in some Action Script...
(You may want to adjust the position of this window so that it doesn’t obscure other parts of Flash.)
Type into this window the following line of code...
Run the animation to see what happens.
What should happen is that the scene plays triggering the music. It should then loop back to the
label SilentStart not triggering the music for the second time. The other scenes in the animation
should not be seen.
Before you do anything else create an actions layer in the RightEye scene and name the first blank
key frame to StartRightEye.
Event Handlers
An event handler is a section of script that is added to an object on the stage that is triggered when a
specific event happens to the object.
A common example of an event is the click event which takes place when we click an object with the
mouse.
There are three objects in this animation we want to add event handlers to.



The mouth
The left eye
The right eye
For example in the case of the right eye we want to add a section of code that makes the animation
stop looping through the main menu and play the animated scene showing the right eye pop out of
the eye socket.
Instances of Object and Instance Names
Before we may attach an event to any of the objects in the animation we need to give them instance
names.
Click once on the right eye and access the properties for the object...
Change the text <Instance Name> to RightEye...
Do the same for the left eye and for the mouth.
Adding Event Handlers
In the Actions layer, right click on the frame called silent start and select Actions...
The first thing we shall do is create function to handle the click event for the right eye.
Type inside the actions window the following code...
I am going to assume zero knowledge of programming at this point. If you are familiar with
programming (especially C type languages e.g. C++ Java & C#) this code will make a lot of sense to
you.
The first line of code in grey is called a comment and is there to remind us human beings what the
code below it does. The computer ignores comments.
The keyword in blue function says that what follows is a function which may be called from other
parts of our code.
The text MoveRightEye is then name of this function. (we invent this bit ourselves).
A function is rather like a recipe in a recipe book.
If we wanted to make a cake we would turn to the page with our cake recipe. If we wanted to make
soup we would turn to a different page. Each recipe is a function the title of the recipe (cake, soup,
biscuits) is the name given to the function. When we want a recipe we call the function in the book
by opening the appropriate page.
The brackets identify where the code for the function begins and ends...
{
}
If you are not a programmer don’t worry about the other bits of the function but do make sure you
type them exactly as they are displayed in this example.
So far the function has no code telling Flash to perform a task, we shall add that now...
gotoAndPlay tells Flash that when this function is triggered it should (in this case) go to and play the
frame called StartRightEye in the Scene called RightEye.
Linking the Function to the Object on Screen
If we run the animation now and click the right eye, nothing will happen. We have not yet told Flash
which on- screen object to link the function to.
The following modification to the code does this...
This tells the right eye object on the stage to add an event listener that responds to the mouse event
click. When the click event is triggered run whatever code is in our function called MoveRightEye.
We are nearly at the stage of being able to test the animation. Before we do that there are a couple
of changes that need to be made.
Firstly to the scene RightEye we need to label the first frame StartRightEye.
Secondly we need to add some script to the last frame of the scene RightEye that sends the
animation back to the first frame of the Menu scene.
If everything is working correctly you should have the interactivity for making the right eye work.