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 ptg 458 Chapter 18 Data binding is a simple way of connecting Flash components to each other. Components can be viewed as containers that transfer informa- tion (images, text, numbers, video, graphics) from one to the other. In the Component Inspector panel, the Bindings tab controls the two contain- ers, so that when property X of component A changes, it will copy the new value to property Y of component B. You can do data binding within the Component Inspector panel using the Bindings tab. The Bindings tab lets you add, view, and remove bindings for the selected component. Although data binding works with any component, its main purpose is to connect Component panel UI components to external data sources. These external data sources are available as components with proper- ties, which you can bind to other component properties. The Component Inspector panel is the main tool that is used within Flash for data bind- ing. It contains a Schema tab for defining the schema for a component and a Bindings tab for creating bindings between component properties. The following example demonstrates how to create basic data binding by connecting one UI component to another. Creating Bindings Create Bindings 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. Give the NumericStepper a unique instance name in the Property Inspector. Drag a second NumericStepper onto the Stage, and then give it a unique instance name. Select the first NumericStepper component. 6 5 4 3 2 1 4 5 3 From the Library of Wow! eBook ptg Chapter 18 Adding and Modifying Components 459 Open the Component Inspector panel, and then click the Bindings tab. Click the Add Binding (+) button to add a binding. In the Add Binding dialog box, select Value. Click OK. Move to the Name/Value section, located at the bottom of the Bindings tab. Click the Bound To item under Name, and then click the Magnifying Glass icon. In the Bound To dialog box, select the NumbericStepper component B. Click OK. Click the Control menu, point to Test Movie, and then click Test. When you click the up and down buttons on the first NumericStepper, the value changes automatically in the second NumericStepper. IMPORTANT You can use the Bindings tab to link two or more components together. If you want to add another component, just click the Add Binding (+) button to bind a second, or third component. There is no limit to the number of components that can be bound together. 15 14 13 12 11 10 9 8 7 7 13 9 10 11 12 14 8 From the Library of Wow! eBook . 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. 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