Create Animation Using Flash Computer Science Essay

Published: Last Edited:

This essay has been submitted by a student. This is not an example of the work written by our professional essay writers.

Adobe Flash is software used for web animation, web design and interactivity for web pages. Flash offers a variety of tools and functions for creating animation.

How Flash creates Animation

An animation consists of a sequence of drawings that create the illusion of the movement. Flash allows users to use both traditional methods and computer techniques to create animation. You will learn how to animate traditionally in Flash using the frame-by-frame method and how to use computer animation techniques to create animation frames more quickly than traditional methods.

1. How to create a Symbol

Many animation software packages use the concept of a symbol. Using symbols provides an animator with the tools to re-use elements of an animation frame without re-drawing them over and over again. Think of drawing a vehicle with four identical wheels. If you do this on paper you have to draw the same wheel four times. If you do this on a computer you can draw one wheel and then re-use the same drawing for the other three. Similarly, if you have to draw 1000 chairs in a stadium, you just have to create one chair and duplicate it. In Flash you do this by creating a symbol and saving it ready to use again. A symbol is designed to save work and therefore make animation faster.

Figure 2. 1

Using a symbol for repeated elements enables you to avoid drawing identical elements repeatedly

Drawing: Di Wang

Flash allows you to create three types of symbol:

* Graphic symbols are normally used for non-moving graphic elements

* Button symbols contain 4 frame button animations in interactive situations

* Movie Clip symbols are used to save multi-frame animations.

Step-by-step method of creating a symbol

i. In the Insert menu, choose New Symbol (The short cut is Ctrl+F8)

Figure 2. 2

Adobe Flash Insert > New Symbol

ii. Flash requires that you specify the type of symbol you want to create. Use the drop down menu to choose Movie Clip and click OK. The default name is symbol 1 but you can change it if you wish. Choose a logical name for the symbol.

Figure 2. 3

Select Movie Clip from the drop down menu

iii. Flash now automatically opens the symbol-editing mode window. The name of the symbol is displayed at the top of the editing window.

Figure 2. 4

Symbol editing mode window

iv. Create your graphic or animation elements inside the symbol-editing mode. To return to the current scene, click the Current Scene icon (button A)

v. In the Library Window (short cut Ctrl+L), you can find the symbol (Symbol 1) you just created. If you want to re-edit this symbol, double click it in the library window and Flash returns you to symbol-editing mode again.

Figure 2. 5

Scene window with the symbol in the library

Words and Terms

Symbol ¿½ On some occasions you may want to re-use the same graphic elements you have already created in Flash. Flash allows you to save these Graphics, Movie Clips or Buttons as reusable elements called symbols

Library - stores media assets that you created in Flash and allows you to import and reuse them.

Symbol Editing Mode - After a symbol is created, you may want to change it. To do this you enter Symbol Editing Mode. Symbol Editing mode opens the symbol in a new window with no other elements visible.

2. Creating frame animation

Frame animation is created by drawing elements over a number of frames but altering them slightly on each so when they play back the illusion of movement is created. The key drawings are the most important drawings and are used to guide the rest of the in-between drawings. Creating key drawings is always the first step of animation and they set the beginning and end points of the movement, as well as allowing the animator to see the most important moments of the action. This makes it easier to control the timing of the movement and keep the correct volume and perspective throughout the animation.

There are 3 elements that control the how things move between key drawings:

* In-between drawings

* spacing

* path of action

Figure 2. 6

Movement between key drawings controlled by in-betweens, spacing and path of action

Drawing: Di Wang

In-between drawings are the mid-way drawings that fill the gaps between the key drawings. They smooth out the action and define the length of the animation. The more drawings you create, the slower the movement will be. If the frame rate is 24 fps and there are 12 in-betweens, the movement takes about 0.5 seconds. However, with 24 in-betweens, the movement takes one minute to finish.

The distance between the in-betweens and the degree of change from one to the next is called spacing. It controls the speed changes in a movement. Equal spacing gives an even speed (no speed changes). If the spacing increases the change between drawings is greater and the speed of movement accelerates. If the spacing decreases the change from one drawing to the next is smaller and the movement occurs more slowly.

Figure 2. 7

Spacing controls the speed of the movement between the key drawings

Drawing: Di Wang

The path of action controls the direction and perspective of the movement.

Traditionally you had to create all the drawings frame by frame as well as calculate how many in-betweens were needed, how to space the drawings, and how to place these drawings along the correct path of action. If you made a mistake, you had to re-draw the frames.

In Flash, tween creates in-between drawings automatically, motion guide controls the path of action and the time-line controls the spacing. These functions allow you to control each of the three elements separately so you can animate faster and also edit or fine tune these elements after the animation is complete.

Animators use light tables so they can see through the drawings as they work. When the back light is turned on, the previous drawings can be used as a guide to measure the position and shapes for the other drawings. In Flash, the Onion Skin feature allows you animate in this way and simulates the effect of a light table.

Figure 2. 8

Traditional frame-by-frame animation using a light table

Photograph: Mark Stanley-Adams

Figure 2. 9

Adobe Flash simulates the light table by showing frames before and after the one you are on as ¿½ghosted¿½ images

Animating a ball moving using the frame by frame method

i. Start by creating 5 empty key frames for this animation. On the timeline, you can see there is a blank key frame on frame 1. Click frame 2, and right click the mouse button, then choose Insert Blank Key Frame. Repeat the process until you have 5 blank key frames.

Figure 2. 10

Create 5 blank key frames on the time lines

ii. Click Onion Skin, so you can see though all the frames. The black bracket on top of the timeline indicates the frame range that can be seen through.

Figure 2. 11

Turn on the onion skin

iii. On the first blank key frame, draw a circle. You can use the Oval tool. Hold on Shift and drag out a round circle.

Figure 2. 12

Draw a circle on the first key frame

iv. Move the play head to frame 5. The onion skin is turned on, so you can see frame 1 as a dimmed colour. This is normally called the "ghost drawing". Using this ghost drawing as a guide, draw another perfect circle of the same size on the right hand side of the canvas. To make things easier, you can also copy the first drawing and paste it into blank key frame 5.

Figure 2. 13

Draw an identical circle on the last key frame

v. Move the play head onto frame 3. Use the ghost drawings from frame 1 and frame 5 as a guide, and create a third circle (or copy and paste the previous one). Place it in the middle, between the circles on frames 1 and 5. In animation terms, this process is called: In-betweening.

Figure 2. 14

Create the in-between on frame 3

vi. Use frame 1 and 3 as the motion guide, and create a circle in the middle on frame 2. Use frame 3 and 5 as the motion guide, and create another circle in the middle on frame 4.

Figure 2. 15

Create the in-betweens on frame 2 and 4

vii. Turn off the Onion Skin, and press Ctrl+Enter to play the movie. You will see the ball move from the left to the right.

viii. You may find this animation is too quick. To solve this problem, you can add more middle positions or in-betweens.

Figure 2. 16

Addition of in-betweens to slow the animation down

3. Animating with motion tweening

Frame by frame animation is a very labour-intensive method. You can use tweening in Flash to reduce the amount of in-betweening. To do this, you need to convert the drawing into a symbol first.

There are 3 types of tweening in Flash:

* Motion-tween

* Classic-tween

* Shape-tween

Motion tween and Classic tween generate mid-way positions and rotations (in-between frames), while shape tween controls the transformation during morphing. With classic tween and shape tween, you create the first and last image and let Flash create all the rest of the in-betweens. With motion tween, you create an object and define changes to its properties over time. Flash creates the in-betweens based on this information. .

Animating a ball using motion tweens

i. On frame 1, create a circle.

Figure 2. 17

Create a circle on Frame 1

ii. Select the circle using selection tool (short cut: V). Press F8 to convert this circle to a movie clip symbol.

Figure 2. 18

Convert the circle into a movie clip

iii. Extend the frame to frame 9 (press F5 on frame 9). This copies the ball on all nine frames. Put the mouse cursor on the first key frame and right click. From the menu, choose Create Motion Tween. You can see the key frame's colour changes into blue.

Figure 2. 19

Extend the key frame and create motion tween

iv. Go to frame 9 and drag the ball to the right side of the stage

Figure 2. 20

Place the ball at its end point on frame 9

v. Flash automatically fills in the drawings in between the first and last frames. Press Ctrl+Enter to play the movie

Figure 2. 21

Flash fill in the in-betweens for you

4. Animating with motion guides

Creating a ball moving using Motion Guide and Classic Tween

A motion guide is a special layer on which you can create an action path for a symbol to follow when you are using a classic tween. By editing the graphic on the motion guide layer, you can change the path of the action easily.

i. To create a classic tween use the same ball symbol as previous. Create key frames on frame 1 and on frame 10. Place the symbol on the left of screen in the first key frame and to the right in the last key frame.

Figure 2. 22

Place the symbol on the first and last key frames

ii. On Frame 1 right click and choose Create Classic Tween. Flash fills in the in-betweens as before and the ball moves, as before, along a straight line. Now we want the ball moving along an arc.

Figure 2. 23

The ball moves along a straight line

iii. To make the ball move along an arc you need to add a layer. Select Layer and right click. Choose add Classic Motion Guide in the pull down menu.

Figure 2. 24

Add classic motion guide to create a guide layer

iv. On the guide layer, draw the path that you want the ball to follow.

Figure 2. 25

Draw the path you want the ball to follow on the guide layer

v. On key frame 1, use the selection tool (short cut: V) and drag the ball to the starting point of the motion guide path. As you drag, Flash will snap the centre of the symbol to the curve. If you want to turn off/on the snap, choose View>Snapping>Snap the Object.

Figure 2. 26

Drag the ball to the beginning of the path

vi. Go to key frame 10 and drag the ball the end of the motion guide. Press Ctrl+Enter to play the movie.

Figure 2. 27

Drag the ball to the end of the path

Create a Morph using Shape-tween

Shape tweening works very much like classic tweening. It automatically generates in-betweens between two different shapes so that one changes into the other. This is called a morph from the term metamorphise which means to change one thing into another. In Flash, this is a labour saving method for animating shape changes or morphs.

i. On frame 1 and frame 10, create separate key frames with two different shapes.

Figure 2. 28

Create key frame 1 and key frame 10 , each with a different shape

ii. Right click on Create Shape Tween.

Figure 2. 29

Create a shape tween

iii. Flash again, creates the in-betweens. Press Ctrl+Enter to play the movie.

Figure 2. 30

The final shape tween with in-betweens

5. Animating using Mask Layer

A mask layer is a special layer that allows you hide and show the elements on the underlying layers.

How a Mask Layer works

A mask layer is linked to another normal layer (the Masked Layer). The shapes on the mask layer become a hole that allows the drawings on the masked layer to show through. The mask controls what will be seen and what can¿½t be seen.

Figure 2. 31

How a mask layer works

Practise Exercise: Put the spoon into the bowl

i. Load the file called spoon.fla which accompanies this learning material. It is a scene in which there are there three layers:

Figure 2. 32

Exercise ¿½Load the spoon.fla scene with three layers

The Bowl

The Spoon

The Mask

The loaded scene will look like this:

Figure 2. 33

Loaded spoon.fla scene

ii. Click to hide the Mask layer. A motion tween has already been created for the spoon. You will notice that when the spoon goes into the bowl we can still see it.

Figure 2. 34

The spoon is not hidden

iii. Click again to show the Mask layer. On the Mask layer, right click>Mask.

Figure 2. 35

Turn on the Mask layer

iv. The Result is that now only the masked area is visible and when the spoon goes into the bowl it is now hidden correctly. Press Ctrl+Enter to play the movie.

Figure 2. 36

The spoon now displays correctly

6. Create a movie clip animation

When a part of an animation is very repetitive it is easier to create that element separately and save it as a movie clip than to work with it on the main stage. For example, if you wanted to animate a car going along the street and then falling into a hole, the easiest way would be to first animate the movement of the car and its wheels as a movie clip. Then you would bring the movie clip into the main stage and use it for the animation of the car driving along the street. Because it is a movie clip the turning of the wheels is already animated and you can now concentrate only on the travelling and falling into the hole parts of the animation. This technique saves you time for any parts of animation that are looped. This means something that is animated by repeating the same frames over and over. A bird flying, for example, has a loop for the wings flapping. You initially create 8 frames of the different positions and then repeat the same 8 frames continuously as a loop.

i. Create a new symbol (Ctrl+F8). In the Create New Symbol dialogue, type a name for you symbol. From the Type menu, choose Movie Clip as the symbol type. Then Click OK.

Figure 2. 37

Create a symbol

ii. In the symbol editing mode, create a ball moving animation.

Figure 2. 38

Animate the symbol

iii. Open the Library window (Ctrl+L); you can see the animation is saved as an symbol.

7. Apply the timeline effect to an animation

The Motion Editor

The default tweening for ball moving is always at a constant speed. You may want to slow down or speed up a certain part of the movement. The Motion Editor is a powerful tool that allows you to control the spacing of the in-betweens so as to control the speed during the movement.

Figure 2. 39

Reading the curves in the Motion Editor

The spacing can be edited by Motion Editor. In the Motion Editor, the horizontal axis represent the time line, and the vertical axis represents the value of the effect that is applied to the spacing.

Let's say I want the ball accelerates first when it starts moving, and decelerates as it reaches the end on the right side.

i. Create a ball moving using Motion Tween. The in-betweens are placed in constant increments, so the ball moves at an even speed.

Figure 2. 40

Create a ball moving using motion tween

ii. Activate the Motion Editor window.

Figure 2. 41

Open the Motion Editor window

iii. In the Basic Motion section, the incline line shows that the ball is moving at a constant speed along X-axis (horizontally). We need to add a Custom Ease to the current graph.

iv. In the Eases section, create a new Ease by clicking bottom, select "Custom". To delete the unused Ease, click .

Figure 2. 41

Create a custom ease

v. Manipulate the Custom Ease curve by pressing Alt and dragging the handles.

Figure 2. 42

Manipulate the Ease curve

vi. Apply the custom ease to the Basic Motion.

Figure 2. 43

Apply the custom ease

vii. The spacing of the movement is changed. Play the movie to see the changes.

Figure 2. 43

Note the changes in spacing

Formative assessment task 1: Animate a plane taking off in Flash

You need to animate a plane taking off from the ground. Try to use various techniques to do the animation and think about which method is the best solution.

Task requirements:

* Hand in the original Flash document.

* Presentation your solution to the class and explain how you animated it.

Assessment criteria

Rating Achievement








Is the animation effective?


Did you use different methods to animate this animation?


Did you compare the strengths and weaknesses of different methods?


Di you explain which method is the best solution and why it's best solution?

B. Create and control sound and moving pictures

Class Exercise: Create a slide show

Your lecturer will provide you with some sound and image files to use in this exercise. Note where they are on your hard drive.

a. How to Import Sound

* Go to File >Import >Import to Library

Figure 2. 44

Go to File >Import >Import to Library

* Navigate to the sound files you were given and select "boogy up.mp3". Click Open. The sound file will appear in your Flash library.

Figure 2. 45

Import boogy up.mp3to the library

b. How to import images:

* Repeat the above process and import the images Animation.jpg, DJ.jpg, Graphic Design.jpg, and TV.jpg.

Figure 2. 46

Import the images Animation.jpg, DJ.jpg, Graphic Design.jpg, and TV. Jpg.

* Select all the images and click Open.

* In the Library window, you will now find the images you just imported.

c. Animating a Slide Show

* Create 4 different layers:

> Animation (20 frames)

> DJ (40 frames)

> Graphic Design (60 frames)

> TV (80 frames)

Figure 2. 47

Create 4 layers ¿½ one for each image

* Activate the animation layer and drag Animation.jpg from the Library to the Scene.

Figure 2. 48

Place Animation.jpg in the scene

* On the right hand side, activate the properties window so you can position the drawing in the centre. To do this change the X and Y values to "0".

Figure 2. 49

Centre the image

* Repeat the above process until the 4 images are uploaded into the timeline.

Figure 2. 50

Import and centre all the images

* Convert the Animation.jpg to a Symbol and create a Motion Tween for the animation layer. On Frame 20 move the drawing to the left as its end position.

Figure 2. 51

Import and centre all the images

* On the DJ Layer create a new key drawing (press F6) on frame 21.

* Convert the DJ.jpg to a Symbol and create a Motion Tween for the DJ layer on Frame 40. Move the drawing to the right of the scene.

Figure 2. 52

Create a key frame on frame 21 of the DJ layer.

* On the graphic design layer, create a new key drawing (press F6) on frame 41.

* Convert the Graphic Design.jpg to a Symbol and create a Motion Tween for the graphic design layer

Figure 2. 53

Create a motion tween for the graphic design layer

* Open Properties window. Go to Colour Effect >Style >Alpha

Figure 2. 54

Go to Colour Effect >Style > Alpha

* On Frame 60, change the Alpha value to 0%.

Figure 2. 55

Set the Alpha value to 0%

* The slide show animation is complete. Press enter to play it.

Add sound to the timeline

* Add a new layer, and extend the empty frame to 80.

Figure 2. 56

Add a new layer and extend it to frame 80

* Drag the sound track from the Library to the scene.

Figure 2. 56

Drag the sound track into the scene

* Click the sound layer and open the Properties window. In the Effects drop down menu, choose Custom.

Figure 2. 57

Choose Custom in the Effects drop down menu

* The Edit Envelope window pops out. The height of the white dot indicates the volume of the sound track.

Figure 2. 58

Choose Custom in the Effects drop down menu

* On frames 70 and 80 create new controllers, and on Frame 80 drag the controller to the bottom, so as to change the volume to 0.

* Click to play the sound track.

* Close the Edit Envelop window and play the movie (Ctrl+Enter).

Formative assessment task 2: Animate a slide show

You need to animate a slide show celebrating your school¿½s anniversary. using the various Flash animation techniques you have learnt.

Task requirements:

Your slide show must contain information about your school¿½s history, accomplishments, student life and a scene of celebration.

* You need to photograph the relevant pictures or source them from school records, magazines etc. You need a minimum of 10 pictures.

* You can record audio (music, sound fx and voice) or convert sound from CDs and other sources

* Import your music first so you can synchronise the picture to the music to increase the effect of your slide show.

* Import the pictures and create the slide show using all the animation methods you have learnt.

* Use easing in and easing out to vary the pace of your slide show to make it more interesting.

* Your slide show needs to have a celebratory mood and make the viewers feel proud to be part of the school.

* Hand in the original flash document on CD or DVD

* Present your solution to the class and explain how you animated it.

Assessment criteria

Rating Achievement








Have you sourced or created appropriate pictures for the task?


Have you imported the pictures and audio correctly?


Does the animation and the variety of animation techniques express the mood effectively


Did you use different methods to animate this slide show?

Is the slideshow presented in a coherent and logical order for its purpose?


Is the audio you have used appropriate for the purpose of the slide show?


Are the pictures and sound synchronised to enhance the effectiveness of the slide show?


Did you prepare yourself for the presentation?


Does your presentation justify your choices and use of animation techniques?

Test Your Flash Skills:

1. Technical Information (30 minutes):

a. How many types of symbols can be created in Adobe Flash? Which Symbol can be used for animation? (10%)

b. Describe the differences between Shape-tween, Motion-tween and Classic-tween? (10%)

c. Describe and compare traditional animation methods and computer tweening. (10%)

d. What is a Mask Layer in Flash? How do you use it? (10%)

e. How to change the speed in Animation. Give an example and explain it (10%)

2. Practical Animation (60 minutes):

a. Use the key-drawings provided and create a shape-tween. (10%)

Figure 2. 59

Twp shapes as key drawings

b. Use a mask to hide the even numbers (10%)

Figure 2. 60

Hide the even numbers

c. Use classic-tween, motion guide and timeline effects to create a ball bouncing on the floor: (20%)

Figure 2. 61

Example of an animated ball bounce

d. Use the sound effect provided to synchronize the sound with above animation (10%)

C. Explain and use action script

NB: Please note that we have used Action Script 3.0 version hence some of the scripts might not work if you are on Action Script 1.0 & 2.0

Multimedia Basics Level 3 ¿½ Topic 2: Utilisation of Design Theory

Page 16 of 29