Using Components ActionScripting can be complex and time-consuming . Flash MX provides a way to preserve labor- intensive ActionScripting in reusable, customizable movie clips. This special form of movie clip is called a component . (Flash 5 offered a similar item called a SmartClip .) The task of defining your own components is beyond the scope of this book. But Flash comes with seven Component objects that you can play with: CheckBox, RadioButton, ComboBox (a drop-down menu), ListBox, PushButton, ScrollBar, and ScrollPane. You access components from the Components panel. You customize the individual instances of a componentcreating the text label for a drop-down selection list, for examplein the Property Inspector or via the Component Parameters panel. To access the Components panel: To create an instance of the ComboBox component: -
Open a Flash document to which you want to add a drop-down list of items from which to select. -
Access the Components panel. -
Drag an instance of the component named ComboBox to the Stage in Keyframe 1. Flash adds a folder named Flash UI Components to the Library window. Notice that each component has its own icon, not that of a regular movie-clip symbol (Figure 15.49). Figure 15.49. When you drag an instance of the ComboBox component from the Components panel to the Stage (top), Flash adds the component and folders containing the global component assets to the library of that document (bottom).  To set up the ComboBox instance's choices: -
With the ComboBox instance selected on the Stage, access the Property Inspector. Because the ComboBox is really just a complex movie clip, the Property Inspector lists the component as an instance of a movie clip. Unlike other movie clips, however, components have not only the properties common to movie clips, but also parameters. Therefore, two tabs appear in the bottom-right corner of the Property Inspector (Figure 15.50). Figure 15.50. The Property Inspector for components looks like the Property Inspector for movie clips, except that it has two tabs. Click the Parameters tab to access the component's parameters.  -
To access the component's parameters, click the Parameters tab in the Property Inspector. Whatever parameters have been set up for the component appear. If you cannot see all the parameters, click the triangle in the bottom-right corner of the Property Inspector to expand the window. -
Select the second line in the Parameters pane: the line named Labels []. A magnifying-glass icon appears at the end of the line. -
Click the magnifying-glass icon. The Values window opens (Figure 15.51). By setting the values for the labels, you create the choices that appear in your selection list. Figure 15.51. When you select the Labels parameter, the magnifying-glass icon appears (top). Click the icon to open the Values dialog box, where you enter the label names (bottom).  -
To add a label value, click the Add button (the plus sign). Flash adds the word defaultValue to the label list. -
To edit a value, click the name defaultValue , and enter new text. -
Repeat the preceding step for as many labels as you want to create. For this exercise, create three labels, and enter the names Glinka , Borodin , and Shostakovich (Figure 15.52). Figure 15.52. Click the plus sign in the Values dialog box to add more labels. Select the word defaultValue, and enter your new label name.  -
Click OK. The labels appear in the parameters area of the Property Inspector. -
Select the fourth line in the Property Inspector's parameters areathe line labeled Row Count. -
Enter 3 . The row-count number indicates how many items appear in the list. If the number of labels is greater than the row-count number, Flash creates a scroll bar for moving up and down the list. -
To view your new drop-down selection list, choose Control > Test Movie. The labels you created appear in a drop-down list. Click the triangle at the right end of the ComboBox to view the choices. The item you select appears as the current choice in the ComboBox in its unexpanded form (Figure 15.53). Figure 15.53. In your final movie, clicking the ComboBox triangle reveals a list of choices. The choice you select becomes the label for the ComboBox in its closed mode.   Tips -
After you set the parameters for a component instance, Flash displays a placeholder version of the component on the Stage. For the ComboBox, for example, you see a grayed-out line and triangle. To see the instance displaying the first label you created, choose Control > Enable Live Preview (this setting is on by default). To see the full activity of the component, however, you must view the movie in Flash Player. -
You can resize component elements by using the free-transform tool. You can make the ComboBox wider, for example, to display more text in a label. -
Another way to access the parameters for your component instance is through the Component Parameters panel. If the panel is not active, choose Window > Component Parameters. -
To open the Values dialog box quickly, double-click the open and close brackets (or the words within them) to the right of the word Labels in the parameters list. -
Use the Tab key to cycle through the labels in the Values dialog box. -
Double-clicking a component in the Components panel puts an instance of that component on the Stage.
At this point, of course, your selection list doesn't actually do anything. To put the list to work, you must create ActionScripts that manipulate the selections your users make. You can create a variable that holds information about those selections. To create a variable to capture a ComboBox selection: -
Continuing with the file you created in the preceding exercise, on the Stage, select the ComboBox Component in Frame 1. -
In the Property Inspector, in the Instance Name field, enter a name, such as yourComposer (Figure 15.54). Figure 15.54. Assigning an instance name to the component allows you to gather information from it via ActionScript.  Giving the component an instance name allows you to target it with ActionScript and retrieve information about it, such as which label is selected. -
In Frame 1, place an instance of a button on the Stage, and select the button instance. -
In the Actions-Button panel, from the Actions Toolbox, choose Actions > Variables > set var , and drag it to the Script pane. Flash updates the Script pane and displays the parameters for the set var action. -
In the parameters area, in the Variable field, enter yourChoice . This step sets up a variable that you can use to hold information about your ComboBox instance. -
In the Value field, enter yourComposer , and with the insertion point in place at the end of your entry, from the Add menu, choose Flash UI Components > ComboBox > Methods > getValue . -
Check the Expression checkbox to the right of the Value field. Flash updates the Value parameter, linking the getValue method to the instance name yourComposer with a dot and updating the Script pane to look like Figure 15.55. This line of the Script tells Flash to get the label name currently selected in the ComboBox named yourComposer . Figure 15.55. This script tells Flash to get the selected label in the ComboBox instance named yourComposer and put that text in the invisible variable yourChoice .  -
With Line 2 of the script selected, from the Add menu, choose Actions > Miscellaneous Actions > trace . -
In the parameters area, in the Message field, enter yourChoice , and check the Expression checkbox. Flash updates the Script pane. Line 3 now reads trace(yourChoice); . This code tells Flash to place the contents of the variable named yourChoice (which you set up to contain the name of the label currently showing in the ComboBox instance named yourComposer ) in the Output window. -
Choose Control > Test Movie to try out your menu. -
From the drop-down list choose Borodin; then click the button. Flash opens the Output window and enters the word Borodin (Figure 15.56). Figure 15.56. To make a quick test of your button script, add a trace action (top). When you select a composer and click the button, Flash writes the selection in the Output window (bottom).  To make the menu fully functional, you must continue adding actions. You might use conditional actions to test which menu choices people make and deal with them accordingly . To manipulate the ComboBox selection with ActionScript: -
Continuing with the file you created in the preceding exercise, select the button. -
In the Actions-Button panel, select Line 3 of the script (the line containing the trace action), and click the Remove button (the minus sign). -
Select Line 2 in the Script pane, and from the Add menu, choose Actions > Conditions/Loops > if . -
In the parameters area, in the Condition field, enter yourChoice == "Glinka" (Figure 15.57). Figure 15.57. Using a conditional action allows you to see which label your user has chosen .  This code sets Flash to check whether the selected label is Glinka. The double equal sign is called the equality operator . It checks to see whether the items on either side of it are equal. In this case, it checks whether the label choice is the same as the word Glinka . The quotation marks around Glinka indicate that Flash should treat the item as a text stringnot, for example, as another variable name. -
With Line 3 selected in the Script pane, from the Ad menu, choose Actions > Miscellaneous Actions > trace . -
In the parameters area, in the Message field, enter Glinka is great! -
With Line 4 selected in the Script pane, in the Actions Toolbox, select Actions > Conditions/Loops > else if , and drag it to the Script pane (Figure 15.58). Figure 15.58. The else if conditional allows you to test a number of conditions in a row.  -
In the parameters area, in the Condition field, enter yourChoice == "Borodin" . -
Repeat step 5 (but this time select Line 5) and step 6 (enter a different message to trace , such as Borodin: never boring. ). -
With Line 6 selected in the Script pane, from the Ad menu, choose Actions > Conditions/Loops > else . -
With Line 7 selected in the Script pane, from the Ad menu, choose Actions > Miscellaneous Actions > trace , and enter a message for Shostakovich, such as Shostakovich? Serious! . Because you have only three choices and you have already tested for Glinka and Borodinby the process of elimina-tion, Shostakovich must be the selected label. Therefore, you do not need to test to see whether yourChoice is equal to the text string "Shostakovich" . The completed script should look like Figure 15.59. Figure 15.59. This script checks to see whether the user has chosen Glinka or Borodin. If neither text string is a match, the user must have chosen Shostakovich. Each match (or the remaining choice) leads Flash to trace a different message.  -
To try out your script, choose Control > Test Movie. Now the trace action can do more than parrot back the label that's selected. The conditional actions direct Flash to write an appropriate message based on your user's choices. Tip -
Within the Flash UI Components folder is another folder named Component Skins, within which you'll find yet more folders for the various component elements. The skins are the movie clips that make up the various parts of the components, such as the triangle that indicates the drop-down list in the ComboBox component. You can customize components by modifying these skin movie clips. Modifying a skin movie clip changes all the components that use that skin element.
|
