Editing Click Actions in Components

Use the Drop Down Menu component's Previous Page button to return to page 2. Click Item 1 in the Menu Items parameter. (Item 1 is the small box with the number 1 on it.) The text field will display the text, Curriculum. Next click Item 1 in the Sub Item For Main Item #1 parameter. The text field should display the text General Film (see Figure 5.6).

Figure 5.6: Select the first item in the Menu Items parameter and the Sub Item For Main Item #1 parameter.

The Menu Items parameter specifies the main headings for the drop-down menu. The first main heading is Curriculum. The Sub Item For Main Item #1 parameter specifies the submenu items for each main menu heading. Therefore, General Film is the first submenu item under the main heading Curriculum. If you click the second item in the Sub Item For Main Item #1 parameter, you will see that Post Production is the second submenu item. There are currently five submenu items under the main heading Curriculum.

When you hover your mouse over a main menu item in the published movie, all of the submenu items associated with that main menu item will appear. Clicking a main menu item does nothing. However, when you click a submenu item, something does occur. We will refer to this "something" as a click action. A click action is an action that occurs when you click a button—in this example, it is an action that occurs when you click a submenu item.

Put another way, the submenus in this component are essentially buttons created by the component. Because the button is created by the component, you, the user, need another way to assign actions that you would usually assign to standard Flash buttons. In other words, if you were dealing with a normal Flash button, you could set the button to Load URL or assign it a gotoAndPlay command to control a movie clip. However, when you are dealing with buttons that are generated by a component, you can't use the normal methods for assigning such actions.

If a component creates a button—in this case, a series of buttons—then the component needs to provide a means for entering these commands; otherwise, for all practical purposes, the component-generated button will be worthless. In the Drop Down Menu component, you can assign these actions via the Edit Click Action button, shown in Figure 5.7.

Figure 5.7: You can assign actions to your buttons using the Edit Click Action button.

The Edit Click Action button is associated with each item in the Sub Menu For Main Item parameter. To see this, click Item 1 in the Sub Menu For Main Item #1 parameter and then click the Edit Click Action Button. You will see a screen labeled Click Action Parameters, which I will explain soon.

For now, notice that the text field toward the bottom contains the following ActionScript:

          _root.content.gotoAndStop("A1") ; 

This ActionScript (shown in Figure 5.8) is a simple gotoAndStop command. Notice that the command references the frame label, "A1." This ActionScript sends a gotoAndStop command to a movie clip with an instance name "content" on the main Timeline, and the command tells that movie clip to stop at the frame labeled "A1." Now click the Close button.

Figure 5.8: The text field toward the bottom of the Click Action Parameters screen contains a simple ActionScript command that references a label named "A1."

You can use the Edit Click Action button to specify the click actions for any submenu item. To see this, click Item 5 in the Menu Items parameter. The button labeled 5 should turn yellow, and the text field in the Menu Items parameter should display the text "Help." Notice that the Sub Item For Main Item parameter now reads Sub Item For Main Item #5. The parameter displays the submenu items for the main menu heading Help.

Notice, also, that the last item in the Sub Item For Main Item #5 parameter is automatically selected. When you click any item in the Menu Items parameter, the last item in the associated Sub Item For Main Item parameter is automatically selected. In this case, Item 3 in the Sub Item For Main Item #5 parameter is already selected, and the text for Item 3 is "Counselors" (see Figure 5.9).

Figure 5.9: Select Item 5 in the Menu Items parameter, and the last item in the Sub Item For Main Item #5 parameter will automatically be selected.

Now click the Edit Click Action button and notice that the last text field references a different frame label, "E3" (see Figure 5.10). So the Edit Click Action button is contextsensitive. You can use this button to edit the click actions for any submenu item under any main item or main heading.

Figure 5.10: The gotoAndStop command references the frame labeled "E3".

The key is to make sure that you have the correct sub item selected when you click the Edit Click Action button. As noted earlier, the last item in the Sub Item For Main Item parameter is automatically selected when you select an item in the Menu Items parameter. So, for example, if you select an item in the Menu Items parameter and you want to edit its first sub item, you need to select the first item before you click the Edit Click Actions button.

When you click the Edit Click Action button, you are provided with several additional parameters on the next screen, which is named Click Action Parameters—as in a singular action. In this screen, you can only specify one action. For example, if you want to load a movie and load a URL, you cannot do that directly from the Click Action Parameters screen. We will, however, see how you can have two actions executed at once later in this chapter.

Now let's look at the parameters on the Click Action Parameters screen:

Action The Action parameter allows you to specify which type of action you would like to assign to the currently selected submenu button. The four options for the Action parameter— Load URL, Load Movie, Simple Script, and Advanced Script—are described below. Selecting any one of these options produces parameters related to the selected parameter. For example, if you select Load URL, you will be presented with parameters to specify which URL to load and a target for it to load in.

• Load URL Allows you to set the submenu button to load a URL when it is clicked.

• Load Movie Allows you to specify a movie that will be loaded into the movie that contains the Drop Down Menu component.

• Simple Script Allows you to specify basic goto, play, or stop commands to control the main Timeline or the Timeline of a movie clip.

• Advanced Script Provides a series of generic function calls that you can use to generate virtually any type of action you require, provided that you are proficient enough with ActionScript to write the required function.

URL To Load The URL To Load parameter is only visible when either the Load URL option or the Load Movie option is selected in the Actions parameter. This parameter allows you to enter the URL that you would like to load when the viewer clicks on the associated submenu button. You can enter either a relative URL or an absolute URL. For absolute URLs, enter the entire path starting with http://.

When you have selected the Load Movie option in the Action parameter, you use the URL To Load parameter to enter the name of the movie to load. You can enter a relative path to the .swf file (such as movie1.swf), or you can enter an absolute path (such as http://www.flashfoundry.com/movies/movie1.swf).

URL Target The URL Target parameter is only visible when the Load URL option is selected in the Actions parameter. The target specifies where you want the URL to load. The drop-down list offers four standard options: Self, New Window, Parent Frame, and Top Frame. Selecting Self loads the URL into the current browser window. The New Window option loads the URL into a new browser window. Parent Frame loads the URL into the parent frame if you are in an HTML frames environment. Similarly, Top Frame loads the URL into the top frame if you are in an HTML frames environment. To load the URL into a frame with a custom label, enter the label name in the Custom Target field.

Simple ActionScript The Simple ActionScript parameter is only visible if you have Simple Script selected in the Actions parameter. The Simple ActionScript parameter looks somewhat different from other parameters in the Drop Down Menu component's custom UI. This is due to the fact that ActionScript can be confusing for average users. Therefore, the explanation for the parameter has been added directly to the parameter itself.

The Simple ActionScript parameter allows you to enter simple goto, play, and stop commands. For example, you can enter something like _root.intro.play(); to direct a movie clip with the instance name "intro" to play.

Advanced ActionScript The Advanced ActionScript "parameter" is only visible if you have Advanced Script selected in the Actions parameter. The Advanced ActionScript "parameter" is really not a parameter at all. Instead, it is an informational field telling you that when the Advanced Script option is selected in the Actions parameter, the component will automatically send out a series of function calls. The function calls will be sent out whether or not you have a function to take advantage of them.

Now that I've introduced the parameters for the Edit Click Action button, I'll teach you about each option in detail. First we will start with the Load URL option.