Pick a location on your local hard drive to store the files for this chapter. Create a folder named ch17 in this location.

Inside of the ch17folder, create two folders: deployand src. The deploy folder will contain the runtime files, and the src folder will hold the authortime files.

Inside of the srcfolder, create a folder named actionscript. Inside of the actionscript folder, create a folder named includes. The includes folder will store ActionScript files (.as) that contain code referenced from the Flash documents (.fla) stored in the src folder.

Create a new layer and name it labels. Place this layer at the top of the layer stack in the Timeline window.

With the Selection tool, select frame 10 of the labels layer, and press the F7 key. This creates a keyframe on frame 10.

With the keyframe selected, open the Properties panel. In the Name field of the Label section, type intro. After you have typed the text, press Tab (or Enter) to make the name "stick."

Repeat Steps 2 and 3 with frames 20, 30, and 40, with the frame labels video, audio, and software, respectively.

Select frame 50 of the labels layer, and press F5. This enables you to read the very last label, software. Your Timeline window should resemble Figure 17.4.

Figure 17.4. You use frame labels to differentiate each section of the site.

Select frame 50 on all other layers in the Timeline window, and press F5 to extend the content on these layers across the entire timeline, as shown in Figure 17.5.

Figure 17.5. The content in the heading, background, and frame layers will be present throughout the entire movie.

Save your Flash document as main_100.fla in the src folder you created earlier in this chapter.

Make a new layer, and rename it actions. Place this layer below the labels layer. Add a keyframe on frame 10 of the actions layer, and open the Actions panel (F9/Option+F9). Type the following code into the Script pane:

stop();

Close the Actions panel, and open the Properties panel. Make sure that frame 10 of the actions layer is selected. In the <Frame Label> field, type //stop. The // characters assign a frame comment rather than a frame label. Although this step isn't necessary for the functionality of the movie, frame comments can provide quick and easy access to the designer's or programmer's notes. Your Timeline window should now look like Figure 17.6.

Figure 17.6. Unlike labels, you cannot use frame comments in ActionScript. Comments can provide quick visual references for ActionScript code.

Save the Flash document again.

Resave the Flash file you modified in the last section as main_200.fla. Save the file in the src folder.

Create a new layer named menu. Place this layer beneath the actions layer. Insert a keyframe on frame 10 of the menu layer.

On frame 10 of the menu layer, use the Text tool to add a static text block with the text Introduction. For this example, I use the Miniml font hooge 05_53 at 12 points with bold formatting. Use the Properties panel to set these options. Place the text near the left edge of the Stage below the heading, as shown in Figure 17.7.

Repeat Step 3 for the text Video Equipment, Audio Equipment, and Editing Software. Space these text blocks across the Stage beneath the heading, as shown in Figure 17.8. Again, all these text blocks should be on frame 10 of the menu layer. Later, you will convert each of these text blocks to a button symbol.

Now, you create a graphic that lets the user know which section is currently active. To do this, you add a black square that will appear next to the appropriate text block. When the presentation starts, the black square will be next to the Introduction text. When the user navigates to the Video Equipment section, the black square will appear next to the Video Equipment section. Open the Library panel, and expand the graphics folder. There, you will find a graphic symbol named marker. You will use this symbol in a moment.

Figure 17.7. Use the Text tool to add the Introduction text to the Stage.

Figure 17.8. Add text that describes each section of the presentation.

Create a new layer on your Main Timeline (that is, Scene 1), and name it marker. Place this layer underneath the menu layer.

On frame 10 of the marker layer, insert a keyframe. Drag the marker symbol from the Library panel to the Stage. Position the instance of the marker to the left of the Introduction text, as shown in Figure 17.9.

Insert another keyframe (F6) on frame 20 of the marker layer — make sure you do not insert empty keyframes. Move the instance of the marker at frame 20 to the left of the Video Equipment text, as shown in Figure 17.10.

Repeat Step 7 from frames 30 and 40 of the marker layer, moving the marker instance to the left of the Audio Equipment and Editing Software text, respectively. You now have the marker changing its position for all sections of the timeline.

Figure 17.9. This marker designates the active section.

Figure 17.10. When the user goes to the Video Equipment section, the marker appears next to the Video Equipment text.

Create a new symbol by using Insert

Flash CS5 automatically switches to Edit mode on the videoEquip timeline. Rename Layer 1 to items.

Add keyframes to frames 2, 3, 4, 5, and 6 of the items layer. There are six items in the videoItems folder of the Library panel, and each item is put on its own keyframe.

Move the playhead to frame 1 of the videoEquip timeline, and drag the dvTape Movie Clip symbol from the videoItemsfolder of the Library panel to the Stage. When an instance of the symbol is on the Stage, name the instance tape in the <Instance Name> field of the Properties panel.

Continue moving the playhead to the next frame, dragging another item to the Stage for each frame. Place cameraLow on frame 2, cameraMid on frame 3, cameraHigh on frame 4, dvDeck on frame 5, and dvCable on frame 6. Make sure that you name each instance in the Properties panel, using the following names: camLow, camMid, camHigh, deck, and cable. When you're finished, press the < and > keys to review your frames. Check Figure 17.11 to compare your work. You may want to center each graphic on the Stage by using the Align panel (Ctrl+K/

Now you need to insert an actions layer for this Movie Clip symbol. Create a new layer, and rename it actions. Select frame 1 of the actions layer, and open the Actions panel. Add a stop action to make sure that the items don't automatically loop when the movie loads:

stop();

Return to the Main Timeline (Scene 1) by clicking the Scene 1 tab in the upper-left corner of the document window.

Create a new layer, and rename it content. Place this layer underneath the marker layer. Insert a new keyframe on frame 20 of the content layer.

Open the Library panel, and drag the videoEquip symbol from the library to the Stage. Place it just left of the center of the Stage, as shown in Figure 17.12. In the Properties panel, name this instance equip.

Select frame 30 of the content layer, and press the F7 key. This inserts a blank keyframe. Now, the equip instance will show only in the Video Equipment area of the timeline.

Save your Flash document.

Resave the main_200.flafile as main_300.fla in the src folder.

On the Main Timeline of the file, select frame 10 of the menu layer.

With the Selection tool, select the Introduction text block. Press F8 to convert this text into a symbol. In the Convert to Symbol dialog box, name the symbol introButton. Assign it a Button type. Click the top-left corner of the Registration box, as shown in Figure 17.13.

Figure 17.13. The introButton symbol settings

Select the button instance on the Stage, and at the top field of the Properties panel, type introBtn in the Instance name field. You will target the button in ActionScript 3.0 code you create later in this chapter. Naming your instances is a good habit to get into.

Now you need to add a Hit state to the introButton timeline. By default, Flash CS5 uses the last frame of a Button symbol timeline for the Hit state, unless content is added to the Hit state keyframe.

Double-click the introBtn instance on the Stage to switch to Edit mode.

On the timeline of the introButton symbol, select the Hit frame of Layer 1. Press the F7 key to insert an empty keyframe.

Click the Onion Skin Outlines button in the Timeline window toolbar. This enables you to view the previous frames of the introButton timeline, as shown in Figure 17.14.

Select the Rectangle tool, and draw a filled rectangle that covers the same area of the Introduction text block. You can use any fill color because the user never sees the Hit state. Make sure you turn off the stroke, or delete the stroke after the shape is drawn. Your button's timeline should resemble the one shown in Figure 17.15.

Select the shape you drew in Step 8, and press F8 to convert it to a graphic symbol named hitArea. As with the introButton symbol, make sure that the Registration icon is active in the top-left corner. You will reuse this shape for the other buttons in this section.

Next you add an Over state to the introButton so that the user has a visual indication that it's an active button.

Select the Over frame of Layer 1, and press F6. This copies the contents of the previous keyframe into the new one. Select the Introduction text block with the Selection tool, and change the fill color to a shade of blue such as #0099CC in the Tools panel or the Properties panel. You can also turn off Onion Skin Outlines at this point.

Figure 17.14. Onion skinning enables you to align the contents of several keyframes accurately.

Figure 17.15. The Hit state defines the "active" area of the button instance in the movie. When the user's mouse pointer enters this area, the Over frame of the button appears.

Return to the Main Timeline (that is, Scene 1) of your document, and save your Flash document. Choose Control

Now you add ActionScript to the movie to enable interactivity with the introBtn instance. To aid the maintenance of ActionScript code for a project, you can create a separate ActionScript file (.as) to hold the code and use an include directive in the Flash document (.fla) to reference the external code.

Choose File

Figure 17.16. The New Document dialog box

Choose File

In the ActionScript file, type the following code. Do not type the

//SimpleButton introBtn;

import flash.events.MouseEvent;
import flash.display.SimpleButton;

introBtn.addEventListener(MouseEvent.CLICK, onMenuClick);

function onMenuClick(evt:MouseEvent):void {
   var btn:SimpleButton = evt.currentTarget as SimpleButton;
   var frame:String = btn.name.substring(0, 

      btn.name.indexOf("Btn"));
   this.gotoAndStop(frame);
}

The first line of code tells the Flash CS5 authoring environment to display the code hints of the SimpleButton class for the introBtn instance. In ActionScript 3.0, a button symbol belongs to the SimpleButton class.

The import statements tell the ActionScript compiler to reference the MouseEvent and SimpleButton classes that are part of the intrinsic Flash Player classes.

The introBtn.addEventListener() line of code tells the introBtn instance to trigger a function named onMenuClick whenever the user's mouse clicks the introBtn instance. The click event is designated by MouseEvent.CLICK.

The function named onMenuClick processes the mouse click event. The first line of code within the function retrieves a reference to the button broadcasting the event. Here, the reference named btn refers back to the introBtn instance. The second line of code determines which frame the Flash movie should now show by examining the button's name. The introBtn instance (btn.name) contains the name of the frame to which it belongs, intro. The variable named frame is then passed to a gotoAndStop() action which moves the playhead on the Main Timeline to the proper frame label.

Save the main_menu.asfile, and switch back to the main_200.fla document.

On the Main Timeline, create a new layer named menu actions, and place this layer above the existing actions layer.

Insert an empty keyframe (F7) on frame 10 of the menu actions layer. Select this frame and open the Actions panel (F9,/Option+F9). In the Script pane, type the following line of code. The include directive tells the ActionScript compiler to grab the contents of the main_menu.as file whenever you test or publish the Flash movie (.swf):

include "actionscript/includes/main_menu.as";

To make sure that you've typed the path correctly, click the Check Syntax button (designated by a blue check mark) in the toolbar of the Actions panel. If the Output panel reports any errors, make sure that you saved main_menu.as in the location stated in Step 15.

If you test your movie at this point, your introBtn instance won't do anything — the playhead already stops on the intro frame label when the movie starts.

Add a button for each section on the site. Repeat Steps 3@nd10 for each section name in your movie. Note that you should reuse the hitArea graphic symbol from Step 9 for the remaining buttons — use the Free Transform tool to size each new instance of hitArea to match the size of the text block in the button symbol. You should end up with four named button instances on the Stage: introBtn, videoBtn, audioBtn, and softwareBtn.

Go back to the main_menu.as file, and create additional listeners for the new button instances, as shown in the following code:

//SimpleButton introBtn;
//SimpleButton videoBtn;
//SimpleButton audioBtn;
//SimpleButton softwareBtn;

import flash.events.MouseEvent;
import flash.display.SimpleButton;

introBtn.addEventListener(MouseEvent.CLICK, onMenuClick);
videoBtn.addEventListener(MouseEvent.CLICK, onMenuClick);
audioBtn.addEventListener(MouseEvent.CLICK, onMenuClick);
softwareBtn.addEventListener(MouseEvent.CLICK, onMenuClick);

function onMenuClick(evt:MouseEvent):void {
   var btn:SimpleButton = evt.currentTarget as SimpleButton;
   var frame:String = btn.name.substring(0, 

      btn.name.indexOf("Btn"));
   this.gotoAndStop(frame);
}

Save the main_menu.as file.

Save your Flash document (.fla file) as main_300.fla in the src folder and test it (Ctrl+Enter/

Resave the main_300.fla file as main_400.fla.

From the Main Timeline, double-click the equip instance on frame 20 of the content layer. Flash CS5 switches to Edit mode.

Make a new layer on the videoEquip timeline, and rename the layer buttons. Place this layer below the actions layer.

Open the Buttons Library (Window

With the circle button — next instance selected, press Ctrl+D (

Select both arrow buttons, and align them horizontally to each other by using the Align panel. Insert some descriptive text next to the instances, as shown in Figure 17.17.

Figure 17.17. Add text to the buttons to describe their functionality.

As discussed in the last section, you can create an external ActionScript file (.as file) to contain code for your Flash document. Start by replacing the existing stop() action on frame 1 of the videoEquip timeline with an include directive pointing to an ActionScript file.

Select frame 1 of the actions layers, and open the Actions panel (F9/Option+F9). Delete the stop(); action, and type the following line of code:

include "actionscript/includes/video_equipment.as"

You create this new ActionScript file in the next step.

Create a new ActionScript file (File

In the new script file, type the following code. This code uses the same event, MouseEvent.CLICK, as the main menu buttons. Here, the onPrevClick() and onNextClick() functions act as listeners, sending the Movie Clip timeline to the previous or next frame, respectively:

//SimpleButton prevBtn;
//SimpleButton nextBtn;

import flash.events.MouseEvent;

prevBtn.addEventListener(MouseEvent.CLICK, onPrevClick);
nextBtn.addEventListener(MouseEvent.CLICK, onNextClick);

stop();

function onPrevClick(evt:MouseEvent):void {
   this.prevFrame();
}

function onNextClick(evt:MouseEvent):void {
   this.nextFrame();
}

Save the video_equipment.asfile, switch back to your Flash document (.fla file), and test it by choosing Control