Flash CS4

Lesson 1 - Getting acquainted

Adobe® Flash® CS4 Professional provides a comprehensive authoring environment for creating
interactive Web sites and digital animation. Flash is widely used to create engaging applications that
are rich with video, sound, graphics and animation. You can create original content in Flash or
import it from other Adobe applications, quickly design simple animations, and use Adobe
ActionScript 3.0 to develop sophisticated interactive projects.

Lesson overview
In this lesson, you’ll learn how to do the following:

 Create a new file in Flash

 Adjust Stage settings in the Property inspector
 Add layers to the Timeline
 Manage keyframes in the Timeline
 Work with imported images in the Library
 Move and reposition objects on the Stage
 Open and work with panels
 Select and use tools in the Tools panel
 Preview your Flash animation
 Search for topics in Flash Help
 Access online resources for Flash

1
Additional resources
 Help > Flash Help. Community Help is an integrated online environment of instruction,
inspiration, and support.
 Product support centre Visit www.adobe.com/support/fash/
 Adobe TV. Tutorials in the form of how to videos http://tv.adobe.com/

Also check out these useful links:

 The Flash CS4 product home page at www.adobe.com/products/fash/

 Flash user forums at www.adobe.com/support/forums/ for peer-to-peer discussions of
Adobe products.
 Flash Exchange at www.adobe.com/cfusion/exchange/ for extensions, functions, code, and
more.
 Flash plug-ins at www.adobe.com/products/plugins/fash/.

Authors note
Instruction / actions you need to take will be in the form of numbered instructions. Otherwise all
other text is for information purposes.

You will be required to copy down the appropriate lesson folder for each handout, see lecturer for
details.

In the majority of cases, each lesson has samples of completed projects i.e. lesson 1 may have an
end file of 01end. These are included so you can compare your work to the end product to see if you
have achieved the desired goal.

2
Getting acquainted
On first running Flash the following screen appears. Allowing access to templates, tutorials and
other resources.

1. Copy over the lesson 1 folder, see lecturer for guidance

2. Start flash, type flash in the start search box
3. File > open 01end.swf, the animation plays, make sure it’s the swf file you open not the flash
file

4. Close the preview window

5. File > new action script 3.0

ActionScript 3.0 is the latest version of Flash’s scripting language, which you use to add
interactivity. ActionScript 3.0 requires your browser to have Flash Player 9 or later. In this lesson,
you will not be working with ActionScript, but you still must choose with which version your file
is compatible.

6. File > save 01_workingcopy.fla

Always save your files with .fla extension to identify it as a flash source file.

3
Getting to know the work area
The Adobe Flash work area includes the command menus at the top of the screen and a variety of
tools and panels for editing and adding elements to your movie. You can create all the objects for
your animation in Flash, or you can import elements you’ve created in Adobe Illustrator, Adobe
Photoshop, Adobe After Effects, and other compatible applications.

By default, Flash displays the menu bar, Timeline, Stage, Tools panel, Property inspector, and a few
other panels. As you work in Flash, you can open, close, dock, undock, and move panels around the
screen. To return to the default workspace, choose Window > Workspace > Essentials.

About the stage

The white area viewers see when
watching a movie is the stage.

The gray area is off stage, objects

can be placed off stage but will not
be visible to the audience.

1. To just see the stage. View >

pasteboard.
2. Now re enable pasteboard
3. Scale stage to fit window view > magnification > fit in window

or choose magnification view from the

pull down.

Changing the stage properties

Firstly set the colour and the dimensions of the stage. This is done using the property inspector to
the right of the stage.

1. Change stage dimensions to width 400,

height 250

4
 2. In the same window, change the background colour to dark gray #333333

3. Click ok

Working with the library panel

The library contains symbols created in flash as well as imported files, bitmaps, graphics, sound files
and video clips.

Items can be organised into folders. Items can be imported directly to the library or stage, items
added to the stage are automatically added to the library. To view the stage

1. Window > library

Importing an item to the library

Graphics can be created in flash and stored in the library, but can also be imported. Such as jpeg
images or mp3 sound files.

1. File > import > import to library, select

background.jpg
2. Import the remainder of the jpegs
3. Click photo3.jpg to preview

5
Adding an item from the library panel to the stage
To use an imported image simply drag from the library to the stage.

1. If the library is not visible, window > library

2. Drag the background image to the stage, approximately over the centre of the stage

Understanding the timeline

The Timeline is located below the Stage. Like films, Flash documents measure time in frames. As the
movie plays, the playhead, shown as a red vertical line, advances through the frames in the Timeline.
You can change the content on the Stage for different frames. To display a frame’s content on the
Stage, move the playhead to that frame in the Timeline.

At the bottom of the Timeline, Flash indicates the selected frame number, the current frame rate
(how many frames play per second), and the time that has elapsed so far in the movie.

The Timeline also contains layers, which help you organize the artwork in your document. Think of
layers as multiple film strips stacked on top of each other. Each layer contains a different image that
appears on the Stage, and you can draw and edit objects on one layer without affecting objects on
another layer. The layers are stacked in the order in which they appear in the Timeline, so that
objects on the bottom layer in the Timeline are on the bottom of the stack on the Stage. You can
hide, show, lock, or unlock layers. Each layer’s frames are unique, but you can drag them to a new
location on the same layer or copy or move them to another layer.

Renaming layers
The name of the layer should reflect its content.

1. Select the existing layer in timeline

2. Double click name to rename it background

6
 3. Click outside to apply change

4. Click the black dot to lock the layer, to prevent

accidental changes

Adding a layer
All flash documents must have a minimum of one layer, more layers can be added. The objects in
the top layer will overlap objects in lower layers.

1. Select the background layer in the time line

2. Insert > timeline > layer

3. Rename it photo1

The timeline now has two layers.

4. Select photo1 layer

7
 5. Window > library (if library not already open)
6. Drag photo1 from the library onto the stage

7. Add another layer, rename it photo2

Note: to rearrange layers, simply click and drag. To delete layers use delete icon

Inserting frames
We need to create “time” by adding frames. Just think of frames as a fraction of a second, more
frames gives longer animations.

1. Select frame 48, on background layer

2. Insert > timeline > frame

Frames are now added to the background layer.

3. Select frame 48 on the photo1 layer

4. Insert frames on the layer

8
 5. Do the same for photo2

As the default is 12 frames per second, this is a 4 second animation.

Note: selecting multiple layers. As in windows multiple items can be selected using ctrl and shift to
select. Multiple layers can be also selected in this way.

Creating a keyframe
Keyframes indicate a change in content on the stage, these are indicated as circles on the timeline.
Empty circles indicate empty layers at that time. Filled in black circles indicate content on that layer
for that given time.

1. Select frame 18 on photo2 layer

2. Insert > timeline > keyframe

9
 Shows as empty circle on frame.

3. Select frame 18 on photo2 layer, if not selected

4. Drag photo2 onto the stage

Notice the empty circle is now filled at frame 18.

5. Click and drag the red play head to the left and right to show what is happening on the stage
at any one time

Note: removing keyframes – don’t press del! That will remove the contents of that keyframe. To
delete the keyframe, modify > timeline > clear frame.

10
Moving a keyframe
Simply drag to required frame, this will change the time when the image appears.

1. Select keyframe on frame 18 photo2 layer

2. Drag to keyframe 12

Photo2 now appears earlier in the animation.

Organising layers in a timeline

Layer folders can help give structure and organisation to the design.

Creating layer folders

1. Select layer2
2. Insert new layer, rename photo3
3. Insert keyframe on frame 24
4. Drag photo3 onto the stage

Four layers now exist, top three contain photos appearing at different
keyframes.

5. Select photo3 layer, insert layer folder icon

11
 6. Rename the folder photos

Adding layers to layer folders

Flash displays layers in the order that they appear on the time line.

1. Drag the photo1 layer into the photos folder

Notice the indentation, showing layer exists within the folder.

2. Repeat for photo2 and photo3

Note: Collapse and expand the folder by clicking. Be aware deleting a layer folder deletes its entire
contents of the folder.

12
Changing the appearance of the timeline
1. To change the viewable size of the timeline click and choose short

2. Drag the height of the timeline to suit

the screen

Note: the width can be adjusted with tiny, small, normal,

medium or large.

Using the property inspector

The property inspector gives access to attributes associated with the selection. I.e. will show the
appropriate properties for the object that is selected.

Positioning an object on the screen

1. Select frame one, photo1 layer notice picture has blue highlight, click on photo on the stage

2. Window > properties to display the properties panel

3. X axis = 30 y axis = 0

13
Note: objects can also be dragged around the stage.

X and Y coordinates start at the top right of the stage.

X increases to the right, Y increases as it moves down.

4. Window > rotate

5. Either click and drag left to change the value to -12 or type it in
6. Select frame 12 photo2 layer, click on photo
7. X= 40, Y=0, rotation 8 (to give it contrast to photo1)

8. Select frame 24, photo3 layer, click on

photo on the stage
9. X=20, Y= 25, rotate -2 (to contrast the
other photos)

14
Working with panels (information only)
Just about everything you do in Flash involves a panel. In this lesson, you use the Library panel, Tools
panel, Property inspector, Transform panel, History panel, and the Timeline. In later lessons, you’ll
use the Actions panel, the Colour panel, the Motion panel, and other panels that let you control
various aspects of your project. Because panels are such an integral part of the Flash workspace, it
pays to know how to manage them.

To open any panel in Flash, choose its name from the Window menu. In a few cases, you may need
to choose the panel from a submenu, such as Window > Other Panels > History.

By default, the Property inspector, Library panel, and Tools panel appear together at the right of the
screen, the Timeline and Motion Editor are at the bottom, and the Stage is on the top. However, you
can move a panel to any position that is convenient for you.

 To undock a panel from the right side of the screen, drag it by its tab to a new location.
 To dock a panel, drag it by its tab into the dock at a new position on the screen. You can drag
it to the top, bottom, or in between other panels. A blue highlight indicates where you can
dock a panel.
 To group a panel with another, drag its tab onto the other panel’s tab.
 To move a panel group, drag the group by its dark gray top bar.

You also have the option of displaying most of the panels as icons to save space but still maintain
quick access. Click the upper-right arrows to collapse the panels to icons. Click the arrows again to
expand the panels.

Using the tools panel

Displayed to the right of the screen. Can be resized and repositioned accordingly.

Selecting tools
As you select different tools more options are available at the bottom of the tools bar and
the properties panel will change according to the tool selected.

Tools with black arrows in the corner represent other tools are in the group hidden under
the selected tool.

Click and hold on a tool to display hidden tools.

15
1. Select top layer

2. Insert layer, rename text

3. Lock the other layers to stop accidental changes

4. Move the play head to frame 36

5. Select frame 36 in the text layer (notice the blue box)

6. Insert > timeline > keyframe (F6)

16
7. Select text tool
properties: rosewood std,
38pt, black text

Note the alpha %

determines transparency.

8. Ensure keyframe in frame 36 text layer is selected

9. Click on the stage where the text is to begin

10. Enter text, press enter at end of each word

11. Select selection tool

12. Rotate to match

17
 13. File > save
14. Compare against 01end.fla

Tools panel
overview
The Tools panel contains selection
tools, drawing and painting tools, and
navigation tools. The options area in
the Tools panel lets you modify the
selected tool. The expanded menu on
the right shows the hidden tools. The
black squares on the expanded menu
to the right indicate the default tool
that appears in the Tools panel. The
single capital letters in parentheses
indicate the keyboard shortcuts to
select those tools. Notice how the
tools are grouped together by similar
function.

18
Undoing stapes in flash
To undo one command, ctrl+z or edit > undo.

To redo a step edit > redo

The simplest way to undo multiple steps is to use the history panel.

1. Window > other panels > history

2. Use the vertical slider to undo to the point before insertion of text
3. Notice the reversal to the changes you made and future changes are in gray

4. Reapply the changes to bring it back to a final image

19
Previewing your movie
As you develop your movie it is a good idea to frequently preview the movie to see how it is
developing.

1. Control > test movie or ctrl + enter

Flash automatically loops your movie. If this is not required, control > loop to deselect.

2. Close preview window

Note: preview create a movie file with the extension of .swf.

Finding resources for using flash

The Adobe web site has up to date information on all flash features

1. Help > flash help

The flash help files pdf can also be downloaded for off line viewing.

www.adobe.com/go/documentation

also the community help page

http://community.adobe.com/help/index.html?l=0

Checking for updates

Adobe provider periodical updates to software. To check for updates:

Help > updates

This can be set to automatically update edit > preferences

20
Review questions
1. What is the Stage?
2. What’s the difference between a frame and a keyframe?
3. What’s a hidden tool, and how can you access it?
4. Name two methods to undo steps in Flash and describe them.
5. How can you find answers to questions you have about Flash?

21
Review Answers
1. The Stage is the area viewers see when a movie is playing in Flash Player or a Web browser.
It contains the text, images, and video that appear on the screen. Objects that you store on
the Pasteboard outside of the Stage do not appear in the movie.
2. A frame is a measure of time on the Timeline. A keyframe is represented on the Timeline
with a circle and indicates a change in content on the Stage.
3. Because there are too many tools to display at once in the Tools panel, some tools are
grouped, and only one tool in the group is displayed. (The tool you most recently used is the
one shown.) Small triangles appear on tool icons to indicate that hidden tools are available.
To select a hidden tool, click and hold the tool icon for the tool that is shown, and then
select the hidden tool from the menu.
4. You can undo steps in Flash using the Undo command or the History panel. To undo a single
step at a time, choose Edit > Undo. To undo multiple steps at once, drag the slider up in the
History panel.
5. Choose Help > Flash Help to browse or search Flash Help for information about using Flash
CS4 and ActionScript 3.0. Choose Help > Flash Support Center or visit www.adobe.com to
see tutorials, tips and other resources for flash users.

22