Learning Adobe Flash CS4 - Introduction

Guided Computer Tutorials

LearningAdobe

Flash CS4

By Greg Bowden

PUBLISHED BY

GUIDED COMPUTER TUTORIALSPO Box 311Belmont, 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.

© Guided Computer Tutorials, 2009 C-3

Learning Flash CS4

Module 1 Contents

Chapter 1: Getting Started With FlashThe Flash Start Page ...............................................................................1-1The Flash Screen .....................................................................................1-2The Flash Workspace .............................................................................1-2The Properties Panel ..............................................................................1-4Other Panels ............................................................................................1-5

The Tools Panel .............................................................................1-5The Timeline Panel ........................................................................1-6The Motion Editor Panel ..............................................................1-7The Panel Group ...........................................................................1-7

Rulers, Grids and Guides ......................................................................1-9Rulers ..............................................................................................1-9Grids ..............................................................................................1-10Guides ...........................................................................................1-11

Using the Drawing Tools.....................................................................1-13The Flash Workspace ...........................................................................1-14Flash Assignment 1 .............................................................................1-16

Chapter 2: Drawing ToolsCookie Cutting ........................................................................................2-1Selecting Objects .....................................................................................2-3The Selection Tool ..................................................................................2-5Flash Exercise 2-1 ...................................................................................2-7Rounded Rectangles ..............................................................................2-7The Pencil Tool ........................................................................................2-9The Brush Tool ......................................................................................2-11The Ink Bottle and Paint Bucket Tools ..............................................2-13

The Ink Bottle Tool ......................................................................2-15The Paint Bucket Tool .................................................................2-16

© Guided Computer Tutorials, 2009C-4

Learning Adobe Flash CS4

The Eyedropper Tool ...........................................................................2-16The Eraser Tool .....................................................................................2-17Object Drawing .....................................................................................2-19Snap to Object .......................................................................................2-21Flash Assignment 2 .............................................................................2-23

Chapter 3: Symbols, Libraries and LayersCreating a Simple Logo .........................................................................3-1

Drawing a Circle ...........................................................................3-1Adding a Rectangle.......................................................................3-2Placing the Rectangle Over the Circle ........................................3-3Adding Text to the Logo ..............................................................3-4

Duplicating the Logo .............................................................................3-6Using Symbols and the Library Panel .................................................3-9

Creating a Symbol .........................................................................3-9The Library Panel ........................................................................3-10

Exporting Graphics ..............................................................................3-13Layers .....................................................................................................3-14

Importing the Graphics ..............................................................3-14Adding the Background to the Stage .......................................3-15Adding a Second Layer ..............................................................3-16Adding an Image to the Image Layer ......................................3-17Adding the Logo .........................................................................3-18

Using the Layers ...................................................................................3-19Changing the Stacking Order ....................................................3-19Turning Layers Off ......................................................................3-19Locking Layers ............................................................................3-20Image Outlines ............................................................................3-21

Flash Assignment 3 .............................................................................3-22

© Guided Computer Tutorials 2009 C-5

Contents

Chapter 4: Motion Tween AnimationsCreating a Motion Tween ......................................................................4-1

Setting the Symbol ........................................................................4-1Setting the Motion Tween ............................................................4-2

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

Chapter 5: Multiple Object AnimationsThe Background Layer ..........................................................................5-1

Setting the Background Layer .....................................................5-1Locking the Layer .........................................................................5-2

The Ball Layer .........................................................................................5-2Adding the Background Frames ..........................................................5-3Animating the Ball .................................................................................5-4

Drawing the Ball ...........................................................................5-4Converting the Circle to a Symbol ..............................................5-5Setting the Motion Tween ............................................................5-5Creating the Bounce ......................................................................5-6

Adjusting the Animation ......................................................................5-6Increasing the Time of the Animation .................................................5-8Flash Assignment 5 ...............................................................................5-9



Chapter 6: The Motion Editor PanelOpening the Motion Editor Panel ........................................................6-1Adjusting the Easing ..............................................................................6-2

Creating a Custom Ease ...............................................................6-2Setting the Basic Motion ...............................................................6-4

Adjusting the Path .................................................................................6-4Other Adjustments .................................................................................6-6Flash Assignment 6 ...............................................................................6-8

Chapter 7: Other Tweening TypesShape Tweening ......................................................................................7-1

Setting the Start Shape ..................................................................7-1Setting the End Shape ...................................................................7-1Setting the Shape Tween ..............................................................7-3Adjusting Shapes ..........................................................................7-3Using Shape Hints ........................................................................7-5Removing Shape Hints .................................................................7-7Reversing the Shape Tween .........................................................7-8

Classic Tweening ....................................................................................7-9Inserting a Symbol ........................................................................7-9Inserting the End Keyframe ......................................................7-10Setting the Classic Tween ...........................................................7-11Adjusting the Animation ...........................................................7-12

Flash Assignment 7 .............................................................................7-13

Chapter 8: Fixed Point AnimationsLoading the Prepared File .....................................................................8-1Adding Layers ........................................................................................8-2Inserting the Clockface Frames ............................................................8-2Adding Guides to the Screen ................................................................8-3Animating the Big Hand .......................................................................8-4

Adding the Symbol to the Animation ........................................8-4Editing the Big Hand Symbol ......................................................8-4Animating the Big Hand ..............................................................8-6


Contents

Animating the Small Hand ...................................................................8-7Inserting the Small Hand Symbol ...............................................8-7Editing the Small Hand Symbol .................................................8-7Creating the Motion Tween .........................................................8-8

Exercise 8-1 ..............................................................................................8-9Flash Assignment 8 .............................................................................8-10

Chapter 9: Circular AnimationsLoading the Prepared File .....................................................................9-1Converting the Beetles to Symbols ......................................................9-2

The Red Beetle ...............................................................................9-2The Blue Beetle ..............................................................................9-4

Setting the Background Layer Frames ................................................9-5Animating the Red Beetle .....................................................................9-5

Setting the Motion Tween ............................................................9-5Adjusting the Motion Path .........................................................9-6Orient to Path ................................................................................9-9

Animating the Blue Beetle ..................................................................9-10Setting the Motion Tween ..........................................................9-10Adjusting the Motion Path ........................................................9-11Setting the Orient to Path ...........................................................9-12

Copying Frames ...................................................................................9-13Stopping the Animation ......................................................................9-14Adjusting the Race ...............................................................................9-15Flash Assignment 9 .............................................................................9-16

Chapter 10: Frame By Frame AnimationsDrawing an Eyeball .............................................................................10-1Adding the Eye Shape .........................................................................10-3Copying the Eye ...................................................................................10-5Adding Layers ......................................................................................10-6Animating the Eyelid ...........................................................................10-7Duplicating the Keyframes ...............................................................10-10Flash Assignment 10 .........................................................................10-14



Chapter 11: Creating ButtonsCreating a Simple Button ....................................................................11-1

Setting the Button Symbol .........................................................11-1The Button States .........................................................................11-2Testing the Button .......................................................................11-4Adding Text to the Button .........................................................11-5Other Adjustments ......................................................................11-6

The Hit Area ..........................................................................................11-7Creating a Button ........................................................................11-7Setting the Over and Down States ............................................11-8Setting the Hit Area ....................................................................11-9

Creating a Navigation Bar ................................................................ 11-11Loading the Global Page File ..................................................11-11Adding the Button Layer .........................................................11-12Creating the First Button .........................................................11-12Adding Some Text to the Button .............................................11-13Setting the Button States ..........................................................11-14Copying the Buttons .................................................................11-16Altering the Text ........................................................................11-16Testing the Buttons ....................................................................11-17

Using Prepared Buttons ....................................................................11-17Flash Assignment 11 .........................................................................11-19

Chapter 12: Publishing AnimationsPublish Settings ....................................................................................12-2Document Size ......................................................................................12-4

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


Contents

Module 2 Contents

Chapter 13: Creating Movie ClipsCreating a Movie Clip .........................................................................13-1

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

Using the Movie Clip ...........................................................................13-6Adjusting the Flight Path ....................................................................13-7Adding Another Instance of the Bird ................................................13-8Instance Names ..................................................................................13-11Flash Assignment 13 .........................................................................13-12

Chapter 14: Using MasksCreating a Mask over a Background .................................................14-1

Creating the Background Layer ................................................14-1Inserting the Mask Layer ...........................................................14-2Creating the Mask .......................................................................14-3Background Colours ...................................................................14-4Editing the Mask .........................................................................14-5

Text Masks .............................................................................................14-6Creating the Mask Layer ............................................................14-6Creating the Background Layer ................................................14-7Creating the Mask Effect ............................................................14-9Animating the Background .....................................................14-10Animating the Words ...............................................................14-13

Exercise 14-1 ........................................................................................14-15Movie Clip Masks ..............................................................................14-15

Importing the Image .................................................................14-15Creating the Movie Clip Symbol ............................................14-15Animating the Movie Clip .......................................................14-17Adjusting the Spline Path ........................................................14-18

Exercise 14-2 ........................................................................................14-19Flash Assignment 14 .........................................................................14-20



Chapter 15: Using the 3D ToolsThe 3D Rotation Tool ...........................................................................15-1

Creating the Movie Clip .............................................................15-1Selecting the 3D Rotation Tool ..................................................15-2Rotating the Object......................................................................15-3Adjusting the Perspective ..........................................................15-4Adjusting the Vanishing Point ..................................................15-4Moving the Rotation Point.........................................................15-5Using the 3D Rotation Tool in Animations .............................15-6

The 3D Translation Tool ......................................................................15-7Creating the Movie Clip Symbol ..............................................15-7Applying the 3D Translation .....................................................15-8

Movie Credits .....................................................................................15-10Creating the Movie Clip ...........................................................15-10Animating the Text ...................................................................15-12

Applying 3D Effects on Images ........................................................15-15Importing the Image .................................................................15-15Converting the Image to a Movie Clip Symbol ....................15-15Animating the Globe ................................................................15-16Adding Some Rotations ...........................................................15-18

Flash Assignment 15 .........................................................................15-20

Chapter 16: Using BehavioursLoading the Prepared File ...................................................................16-1Looking at the Animation ...................................................................16-1Stopping the Animation ......................................................................16-2Setting an Invisible Button ..................................................................16-3Setting the Behaviour ..........................................................................16-5Adding Sound to the Animation .......................................................16-7

Naming the Sound ......................................................................16-7Setting the Behaviour .................................................................16-8

Modifying Behaviours .........................................................................16-9Deleting Behaviours ...........................................................................16-10Adding a Sound to the Invisible Button .........................................16-10Flash Assignment 16 .........................................................................16-12


Contents

Chapter 17: Text EffectsCreating Text .........................................................................................17-1Character Spacing ................................................................................17-3Selectable Text .......................................................................................17-4Linked Text ............................................................................................17-6Vertical Text ...........................................................................................17-7Animating Letters ................................................................................17-9

Breaking the Text Apart ..............................................................17-9Converting to a Guide Layer ...................................................17-10Adding frames to the Layers ...................................................17-11Adding the Guide Lines ...........................................................17-12Animating the Letters ...............................................................17-12

Exercise 17-1 ........................................................................................17-14Converting Text into Shapes .............................................................17-14

Breaking Text Apart Twice .......................................................17-14Creating the Shape Tween .......................................................17-16Some Other Text Effects ...........................................................17-18Reversing Frames ......................................................................17-19


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



Chapter 19: Animating Still PhotosLoading the Prepared File ...................................................................19-1Breaking the Photo Apart ....................................................................19-1Separating the Head ............................................................................19-2Converting the Head to a Symbol .....................................................19-4Animating the Head ............................................................................19-5

Setting the Frames .......................................................................19-5Setting the Head’s Left Position ................................................19-5Setting the Head’s Right Position .............................................19-6Returning the Head to its Start Position ..................................19-7

Wagging the Tail ...................................................................................19-8Erasing the Tail ............................................................................19-8Creating the Tail Layer ...............................................................19-9Converting the Tail to a Symbol ................................................19-9Animating the Tail ....................................................................19-10


Chapter 20: Using the Bone ToolThe Bones Tool Basics ..........................................................................20-1

Drawing the Shape......................................................................20-1Applying the Bone Tool .............................................................20-2Using the Bone Links ..................................................................20-3Bone Styles ...................................................................................20-5Runtime ........................................................................................20-6

Animating Imported Images ..............................................................20-7Loading the Prepared File ..........................................................20-7Separating the Biceps ..................................................................20-7Separating the Forearm ............................................................20-10Separating the Hand .................................................................20-11Applying the Bone Tool ...........................................................20-13Creating the Animation ............................................................20-14

Animating Drawn Shapes .................................................................20-17Drawing the Shape....................................................................20-17Setting the Bone Structure .......................................................20-17Animating the figure ................................................................20-19



Contents

Chapter 21: Adding Sounds to AnimationsLoading an Animation and Sound ....................................................21-1Adding Sounds to the Timeline .........................................................21-1Synchronising Sounds .........................................................................21-3

Event .............................................................................................21-3Stream ...........................................................................................21-4Stop ................................................................................................21-7

Sound Effects ........................................................................................21-7Removing the Extra Sounds ......................................................21-7Using the Fade in Effect .............................................................21-8Editing Sound Effects .................................................................21-9

Adding Sounds to Buttons ................................................................21-11Placing the Button on the Stage ..............................................21-11Adding the Sound to the Library ............................................21-12Adding the Sound to the Button .............................................21-12

Sample Sounds ...................................................................................21-14Flash Assignment 21 .........................................................................21-15

Chapter 22: Creating ScenesLoading the Prepared File ...................................................................22-1The Introduction Scene ........................................................................22-2

Creating the Animation ..............................................................22-2Naming the Scene .......................................................................22-5

The Apes Scene .....................................................................................22-6Creating a New Scene .................................................................22-6Adding a Background ................................................................22-7Inserting the Gorilla ....................................................................22-8The Orangutan Layer .................................................................22-9

Looking at the Animation So Far .....................................................22-11The Big Cats Scene .............................................................................22-11Changing the Order of Scenes ..........................................................22-12Duplicating Scenes .............................................................................22-13Stopping the Animation ....................................................................22-14Flash Assignment 22 .........................................................................22-15



Chapter 23: Useful ToolsConverting Video Clips .......................................................................23-1

Importing the Video Clip. ........................................................23-1Saving the File .............................................................................23-2

Importing the Video Clip ....................................................................23-3Selecting the Video ......................................................................23-3Selecting the Skinning ................................................................23-4

Playing the Video Clip .........................................................................23-5Preset Animations ................................................................................23-6

Creating the Object .....................................................................23-6Applying a Motion Preset ..........................................................23-7Saving a Motion Preset ...............................................................23-8

The Deco Tool .......................................................................................23-9Using Vine Fill .............................................................................23-9Using Grid Fill .............................................................................23-9Using the Symmetry Brush ......................................................23-10Changing the Deco Shape ........................................................23-11Decorating Within a Shape ......................................................23-13Animating Deco Shapes ...........................................................23-14

The Spray Brush Tool .........................................................................23-14Flash Assignment 23 .........................................................................23-16

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

© Guided Computer Tutorials 2009 1-1

Chapter

1Getting 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.

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.

Create new filesOpen Documents Use Templates

Training TipsHelp files

© Guided Computer Tutorials 20091-2


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

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 WorkspaceThere are two parts to the Flash workspace which is at the centre of the screen:

• TheSTAGE AREA which is the white area.

• ThePASTEBOARD 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.

Timeline Panel

Stage

Pasteboard

Panel Group

Tools Panel



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.

StagePaste-board



The Properties PanelThe 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.



Other PanelsFlash 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.



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.



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.



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.



Rulers, Grids and GuidesFlash 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.



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.



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.



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.



Using the Drawing ToolsThe 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.



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

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



3 Look at some of the other workspaces if you wish.



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.