ptg 440 Chapter 18 The TextArea component works with the ActionScript TextField object. Once a TextArea component is added to the Stage, you can use styles to customize font, size, and color. In addition, a TextArea component can be formatted using HTML. If this sounds similar to the TextInput component, you're right. In fact, the major difference between a TextInput and a TextArea field is the ability of the TextArea field to gen- erate multiple lines. TextArea fields can be used to hold information. For example, you can use a TextArea component to create a comment or a suggestion field on an interactive form. Adding a Text Area Add a TextArea Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the TextArea component onto the Stage, and then select the component. Open the Properties panel, and then click the Component Parameters arrow to expand it. Select from the following TextArea parameters: ◆ condenseWhite (3.0). When you select the check box, it removes extra white space (spaces, line breaks) in a text field. If you deselect the check box, the white space remains. ◆ editable. When you select the check box, the field can be edited. If you deselect the check box, the field can be selected but not edited. ◆ html (2.0). When you select the check box, it allows HTML to control the formatting of the data. If you deselect the check box, the field cannot be modified using HTML. ◆ text. Click the Value field, and then enter the initial text that will appear in the TextArea component. 5 4 3 2 1 1 2 3 Text Ar ea comp on ent From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 441 ◆ wordWrap. When you select the check box, the text typed by the visitor wraps in the TextArea box. If you deselect the check box, the text will not wrap. ◆ maxChars. Click the Value field, and then enter the maximum number of characters that can be typed into the TextArea component. ◆ restrict. Click the Value field, and then enter any characters that cannot be entered into the TextArea field. ◆ enabled. When you select the check box, the field can be edited. If you deselect the check box, the field appears grayed out and is not selectable, or editable. ◆ visible. When you select the check box, the field can be viewed. If you deselect the check box, the field is invisible. ◆ minHeight (2.0). Click the Value field, and then enter a minimum height for the TextArea. ◆ minWidth (2.0). Click the Value field, and then enter a minimum width for the TextArea. ◆ horizontal or vertical ScrollPolicy (3.0). Click the Value field, and then select auto, on, or off to show or hide scroll bars. Click the Control menu, point to Test Movie, and then click Test. In the example, visitors can type as much information as needed, and when the box fills up, scroll bars appear to the right of the box; allowing them to maneuver up and down through the document. 6 6 5 4 From the Library of Wow! eBook ptg 442 Chapter 18 The Button component is a clickable rectangular button, which can be resized. If you desire, you can add a custom icon to the Button compo- nent. In addition, you can change the behavior of a Button component from push to toggle. A toggle button stays pressed when clicked and returns to its up state when clicked again. All of these options are accomplished through the Component Inspector panel. Adding a Button Add a Button Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the Button component onto the Stage, and then select the component. Open the Properties panel, and then click the Component Parameters arrow to expand it. Select from the following Button parameters: ◆ icon (2.0). Click the Value field, and then enter the full path name to an icon file. ◆ emphasized (3.0). When you select the check box, it adds a border around the button. If you deselect the check box, the button is normal. ◆ label. Click the Value field, and then enter a label for the Button component. ◆ labelPlacement. Click the Value field, and then select between right, left, top, or bottom for the placement of the Button component text. ◆ selected. When you select the check box, the button appears selected. If you deselect the check box, the button is normal or deselected. 5 4 3 2 1 1 2 3 Button component From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 443 ◆ toggle. When you select the check box, the button, when selected, returns a true value. If you deselect the check box, the button returns false when selected. ◆ enabled. When you select the check box, the button can be clicked. If you deselect the check box, the button is grayed out and cannot be clicked. ◆ visible. When you select the check box, the Button can be viewed. If you deselect the check box, the Button is invisible. ◆ minHeight (2.0). Click the Value field, and then enter a minimum height for the Button. ◆ minWidth (2.0). Click the Value field, and then enter a minimum width for the Button. Click the Control menu, point to Test Movie, and then click Test. In the example, when you click the button, it changes color, just like a typical rollover button. You could now attach an ActionScript to the button to load another scene or movie. 6 6 5 4 From the Library of Wow! eBook ptg 444 Chapter 18 The List component is a scrollable box that lets users select one or more items in the list. Lists are similar to the ComboBox component, except List components can be formatted to display all of the available items at once, where as the ComboBox component uses a drop-down (or up) feature to display the items only when requested (clicking the tri- angle button to the right of the list). Adding a List Add a List Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the List component onto the Stage, and then select the component. Open the Properties panel, and then click the Component Parameters arrow to expand it. IMPORTANT The List component reduces the clutter of a typical data screen by allowing you to control the height of a data box. For example, if you wanted a visitor to select their home State from a list, you wouldn't want all 50 States permanently displayed on the screen. You would create a more manageable box size, and make the visitor scroll up or down to select the correct State. Select from the following List parameters: ◆ data (2.0) or dataProvider (3.0). Click the Edit button, and then enter an array in the Values dialog box. Click the plus (+) sign to add a value, and the minus sign (-) to remove a value. Data values are used to populate the list labels. ◆ enabled (3.0). When you select the check box, the field can be clicked. If you deselect the check box, the field is grayed out and cannot be clicked. 5 4 3 2 1 1 2 3 List component From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 445 ◆ labels (2.0). Click the Edit button, and then enter an array in the Values dialog box. Click the plus (+) sign to add a value, and the minus sign (-) to remove a value. Data values are used as the selectable items in the list. ◆ multipleSelection (2.0) or allowMultipleSelection (3.0). When you select the check box, the visitor can select more than one item in the list. If you deselect the check box, the visitor can only select a single item. ◆ rowHeight (2.0). Click the Value field, and then enter a number to determine the spacing between items in the list. The higher the value, the more space between items. ◆ horizontal or vertical ScrollPolicy (3.0). Click the Value field, and then select auto, on, or off to show or hide scroll bars. ◆ horizontal or vertical Line or Page ScrollSize (3.0). Click the Value field, and then enter a number for the scroll size. ◆ visible (3.0). When you click the Value field, and select true, the list can be viewed. If you select false the list is invisible. Click the Control menu, point to Test Movie, and then click Test. In the example, click on a Chapter, and then select that chapter. You can now attach an ActionScript to the list to load the correct chapter. 6 6 5 4 From the Library of Wow! eBook . panel. Adding a Button Add a Button Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the Button component onto the Stage, and then select the component. Open. Button component is a clickable rectangular button, which can be resized. If you desire, you can add a custom icon to the Button compo- nent. In addition, you can change the behavior of a Button. component works with the ActionScript TextField object. Once a TextArea component is added to the Stage, you can use styles to customize font, size, and color. In addition, a TextArea component