1.

Getting Acquainted

In Flash, the Stage is where the action takes place, the Timeline organizes frames and layers, and
other panels let you edit and control your creation.

In this lesson, you'll learn how to do the following:

l Open a file in Flash

l Add layers to the Timeline

l Create a keyframe in the Timeline

l Adjust settings in the Property inspector

l Open and work with panels

l Select and use tools in the Tools panel

l Search for topics in Flash Help

l Access online resources for Flash

This lesson will take less than an hour to complete. Copy the Lesson01 folder from the Adobe Flash CS3
Professional Classroom in a Book CD onto your hard drive if it's not already there.

Lic. Ciências da Comunicação Page 1 of 27 Design e Multimédia

Starting Flash and Opening a File

The first time you start Flash, you'll see a Welcome screen with links to standard file templates, tutorials, and
other resources. In this lesson, you'll complete an animation for a bottled-water company. Most of the artwork
is already in place. As you get to know the Flash workspace, you'll add an object from the Library panel to the
Stage and animate it.

1. Start Adobe Flash. In Windows, choose Start > All Programs > Adobe Flash CS3. In Mac OS, double-click
Adobe Flash CS3 in the Applications folder or the Dock.

Note

You can also start Flash by double-clicking a Flash (*.fla) file, such as the 01Start.fla file you'll use in this
lesson.
2. Choose File > Open. In the Open dialog box, select the 01End.swf file in the Lesson01/01End folder, and
click Open to preview the final project.

An animation plays. During the animation, a bottle moves onto the screen and tips to pour water.

3. Close the preview window.

4. Choose File > Open. In the Open dialog box, double-click the 01Start.fla file in the Lesson01/01Start
folder.

The 01Start.fla file opens with a logo already on the Stage. The Timeline contains several layers; the
contents of the layers change in different frames.

5. Choose File > Save As. Name the file 01_workingcopy.fla, and save it in the 01Start folder. Saving a
working copy ensures that the original start file will be available if you wish to start over.

Lic. Ciências da Comunicação Page 2 of 27 Design e Multimédia

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 Default from the Workspace menu in the Edit bar just above the
Stage.

[View full size image]

As with a theater stage, the Stage in Flash is the area viewers see when a movie is playing. It contains the
text, images, and video that appear on the screen. Move elements on and off the Stage to move them in and
out of the rectangular area in Flash Player or the web browser window where your Flash movie will play. You
can use the grid, guides, and rulers to help you position items on the Stage. Additionally, you can use the Align
panel and other tools you'll learn about in the lessons in this book.

To see the work area around the Stage, use the Zoom tool ( ) to zoom out, or choose View > Pasteboard.

To scale the Stage so that it fits completely in the application window, choose View > Magnification > Fit in
Window. You can also choose view options from the pop-up menu just above the Stage.

Lic. Ciências da Comunicação Page 3 of 27 Design e Multimédia

Like films, Flash documents measure time in frames. As the movie plays, the playhead 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.

[View full size image]

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

A new Flash document contains only one layer, but you can add as many layers as you need. It's a good idea
to name each layer to indicate its contents so that you can easily find the layer you need later.

You'll add a layer to the Timeline to contain the bottle image that you're going to animate.

1. Select the Mask layer in the Timeline.

2. Choose Insert > Timeline > Layer. A new layer appears between the Labels layer and the Mask layer.

3. Double-click the new layer to rename it, and type Pour. Click outside the name box to apply the new
name.

4. Click the lock icon above the layers to lock all layers. Locking a layer prevents you from accidentally
making changes to it.
Lic. Ciências da Comunicação Page 4 of 27 Design e Multimédia
 [View full size image]

5. Click the lock icon next to the Pour layer to unlock it.

[View full size image]

A keyframe indicates a change in content on the Stage. You'll insert a keyframe on the Pour layer where you
want the bottle to first appear.

1. Select frame 18 on the Pour layer. As you select a frame, Flash displays the frame number beneath the
Timeline.

[View full size image]

Lic. Ciências da Comunicação Page 5 of 27 Design e Multimédia

2. Choose Insert > Timeline > Keyframe.

[View full size image]

Lic. Ciências da Comunicação Page 6 of 27 Design e Multimédia

Working with the Library Panel

The Library panel is where you store and organize symbols created in Flash, as well as imported files, including
bitmaps, graphics, sound files, and video clips. The bottle image you're going to use has already been added to
the library and converted to a symbol.

Note

You'll learn much more about symbols in Lesson 3.

The Library panel lets you organize library items in folders, see how often an item is used in a document, and
sort items by type. When you import items into Flash, you can import them onto the Stage or into the library.
However, any item you import onto the Stage is also added to the library, as are any symbols you create. That
way, you can easily access the items to add them to the Stage again, edit them, or see their properties.

To display the Library panel, choose Window > Library, or press Ctrl+L (Windows) or Command+L (Mac OS).

When you select an item in the Library panel, it displays a thumbnail preview of the item. If the item you
selected is a sound file or is animated, click the Play button in the preview window to play it.

To add a library item to a Flash document, simply drag it from the Library panel onto the Stage. You've already
created a keyframe for the pour_bottle symbol. Now you'll drag an instance of that symbol onto the Stage.

1. Choose Window > Library to open the Library panel if it isn't already open.

Lic. Ciências da Comunicação Page 7 of 27 Design e Multimédia

2. Select the keyframe you created at frame 18 of the Pour layer.

[View full size image]

3. Select the pour_bottle symbol in the Library panel.

Lic. Ciências da Comunicação Page 8 of 27 Design e Multimédia

4. Drag an instance of the pour_bottle symbol onto the Stage. You'll move it into position in the next section
of this lesson.

[View full size image]

Lic. Ciências da Comunicação Page 9 of 27 Design e Multimédia

Using the Property Inspector

The Property inspector gives you quick access to the attributes you're most likely to need. What appears in the
Property inspector depends on what you've selected. For example, if a frame is selected, the Property
inspector includes a Tween option; if an object on the Stage is selected, the Property inspector shows its x and
y coordinates. You'll use the Property inspector to move the bottle to its initial and final positions on the Stage,
and then to add a motion tween that animates the bottle.

Frame properties

[View full size image]

Object properties

[View full size image]

First, you'll move the bottle into its initial position using the Property inspector. You'll also use the Transform
panel to rotate the bottle.

1. Select the bottle that you dragged onto the Stage.

2. In the Property inspector, type 689 for the X value and -59 for the Y value. Press Enter or Return to apply
the values. The bottle moves to the right, above the Stage.

Note

If the Property inspector is not open, choose Window > Properties > Properties, or press Ctrl+F3
(Windows) or Command+F3 (Mac OS).

[View full size image]

Lic. Ciências da Comunicação Page 10 of 27 Design e Multimédia

3. Choose Window > Transform to open the Transform panel.

4. In the Transform panel, select Rotate, and type 35 in the Rotate box. Press Enter or Return to apply the
value.

The bottle should tip over, so that it appears to be pouring water. To achieve this effect, you could create a
keyframe for each frame in the Timeline, and then move the bottle slightly in each keyframe. It's much easier,
though, to specify the initial and final positions and then let Flash create the intermediate steps. The process
of creating intermediate steps is called tweening.

Note

You'll learn more about motion tweens in Lessons 2 and 4.

You'll animate the bottle so that it appears to be pouring, and then move the bottle off the Stage.

1. Select frame 24 in the Pour layer, and press F6 to insert a keyframe.

2. Select the bottle you positioned on the pasteboard.

3. In the Property inspector, type 668 for the X value and 31 for the Y value. Press Enter or Return to apply
the values.

4. In the Transform panel, type -25 in the Rotate box, and press Enter or Return.

Lic. Ciências da Comunicação Page 11 of 27 Design e Multimédia

5. In the Timeline, select any frame between frames 18 and 24 in the Pour bottle layer.

[View full size image]

6. In the Property inspector, choose Motion from the Tween menu. Flash adds an arrow to the frames in the
Timeline to show that a motion tween has been applied.

[View full size image]

7. In the Timeline, select frame 42 in the Pour layer, and press F6 to insert a keyframe.

8. Select the bottle on the Stage, and in the Transform panel, type 35 in the Rotate box. Press Enter or
Return.

9. Select frame 59, and press F6 to insert a keyframe.

10. With frame 59 selected in the Timeline, drag the bottle directly to the right, far off the Stage. Press Shift
as you drag to constrain its movement to a horizontal line.

11. Select any frame between frames 42 and 59, and choose Motion from the Tween menu in the Property
inspector. The Timeline displays an arrow to show that a motion tween has been applied. If you move the
playhead from frame 42 to frame 59, the bottle moves off the Stage.

[View full size image]

Lic. Ciências da Comunicação Page 12 of 27 Design e Multimédia

Working with Panels

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 Color panel, the Align 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 > Properties > Properties, or Window
> Other Panels > History.

[View full size image]

By default, the Property inspector, Filters panel, and Parameters panel appear together at the
bottom of the screen, the Timeline is at the top, and the Tools panel is on the left side. Most other
panels are displayed on the right side of the screen. However, you can move a panel to any
position that is convenient for you.

l To undock a panel from the right side of the screen, drag it by its tab to a new location.

l To dock a panel, drag it by its tab into the dock on the right side of the screen. You can
drag it to the top, bottom, or in between other panels.

l To group a panel with another, drag its tab onto the other panel's tab.

l To move a panel group, drag the group by its title bar.

Lic. Ciências da Comunicação Page 13 of 27 Design e Multimédia

Using the Tools Panel

The Tools panel—the long, narrow panel on the far left side of the work area—contains selection tools, drawing
and type tools, painting and editing tools, navigation tools, and tool options. You'll use the Tools panels
frequently to switch from the Selection tool to the Text tool to a drawing tool. When you select a tool,
remember to check the options area at the bottom of the panel to ensure that you're using the fill, stroke, or
other settings appropriate for your task.

You'll use the Zoom tool to enlarge the central logo area on the Stage. Then, you'll use the Oval tool to draw
an outline around the logo circle.

When you select a tool, the options available at the bottom of the Tools panel change. For example, when you
select a drawing tool, the Object Drawing mode and Snap To Object options appear. When you select the
Zoom tool, the Enlarge and Reduce options appear.

First, zoom in to see the logo circle more clearly.

1. Select the Zoom tool in the Tools panel.

2. Select the Enlarge icon ( ) in the options area of the Tools panel.

3. Click the aqua circle with the letters in it to enlarge it on the screen.

The Tools panel contains too many tools to display all of them at once. Some tools are arranged in groups in
the Tools panel; only the tool you last selected from a group is displayed. If there is a small triangle in the
lower-right corner of the tool button, there are other tools in the group. Click and hold the icon for the visible
tool to see the other tools available, and then select one from the pop-up menu.

You'll use the Oval tool, which is hidden by the Rectangle tool, to draw an outline around the logo circle.

1. Select the Pour layer in the Timeline, and then click the Insert Layer icon ( ).

Lic. Ciências da Comunicação Page 14 of 27 Design e Multimédia

2. Name the new layer Outline.
3. Lock the Pour layer so that you don't accidentally move anything on it.

4. In the Timeline, move the playhead to frame 293, the last frame in the movie, and select frame 293 in the
Outline layer.

[View full size image]

5. Click and hold the Rectangle tool in the Tools panel, and then select the Oval tool from the pop-up menu.

6.
Click the Stroke Color icon ( ) in the options area of the Tools panel. The Adobe Color Picker opens.

7. Select black in the Color Picker.

8.
Click the Fill Color icon ( ) in the options area of the Tools panel. The Color Picker opens again.

Lic. Ciências da Comunicação Page 15 of 27 Design e Multimédia

9. Select No Color in the Color Picker.

10. Hold down the Shift key as you draw an oval around the logo circle.

Note

Pressing the Shift key as you draw constrains the tool to draw a perfect circle. You can modify many tools
by pressing a key while you use them. For example, press the Alt (Windows) or Option (Mac OS) key as
you use the Zoom tool to change it from Enlarge mode to Reduce mode.
11. Select the Selection tool ( ), and then select the oval.

12. In the Property inspector, change the width and height values to 101 so that the oval you drew matches
the logo circle exactly.

13. Select the oval, and then use the arrow keys on your keyboard to nudge the circle into position.

14. In the Property inspector, change the Stroke Height to 4.

[View full size image]

Lic. Ciências da Comunicação Page 16 of 27 Design e Multimédia

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.

[View full size image]

Lic. Ciências da Comunicação Page 17 of 27 Design e Multimédia

Undoing Steps in Flash

In a perfect world, everything would go according to plan. But sometimes you need to move back a step or two
and start over. You can undo steps in Flash using the Undo command or the History panel.

To undo a single step in Flash, choose Edit > Undo, or press Control+Z (Windows) or Command+Z (Mac OS). To
redo a step you've undone, choose Edit > Redo.

To undo multiple steps in Flash, it's easiest to use the History panel, which displays a list of all the steps you've
performed since you opened the current document. Closing a document clears its history.

To open the History panel, choose Window > Other Panels > History.

The logo looked better before you added the black circle, so you'll remove the circle. First, undo the change in
stroke size using the Undo command, and then remove the entire Outline layer using the History panel.

1. Choose Edit > Undo to change the Stroke value back to 1.

2. Choose Window > Other Panels > History to open the History panel.

Lic. Ciências da Comunicação Page 18 of 27 Design e Multimédia

3. Drag the History panel slider up to the step just before you created the Outline layer. Steps below that
point are dimmed in the History panel, and they are removed from the project. To add a step back, move
the slider back down.

Note

If you remove steps in the History panel and then perform additional steps, the removed steps will no longer
be available.

Lic. Ciências da Comunicação Page 19 of 27 Design e Multimédia

Previewing Your Movie

As you work on a project, it's a good idea to preview it frequently to ensure that you're achieving the effect
you want. To quickly see how an animation or movie will appear to a viewer, choose Control > Test Movie. You
can also press Ctrl+Enter (Windows) or Command+Return (Mac OS) to preview your movie.

1. Choose Control > Test Movie. Flash opens and plays the movie in a separate window.

2. Close the preview window.

Lic. Ciências da Comunicação Page 20 of 27 Design e Multimédia

Publishing Your Movie

When you're ready to share your movie with others, publish it from Flash. For most projects, Flash will create
an HTML file, a SWF file, and a JavaScript (.js) file. The SWF file is your final Flash movie, the HTML file contains
the SWF file, and the JavaScript file ensures that browsers work well with your movie. You'll need to upload all
three files to the same folder on your web server. Always test your movie after uploading it to be certain that
it's working properly.

Note

You'll learn more about publishing options in Lesson 11.

1. Choose File > Publish Settings.

2. Click Formats.

3. Select Flash (.swf) and HTML (.html).

4. Click Publish.

5. Click OK to close the dialog box.

Lic. Ciências da Comunicação Page 21 of 27 Design e Multimédia

6. Navigate to the Lesson01/01Start folder to see the files Flash created.

[View full size image]

Lic. Ciências da Comunicação Page 22 of 27 Design e Multimédia

Using Flash Help

For complete information about using panels, tools, and other application features, refer to Flash Help. To open
Flash Help, choose Help > Flash Help.

Flash Help is divided into several books. The Using Flash book includes how-to tips, tutorials, and explanations
of Flash concepts and feature descriptions. Programming ActionScript 3.0, ActionScript 3.0 Language and
Components Reference, and Using ActionScript 3.0 Components are references for ActionScript 3.0, which lets
you extend the functionality and include interactivity in your Flash movies.

Note

Flash Help also includes references for earlier versions of ActionScript and for multiple versions of Flash Lite,
which is used to create animations for mobile and handheld devices.

If you want to learn more about a general feature set or concept in Flash, browse the table of contents. You'll
use the table of contents to see more information about what's new in Flash CS3.

1. Choose Help > Flash Help.

Lic. Ciências da Comunicação Page 23 of 27 Design e Multimédia

2. Expand the Using Flash book to view the table of contents.

[View full size image]

3. Click Getting Started > What's New > New Features to see links to new features in Flash CS3.

If you're not sure where a topic would be included in the table of contents, or if you want to see every topic
that refers to a concept or term, search for the appropriate keyword. You'll use the search function to learn
more about the History panel.

1. Choose Help > Flash Help.

Lic. Ciências da Comunicação Page 24 of 27 Design e Multimédia

2. In the Search field, type history.

[View full size image]

3. Click Search.

4. Select "Using the History Panel" to read about the History panel.

[View full size image]

Lic. Ciências da Comunicação Page 25 of 27 Design e Multimédia

Using Adobe Online Services

Another way to get information about Flash and to stay abreast of updates is to use Adobe online services.
With an active Internet connection, you can access the Adobe website (www.adobe.com) for information about
Flash and other Adobe products.

1. In Flash, choose Help > Help Resources Online.

Your default web browser launches and displays the Adobe Flash support page on the U.S. Adobe
Systems website.

Lic. Ciências da Comunicação Page 26 of 27 Design e Multimédia

2. Explore the site. You can find information such as tips and techniques, galleries of artwork by Adobe
designers and artists around the world, the latest product information, and troubleshooting and technical
information.

[View full size image]

3. Close your browser.

Congratulations. You've finished Lesson 1. Now that you're acquainted with the Flash workspace, you
can proceed to Lesson 2 to learn how to use Flash drawing tools. If you prefer, you can skip to any
lesson in the book. However, most people will find it useful to work through the lessons in order, as each
lesson builds on concepts and skills you've learned in previous lessons.

Lic. Ciências da Comunicação Page 27 of 27 Design e Multimédia