Learning Adobe Flash Cs4 - Introduction

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

Training Tips

Help files

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

Pasteboard

NOTE:

4



1

Stage

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

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

1-4

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

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

1-6

You will use the TIMELINE panel extensively when creating animations.

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

1-8

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.

© 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

NOTE:

1

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 3



1

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