Learn Flash CS3 Tutorial

This site provides you with a foundation for working with Adobe Flash. Follow along with the tutorial, download the lesson files, and view the videos. For more Adobe Flash training options, visit AGI’s Flash training classes.

Excerpt from Dynamic Learning - Flash CS3 Professional

The Flash Tools panel

The Flash Tools panel includes everything you need to create, select, or edit graphics on the Stage. The double arrows at the very top of the Tools panel toggle it between displaying single and double columns, making more room on your screen for other tasks.

Selection tools

Drawing and Text tools

Color tools

Navigation tools

Stroke and Fill color selectors

Tool Options

The Property inspector

The Property inspector appears at the bottom of your Flash workspace. It displays properties and options for objects selected on the Stage, and also allows you to modify them. The Property inspector is contextual, so the information it displays is specific to the tool or object you select.

The Property inspector is an essential part of the Flash workflow; it can display and set an object’s properties, including width, height, position, and fill color. Let’s take a look at the Property inspector in action.

1 If the fl0201_work.fla file is not still open from the last exercise, choose File > Open to reopen it from inside the fl02lessons folder. Select the Rectangle tool () from the Tools panel.

2 At the bottom of the Tools panel, click the Fill Color swatch (). When the Swatches panel appears, choose a yellow shade from the far right side of the Swatches panel.

3 Move your cursor to the center of the Stage. Click and hold, then drag to draw a new rectangle. Release the mouse button after you have created a rectangle at the center of the Stage.

4 If the Property inspector is not already open, choose Window > Properties > Properties to open it.

5 Choose the Selection tool () from the top of the Tools panel, and double-click the fill of the new shape to select it. Notice that the Property inspector now displays the selected shape’s width (W) and height (H) in pixels. To the right of the width and height, the object’s X and Y positions on the Stage are also displayed.

6 Double-click inside the width (W) text field to highlight the current value, then enter 250 to set the rectangle’s width. Double-click inside the height (H) field and enter 150 to set the height.

7 Choose the Text tool () from the Tools panel. Click above the new rectangle you created and enter the phrase “Flash CS3.” Notice that the Property inspector now displays text options such as font and size.

8 Click and drag inside the new text box to select all of the text. In the Property inspector, locate the Font menu and choose Arial (or, if that’s unavailable, Verdana). Use the slider to the right of the Font menu to set the type size to 45 or type 45 in the text field to the left of the slider.

9 In the Property inspector, click the Color swatch and choose a blue shade from the pop-up Swatches panel to change the color of your type.

10 Choose File > Save to save your work. Leave this file open; you’ll need it for the next exercise.

In addition to text and graphics, the Property inspector also works with the Timeline, allowing you to set options and view information for specific frames. You will use this essential tool throughout the lessons to modify objects on the Stage, and frames in the Timeline.

Panels and panel groups

Panels appear on the right side of your workspace, and each one is dedicated to a specific task, such as setting colors, aligning multiple objects on the Stage, or transforming the dimensions of an object. The default workspace launches with three panels on the right side of the screen—Color, Swatches, and Library. You can toggle these on or off using the Window menu. New in CS3, you can collapse panel groups to space-saving icons, using the double arrows () in the top right corner of any panel group. You can also use these same arrows to expand panel groups back to full size.

Any fully expanded panel features its own panel menu. You can open a panel menu by clicking the menu icon () in the upper-right corner of each panel. These menus perform additional tasks or modify the panel’s appearance. Many of the panel menu’s options are also available as icons at the bottom of the panel.

Panels can be grouped in sets on the right side, of your display. You can also separate them and position each one freely on the screen. You can also group freely positioned panels together with other panels. The Color and Swatches panels are grouped together in the default workspace. If you need more room, you can collapse grouped panels on the right to display them in space-saving icon mode.

You’ll explore the various panels in detail in upcoming lessons. For now, you’ll concentrate on how to manipulate and customize the way panels display in your workspace.

1 Select Window > Workspace > Default to reset your workspace to its default layout. Locate the Color panel on the right side of the workspace.

2 At the top of the Color panel, click its title tab and drag the panel to the left, away from the Swatches panel, to ungroup it.

3 Click the title tab of the Swatches panel, and drag the panel on top of the Color panel to regroup the two panels.

4 To select both panels at once, click on the bar behind the panels’ title tabs. Drag the entire panel group on top of the Library panel on the right to group all three.

5 Click the double arrows () at the top of the panel group to collapse it to icon view.

6 Choose File > Close All to close the current document and any others that may be open.

Collapse the panel group to space-saving icon view.

Consider keeping frequently used panels available and docked in the master panel group on the right side. You can save configurations and locations of commonly used panels by creating your own custom Workspace Layouts, which you’ll learn about in detail in Lesson 8, “Customizing Your Workflow.”

The Timeline

The Flash Timeline is the heart of the action, where you create animations and sequence graphics with sound, video, and controls. The Timeline comprises frames, each one representing a point in time, just like a historical timeline. Graphics and animations are placed at specific points, or keyframes, along the Timeline to create sequences, slideshows, or movies. You can place ActionScript on individual keyframes to control playback and add interactivity, or place sounds along the Timeline to add sound effects, music, and dialogue.

The Timeline also comprises layers; layers behave like transparent pieces of film stacked on top of one another. Each animation and piece of artwork can be placed on its own individual layer, which helps you organize and manage your work. If you’ve worked with other Adobe CS3 applications, such as Illustrator, Photoshop, or InDesign, you may already be familiar with the power and flexibility of layers. Use the View Options icon () in the upper-right corner to set the placement of the Timeline in your document, as well as to specify the width and height of the frames and layers displayed in the Timeline.

In this exercise, you’ll explore a Timeline with multiple keyframes, animations, and layers to see how a typical Flash document looks.

1 Choose File > Open, and select the fl0203.fla document inside the fl02lessons folder. Press Open to open it for editing.

2 Examine the Timeline above the Stage. You’ll see that it contains a layer, with a layer folder above it. Layer folders can contain layers and are used to organize the Timeline when layers start to add up. If necessary, click the arrow to the left of the Gears layer folder to expand it and reveal its contents. The three indented layers under the Gears name are the layers that are inside the folder.

3 Each of the three layers contains a separate animation that is marked at the beginning and end with a keyframe. Keyframes are special frames that are created along the Timeline where you want to introduce or remove a graphic, start or end an animation, or trigger something to happen with ActionScript. An arrow between two keyframes indicates a tween, or animation. Press Enter (Windows) or Return (Mac OS) to play the Timeline.

4 Look at Layer 4 in the Timeline, which contains several consecutive keyframes. Click once on each keyframe to jump to that frame and see what it displays at that specific point in time.

5 To shuttle through the Timeline, grab the playhead at the top (indicated by the red marker), and drag it in either direction.

Shuttle back and forth in the Timeline by dragging the playhead.

You can collapse or expand the Timeline using the Hide/Show Timeline icon () in the lower-left corner, below the Timeline.

6 Choose File > Close to close the current document. If prompted to save any changes, press Don’t Save.

Order the Dynamic Learning: Flash CS3 book, authored by AGI Flash Training Instructors.