ANIMATION

Animation has been with us for more than 100 years. It is best described as the rapid display
of still images, an illusion of movement generated by a series of still graphics that are rapidly
presented to the eye, each slightly different from the previous one.
Animation depends on a characteristic of the brain and the retina called 'persistence of
vision'. The rapid presentation of images results in 'afterimages' being seen by our brains for
a short period after the actual image has disappeared. The result is that we see rapidly
changing drawings as though they were changing smoothly.
In cel-based animation, a skilled animator draws key frames, showing the important
changes in the character's appearance, while other animators draw the gradually changing
positions between them, a process known as tweening. However, animation software such
as Flash can automate this process. Flash can be used to create the correct in-between
frames to give the illusion of smooth animation.

a single still image is moved along a mathematically predefined

In
path-based
animation,
path. The start, end and path of the motion are determined by the animator and computer
software simply moves the object along this path. This type of animation is often used in
interactive games. These two types of animation are sometimes combined. When animated
cel-based frames move along a predefined path in a looping sequence, more complex
animations are created. Flash offers three types of tweening; shape, motion and classic
tweening.

Advantages

Disadvantages

Uses for animation:

Animation is a form of Multimedia, and aids in these fields.

Education

Entertainment

Information

Software used to create and edit animations:

Research these software programs:

Adobe Flash

Adobe Director

INTRODUCTION TO ADOBE FLASH

Timeline

Types of Frames:
Each box on the timeline is called a frame. All the visual graphics used in your animation
must be held within Keyframes. Here are some variations of keyframes you will make and
see during development:
This is a Blank Keyframe

This is a Filled Keyframe

This is a Frame Span

What is the purpose of the fps feature?

Flash File Types:

.fla
When you create a new file in Flash you are creating an .fla file

.swf

Ways to save your files:

SubSelection Tool

Free Transform Tool

Lasso Tool

Selection Tool
Rectangle Tool

Deco Tool

Bone Tool

Swap Colours Tool

Hand Tool

Black & White tool

Fill & Stroke Tools

Eyedropper Tool

Exercise 1 - Frame by Frame Animation (Cell-Based)

In this exercise we will create a stick figure animation with waving arms. While the finished
animation looks childish, this exercise is designed to expose you to a handful of Flash
fundamentals including: various Flash drawing tools, timeline layers & frames, stage colour,
adding text and filters to text, and animation speed (FPS).
1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new,
Actionscript 3.0 file
2. In the Properties Panel, set the Frame Rate (FPS) to 12
3. Save your file StickFigure_YourName.fla
4. In the Toolbar, select the Selection Tool

5. To bring in the background image, from the Menu Bar, go to File > Import > Import to
Stage
6. Choose scene.psd as the file you want to Import
7. In the .PSD Import dialogue box set the following:
Convert Layers to: Flash Layers

check 'Place objects at original position'

check 'Set stage size to same size...'

Be sure each layer is set to Lossy

8. Once imported, lock the 'scene-1', 'scene-2', and 'scene-3' layers

Note - Locked layers can still be re-ordered

9. Highlight then delete the extra, leftover layer

10. Re-shuffle the scene layers until the scene you like most is on top

Don't worry...you can always change your mind later on

11. In the top-right corner of the Timeline, find the tiny, drop-down menu
12. From the drop-down menu, set the frame size to Medium
13. In the Properties Panel, locate the Stage: Background color chip box

You will not see the Background color chip if something is selected

To de-select all, simply click off the Stage (where there is nothing)

14. Change the stage color to one that compliments your background image by:

choosing a color from the color picker dialogue box or...

sampling a color from the image

15. Save your file

16. Highlight the topmost scene layer
17. Create a new layer and re-name it 'body'

Note - new layers are always added above the one currently selected

18. In the Toolbar, select the Oval Tool

19. In the Toolbar, set the stroke color to blue and the fill color to red
20. In the Properties Panel, set the stroke width to 1.00
21. Select the Blank Keyframe in the 'body' layer
22. Using the Oval Tool, drag out a head for the stick figure on the stage
23. In the Toolbar, select the Rectangle Tool
24. Using the Rectangle Tool, drag out a body for the stick figure on the stage
25. In the Toolbar, select the Pencil Tool

Note - the Pencil Tool only draws strokes

26. Using the Pencil Tool, draw legs for the stick figure on the stage
27. With the legs selected, modify their thickness in the Properties Panel...to your taste
28. Save your file
29. Select and modify the body part colors in the Properties Panel...to your taste

You may choose to remove the stroke by clicking the "no stroke" icon from the
color picker

30. Select and modify the body part positions

to move a part simple select, then drag

you may also use your keyboard arrow keys for fine adjustments

adding [SHIFT] while using keyboard arrow keys amplifies the adjustments

31. With the Free Transform Tool, select and modify the body part shapes

drag the adjustment handles to change the shape dimensions

drag the line between the adjustment handles to skew the shape

drag outside the corner adjustment handles to rotate the shape

32. Lock the 'body' layer

33. Create a new layer and re-name it 'arms'
34. Move the 'arms' layer to the top of the layer stack (if needed)
35. In the 'arms' layer timeline, select frame 2
36. With frame 2 selected, right-click over the selected frame and choose Insert Blank
Keyframe
37. Insert Blank Keyframe's into frames 3, 4 and 5
38. Use the Timeline scrubber to preview the Timeline

You should notice that there is a problem developing, namely, your body parts and
background image 'drop out' as soon as the play head moves over frame 2

39. To extend your other layers to frame 5 (i.e. to make a Frame Span), do this:

Select frame 5 of the 'body' layer

Right-click over the selected frame and choose Insert Frame

Repeat this process for your three scene layers

40. Save your file

41. In the Toolbar, select the Brush Tool

Note - the Brush Tool only draws fills

42. In the Toolbar, select a fill color for your 'arms'

43. In the Toolbar (at the bottom), select a brush size for you arms

Note - Flash gives your cursor a preview of your chosen brush size

44. In the 'arms' layer timeline, select Blank Keyframe 1

45. Using the Brush Tool, draw arms for the stick figure in Blank Keyframe 1
46. In the 'arms' layer timeline, select Blank Keyframe 2
47. Using the Brush Tool, draw different arms for the stick figure in Blank Keyframe 2
48. In the 'arms' layer timeline, select Blank Keyframe 3
49. Using the Brush Tool, draw different arms for the stick figure in Blank Keyframe 3
50. In the 'arms' layer timeline, select Blank Keyframe 4
51. Using the Brush Tool, draw different arms for the stick figure in Blank Keyframe 4
52. In the 'arms' layer timeline, select Blank Keyframe 5
53. Using the Brush Tool, draw different arms for the stick figure in Blank Keyframe 5
54. Save your file
55. Use the Timeline scrubber to preview the animation
56. From the Menu Bar, go to Control > Test Movie

Note - be sure to close your published .swf before going back to editing your .fla

57. If needed, select and reposition your arms

In the Toolbar, select the Selection Tool

58. Lock the 'arms' layer

59. Drag the 'arms' layer below the 'body' layer
60. Save your file
61. Test your movie
62. Select the 'body' layer and then create a new layer

Remember: new layers are added above the layer currently selected

63. Re-name the layer 'caption'

64. In the Toolbar, select the Text Tool

Be sure the tool is set to produce Static Type

65. Click and type out a caption to appear below your animation - type to taste
66. Once you are done typing, select the Selection Tool from the Toolbar

67. With the Selection Tool, select the text block

68. In the Properties Panel, stylize your text to taste (font, color, size etc.)
69. With the Selection Tool, position your text under the animation
70. With the text block selected, go to the Filters section of the Properties Panel
71. At the bottom of the Filters section, click the "Add filter' icon and choose Drop Shadow
72. Style the Drop Shadow Filter to taste
73. Lock the 'caption' layer
74. Experiment by changing your Frame Rate (FPS)
75. Save your file
76. Test your movie
77. Export your movie as a .swf file and upload the finished product to Moodle

A tweened animation...

Exercise 2 - Motion Tween Animation

Tweens require that the animator defines the beginning and end keyframes before asking
Flash to help out with the in betweens.
Motions tweening requires that the same base graphic be used at both ends of the tween
(i.e. you can't Motion Tween a circle into a square - that's a Shape Tween - Exercise 3).
Because the same base graphic is used at both ends of the tween, we convert that graphic
into a symbol. Symbol use decreases file size, allows for much faster editing and is a
prerequisite for Motion Tweens.
Remember...Before you Motion Tween...make a Movie Clip Symbol.

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new,
Actionscript 3.0 file
2. In the Properties Panel, set the Frame Rate (FPS) to 24

24 is a good frame rate for tweening

3. Save your file as MotionTween_YourName.fla

4. To bring in the material to be use in the animation, from the Menu Bar go to File >
Import > Import to Stage
5. Choose fish.ai as the file you want to Import
6. In the .AI Import dialogue box dialogue box set the following:

Be sure to set Convert Layers to: Flash Layers

check 'Place objects at original position'

check 'Set stage size to same size...'

7. Once imported, lock three 'bar' layers

8. In the Tool Bar, select the Selection Tool

9. Select the fish and drag it off stage left
10. With the fish selected, right-click and choose 'Convert to Symbol...'
11. In the Convert to Symbol dialogue box:

for Name: mc-fish

for Type: Movie Clip

Movie Clip symbols are needed for Motion Tweening

12. In the top-right corner of the Timeline, find the tiny, drop-down menu
13. From the drop-down menu, set the frame size to Normal
14. Select frame 100 of the top layer - hold down the [SHIFT] key - and select frame 100 of
the lowest layer
15. Right-click over the selected layers and choose 'Insert Frame'

You have just created Frame Spans

16. Right-click on the fish and choose 'Create Motion Tween'

17. Save your file
18. Test your movie
19. Move the Playhead to frame 100
20. Select, then drag the fish off stage right
21. Move the 'bar-2' layer above the 'fish' layer
22. Save your file
23. Test your movie
24. With the Selection Tool, modify the Motion Tween Spline Line
25. Save your file
26. Test your movie
27. Move the Timeline Scrubber to frame 40

28. Select, then drag the fish to a new position

29. Save your file
30. Test your movie
31. Move the Timeline Scrubber to frame 60
32. Select, then drag the fish to a new position
33. In the Tool Bar, select the Convert Anchor Point Tool (under the Pen Tool)
34. Practice converting curved points to corner points and vice-versa
35. Practice adjusting the curved point handles
36. Save your file
37. Test your movie
38. Click anywhere in the Motion Tween
39. In the Properties Panel, add an Easing value to your Motion tween
40. Save your file
41. Test your movie
42. In the Properties Panel, add an Rotation value to your Motion tween
43. Save your file
44. Test your movie
45. Experiment with onion skinning

46. Test your movie

47. Export your movie as a .swf file and upload the finished product to Moodle

Exercise 3 - Shape Tweening

Shape tweens are used when you want to morph one shape into a completely different
shape.
The truth about Shape Tweening - While shape tweens sound good on paper they often
produce undesirable results. If you want to improve the results of your shape tween you
might consider adding more keyframes.
1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a new,
Actionscript 3.0 file
2. In the Properties Panel, set the Frame Rate (FPS) to 24

24 is a good frame rate for tweening

3. Save your file as ShapeTween_YourName.fla

4. In the Properties Panel, locate the Stage: Background color chip box

You will not see the Background color chip if something is selected

To de-select all, simply click off the Stage (where there is nothing)

5. Change the stage color to one that compliments your background image by:

choosing a color from the color picker dialogue box or...

sampling a color from the image

6. Create a new Layer called shape

7. In the Toolbar, select the Oval Tool
8. Turn the stroke color off and the fill color to red
9. Save your file
10. Using the Oval Tool, drag out an oval at the left hand side of the stage
11. In the Shape' layer timeline, select frame 80, right-click over the selected frame and
choose 'Insert Keyframe'

Note - Flash has auto-copied the contents of Keyframe 1 into Keyframe 80

12. Right-click anywhere between keyframes 1 and 80 and choose 'Create Shape Tween'
13. Save your file
14. In the 'Shape' layer timeline, select frame 40, right-click over the selected frame and
choose 'Insert Keyframe'

Note - Flash has auto-copied the contents of Keyframe 1 into Keyframe 40

15. In the Toolbar, select the Selection Tool

16. Delete the red oval from the stage at frame 40
17. In the Toolbar, select the Rectangle Tool
18. Turn the stroke color off and the fill color to blue
19. Drag out a rectangle anywhere on the stage in Keyframe 40
20. Lock the 'Shape' layer
21. Save your file
22. Test your movie
23. With the Selection Tool, in the 'blob-left' layer timeline, select Keyframe 40
24. Click and drag Keyframe 40 left or right to change your animation
25. Save your file
26. Test your movie
27. With the Selection Tool, in the 'Shape layer timeline, select Keyframe 1
28. Right-click Keyframe 1 and select Copy Frames
29. With the Selection Tool, in the 'blob-left' layer timeline, select frame 110
30. Right-click Keyframe 110 and select Paste Frames
31. Save your file
32. Test your movie
33. Export your movie as a .swf file and upload the finished product to Moodle

Exercise 4 - Shapes

Exercise 5 Classic Tween with Motion Guide

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a
new, Actionscript 3.0 file
2. In the Properties Panel, set the Frame Rate (FPS) to 24

24 is a good frame rate for Classic tweening

3. Save your file as ex-5.fla

4. Select and import 2 files - kaimuki.psd and car.ai
5. In the .PSD Import dialogue box set the following:

Convert Layers to: Flash Keyframes

check 'Place objects at original position'

check 'Set stage size to same size...'

Be sure each layer is set to Lossy

6. In the .AI Import dialogue box set the following:

Convert Layers to: Flash Keyframes

check 'Place objects at original position'

DO NOT resize the stage

With the 'car' layer selected, check 'Create Move Clip'

7. Choose the Selection Tool from the Toolbar

8. Lock the 'kaimuki-streets' layer
9. Move the 'car' above 'kaimuki streets'

10. In the 'kaimuki streets' layer, select frame 120, right-click and choose 'Insert frame'

You have just created a Frame Span

11. In the 'car' layer, keyframe 1, select the car and move it outside upper stage right

Note in the the Properties Panel that the car was made into a Movie
Clip during import

12. In the 'car' layer, select frame 120, right-click and choose 'Insert Keyframe'

Note - Flash has auto-copied the car from Keyframe 1 into Keyframe 120

13. In the 'car' layer, keyframe 120, select the car and move it outside lower stage right
14. Select Keyframe 1 of the 'car' layer, right-click and choose 'Create Classic Tween'
15. Save your file
16. Test your movie
17. Right-click on the 'car' layer name and choose 'Add Classic Motion Guide'

Note that Flash has given you a new layer to place you guide in (Guide: car)

18. In the Tool Bar select the Pen Tool

19. In the Tool Bar set to stroke color to red
20. In the Properties Panel set the stroke width to 2
21. Select Keyframe 1 of the guide layer
22. With the Pen Tool, click out a motion guide (path) through the streets of Kaimuki - begin
and ending off stage
23. Lock the 'Guide: car' layer
24. Save your file
25. In the 'car' layer, keyframe 1, select the car, drag and snap it to the start of your motion
guide
26. In the 'car' layer, keyframe 120, select the car, drag and snap it to the start of your motion
guide
27. In the Tool Bar, select the Free Transform Tool
28. Rotate both cars (Keyframes 1 and 120) so they are oriented to the motion guide
29. In the 'car' layer, select keyframe 1
30. In the Properties Panel, check the "Orient to path' box
31. Save your file
32. Test your movie
33. Add additional Keyframes at street intersections
34. Adjust the easing values at those keyframes to give the car more realistic speed changes
35. Save your file
36. Test your movie

Look closely at this Timeline and answer the questions that follow:

1. How many frames in this movie?

2. What type of frame is in frame 12 of Layer 2 and what does this mean?

3. In frame 1 of Layer 1, are there any graphics?

4. Which frame is the Playhead on?

5. What is the frame rate of the movie?

6. How many seconds will the movie play for?

7. What does the symbol in frame 11 of Layer 2 mean?

8. In frame 20 of Layer 1, are there any graphics?

9. What is the difference between frame 11 of Layer 2 and frame 20 of Layer 1?

Flash Button Symbols

A Button Symbol has its own timeline and that timeline is divided into four frames known as states:

The timeline of a Button Symbol may have a single or multiple layers.

The Flash Button above is like a car without an engine. From the outside it looks like it should work,
but when you turn the key (click), nothing happens. This is because ActionScript functionality has not
been added.

Exercise 6 Create a Flash Button (including ActionScript 3.0 Functionality)

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a
new, Actionscript 3.0 file
In the Properties Panel, set the Frame Rate (FPS) to 24
Note: This file will not be animated - so the Frame Rate is really a moot setting
2. In the Properties Panel, change the Stage color to #666666
3. Save your file as Buttons_YourName.fla
4. In the Toolbar, select the Selection Tool
Demo: The pepsi-can.psd file
5. From the Menu Bar, go to File > Import > Import to Stage
6. Choose pepsi-can.psd as the file you want to Import
7. In the .PSD Import dialogue box, set the following:
Convert Layers to: Flash Layers
check 'Place objects at original position'
check 'Set stage size to same size...'
check 'Bitmap image with editable layer styles' - this creates a Movie Clip of the
image layer allowing Filters to be added
Be sure the layer is set to Lossy
8. With the Selection Tool, select the Pepsi can
9. With the can selected, go to the Filters section of the the Properties Panel
10. At the bottom of the Filters section, click the "Add filter' icon and choose Drop Shadow
11. Style the Drop Shadow Filter to taste
12. Lock the 'pepsi-can' layer
13. From the Menu Bar, go to File > Import > Import to Stage
Note: if the Import to Stage is grayed out - be sure the locked pepsi-can layer
is not selected
14. Choose the pepsi.ai as the file you want to Import
15. In the .AI Import dialogue box, set the following:
with the 'pepsi-logo' layer selected, check the Create movie clip box to the right
be sure to set Convert Layers to: Flash Layers
check 'Place objects at original position'
DO NOT resize the stage
16. Once imported, select the Pepsi logo
17. In the Properties panel, confirm that the Pepsi logo is a Movie Clip (instance)
18. Position the Pepsi logo with your mouse and/or keyboard arrow keys

19. Save your file

20. Test your movie
21. With the Pepsi logo selected, right-click and choose Convert to Symbol
22. In the Convert to Symbol dialogue box, set the following:
choose Type: Button
enter 'btn-pepsi' for the name (btn is the standard for naming a button)
23. Save your file
24. Test your movie
25. Test your button
26. In the Toolbar, select the Selection Tool
27. On the stage, right-click the Instance of 'btn-pepsi' and choose Edit in Place
Note: under the Timeline (to the left), you should now notice a Breadcrumb Trail
Note: you are no longer working on the Main Timeline (Scene 1) but rather in
the Button Symbol's Timeline
28. Select the Over frame of your button, right-click and choose Insert Keyframe
Notice that Flash has auto-copied the contents of the Up frame into
the Over frame
29. Move down to the stage and select the Pepsi logo
30. With the can selected, go to the Filters section of the the Properties Panel
31. At the bottom of the Filters section, click the "Add filter' icon and choose Drop Shadow
32. Style the Drop Shadow Filter to taste
33. Move back up to the Button Symbol Timeline and select the Down frame, right-click
and choose Insert Keyframe
Notice that Flash has auto-copied the contents of the Over frame into
the Down frame
34. Move down to the stage and select the Pepsi logo
35. In the Toolbar, select the Free Transform Tool
36. Use the Free Transform Tool to give the Pepsi logo a slight, clock-wise rotation
37. When done, in the Toolbar, select the Selection Tool
38. Return to the Main Timeline (Scene 1)
39. Save your file
40. Test your movie
41. Test your button
You should notice there is a problem with the button - namely, in-active areas
42. In the Toolbar, select the Selection Tool
43. On the stage, double-click the Instance of 'btn-pepsi' to go into Symbol Edit Mode
this is another way getting into Symbol Edit Mode
Note: in this Symbol Edit Mode, you loose the surrounding context
44. Return to the Main Timeline (Scene 1)
45. On the stage, right-click the Instance of 'btn-pepsi' and choose Edit in Place
46. Select the Up frame of you button
47. Move down to the stage and select the Pepsi logo
48. Copy the Pepsi logo (from the Menu Bar choose Edit > Copy)
49. Select the Hit frame of your button, right-click and choose Insert Blank Keyframe

50. From the Menu Bar, go to Edit > Paste in Place

51. In the Toolbar, select the Rectangle Tool
52. Prior to drawing, in the Tool Bar, be sure to define a fill color (for example, red)
Turn the stroke off by setting its color to blank
53. With the Rectangle Tool, click and drag two, filled rectangles to cover the pepsi logo
54. Return to the Main Timeline (Scene 1)
55. Save your file
56. Test your movie
57. Test your button
58. In the Toolbar, select the Selection Tool
59. Select the Pepsi button
60. In the Properties Panel, give the Pepsi button an instance name of 'myBtn'
Your Instance Name will need to match the pre-written, ActionScript code spelling and case-sensitivity counts
61. Lock the 'pepsi-logo' layer
62. Create a new layer and name it 'actions'
it is very common for Flash developers to create a separate layer to hold their
ActionScript code
it is also very common to name that layer 'actions'
the 'actions' layer is normally placed at the top of the layer stack
63. Move the 'actions' layer to the top of the layer stack
64. Lock the 'actions' layer
NOTE: you can add ActionScript code to locked 'actions' layer
65. In the Menu bar, go to File > Open - open the flash-02.as
66. Drag through (select) then copy (ctrl + c) the pepsi code
67. Flip back to your Flash file
68. Highlight the Blank Keyframe in the 'actions' layer
69. From the Menu Bar, go to Window > Actions to open the Actions Panel
70. With the Blank Keyframe of the 'actions' layer selected, place your cursor in
the Actions Panel and paste (ctrl + v)
note the ActionScript symbol in the Blank Keyframe
71. Save your file
72. Test your movie
73. Test your button

Let's have a quick look at the ActionScript 3.0 code you applied:

1. This is the Instance Name of the Pepsi button - the link between ActionScript and
object.
2. Your Pepsi button will be listening for...
3. a mouse Event....
4. specifically, a Click.
5. When a click is heard (so to speak), something called 'pepsiPage' will happen.
6. 'pepsiPage' is a Function that...
7. reaches out to pepsi.com...
8. and opens the Pepsi home page in a Blank Browser Window

Exercise 7 Using Buttons to Play & Stop Externally Loaded Audio

In this exercise we will create a 'multi-media' piece. The multi forms of media will
be bitmap, vector, audio (.mp3) and text. ActionScript 3.0 functionality will be added,
allowing users to play and stop the audio by clicking on Flash buttons.

1. From the Menu Bar (File > New) or the Welcome Screen (if visible), create a
new, Actionscript 3.0 file
2. Save your file as AddingAudio_YourName.fla
3. In the Toolbar, select the Selection Tool
Demo: The tiger.ai file
4. From the Menu Bar, go to File > Import > Import to Stage
5. Choose the tiger.ai as the file you want to Import
6. In the .AI Import dialogue box, set the following:
Be sure the text within the 'title-text' and 'url-text' layers is set to Editable text at
right
With the 'logo' layer selected, check the Create movie clip box to the right
Be sure to set Convert Layers to: Flash Layers
Check 'Place objects at original position'
Check 'Set stage size to same size...'
7. After import, immediately lock the 'tiger' layer
8. With nothing selected, in the Properties Panel, change the Stage color to #666666
9. With the Selection Tool, select the tiger logo
10. Use the keyboard arrows to nudge the logo up - to taste
Adding SHIFT while using keyboard arrows increases the nudge increment
11. With tiger logo selected, in the Properties Panel, in the Color Effect section, under
the Style: drop-down menu, choose Tint
12. Use the Tint color picker to sample an orange from the tiger image (i.e. from the fur)
13. Lock the 'logo' layer
14. With the Selection Tool, select both blocks of text
using the SHIFT key allows you to select more than one object at a time
15. In the Properties Panel, change the font color for both blocks to white
16. De-select your text blocks by clicking off the stage
17. Select only the title text
18. Change the font to one of your own choosing

19. Lock both the 'title-text' and 'url-text' layers

20. With nothing selected, in the Properties Panel, change the Stage color to black
21. Save your file
22. Test your movie
23. In the layers section of the Timeline, turn off the visibility of the 'image' layer
24. Create a New Layer and name it 'gradient'
25. Drag the 'gradient' layer to the bottom of the layer stack
26. Select the Rectangle Tool from the Toolbar
27. In the Tool Bar (prior to drawing), set the following:
fill color to bright green
stroke to none
28. Drag out a rectangle on the stage - do not worry about the size
29. In the Toolbar, select the Selection Tool
30. Select the rectangle
31. From the Menu Bar, go to Window > Align
32. In the Align Panel, be sure the To stage: button is checked
33. Click the Match width and height button - Your rectangle resizes to match the stage
34. To align your rectangle to the stage, click the Align horizontal center button and
the Align vertical center button
35. From the Menu Bar, go to Window > Color
36. With your rectangle selected, in the Color Panel, click the the Type: drop-down menu
and choose Linear
If needed, in the Color Panel, change the Gradient color chip(s) so you have an
obvious gradient
37. From the Menu Bar, go to View > Zoom Out
38. In the Toolbar, select the Gradient Transform Tool
39. With the Gradient Transform Tool, select your rectangle
40. Locate the rotate gradient icon in the corner of your rectangle
41. Click and drag the rotate gradient icon to rotate your gradient 90 degrees clockwise
42. Locate the gradient resize icon on the side of your rectangle
43. Click and drag gradient resize icon until you gradient fits your stage
44. In the Color Panel, change the Gradient color chip(s) so black is at the bottom, dark
gray at the top
45. Lock the "gradient" layer
46. Save your file
47. Test your movie
48. Select the top-most layer in your layer stack
49. Create a New Layer
New layers are added above the layer currently selected
50. Re-name the new layer 'buttons'
51. In the 'buttons' layer timeline, select Blank Keyframe 1
52. From the Menu Bar, go to Windows > Common Libraries > Buttons
53. Navigate to the Classic Buttons > Push Buttons folder

54. Drag out 2 Push Buttons under the title text - one green (to the left), one red (to the
right)
55. Close the Button Library
56. Lock the 'buttons' layer
57. Save your file
58. Test your movie
59. Create a New Layer and rename it 'actions'
60. Lock the 'actions' layer
61. Highlight the Blank Keyframe in the 'actions' layer
62. In the Menu bar, go to File > Open - open the flash-02.as
63. Drag through (select) then copy (ctrl + c) the tiger code
64. Flip back to your Flash file
65. From the Menu Bar, go to Window > Actions to open the Actions Panel
66. Into the Blank Keyframe of the 'actions' layer, place your cursor in the Actions
Panel and paste (ctrl + v)
note the ActionScript symbol in the Blank Keyframe (a)
67. Save your file
68. Test your movie
Notice that flash tells you, via the Output Panel, that there is a problem with the
file
69. Find the Button Instance names referenced in the code
70. Add the Instance Names, referenced in the code, to the Buttons on the stage in
the Properties Panel
71. Save you file
72. Test your movie

Let's have a quick look at the ActionScript 3.0 code you applied:

1.
2.
3.
4.
5.

This code goes out and retrieves the external, tiger.mp3

These are the Instance names of your buttons
These are the Functions that are triggered by clicking on the buttons
The playMusic function causes the audio to play
The stopMusic function causes the audio to stop

ACTIONSCRIPT
Stop Loop

Buttons

Adding Video

Adding Audio

3D animation
The creation of 3D animation progresses through at least four stages. The lowest level is the
wire-frame model. The next stage uses mathematical techniques to hide the wire-frame
lines, providing a more realistic and solid view of what the object will look like. In the third
stage, shading, shadowing and colour are added and the object begins to look more real. In
the fourth stage, rendering, realistic surfaces are created. The final object can then be
animated in the same way as a two-dimensional animation.
Animations where each individual cel is drawn individually and hand painted are part of the
long tradition of Disney films, from Snow White and the Seven Dwarfs to The Lion King.

However, even traditionally created animations now contain computer-generated

segments.
The most basic method of animation in 3D is cel-based animation where small changes in
movement are displayed rapidly to give the illusion of movement. This is very timeconsuming, so motion capture is a popular alternative. With motion capture, an actor wears
a pair of special gloves and a suit. Small movements are picked up by sensors and translated
into movements applied to the computerised 3D object. Full-length animations such as
Shrek and Toy Story were created entirely using 3D digital animation techniques on a
computer. Digital media products are used to create the rich textures of video games and
the fictional 3D worlds in movies. Avatar took 3D animation one step further.
Although not the first 3D movie, its realism and beautifully detailed landscapes are
recognised as a breakthrough in stereoscopic 3D visualisation (see ' In action', page 175).
Virtual reality techniques use these 3D methods, but add interactivity. A doctor can operate
on a person from a remote location using the same motion capture input devices used by
the movie-making industry. A pilot can experience realistic scenery and special effects when
learning to fly an aircraft. Virtual reality rides are part of every theme park, where users
wear helmets with internal screens to create an artificial 3D world.
In cartoon animation, many drawings are required for every second of animation in order to
give the illusion of movement. Each of these drawings must then be traced and coloured by
hand. Digital animators use scanners and paint software to colour and digitise these images
rather than the traditional painstaking method of taking photographs of each of the
drawings on film.
In games, a technique known as sprite animation allows an animated graphic to move over a
stationary background.
A sprite is a character with pre-programmed sequences, such as running, jumping and
fighting, which are called in response to user actions.

Most 3D games software use built-in software graphics engines that speed up the
animation. Consoles such as PlayStation, GameCube', Wii and Xbox include additional
hardware to accelerate the process. To achieve real-time 3D requires technical shortcuts to
be taken, such as using simple models with fewer shapes, rougher rendering techniques,
and fewer frames in the animation. This can make such figures appear blocky and the
movement jerky.
Some 3D animators can capture the detail of human movement and make it look
convincing. Modern moviemaking demands more realism in the movements of its 3D CGI
characters that can best be achieved using the motion capture technique. An actor performs
the movements while wearing a suit with large dots on the actor's joints. These dots are
then matched to the corresponding points of a stick figure on computer, and finally to a
detailed 3D character.

File Formats
Animations can be saved using the
same formats as for video. Flash has
proved extremely popular for 2D
animation, as it is a vector-based
format and is well suited to the
Internet, where bandwidth can be a
problem. Flash's .swf format is thus a
popular animation format, although it
requires a dedicated plug-in for
browsers.

Consistency
Users expect that different applications will have similarities, which means that knowledge
about one product can be transferable to another. Consistency in screen design is one of the
most important principles of all.
Storyboards and navigation
Careful planning of the structure is important in complex projects.
A storyboard is a map or plan of the final product.
It represents each screen, each screen element, their placement and the arrows as links
between each screen.
The three main storyboard layouts for navigation are linear or sequential, hierarchical and
composite or network.
Linear/sequential: The path is a single one that can be followed either forwards or
backwards. Users cannot make jumps. When we are viewing videotapes or movies, we
are using linear (sequential) navigation. We usually watch movies from start to finish.
On videotape or film, you cannot reach that favourite scene in Shrek where the little bird
explodes, without going past the rest of the movie first, even if you fast-forward.
Hierarchical: In this non-linear navigation form, users choose which 'branch' of an
imaginary tree they might wish to move along. Interactive multimedia games (such as
those available for desktop computers, PlayStation or Xbox) depend on this. On a DVD,
you can skip to any scene (chapter) you like. It is possible to view a movie's alternative
endings, see out-takes, examine a character in depth, or hear background information in
a documentary.
Composite/network: This is a general all-purpose term where no obvious pattern of
navigation exists. It may be a mix of the linear and hierarchical layouts. Any part of the
multimedia product can be linked to any other. Users can freely explore any one of
many possible paths through the product.
The choice made by a designer
about navigation will be influenced
by the purpose of the product. If you
wish to display a set of images of a
trip in the order in which they were
taken or show the proof of a
mathematical theorem, a linear
structure would be the better
choice. However, if you were writing
an adventure game where the user
has to make choices, or designing a
simulated jukebox for your favourite
music, a non-linear structure would
be better.
For an animation the navigation
should be linear, as a movie

Upload your final product to Moodle, no later than Wednesday 2 March 2016
Questions:
1. What is the function of a graphics card?

2.

3. What is the difference between Cell-based and Path-based Animation? Give an

example of each

4. What is the purpose of a storyboard in Animation? Why is it important?

5. Design a storyboard for a 30 second animation ADVERTISEMENT of your favourite product or Cartoon. Scan and add your storyboard to this document

Finished Animation booklets are to be submitted to Moodle no later Friday 4 March 2016.