Learning Flash CS5

Module 1 Contents

Chapter 1: Getting Started With Flash

The Flash Start Page................................................................................1-1
The Flash Screen......................................................................................1-2
The Flash Workspace..............................................................................1-2
The Properties Panel...............................................................................1-4
Other Panels.............................................................................................1-5
The Tools Panel . ............................................................................1-5
The Timeline Panel.........................................................................1-6
The Motion Editor Panel...............................................................1-7
The Panel Group............................................................................1-7
Rulers, Grids and Guides.......................................................................1-9
Rulers...............................................................................................1-9
Grids...............................................................................................1-10
Guides............................................................................................1-11
Using the Drawing Tools.....................................................................1-13
The Brush Tool.......................................................................................1-14
The Flash Workspace............................................................................1-15
Flash Assignment 1..............................................................................1-16

Chapter 2: Drawing Tools

Cookie Cutting.........................................................................................2-1
Selecting Objects......................................................................................2-3
The Selection Tool...................................................................................2-5
Flash Exercise 2-1....................................................................................2-7
Rounded Rectangles...............................................................................2-7
The Pencil Tool.........................................................................................2-9
The Brush Tool.......................................................................................2-11

Guided Computer Tutorials, 2010 C-3

 Learning Adobe Flash CS5

The Ink Bottle and Paint Bucket Tools...............................................2-13

The Ink Bottle Tool.......................................................................2-15
The Paint Bucket Tool..................................................................2-16
The Eyedropper Tool............................................................................2-16
The Eraser Tool......................................................................................2-17
Object Drawing......................................................................................2-19
Snap to Object........................................................................................2-21
Flash Assignment 2..............................................................................2-23

Chapter 3: Symbols, Libraries and Layers

Creating a Simple Logo..........................................................................3-1
Drawing a Circle............................................................................3-1
Adding a Rectangle.......................................................................3-2
Placing the Rectangle Over the Circle.........................................3-3
Adding Text to the Logo...............................................................3-4
Duplicating the Logo..............................................................................3-6
Using Symbols and the Library Panel..................................................3-9
Creating a Symbol..........................................................................3-9
The Library Panel.........................................................................3-10
Exporting Graphics...............................................................................3-13
Layers......................................................................................................3-14
Importing the Graphics...............................................................3-14
Adding the Background to the Stage........................................3-15
Adding a Second Layer...............................................................3-16
Adding an Image to the Image Layer.......................................3-17
Adding the Logo..........................................................................3-18
Using the Layers....................................................................................3-19
Changing the Stacking Order.....................................................3-19
Turning Layers Off.......................................................................3-19
Locking Layers.............................................................................3-20
Image Outlines.............................................................................3-21
Flash Assignment 3..............................................................................3-22

C-4 Guided Computer Tutorials, 2010

 Contents

Chapter 4: Motion Tween Animations

Creating a Motion Tween.......................................................................4-1
Setting the Symbol.........................................................................4-1
Setting the Motion Tween.............................................................4-2
Understanding the Timeline Panel.......................................................4-4
Adjusting Animations............................................................................4-5
Adjusting the Motion Path....................................................................4-6
Rotating Objects......................................................................................4-7
Scaling Objects in an Animation...........................................................4-9
Inserting Another Keyframe..................................................................4-9
Flash Exercise 4-1..................................................................................4-11
Clearing Property Keyframes..............................................................4-11
Adjusting the Duration of the Animation.........................................4-12
Flash Assignment 4..............................................................................4-14

Chapter 4: Multiple Object Animations

The Background Layer...........................................................................5-1
Setting the Background Layer......................................................5-1
Locking the Layer..........................................................................5-2
The Ball Layer..........................................................................................5-2
Adding the Background Frames...........................................................5-3
Animating the Ball..................................................................................5-4
Drawing the Ball............................................................................5-4
Converting the Circle to a Symbol...............................................5-5
Setting the Motion Tween.............................................................5-5
Creating the Bounce.......................................................................5-6
Adjusting the Animation.......................................................................5-6
Increasing the Time of the Animation..................................................5-8
Flash Assignment 5................................................................................5-9

Chapter 6: The Motion Editor Panel

Opening the Motion Editor Panel.........................................................6-1
Adjusting the Easing...............................................................................6-2
Creating a Custom Ease................................................................6-2
Setting the Basic Motion................................................................6-4
Adjusting the Path..................................................................................6-4
Other Adjustments..................................................................................6-6
Flash Assignment 6................................................................................6-8

Guided Computer Tutorials 2010 C-5

 Learning Adobe Flash CS5

Chapter 7: Other Tweening Types

Shape Tweening.......................................................................................7-1
Setting the Start Shape...................................................................7-1
Setting the End Shape....................................................................7-1
Setting the Shape Tween...............................................................7-3
Adjusting Shapes...........................................................................7-3
Using Shape Hints.........................................................................7-5
Removing Shape Hints..................................................................7-7
Reversing the Shape Tween..........................................................7-8
Classic Tweening.....................................................................................7-9
Inserting a Symbol.........................................................................7-9
Inserting the End Keyframe.......................................................7-10
Setting the Classic Tween............................................................7-11
Adjusting the Animation............................................................7-12
Flash Assignment 7..............................................................................7-13

Chapter 8: Fixed Point Animations

Loading the Prepared File......................................................................8-1
Adding Layers.........................................................................................8-2
Inserting the Clockface Frames.............................................................8-2
Adding Guides to the Screen.................................................................8-3
Animating the Big Hand........................................................................8-4
Adding the Symbol to the Animation.........................................8-4
Editing the Big Hand Symbol.......................................................8-4
Animating the Big Hand...............................................................8-6
Animating the Small Hand....................................................................8-7
Inserting the Small Hand Symbol................................................8-7
Editing the Small Hand Symbol..................................................8-7
Creating the Motion Tween..........................................................8-8
Exercise 8-1...............................................................................................8-9
Flash Assignment 8..............................................................................8-10

C-6 Guided Computer Tutorials, 2010

 Contents

Chapter 9: Circular Animations

Loading the Prepared File......................................................................9-1
Converting the Beetles to Symbols.......................................................9-2
The Red Beetle................................................................................9-2
The Blue Beetle...............................................................................9-4
Setting the Background Layer Frames.................................................9-5
Animating the Red Beetle......................................................................9-5
Setting the Motion Tween.............................................................9-5
Adjusting the Motion Path ..........................................................9-6
Orient to Path ................................................................................9-9
Animating the Blue Beetle...................................................................9-10
Setting the Motion Tween...........................................................9-10
Adjusting the Motion Paths........................................................9-13
Setting the Orient to Path............................................................9-14
Copying Frames....................................................................................9-14
Stopping the Animation.......................................................................9-15
Adjusting the Race................................................................................9-17
Flash Assignment 9..............................................................................9-18

Chapter 10: Frame By Frame Animations

Drawing an Eyeball..............................................................................10-1
Adding the Eye Shape..........................................................................10-3
Copying the Eye....................................................................................10-5
Adding Layers.......................................................................................10-6
Animating the Eyelid............................................................................10-7
Duplicating the Keyframes................................................................10-10
Flash Assignment 10..........................................................................10-14

Chapter 11: Creating Movie Clips

Creating a Movie Clip..........................................................................11-1
Setting a Movie Clip Symbol......................................................11-1
Drawing the First Position of the Bird......................................11-2
Drawing the Second Position of the Bird.................................11-3
Setting the Third Position of the Bird........................................11-4
Setting the Fourth Position of the Bird......................................11-5

Guided Computer Tutorials 2010 C-7

 Learning Adobe Flash CS5

Using the Movie Clip............................................................................11-6

Adjusting the Flight Path.....................................................................11-7
Adding Another Instance of the Bird.................................................11-8
Instance Names................................................................................... 11-11
Flash Assignment 11..........................................................................11-12

Chapter 12: Creating Buttons

Creating a Simple Button.....................................................................12-1
Setting the Button Symbol..........................................................12-1
The Button States..........................................................................12-2
Testing the Button........................................................................12-4
Adding Text to the Button..........................................................12-5
Other Adjustments.......................................................................12-6
The Hit Area...........................................................................................12-7
Creating a Button.........................................................................12-7
Setting the Over and Down States.............................................12-8
Setting the Hit Area.....................................................................12-9
Creating a Navigation Bar.................................................................12-11
Loading the Global Page File...................................................12-11
Adding the Button Layer..........................................................12-12
Creating the First Button..........................................................12-12
Adding Some Text to the Button..............................................12-13
Setting the Button States...........................................................12-14
Copying the Buttons..................................................................12-16
Altering the Text.........................................................................12-16
Testing the Buttons.....................................................................12-17
Using Prepared Buttons.....................................................................12-17
Flash Assignment 12..........................................................................12-19

Chapter 13: Publishing Animations

Publish Settings.....................................................................................13-2
Document Size.......................................................................................13-4

Flash Project 1

C-8 Guided Computer Tutorials, 2010

 Contents

Module 2 Contents

Chapter 14: Using Masks

Creating a Mask over a Background..................................................14-1
Creating the Background Layer.................................................14-1
Inserting the Mask Layer............................................................14-2
Creating the Mask........................................................................14-3
Background Colours....................................................................14-4
Editing the Mask..........................................................................14-5
Animating Masks..................................................................................14-6
Movie Clip Masks.................................................................................14-9
Importing the Image....................................................................14-9
Creating the Movie Clip Symbol.............................................14-10
Animating the Movie Clip........................................................14-12
Adjusting the Motion Path.......................................................14-13
Exercise 14-1.........................................................................................14-15
Flash Assignment 14..........................................................................14-16

Chapter 15: Using the 3D Tools

The 3D Rotation Tool............................................................................15-1
Creating the Movie Clip..............................................................15-1
Selecting the 3D Rotation Tool...................................................15-2
Rotating the Object......................................................................15-3
Adjusting the Perspective...........................................................15-4
Adjusting the Vanishing Point...................................................15-4
Moving the Rotation Point.........................................................15-5
Using the 3D Rotation Tool in Animations..............................15-6
The 3D Translation Tool.......................................................................15-7
Creating the Movie Clip Symbol...............................................15-7
Applying the 3D Translation......................................................15-8
Movie Credits......................................................................................15-10
Creating the Movie Clip............................................................15-10
Animating the Text....................................................................15-12

Guided Computer Tutorials 2010 C-9

 Learning Adobe Flash CS5

Applying 3D Effects on Images.........................................................15-15

Importing the Image..................................................................15-15
Converting the Image to a Movie Clip Symbol.....................15-15
Animating the Globe.................................................................15-16
Adding Some Rotations............................................................15-18
Flash Assignment 15..........................................................................15-20

Chapter 16: Using Behaviours

Loading the Prepared File....................................................................16-1
Looking at the Animation....................................................................16-1
Stopping the Animation.......................................................................16-2
Setting an Invisible Button...................................................................16-3
Setting the Behaviour...........................................................................16-5
Adding Sound to the Animation........................................................16-7
Naming the Sound.......................................................................16-7
Setting the Behaviour..................................................................16-8
Modifying Behaviours..........................................................................16-9
Deleting Behaviours............................................................................16-10
Adding a Sound to the Invisible Button..........................................16-10
Flash Assignment 16..........................................................................16-12

Chapter 17: Animating Still Photos

Loading the Prepared File....................................................................17-1
Breaking the Photo Apart.....................................................................17-1
Separating the Head.............................................................................17-2
Converting the Head to a Symbol......................................................17-4
Animating the Head.............................................................................17-5
Setting the Frames........................................................................17-5
Setting the Heads Left Position.................................................17-5
Setting the Heads Right Position..............................................17-6
Returning the Head to its Start Position...................................17-7
Wagging the Tail....................................................................................17-8
Erasing the Tail.............................................................................17-8
Creating the Tail Layer................................................................17-9
Converting the Tail to a Symbol.................................................17-9
Animating the Tail.....................................................................17-10
Flash Assignment 17..........................................................................17-12

C-10 Guided Computer Tutorials, 2010

 Contents

Chapter 18: Using the Bone Tool

The Bone Tool Basics.............................................................................18-1
Drawing the Shape......................................................................18-1
Applying the Bone Tool..............................................................18-2
Using the Bone Links...................................................................18-3
Constraining Movements and Rotations..................................18-6
Bone Styles....................................................................................18-7
Runtime.........................................................................................18-8
Animating Imported Images...............................................................18-9
Loading the Prepared File...........................................................18-9
Separating the Biceps...................................................................18-9
Separating the Forearm.............................................................18-12
Separating the Hand..................................................................18-13
Applying the Bone Tool............................................................18-15
Creating the Animation.............................................................18-16
Animating Drawn Shapes..................................................................18-19
Drawing the Shape....................................................................18-19
Setting the Bone Structure........................................................18-19
Animating the figure.................................................................18-21
The Spring Effect.................................................................................18-22
Loading the Image.....................................................................18-22
Applying the Bone Tool............................................................18-23
Animating the Pin......................................................................18-24
Applying the Sprint Effect........................................................18-25
Flash Assignment 18..........................................................................18-26

Chapter 19: Adding Sounds to Animations

Loading an Animation and Sound.....................................................19-1
Adding Sounds to the Timeline..........................................................19-1
Synchronising Sounds..........................................................................19-3
Event..............................................................................................19-3
Stream............................................................................................19-4
Stop.................................................................................................19-7

Guided Computer Tutorials 2010 C-11

 Learning Adobe Flash CS5

Sound Effects.........................................................................................19-7
Removing the Extra Sounds.......................................................19-7
Using the Fade in Effect..............................................................19-8
Editing Sound Effects..................................................................19-9
Adding Sounds to Buttons.................................................................19-11
Placing the Button on the Stage...............................................19-11
Adding the Sound to the Library.............................................19-12
Adding the Sound to the Button..............................................19-12
Sample Sounds....................................................................................19-14
Flash Assignment 19..........................................................................19-15

Chapter 20: Code Snippets

Loading a Prepared Symbol................................................................20-1
Checking the Flash Settings.................................................................20-1
Naming the Movie Clip........................................................................20-2
Controlling Objects With the Arrow keys.........................................20-2
Moving Objects With the Mouse.........................................................20-4
Opening Web Sites................................................................................20-6
Fading an Object....................................................................................20-7
Multiple Code Snippets........................................................................20-9
Flash Assignment 20..........................................................................20-11

Chapter 21: Text Formatting

The Text Layout Framework...............................................................21-1
Selectable Text........................................................................................21-3
Linked Text.............................................................................................21-5
Paragraph Formatting..........................................................................21-7
Loading the Prepared File...........................................................21-7
Text Alignments............................................................................21-7
Paragraph Spacing.......................................................................21-8
Placing Text into Columns..........................................................21-9
Linking Text Boxes..............................................................................21-11
Loading the Prepared File.........................................................21-11
Linking the Text..........................................................................21-12
Adding an Animated Message.................................................21-15
Flash Assignment 21..........................................................................21-18

C-12 Guided Computer Tutorials, 2010

 Contents

Chapter 22: Text Effects

Animating Letters.................................................................................22-1
Breaking the Text Apart...............................................................22-1
Converting to a Guide Layer......................................................22-3
Adding frames to the Layers......................................................22-4
Adding the Guide Lines..............................................................22-5
Animating the Letters..................................................................22-5
Exercise 22-1...........................................................................................22-7
Converting Text into Shapes................................................................22-8
Breaking Text Apart Twice..........................................................22-8
Creating the Shape Tween..........................................................22-9
Some Other Text Effects............................................................22-11
Reversing Frames.......................................................................22-12
Flash Assignment 22..........................................................................22-13

Chapter 23: Text Effect Movie Clips

Creating the Movie Clip Symbol........................................................23-1
Entering the Text...................................................................................23-1
Adding Keyframes................................................................................23-3
Animating the Letters...........................................................................23-4
Keeping the Letters on the Screen......................................................23-6
Looking at the Animation....................................................................23-7
Using the Movie Clip............................................................................23-9
Editing Movie Clips............................................................................23-11
Flash Assignment 23..........................................................................23-14

Chapter 24: Creating Scenes

Loading the Prepared File....................................................................24-1
The Introduction Scene.........................................................................24-2
Creating the Animation...............................................................24-2
Naming the Scene........................................................................24-5
The Apes Scene......................................................................................24-6
Creating a New Scene..................................................................24-6
Adding a Background.................................................................24-7
Inserting the Gorilla.....................................................................24-8
The Orangutan Layer..................................................................24-9

Guided Computer Tutorials 2010 C-13

 Learning Adobe Flash CS5

Looking at the Animation So Far......................................................24-11

The Big Cats Scene..............................................................................24-11
Changing the Order of Scenes...........................................................24-12
Duplicating Scenes..............................................................................24-13
Stopping the Animation.....................................................................24-14
Flash Assignment 24..........................................................................24-15

Chapter 25: Useful Tools

Converting Video Clips........................................................................25-1
Importing the Video Clip. .........................................................25-1
Saving the File..............................................................................25-2
Importing the Video Clip.....................................................................25-3
Selecting the Video.......................................................................25-3
Selecting the Skinning.................................................................25-4
Playing the Video Clip................................................................25-5
Adding Cue Points.......................................................................25-6
The Deco Tool........................................................................................25-7
Creating Buildings.......................................................................25-7
Drawing Trees...............................................................................25-9
The Lightning Brush....................................................................25-9
Animation Effects.......................................................................25-10
The Spray Brush Tool..........................................................................25-12
The Pen Tool.........................................................................................25-13
Drawing Straight Lines.............................................................25-13
Creating Curved Lines..............................................................25-15
Combining Curved and Straight Lines...................................25-17
Adding Anchor Points...............................................................25-19
Deleting Anchor Points.............................................................25-20
Preset Animations...............................................................................25-21
Creating the Object....................................................................25-21
Applying a Motion Preset.........................................................25-22
Saving a Motion Preset..............................................................25-23
Flash Assignment 25..........................................................................25-25

Flash Project 2

C-14 Guided Computer Tutorials, 2010