Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 101 Integrating Components and Dynamic Text Boxes with the Animated Map Lesson 10

2 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Objectives Add controls to the animated map. Use Flash components to build a combo box for directions to the Gallery. Configure a dynamic text box to hold directions sent from ActionScript. Work with ActionScript to process a user selection. Integrate and animate the Visit section into the main Timeline.

3 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Use Flash components Flash has several ready-made movie clips called ‘components’ that can be used in your movies. They are located in the Components panel and include such things as combo boxes, radio buttons, scroll bars, and other items. The Components panel is accessed from the Windows menu. Additional components can be downloaded from the Macromedia Web sites.

4 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Add a combo box A combo box is one of the components available in the Components panel. A combo box is like a text box in that it can display information and allow the user to enter information, but it also has a drop-down list from which the user can select a predefined selection. A combo box can be customized on the Parameters tab of the Property inspector. A combo box is added to a movie by dragging it from the Components panel onto the Stage.

5 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Use the Values dialog box to add list items to a combo box This figure shows the Values dialog box, which is used to add items to the combo box drop- down list. This box is opened by clicking the Labels row on the Parameters tab and then clicking the magnifying glass icon. Items are added to the list by clicking the Add (+) button at the top of the dialog box. Items can be deleted or re-sequenced using the other buttons at the top of the dialog box.

6 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Customize a combo box The Parameters and the Properties tabs of the Property inspector are used to customize the settings for a combo box. The Parameters tab is used to enter list items, to indicate if the list entries are editable or if the user can enter data, whether or not any text will display by default in the box, how many rows can display before scroll bars are added, and to enter the name of a Change handler function. The Properties tab is used to provide an instance name for the combo box and set the physical dimensions for the box.

7 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 A combo box with a label The figure below shows an example of a combo box as it would appear to a user. Note the list arrow to the right side of the box. Clicking this list arrow reveals the drop-down list of items added in the Values dialog box. A text label has also been added above the box to indicate the purpose of the box, in this case, to allow the user to select directions to the gallery from multiple locations. List arrow

8 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Use a dynamic text box For the Gallery directions problem in the text, you could use one large text box containing all sets of the directions that the user could scroll through, but that would be confusing for the user. A dynamic text box allows you to modify the contents of the text box in response to some action by the user. As shown in the text, the content of the dynamic text box was determined by the selection the user made from the combo box drop-down list. A dynamic text box is defined with a variable name that can be referenced via actions and script code.

9 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Create a dynamic text box To create a dynamic text box: Select the layer to contain the box, then use the Text tool to draw a box on the Stage at the desired location. In the Property inspector, set the Text type to Dynamic Text; set the font, font size, and alignment options; indicate if the box can contain multiple lines or not; and select other options according to the needs of this box. You can set text formatting options in the Format Options dialog box. Enter a variable name for the box in the Var field. This name will be referenced later when a ‘set variable’ action is defined. Size the box as desired using the sizing handle in the corner of the box.

10 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 A dynamic text box positioned below the combo box This figure shows the label and the combo box seen earlier, but now another text box has been positioned below the combo box. This new box was defined as a dynamic text box in the Property inspector. Note the sizing handle that appears in the corner of the dynamic text box.

11 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Define variables for the combo box items Open the Actions panel to add script code to process the combo box selection. (Create a new layer for this if desired.) Click in the Script pane, and enter a variable name and a value for each item in the combo box drop- down list. The Value is the text that will be displayed in the dynamic text box when a list item is selected by the user. You can also add comments for the variables by double- clicking the ‘comment’ action in the Miscellaneous Actions category.

12 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Use ActionScript to set the dynamic text box entry You can create a script to process the user’s selection from the combo box and set the corresponding text entry in the dynamic text box. The script determines which list item was selected and copies the value text for the variable name that corresponds to that item into the dynamic text box. You can also import generic scripts for combo boxes (and other components) into the Script pane of the Actions panel and then use the Replace dialog box to replace the generic names with the names assigned to your variables and instances.

13 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 An example of ActionScript code This figure shows a completed script to manipulate the combo box and the dynamic text box.

14 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Integrate and animate the finished movie clip symbol Once your movie clip for the directions is complete, it can be integrated into the movie just as other clips were. Create a layer and give it a descriptive name. Drag an instance of the finished clip onto the Stage. Use the Guides and arrow keys to align the new strip with the existing strips. Insert keyframes where needed. Set your motion tweens for the new layer. Test the movie to be sure it plays as expected.

15 Integrating Components and Dynamic Text Boxes with the Animated Map– Lesson 10 Summary In this lesson, you learned: To add controls to the animated map. How to use Flash components to build a combo box for directions to the Gallery. To configure a dynamic text box to hold directions sent from ActionScript. How to work with ActionScript to process a user selection. To integrate and animate the Visit section into the main Timeline.