Guided Computer Tutorials

Learning
Adobe
Flash CS4

By Greg Bowden
PUBLISHED BY

GUIDED COMPUTER TUTORIALS

PO Box 311
Belmont, Victoria, 3216, Australia

www.gct.com.au

© Greg Bowden

This product is available in Single or Multi User versions.

Single-user versions are for single student or teacher use at any

particular time, just as a single text book would be used. If you intend
to use the notes with multiple students the single user version should
be upgraded to the multi-user version.

Multi-user versions allow the school or institution to print as many

copies as required, or to place the PDF files on the school network,
intranet and staff laptops. A certificate of authentication is provided
with multi-user versions. Bookmarks provide links to all headings and
sub-headings, and individual chapters are provided.

First published 2009

ISBN: Module 1 1 921217 67 7

Module 2 1 921217 68 5

PDF document on CD-ROM

Every effort has been made to ensure that images used in this
publication are free of copyright, but there may be instances where
this has not been possible. Guided Computer Tutorials would
welcome any information that would redress this situation.
Learning Flash CS4

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 Flash Workspace............................................................................1-14
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
The Ink Bottle and Paint Bucket Tools...............................................2-13
The Ink Bottle Tool.......................................................................2-15
The Paint Bucket Tool..................................................................2-16

© Guided Computer Tutorials, 2009 C-3

 Learning Adobe Flash CS4

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, 2009

 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 5: 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

© Guided Computer Tutorials 2009 C-5

 Learning Adobe Flash CS4

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

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

C-6 © Guided Computer Tutorials, 2009

 Contents

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

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 Path.........................................................9-11
Setting the Orient to Path............................................................9-12
Copying Frames....................................................................................9-13
Stopping the Animation.......................................................................9-14
Adjusting the Race................................................................................9-15
Flash Assignment 9..............................................................................9-16

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

© Guided Computer Tutorials 2009 C-7

 Learning Adobe Flash CS4

Chapter 11: Creating Buttons

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

Chapter 12: Publishing Animations

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

Flash Project 1
iSounds ................................................................................................. P1-1

C-8 © Guided Computer Tutorials, 2009

 Contents

Module 2 Contents
Chapter 13: Creating Movie Clips
Creating a Movie Clip..........................................................................13-1
Setting a Movie Clip Symbol......................................................13-1
Drawing the First Position of the Bird......................................13-2
Drawing the Second Position of the Bird.................................13-3
Setting the Third Position of the Bird........................................13-4
Setting the Fourth Position of the Bird......................................13-5
Using the Movie Clip............................................................................13-6
Adjusting the Flight Path.....................................................................13-7
Adding Another Instance of the Bird.................................................13-8
Instance Names...................................................................................13-11
Flash Assignment 13..........................................................................13-12

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
Text Masks..............................................................................................14-6
Creating the Mask Layer.............................................................14-6
Creating the Background Layer.................................................14-7
Creating the Mask Effect.............................................................14-9
Animating the Background......................................................14-10
Animating the Words................................................................14-13
Exercise 14-1.........................................................................................14-15
Movie Clip Masks...............................................................................14-15
Importing the Image..................................................................14-15
Creating the Movie Clip Symbol.............................................14-15
Animating the Movie Clip........................................................14-17
Adjusting the Spline Path.........................................................14-18
Exercise 14-2.........................................................................................14-19
Flash Assignment 14..........................................................................14-20

© Guided Computer Tutorials 2009 C-9

 Learning Adobe Flash CS4

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
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

C-10 © Guided Computer Tutorials, 2009

 Contents

Chapter 17: Text Effects

Creating Text..........................................................................................17-1
Character Spacing.................................................................................17-3
Selectable Text........................................................................................17-4
Linked Text.............................................................................................17-6
Vertical Text............................................................................................17-7
Animating Letters.................................................................................17-9
Breaking the Text Apart...............................................................17-9
Converting to a Guide Layer....................................................17-10
Adding frames to the Layers....................................................17-11
Adding the Guide Lines............................................................17-12
Animating the Letters................................................................17-12
Exercise 17-1.........................................................................................17-14
Converting Text into Shapes..............................................................17-14
Breaking Text Apart Twice........................................................17-14
Creating the Shape Tween........................................................17-16
Some Other Text Effects............................................................17-18
Reversing Frames.......................................................................17-19
Flash Assignment 17..........................................................................17-20

Chapter 18: Text Effect Movie Clips

Creating the Movie Clip Symbol........................................................18-1
Entering the Text...................................................................................18-1
Adding Keyframes................................................................................18-2
Animating the Letters...........................................................................18-3
Keeping the Letters on the Screen......................................................18-6
Looking at the Animation....................................................................18-7
Using the Movie Clip............................................................................18-8
Editing Movie Clips............................................................................18-11
Flash Assignment 18..........................................................................18-13

© Guided Computer Tutorials 2009 C-11

 Learning Adobe Flash CS4

Chapter 19: Animating Still Photos

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

Chapter 20: Using the Bone Tool

The Bones Tool Basics...........................................................................20-1
Drawing the Shape......................................................................20-1
Applying the Bone Tool..............................................................20-2
Using the Bone Links...................................................................20-3
Bone Styles....................................................................................20-5
Runtime.........................................................................................20-6
Animating Imported Images...............................................................20-7
Loading the Prepared File...........................................................20-7
Separating the Biceps...................................................................20-7
Separating the Forearm.............................................................20-10
Separating the Hand..................................................................20-11
Applying the Bone Tool............................................................20-13
Creating the Animation.............................................................20-14
Animating Drawn Shapes..................................................................20-17
Drawing the Shape....................................................................20-17
Setting the Bone Structure........................................................20-17
Animating the figure.................................................................20-19
Flash Assignment 20..........................................................................20-21

C-12 © Guided Computer Tutorials, 2009

 Contents

Chapter 21: Adding Sounds to Animations

Loading an Animation and Sound.....................................................21-1
Adding Sounds to the Timeline..........................................................21-1
Synchronising Sounds..........................................................................21-3
Event..............................................................................................21-3
Stream............................................................................................21-4
Stop.................................................................................................21-7
Sound Effects.........................................................................................21-7
Removing the Extra Sounds.......................................................21-7
Using the Fade in Effect..............................................................21-8
Editing Sound Effects..................................................................21-9
Adding Sounds to Buttons.................................................................21-11
Placing the Button on the Stage...............................................21-11
Adding the Sound to the Library.............................................21-12
Adding the Sound to the Button..............................................21-12
Sample Sounds....................................................................................21-14
Flash Assignment 21..........................................................................21-15

Chapter 22: Creating Scenes

Loading the Prepared File....................................................................22-1
The Introduction Scene.........................................................................22-2
Creating the Animation...............................................................22-2
Naming the Scene........................................................................22-5
The Apes Scene......................................................................................22-6
Creating a New Scene..................................................................22-6
Adding a Background.................................................................22-7
Inserting the Gorilla.....................................................................22-8
The Orangutan Layer..................................................................22-9
Looking at the Animation So Far......................................................22-11
The Big Cats Scene..............................................................................22-11
Changing the Order of Scenes...........................................................22-12
Duplicating Scenes..............................................................................22-13
Stopping the Animation.....................................................................22-14
Flash Assignment 22..........................................................................22-15

© Guided Computer Tutorials 2009 C-13

 Learning Adobe Flash CS4

Chapter 23: Useful Tools

Converting Video Clips........................................................................23-1
Importing the Video Clip. .........................................................23-1
Saving the File..............................................................................23-2
Importing the Video Clip.....................................................................23-3
Selecting the Video.......................................................................23-3
Selecting the Skinning.................................................................23-4
Playing the Video Clip..........................................................................23-5
Preset Animations.................................................................................23-6
Creating the Object......................................................................23-6
Applying a Motion Preset...........................................................23-7
Saving a Motion Preset................................................................23-8
The Deco Tool........................................................................................23-9
Using Vine Fill..............................................................................23-9
Using Grid Fill..............................................................................23-9
Using the Symmetry Brush.......................................................23-10
Changing the Deco Shape.........................................................23-11
Decorating Within a Shape.......................................................23-13
Animating Deco Shapes............................................................23-14
The Spray Brush Tool..........................................................................23-14
Flash Assignment 23..........................................................................23-16

Flash Project 2
Alby’s AutoBarn . .............................................................................. P2-1

C-14 © Guided Computer Tutorials, 2009

 Chapter

1
Getting Started With Flash
Adobe Flash CS4 is a design tool set up primarily to allow the efficient creation of
animations, especially for web pages. It has been developed to allow animations to be
reduced to the lowest size possible so that the speed of operation within a web site is not
too slow. In this chapter you will be introduced to some of the basics of Flash.

The Flash Start Page

1 Load Flash CS4 and the following WELCOME screen should be displayed.

Open Documents Create new files Use Templates

Help files Training Tips

2 The WELCOME screen allows you to open saved files, start different types of files and
obtain help with Flash.

3 Under the CREATE NEW section click on FLASH FILE (ACTIONSCRIPT 3.0) to start a
new Flash document.

© Guided Computer Tutorials 2009 1-1

Learning Adobe Flash CS4

The Flash Screen

1 You will receive the FLASH SCREEN similar to the following diagram.

Panel Group

Stage

Pasteboard Tools Panel

Timeline Panel

2 Look at the labelled sections of the diagram and refer to it until you are fully
familiar with the different screen sections.

The Flash Workspace

There are two parts to the Flash workspace which is at the centre of the screen:
• The STAGE AREA which is the white area.
• The PASTEBOARD which is the grey area that surrounds the stage.
Only objects within the STAGE AREA are included in a movie. The PASTEBOARD is mainly
used to allow objects to move onto the stage then off.

1-2 © Guided Computer Tutorials 2009
 Getting Started With Flash 1

Paste-
board Stage

NOTE: This is what the shape would look like if it was exported from
Flash.

4 Display the VIEW menu and select PASTEBOARD to turn it back on.

© Guided Computer Tutorials 2009 1-3

Learning Adobe Flash CS4

The Properties Panel

The PROPERTIES panel is one of the most used sections of the FLASH screen.

4 Double click in the shape to select all its parts and press the DELETE key to remove
it from the screen.

1-4 © Guided Computer Tutorials 2009
 Getting Started With Flash 1

Other Panels
Flash provides all the tools needed to create animations in a series of panels that are
displayed around the stage and work areas.

A The Tools Panel

The TOOLS panel runs down the right of the screen and it has four sections. The
DRAWING tools, the VIEW tools, the COLOUR tools and the tool OPTIONS.

© Guided Computer Tutorials 2009 1-5

Learning Adobe Flash CS4

7 Try clicking on some of the other DRAWING tools to see what options are available
for them. Not all tools have options.

B The Timeline Panel

The TIMELINE panel is at the bottom of the screen. It has two main sections.

NOTE: You will use the TIMELINE panel extensively when creating
animations.

1-6 © Guided Computer Tutorials 2009
 Getting Started With Flash 1
C The Motion Editor Panel
The MOTION EDITOR panel is usually housed next to the TIMELINE panel.

D The Panel Group

At the right of the screen are some of the general panels that are available such as the
PROPERTIES panel and the LIBRARY panel. You can add or remove panels from your
screen, expand or collapse them, or ‘dock’ them so that they are displayed neatly under
one another.
1 Display the WINDOW menu and select COLOUR to open the COLOUR panel.

© Guided Computer Tutorials 2009 1-7

Learning Adobe Flash CS4

NOTE: i There are many more panels available from the WINDOW
menu.
ii You can add panels to the bottom of the PANEL GROUP by
dragging the panel’s label to the base of the PROPERTIES
panel.

1-8 © Guided Computer Tutorials 2009
 Getting Started With Flash 1

Rulers, Grids and Guides

Flash provides a range of screen tools to assist with the accurate creation of animations.
These include Rulers, Grids and Guide lines.

A Rulers

NOTE: The Rulers allow you to accurately place objects on the screen.

2 The Ruler units are in PIXELS (screen lights) by default as this is the most common
measurement when creating screen images.

3 To change the Ruler units, display the MODIFY menu and select DOCUMENT.

© Guided Computer Tutorials 2009 1-9

Learning Adobe Flash CS4

B Grids
A variety of different grids can be placed on the screen. You can set objects to snap to
the grid points and set how accurately the objects snap to those grid points.

4 You can change the grid size. Display the VIEW menu again, highlight GRID and
select EDIT GRID.

1-10 © Guided Computer Tutorials 2009
 Getting Started With Flash 1

NOTE: The GRID dialogue box is dynamic which means that as you
make changes you can view those changes on the screen
before closing the dialogue box. You can also set the accuracy
of the snap by clicking on the SNAP ACCURACY box and
selecting the required accuracy level.

6 Display the VIEW menu, highlight GRID and select SHOW GRID to turn the grid off.

7 Display the VIEW menu again, highlight SNAPPING and select SNAP TO GRID to
turn the snap to grid option off.

C Guides
Guides are grid lines that you drag on to the screen one at a time. They allow you to
set the grid that you want and have less lines on the screen. Usually the SHOW GUIDES
option is turned on in the VIEW menu. If you try to create a GUIDE line and nothing
happens, check that the SHOW GUIDES option is turned on.

© Guided Computer Tutorials 2009 1-11

Learning Adobe Flash CS4

NOTE: You can drag as many guide lines onto the screen as you
require.

3 Guides can be edited in the same way as grids. Display the VIEW menu, highlight
GUIDES and select EDIT GUIDES.

6 Remove the vertical guide from the screen by dragging it back to the left Ruler.

1-12 © Guided Computer Tutorials 2009
 Getting Started With Flash 1

Using the Drawing Tools

The standard DRAWING tools such as lines, ovals and rectangles are similar to those used
in other drawing programs. The next chapter will look at some specific Flash tools.

NOTE: The SHIFT key can be held down as you drag a line when you
want to keep the line horizontal, vertical or at a 45° angle.

NOTE: Any tool that has an arrow head at its bottom right corner
contains other tools.

© Guided Computer Tutorials 2009 1-13

Learning Adobe Flash CS4

NOTE: The SHIFT key can be held down as you drag the OVAL TOOL to
produce a circle.

The Flash Workspace

The Flash workspace can be altered to suit the project you are doing or you can
customise the workspace.

1-14 © Guided Computer Tutorials 2009
 Getting Started With Flash 1
3 Look at some of the other workspaces if you wish.

© Guided Computer Tutorials 2009 1-15

Learning Adobe Flash CS4

Flash Assignment 1
Your task for this Assignment is to create a simple sketch using the DRAWING TOOLS.
It could be a stick figure walking, a bird or a ball bouncing off a wall. You can turn on
Rulers and/or the Grid, or use Guides to help create the sketch.

1 Create the simple shape.

2 Save it in your STORAGE folder under an appropriate name.
3 Ask your teacher to check your completed sketch.

1-16 © Guided Computer Tutorials 2009