Begin this lesson by downloading the following file (right-click and select "Save Target As ..."):

http://education.sdsc.edu/teachertech/flash101/lessonfiles/document_start.fla

Save this file to your desktop folder and open it in Flash. You should see the following on your Stage:

Add graphics to the Stage

To add library items to your document, you verify that you’re adding the object to the correct layer, then drag the item from the Library panel to the Stage. If you do not see the Library panel on the right, select "Library" from the Windows menu, or hit Control-L on your keyboard.

1. In the Timeline, click the Content layer name to select that layer. With the Selection tool selected, drag the Title movie clip, which contains a bitmap image and vector graphic, from the Library panel to the Stage and align it over the Title guide.

In Flash, you can work with both bitmap images, which describe graphics using pixels, and vector art, which uses mathematical representation to describe art. For more information, see “About vector and bitmap graphics” in Using Flash Help.

2. With the Content layer still selected, drag the text symbol from the Library panel to Stage, and align it with the Trio ZX2004 text that’s already in place as a guide. You can use your keyboard arrow keys to nudge the text into place.

The title text is actually a graphic created from text.

Add video

The Library panel includes an imported Flash video file (FLV). You’ll add the video to your document, and Flash will add the necessary frames to play the video.

To learn more about using video in Flash, see “Working with Video” in Using Flash.

1. Verify that the Content layer is still selected in the Timeline. From the Library panel, drag the ggb_movie_for_trio_new video to the dark gray Video guide on the Stage.

2. A dialog box appears that indicates Flash will add 138 frames to the Timeline for the video. Click Yes. Your Stage and Timeline should now appear similar to:

3. Drag the playhead across the Timeline to view the video.

View object properties

When you add an object to the Stage, you can select it, then view and change its properties in the Property inspector. The type of object selected determines which properties appear. For example, if you select a text object (not a text graphic, which we use in this lesson), the Property inspector displays settings such as font, type size, and paragraph formatting, which you can either view or change. If no object is selected, the Property inspector displays properties for the entire document.

1. On the Stage, with the Selection tool selected, click the Title graphic.

The Property inspector (Window > Properties) shows specifications, such as height, width, and Stage coordinates, for the grouped object.

2. On the Stage, click the bounding box for the video movie clip that you dragged to the Stage and view its attributes in the Property inspector.

3. In the Instance Name text box of the Property inspector, enter video as the instance name.

Note: Because ActionScript, the Flash scripting language, often refers to instance names, it is a good practice to name instances. To learn more about naming instances, select Help > How Do I > Quick Tasks > Write Scripts with ActionScript.

Add video control behaviors

Behaviors let you add complex functionality to your document easily, without having to know ActionScript, the Flash scripting language. You’ll now add behaviors for video control.

1. In the Timeline, click Frame 1 of the Content layer to select it, if it’s not already selected.

2. On the Stage, click the Play movie clip instance (which looks like a play button) to select it. In the Behaviors panel (Window > Development Panels > Behaviors), click the Add (+) button and select Embedded Video > Play.

To learn more about symbols and instances, select Help > How Do I > Basic Flash > Create Symbols and Instances.

3.   In the Play Video dialog box, verify that Relative is selected. Select video, which is the instance name that you gave to the video clip, then click OK.

4. On the Stage, click the Pause movie clip instance to select it. In the Behaviors panel, click the Add (+) button and select Embedded Video > Pause.

5. In the Pause Video dialog box, again select the video movie clip , then click OK.

6. On the Stage, click the Rewind movie clip instance to select it . In the Behaviors panel, click the Add (+) button and select Embedded Video > Rewind.

7. In the Rewind Video dialog box, select video.

8. In the Number of Frames to Step Back text box, enter 20.

The Number of Frames to Step Back text box indicates how many frames the playhead should move back when the user clicks the Rewind button.

Note: Additional video control behaviors let you fast-forward, hide, and show a video.

Use the Movie Explorer to view the document structure

The Movie Explorer helps you arrange, locate, and edit media. With its hierarchical tree structure, the Movie Explorer provides information about the organization and flow of a document.

1. Select Window > Other Panels > Movie Explorer.

If necessary, enlarge the Movie Explorer to view the tree structure within the pane.

The Movie Explorer filtering buttons display or hide information.

2. Click the pop-up menu in the title bar of the Movie Explorer, and select Show Movie Elements and Show Symbol Definitions, if they’re not already selected.

3. Configure the filtering buttons, along the top of the Movie Explorer, so the only ones selected are Show Buttons, Movie Clips, and Graphics; Show Action Scripts; and Show Video, Sounds, and Bitmaps.

If you move your mouse pointer over a button, a tooltip displays the name of the button.

Examine the list to view some of the assets included in the document, and to see their relationship to other assets.

4. In the Movie Explorer pane, expand Actions for Play to view ActionScript that Flash created when you added the Play video control behavior.

5. To close the Movie Explorer, click its close box.

Test the document

As you author a document, you should save and test it frequently to ensure the Flash content plays as expected. When you test the SWF file, click the video control buttons to see if the video stops, plays, and rewinds as expected.

1. Save the document (File > Save) and select Control > Test Movie.

The Flash content plays in a SWF file window. While FLA is the extension for documents in the authoring environment, SWF is the extension for tested, exported, and published Flash content.

2. When you finish viewing the SWF content, close the SWF file window to return to the authoring environment.

Edit the Buttons

Zoom in to the Play button so it fills your Stage viewing area. Double-click the button. You should now see the following type of Timeline that is unique to a Button object in Flash.

Notice there are four specifically named frames in a Button object, "Up", "Over", "Down", and "Hit". The Up frame is where you draw your button as it looks under normal conditions of no mouse events. The Over frame is how your button should look when the cursor is over it. The Down frame is how your button should look when the mouse click occurs, and the Hit frame defines the region within which mouse events can occur, sort of a clicking 'hot zone'.

The button frames in this file are not completely defined. The Up and Over frames look identical. We will change this by changing the color of the black objects in the Over and Down frames to a bright green.

Set the playhead to the Over frame. Select the Paint Tool from the Tools palette. Change your fill color to bright green. Click the black triangle once. It should change to bright green.

Exit to the highest Scene 1 level and double-click the Pause button and repeat the process. Do the same with the Rewind button. Save and test your work. Editing buttons is as simple as that! Your finished file should function similarly to the flash file below:

Download the file for this animation: document_finish.fla

Use Online Help

The lessons provide an introduction to Flash, and suggest ways that you can use features to create exactly the kind of document required. For comprehensive information about a feature, procedure, or process described in the lessons, see the Help tab of the Help panel (Help > Help).