Components are composed of two elements: a movie clip and parameters, allowing you to modify the components’ appearance and behavior. Components run the gamut from a radio button to a scroll pane. Components equalize the designer’s playing field, enabling anyone to build complex applications, even if they do not have a complete understanding of the ActionScript language. As easy as it is to simply drag the component you need from the Components panel onto the Stage, it is just as easy to customize the look and feel of components to suit your design needs. Since components are rooted in ActionScript code, Flash comes with a set of components for ActionScript 2.0 and another one for ActionScript 3.0, and you cannot mix components in the same Flash document.
Components let you easily and quickly build strong applications with a consistent appearance and behavior. Each component comes with predefined parameters, located in the Component Inspector panel, which let you control how the object looks and operates. Each component also includes a set of API (application programming interface) methods and properties that allows you to set parameters and additional options at runtime. This is typically accomplished by adding the scripts to Frame 1 in the Flash Timeline. It is said that Flash components finally allow for the separation of coding and design.
Components allow ActionScript writers to create functionality that designers can use in applications, and designers with little programming skill can incorporate Rich Media Content to their Flash documents with a minimum of coding experience. If the components that ship with Flash are not enough, you can always download additional components built by members of the Flash community by pointing your browser to: http://www.adobe.com/cfusion/exchange/index.cfm at the Adobe Exchange.
The DataGrid component allows you to create strong data-enabled displays and applications. You can use the DataGrid component to create a recordset (retrieved from a database query in ColdFusion, Java, or .Net) using Adobe Flash Remoting and display it in columns. You can also use data from a data set or from an array to fill a DataGrid component. The DataGrid component includes horizontal scrolling, event support (including event support for editable cells), sorting capabilities, and performance optimizations. The data for a grid can come from a recordset that is fed from a database query in Adobe ColdFusion, Java, or .Net using Flash Remoting, a data set or an array. To pull the information into a DataGrid, you set the DataGrid.dataProvider property to the recordset, data set, or array.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the DataGrid component onto the Stage, and then select the component.
Did You Know?
You can create shapes directly on the Stage in Drawing mode. If you plan to design your interface using Flash’s drawing tools, you can now create shapes directly on the Stage that will not interfere with other shapes on the same Stage by using Drawing mode.
You can use Script Assist mode to help you write a script. If you’re having problems writing your own ActionScripts, simply click the Script Assist button (located in the upper-right corner of the Action panel, and let Flash give you a hand.
Enter a unique instance name for the DataGrid component in the Property Inspector.
Select Frame 1 in the actions layer in the Timeline.
Open the Actions panel, and then enter the script as shown in the illustration.
The Flash Remoting recordset recordSetInstance is assigned to the dataProvider property of myDataGrid.
See Also
See “Modifying DataGrid Options” on page 430 for more information on changing DataGrid parameters.
The DataGrid component lets you provide data using a local (embedded in the document) data provider. The data is read into the grid from a pre-written ActionScript, and since Flash components are on the Stage, the ActionScript would typically be entered into the first frame of the Flash Timeline.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the DataGrid component onto the Stage, and then select the component.
Enter a unique instance name for the DataGrid component in the Property Inspector.
Select Frame 1 in the actions layer in the Timeline.
Open the Actions panel, and then enter the script as shown in the illustration.
Click the Control menu, and then click Test Movie.
The name and home fields are the column headings for the DataGrid component, and the values fill the cells in each row.
The Loader component is a container that can display a .swf or a .jpg. You use the Loader component when you want to pull in external content into a Flash movie. For example, you can bring in a product introduction (.swf) or a company logo (.jpg) at the beginning of a movie. In addition, you can scale the contents of the loader, or resize the loader itself, to accommodate the size of the contents. By default, the contents are scaled to fit.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the Loader (2.0) or UILoader (3.0) component onto the Stage, and then select the component.
Select the Free Transform tool to size the Loader to the dimensions of the image file.
Did You Know?
You can use a preloader with components. Components are set to load before the first frame of a Flash movie. You can create a custom preloader by setting an export frame option to the frame containing your components. To change the export frame option, click the File menu, click Publish Settings, set ActionScript version to ActionScript 2.0, click Settings next to it, and then change the Export Frame For Classes value to the frame number where your components first appear.
Open the Component Inspector panel, and then click the Parameters tab.
Enter the path to the .jpg or .swf file in the contentPath value (2.0) or source (3.0) field.
Click the Control menu, and then click Test Movie.
Flash displays the selected image in the Loader component.
Did You Know?
You can use ActionScript to load external SWF and image files. To load an SWF or image file into a movie, use the loadMovie() or loadMovieNum() global function, the loadMovie() method of the MovieClip class. For example, loadMovie("intro.swf", video_mc) loads the movie named intro into the movie clip instance named video_mc. For another example, loadMovie("http://www.company.com/images/logo.jpg", image_mc) loads an image named logo into the movie clip instance named image_mc.
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 minimums are reached. As its name implies, the numeric stepper component 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.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the NumericStepper component onto the Stage, and then select the component.
Open the Component Inspector panel, and then click the Parameters tab.
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.
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 click the value field and select true, the field can be selected. If you select false, the field appears grayed out and is not selectable.
• visible. When you click the value field and select true, the field can be viewed. If you select false, 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, and then click Test Movie.
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 representation (a bar), letting them know the information is being downloaded.
Open the Components panel.
Click the User Interface plus (+) sign 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 Component Inspector panel, and then click the Parameters tab.
Click the Mode list arrow, and then click Event.
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 determinate 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.
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.
Click the Parameters tab in the Component Inspector panel, 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, and then click Test Movie.
When executed, the ProgressBar component will display a moving horizontal bar, and a percentage which displays how much of the file has loaded.
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.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the ScrollPane component onto the Stage, and then select the pane.
Open the Component Inspector panel, and then click the Parameters tab.
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. 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. 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. 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 size of the image (auto).
• 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. 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. 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. 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 click the value field and select true, the field can be selected. If you select false, the field appears grayed out and is not selectable.
• visible. When you click the value field and select true, the field can be viewed. If you select false, 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, and then click Test Movie.
The Tree component (ActionScript 2.0) allows a user to view hierarchical data. The tree appears within a box like the List component, but each item in a tree is called a node and can be either a leaf or a branch. By default, a leaf is represented by a text label beside a file icon and a branch is represented by a text label beside a folder icon with a disclosure triangle that a user can open to expose children. The children of a branch can either be leaves or branches themselves.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the Tree component (2.0) onto the Stage, and then select the tree.
Open the Component Inspector panel, and then click the Parameters tab.
Select from the following Tree parameters:
• multipleSelection. Click the value field, and then select whether the visitor can select multiple items (true), or single items (false).
• rowHeight. Click the value field, and then enter a numerical value for the height of each row in pixels.
Create a unique instance name for the Tree component in the Property Inspector.
Open the Actions panel, and then enter the script (ActionScript 2.0) as shown in the illustration into Frame 1 on the Timeline.
This Script creates a trace action inside the handler and sends a message to the Output panel every time an item in the tree is selected.
Add the remaining script to Frame 1 in the Timeline to complete the Tree component structure.
The previous code creates an XML object called myTreeDP. Any XML object on the same frame as a Tree component automatically receives all the properties and methods of the TreeDataProvider API. The second line of code creates a single root node called Local Folders.
Click the Control menu, and then click Test Movie.
In the .swf file, you can see the XML structure displayed in the Tree. Click the triangle next to Local Folders to expand the list. Each time you click on an item in the list, the trace action in the change event handler sends the data “was selected” to the Output panel.
See Also
See Chapter 18, “Adding and Modifying Data Components” on page 431 for information on working with data components.
The Window component (ActionScript 2.0) lets you display the contents of a movie clip inside a window using a title bar, a border, and a Close button (optional). The Window component lets you create complex Flash documents with one or more windows controlling the viewing of multiple movie clips. Since a movie clip can contain anything from a static image to video, the Window component gives you the creative freedom to choose what design elements best suit your Flash document, and then incorporate them on the Stage. Since movie clips can contain their own play, stop, and rewind buttons, you can use the Window component to load the movie clip, and then use the clip’s internal controls to play the movie. Finally, use the Close button on the Window component to unload the clip when finished.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the Window component (2.0) onto the Stage, and then select the window.
Open the Component Inspector panel, and then click the Parameters tab.
Select from the following Window parameters:
• closeButton. Click the value field, and then select whether the Close button is available (true) or disabled (false).
• contentPath. Click the value field, and then enter the full path name to the movie clip you want to display.
• title. Click the value field, and then enter the name that will appear in the title bar.
• enabled. When you click the value field and select true, the Window can be accessed. If you select false, the Window appears grayed out and is not usable.
• visible. When you click the value field and select true, the Window can be viewed. If you select false, the Window is invisible.
• minHeight. Click the value field, and then enter a minimum height for the Window.
• minWidth. Click the value field, and then enter a minimum width for the Window.
• skinCloseDisable. The value field represents the name of the formatting .fla document used for the Close button, when disabled.
• skinCloseDown. The value field represents the name of the formatting .fla document used for the Close button, when down.
• skinCloseOver. The value field represents the name of the formatting .fla document used for the Close button, when the mouse is over.
• skinCloseUp. The value field represents the name of the formatting .fla document used for the Close button, when Up.
• skinTitleBackground. The value field represents the name of the formatting .fla document used for the title background.
• TitleStyleDeclaration. Click the value field, and then enter the path to a style declaration that formats the title bar of a window (CSS).
Click the Control menu, and then click Test Movie.
Just like any other Flash component, the DataGrid has parameters that can be modified. However, as the previous example illustrates, using the Actions panel and entering scripts can give you further control over the modification of a Flash component. The Parameters available from the Component Inspector panel give you a start at how you can modify a component.
Select the DataGrid component, and then open the Component Inspector panel.
Click the Parameters tab.
Select from the following DataGrid parameters:
• editable. When you click the value field and select true, the field can be edited. If you select false, the field can be selected but not edited.
• mutipleSelection. When you click the value field and select true, the visitor can select more than one item in the list. If you select false, the visitor can only select a single item.
• rowHeight. 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.
