ptg 452 Chapter 18 The NumericStepper component allows a user to step through an ordered set of numbers. The component consists of a number displayed beside small up and down arrow buttons. You can decide the maximum and minimum values along with the step value. When the visitor clicks the up or down buttons, the value changes until the maximum or mini- mums are reached. As its name implies, the numeric stepper compo- nent only handles numbers, text or special characters are not allowed. The NumericStepper component has many uses; for example, a site that books rooms for a major hotel chain would use a stepper for letting the visitor indicate how many people are staying, or an airline for how many people are flying. Adding a Numeric Stepper Add a NumericStepper Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the NumericStepper 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 NumericStepper component can be used to change the properties of items on the stage. You could link a NumericStepper instance to the property value of a dynamic text box, and then use the stepper to change the size of the text. This can be useful for people who require larger, readable text. 4 3 2 1 1 2 3 NumericStepper component From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 453 Select from the following NumericStepper parameters: ◆ maximum. Click the Value field, and then enter the maximum value associated with the NumericStepper. ◆ minimum. Click the Value field, and then enter the minimum value associated with the NumericStepper. ◆ stepSize. Click the Value field, and then enter a numerical value for stepping between numbers. For example, a stepSize value of 2, would cause the values to step by 2 (2, 4, 6, 8). ◆ value. Click the Value field, and then enter the first number value that appears in the NumericStepper. ◆ enabled. When you select the check box, the field can be selected. If you deselect the check box, the field appears grayed out and is not selectable. ◆ 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 NumericStepper. ◆ minWidth (2.0). Click the Value field, and then enter a minimum width for the NumericStepper. Click the Control menu, point to Test Movie, and then click Test. 6 5 6 5 4 From the Library of Wow! eBook ptg 454 Chapter 18 Adding a Progress Bar Add a ProgressBar Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the ProgressBar component onto the Stage, and then select the bar. Give the ProgressBar component a unique instance name in the Property Inspector. Open the Properties panel, and then click the Component Parameters arrow to expand it. Click the Mode list arrow, and then click Event. 6 5 4 3 2 1 4 ProgressBar component Did You Know? The ProgressBar component doesn’t make a good preloader. A preloader is a custom progress bar that shows the loading status of an entire movie, and is usually smaller in file size than the ProgressBar component. The loading process can be determi- nate or indeterminate. A determinate progress bar is linear, tracking progress over time. Use this when the amount of content is known. Indeterminate progress bar is used when the amount of content is unknown. The ProgressBar component is a necessity for Flash documents that require a long time to download, because they display the loading progress while a user waits. Web designers live under what is called the "ten-second rule." What that implies is that visitors to your Web site have very little patience, and they want to see things happening. When you add a ProgressBar component, the visitor sees a moving represen- tation (a bar), letting them know the information is being downloaded. 1 2 3 6 5 From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 455 Drag a Loader component from the Components panel onto the Stage. Give the Loader component a unique instance name in the Property Inspector. Select the ProgressBar component. Open the Properties panel, and then click the Component Parameters arrow to expand it, and then enter the instance name of the Loader into the Source value field. Select Frame 1 in the actions layer in the Timeline. Open the Actions panel, and then enter the script as shown in the illustration that will load a .jpg, or .swf file into the Loader component. When executed, the ProgressBar component will display a horizontal bar, and the percentage of the file that's loaded. Click the Control menu, point to Test Movie, and then click Test. When executed, the ProgressBar component will display a moving horizontal bar, and a percentage which displays how much of the file has loaded. IMPORTANT Notice that you're not adding scripts to the components on the Stage. The key is that these components are activated by scripts in Frame 1 on the Timeline, and are identified by using unique instance names for each component. 13 12 11 10 9 8 7 7 9 12 10 From the Library of Wow! eBook ptg 456 Chapter 18 The ScrollPane component can be used for displaying large movie clips, .jpg files, and .swf files that need a scrollable area to display, or that you want to confine to a specific area on the Flash Stage. You have the ability to display images in a limited area, using scroll bars, and the content loaded into the ScrollPane can be from a local location, or over the Internet. Adding a Scroll Pane Add a ScrollPane Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the ScrollPane component onto the Stage, and then select the pane. Open the Properties panel, and then click the Component Parameters arrow to expand it. Select from the following ScrollPane parameters: ◆ contentPath (2.0) or source (3.0). Click the Value field, and then enter the full path name to the movie clip, .jpg, or .swf file. ◆ hLineScrollSize (2.0) or horizontalLineScrollSize (3.0). Click the Value field, and then enter the number of pixels to move the content when the left or right arrow in the horizontal scroll bar is pressed. ◆ hPageScrollSize (2.0) or horizontalPageScrollSize (3.0). Click the Value field, and then enter the number of pixels to move the content when the track in the horizontal scroll bar is pressed. ◆ hScrollPolicy (2.0) or horizontalScrollPolicy (3.0). Click the Value field, and then select whether the horizontal scroll bar is always present (on), never present (off), or appears automatically according to the image size (auto). 5 4 3 2 1 1 2 3 ScrollPane component From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 457 ◆ scrollDrag. Click the Value field, and then select whether there is scrolling when a user presses and drags within the ScrollPane (true), or no scrolling (false). ◆ vLineScrollSize (2.0) or verticalLineScrollSize (3.0). Click the Value field, and then enter the number of pixels to move the content when the up or down arrow in the vertical scroll bar is pressed. ◆ vPageScrollSize or verticalPageScrollSize (3.0). Click the Value field, and then enter the number of pixels to move the content when the track in the vertical scroll bar is pressed. ◆ vScrollPolicy (2.0) or verticalScrollPolicy (3.0). Click the Value field, and then select whether the vertical scroll bar is always present (on), never present (off), or appears automatically according to the size of the image (auto). ◆ enabled. When you select the check box, the field can be selected. If you deselect the check box, the field appears grayed out and is not selectable. ◆ visible. When you select the 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 ScrollPane. ◆ minWidth (2.0). Click the Value field, and then enter a minimum width for the ScrollPane. Click the Control menu, point to Test Movie, and then click Test. 6 6 5 4 From the Library of Wow! eBook . NumericStepper Component Open the Components panel. Click the User Interface arrow to expand the list. Drag the NumericStepper component onto the Stage, and then select the component. Open the. the components on the Stage. The key is that these components are activated by scripts in Frame 1 on the Timeline, and are identified by using unique instance names for each component. 13 12 11 10 9 8 7 7 9 12 10 . component onto the Stage, and then select the bar. Give the ProgressBar component a unique instance name in the Property Inspector. Open the Properties panel, and then click the Component