You've already learned a little bit about components earlier, and learned that components can help designers add functionality in the SWF file that they might not want to or be able to program using ActionScript. Designers can simply drag and drop components onto the Stage, change a few parameters in the Property inspector, and write a small amount of ActionScript to make the component work in rather complex ways if needed. Components can speed up application development or create elements that can be reused with relative ease.
Components are compiled into SWC files and can be purchased or downloaded for free from the web. Distributing components is quite popular, and you will have no problem finding many to work with by searching online. There are many websites devoted to distributing components. A database of files is available on the Macromedia Exchange, and there are a number of books aimed solely at Flash components.
The components found in Flash 8 Basic (and additional components in Flash 8 Professional should you upgrade to it) are excellent to use when you are building applications using multiple instances of certain components, like a Button component, throughout the application. If you are using only one component in a specific context and not reusing it after that, know that components add at least 25K of file size when you first drag one in to your interface. This is because the ActionScript necessary to include with any component must be included with the SWF file when it is published. However, because this ActionScript is the same for many of the components in the V2 set, it needs to be included only once, so adding additional kinds of components might not bulk up your SWF at all. This is why it's advantageous to include many components, but not as advantageous if you use only one or two. Some components do not include the same architecture, so additional file size might be added, depending on what components you use. So essentially, when you use one component, you get them all. Take advantage of it!
Flash 8 Basic includes many components with the software, including Button, CheckBox, ComboBox, Label, List, Loader, NumericStepper, ProgressBar, RadioButton, ScrollPane, TextArea, TextInput, and Window.
Flash 8 Professional has additional components, including the Accordion, Alert, DataGrid, DateChooser, DateField, Menu, MenuBar, and Tree components. Flash 8 Professional also has several components for connecting to Web Services and XML files, and Media components allow you to play back and control streaming FLV (Macromedia Flash Video) or MP3 files.
The following list outlines some of the components that are included with Flash 8 Basic. Maximize the Components panel to view a list of the UI component set.
Button: This component is a customizable button that allows you to define a label (the text that is shown on the button's face) and icon (a small graphic). This component is similar to using HTML's input type of Submit or Button, and has a number of built-in visual effects, such as rollover and click effects. Because this component is part of the much broader component class, it can also be bound to other Flash components to make interface elements functionally dependent on each other.
CheckBox: Similar to a check box in an HTML page, this component allows an end user to select an item of information in a form that will ultimately be stored in a database somewhere. The idea behind it is to allow users to select more than one option in a grouping of options (such as asking users what their interests are, what newsletters they want to subscribe to, and the like). You can customize the placement of the label and check box control. It also allows a value of either true or false.
ComboBox: This component allows users to make a selection from a drop-down list. You can control the list and what each menu item associates to, as well as how many items will display in the menu before it begins to scroll. The drop-down list feature along with the scrolling list feature are the "combo" that makes this component what it is.
Label: This component is a single-line static text field. The text can be changed at runtime using ActionScript. At first glance, it seems to be the least useful of the components; however, it is very important in ensuring that the font used in your labels matches the font used in the drop-down list and text areas of the other components you use.
List: This component is similar to the ComboBox component, except it displays multiple lines of data at once, rather than in a drop-down list that scrolls after a fixed number of lines. The List component allows multiple items to be selected at once so that users can make more than one selection.
Loader: This container component can be used to load SWF files or JPEG, PNG, and GIF images. It can be customized to allow you to easily resize the content that is being loaded to fit the size of the component. Or you can have the component resize itself to fit the contents being loaded. The Loader component itself is not actually visible on the Stage; it's really more of a shell, and its presence is otherwise unknown by the end user.
NumericStepper: You can use this component to select number values. The component is similar to a text input field, but it is restricted to numbers. It also comes with a couple of arrow controls that increment and decrement the current value by a certain number. You can specify minimum and maximum values and also change the increment for the number so that it increases by something like 2's or 5's rather than incrementing by 1.
ProgressBar: This component displays a preloading bar for content that you are loading into a SWF file. It has a built-in feature that tracks the download progress of files loading into something like the Loader component.
RadioButton: This component is similar to radio buttons that you might see on an HTML page; it is used to force the end user to select only one piece of information in a related group. You can group radio buttons so only one button can be selected at one time.
ScrollPane: This component allows you to easily scroll content within a window using horizontal and/or vertical scroll bars. It is useful when you want to load a large amount of content to a small space and help you show a greater amount of content in a limited space.
TextArea: This component is a text field that includes scroll bars. This component is a multiline editable text field, and can be used either to display information or to collect information from an end user. You can load plain or formatted text into this field, which will show scroll bars when the text exceeds the display area.
TextInput: This component creates a single-line text field. A user can type text into the field, which can be collected and used in a document or sent to a server by using ActionScript. You can specify the Text Input component as a password field that replaces the characters the user types with dots, so that someone looking over their shoulder doesn't actually see the text they are typing.
Window: This component is a draggable floating window that includes a title bar and button that is used to close the window. It is designed to work much the same way as an HTML pop-up window, with similar controls.
The following exercise will explore a few of the more common UI components. You will also learn how to change component parameters using both the Property inspector and the Component inspector panel.