Components are building blocks that you can use to create interactive, dynamic Flash documents. Think of a component as a movie clip with modifiable parameters, which are set during the design of a Flash document, and ActionScript APIs (APIs allow you to customize the component at runtime). Since components are reusable, they give developers the ability to share code between projects. 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.
You can use components created by Adobe, download components created by other developers or, with a bit of practice create your own components. Flash comes packaged with many components, some of them new, such as: the FLVPlayback, and customized User Interface skins, as discussed in Chapter 13, “Working with Video.” Other Flash components provide the ability to add check boxes, radio buttons, and even create sophisticated menus and labels with a minimum of scripting experience.
Suppose you want to create a list of options from which a visitor would be able to click and choose. You can open the Actions panel, and then create the list by typing in about forty or more lines of script, or you can use Flash’s built-in component to create the list. The difference is not in the quality of the list, but the amount of time it took to create it. Spending less time on creating dynamic, interactive Flash elements gives you more time to concentrate on design features. To a Flash visitor, it’s not about the code or how long it took you to create it, it’s about the design, and it will always be about the design.
FL 2.8, 2.9
If you’re the type of Flash designer who wants to create Rich Internet Applications, while writing as little ActionScript as possible, then Flash components are just what you’ve been looking for all these years. You can drag components into a document, set a few parameters in the Property or Component Inspector panel, attach an on() handler directly to a component in the Actions panel to handle component events, and you’re finished. If you think components sound too good to be true, then think again. Components are not just a way to get out of coding, they’re an excellent way to create consistency in your design; and since components are based on pre-tested code, they will work the same way every time.
When you work with Flash components, you can create Flash content that is accessible to users with disabilities using Flash accessibly features. As you design accessible Flash applications, consider how your users will interact with the content. Visually impaired users might rely on additional technology, such as screen readers, while hearing-impaired users might read text and captions in the document. To make a Flash Component accessible, click the Window menu, point to Other Panels, and then click Accessibility to open the Accessibility panel. For more information on creating accessible compliant documents, open your browser and visit www.w3.org/WAI/, or for information on Flash, open your browser and visit www.adobe.com/, go to the Flash Exchange, and then type the word “accessibility” in the keyword field.
Components are added to the Stage using the Components panel. To add an Alert component to the Stage, you would open the Components panel, expand the UI Components list, and then drag the Alert icon onto the Stage. Since components are based on 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 a Flash document. You specify the components type by selecting an ActionScript version in the Publishing Settings dialog box.
There are four categories of components for ActionScript 2.0—user interface, data, media, and video—and two categories of components for ActionScript 3.0—user interface and video. ActionScript 3.0 provides similar components as ActionScript 2.0. However, the parameters associated with a component may vary. User interface components allow you to interact with an application (RadioButton, Checkbox, and TextInput). Data components (ActionScript 2.0) allow you to load and manipulate information from data sources (WebServiceConnector and XMLConnector). Media components (ActionScript 2.0) allow you to play back and control streaming media (MediaController, MediaPlayback, and MediaDisplay). Video components allow you to add video playback controls, such as FLVPlayback, Back, Forward, Mute, Pause, Play, Play/Pause, Seek Bar, Stop, and Volume Bar.
Some of the components, such as Scroll bars, include a skin, or look and feel, which you can customize to suit your own artistic nature. See Project 1, “Creating and Customizing Scrollable Text,” on page 509 for a step by step example.
Once the component is on the Stage, it is controlled through the Component Inspector panel. The Component Inspector panel has three tabs: Parameters, Bindings, and Schema. Each tab gives you modifiable elements to help control the look and functionality of the component. The Parameters tab lists the most commonly used properties and methods; others parameters can be added using the ActionScript panel. The Bindings tab gives you a way to bind, or link two or more components together. For example, you can bind an external database to a display component for on-screen viewing of the data. The Schema tab contains a list of a component’s bindable properties, data types, internal structure, and other special attributes.
The TextInput component works with the ActionScript TextField object. Once a TextInput component is added to the Stage, you can use styles to customize the font, size, and color. A TextInput component can be formatted using HTML, or even as a password field that disguises the text. When a TextInput field has focus, visitors can use the arrow keys to move through information in the field, and they can use the tab key to move the focus to the next object, or Shift+Tab to move to the previous object. TextInput fields can be used to hold information. For example, you could use a group of TextInput components as the basis for creating an interactive form for fields such as: name, address, city, state, and zip code.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the TextInput component onto the Stage, and then select the component.
Open the Component Inspector panel, and then click the Parameters tab.
Select from the following Text Input parameters:
a. 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.
b. password. When you click the value field, and select true, text entered into the field appears as dots. If you select false, text typed into the field appears as typed.
c. text. Click the value field, and then enter the text that will appear in the field when the Flash document opens.
d. maxChars. Click the value field, and then enter a numerical value indicating the max characters allowed in the TextInput field.
e. restrict. Click the value field, and then enter any characters that cannot be entered into the TextInput field.
f. enabled. When you select true, the field can be edited. If you select false, the field appears grayed out and is not selectable or editable.
g. visible. When you click the value field, and select true, the field can be viewed. If you select false, the field is invisible.
h. minHeight (2.0). Click the value field, and then enter a minimum height for the TextInput box.
i. minWidth (2.0). Click the value field, and then enter a minimum width for the TextInput box.
Click the Control menu, and then click Test Movie.
The ComboBox component creates a drop-down list of selectable options. They can be either static or editable. The static ComboBox component allows a user to make a single selection from a drop-down list. An editable ComboBox component lets users enter text into a text field located at the top of the list, as well as selecting an item from a drop-down list. A ComboBox component is composed of three subcomponents: Button, TextInput, and List components. When a visitor selects an item, the label of the selection is automatically copied to the text field at the top of the combo box. The ComboBox component is an excellent way to offer several choices to a user, without the necessity of them having to type in a response. For example, a ComboBox could be used to list all of the states in the union in a drop-down box, giving the user the chance to select his home state. When the ComboBox displays in a Flash document, it appears as a single line; clicking the triangle to the right of the line expands the box and displays all the available options.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the ComboBox component onto the Stage, and then select the component.
Open the Component Inspector panel, and then click the Parameters tab.
Select from the following ComboBox parameters:
a. data. Click the value field, and then enter an array in the Values dialog box. Click the plus (+) sign to add values and the minus sign (-) to remove a value. Data values are used to populate the drop-down list.
b. 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.
c. labels (2.0). Click the value field, and then enter an array in the Values dialog box. Click the plus (+) sign to add values, and the minus sign (-) to remove a value. Data values are used as the selectable items in the list.
d. rowCount. Click the value field, and then enter a number to determine the maximum height of the drop-down list.
e. enabled. When you click the value field, and select true, the items in the list can be selected. If you select false, the field appears grayed out and is not selectable.
f. visible. When you click the value field, and select true, the field can be viewed. If you select false, the field is invisible.
g. minHeight (2.0). Click the value field, and then enter a minimum height for the ComboBox box.
h. minWidth (2.0). Click the value field, and then enter a minimum width for the ComboBox box.
Important
If there is not enough room for the ComboBox to open without hitting the bottom of the document, it will open up instead of down.
Click the Control menu, and then click Test Movie.
When you click the Select Your Country list arrow, the list will open, and a selection can be made by clicking on one of the available options.
A check box is simply a square box that the user can select or deselect. When it is selected, a check mark appears in the box. When a selected check box is clicked, the check mark is removed. The state of a CheckBox component does not change until the mouse is released over the component.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the CheckBox component onto the Stage, and then select the component.
Did You Know?
You can control the state of a CheckBox component without the mouse. If the CheckBox component has focus (selected), pressing the Spacebar selects or deselects the check mark.
Open the Component Inspector panel, and then click the Parameters tab.
Select from the following CheckBox parameters:
a. enabled (3.0). When you click the value field, and select true, the items in the list can be selected. If you select false, the field appears grayed out and is not selectable.
b. label. Click the value field, and then enter a label for the check box.
c. labelPlacement. Click the value field, and then select between right, left, top, or bottom for the placement of the label text.
d. selected. Click the value field and select between true (field appears with a checkmark), or false (field appears without a check mark).
e. visible (3.0). When you click the value field, and select true, the field can be viewed. If you select false, the field is invisible.
To change the width and height of the check box component, select the component, and then drag a resize handle to change the width and height.
Click the Control menu, and then click Test Movie.
Click in the CheckBox component to add a check mark, and then click a second time to remove the check mark.
The RadioButton component lets you do something that the CheckBox component cannot do: force a user to make a single choice within a set of choices. The RadioButton component must be used in a group of at least two RadioButton instances, and only one member of the group can be selected at any given time. Selecting one radio button in a group will deselect the currently selected radio button in the group. For example, a radio button options for Gender can be Male, Female. There can be only one answer to that question, so you would group the two items using RadioButton components.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag one or more RadioButton components onto the Stage, and then select one at time.
Open the Component Inspector panel, and then click the Parameters tab.
Did You Know?
A visitor can control a radio button selection with the keyboard. Click the Tab key until one of the buttons within the group receives focus (is selected), and then use the left and right arrow keys to change the selection within the group. Having the ability to use the keyboard makes Flash components compliant with the current rules on accessibility as set by the U.S. Congress.
Select from the following RadioButton parameters:
a. data (2.0) or value (3.0). Click the value field, and then enter a value that will be used to populate the RadioButton.
b. groupName. Click in the value field, and then enter a group name for the button. When you associate a group name to several RadioButton components, the visitor will only be able to select one button in the group.
c. label. Click the value field, and then enter a label for the RadioButton.
d. labelPlacement. Click the value field, and then select between right, left, top, or bottom for the placement of the label text.
e. selected. Click the value field, and then select between true (field appears selected), or false (field appears unselected).
f. enabled (3.0). When you click the value field, and select true, the items in the list can be selected. If you select false, the field appears grayed out and is not selectable.
g. visible (3.0). When you click the value field, and select true, the field can be viewed. If you select false, the field is invisible.
Click the Control menu, and then click Test Movie.
Since the RadioButton components both use the same Group name, you can only select one button.
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 Text Area field is the ability of the TextArea field to generate 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.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the TextArea component onto the Stage, and then select the component.
Open the Component Inspector, and then click the Parameters tab.
Select from the following TextArea parameters:
a. condenseWhite (3.0). When you click the value field, select true to remove extra white space (spaces, line breaks) in a text field. If you select false, the white space remains.
b. 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.
c. html. When you click the value field, select true to allow HTML to control the formatting of the data. If you select false, the field cannot be modified using HTML.
d. text. Click the value field, and then enter the initial text that will appear in the TextArea component.
e. wordWrap. When you click the value field and select true, the text typed by the visitor wraps in the TextArea box. If you select false, the text will not wrap.
f. maxChars. Click the value field, and then enter the maximum number of characters that can be typed into the TextArea component.
g. restrict. Click the value field, and then enter any characters that cannot be entered into the TextArea field.
h. enabled. When you click the value field and select true, the field can be edited. If you select false, the field appears grayed out and is not selectable, or editable.
i. visible. When you click the value field and select true, the field can be viewed. If you select false, the field is invisible.
j. minHeight (2.0). Click the value field, and then enter a minimum height for the TextArea.
k. minWidth (2.0). Click the value field, and then enter a minimum width for the TextArea.
l. 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, and then click Test Movie.
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.
The Button component is a clickable rectangular button, which can be resized. If you desire, you can add a custom icon to the Button component. 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.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the Button component onto the Stage, and then select the component.
Open the Component Inspector panel, and then click the Parameters tab.
Select from the following Button parameters:
a. icon (2.0). Click the value field, and then enter the full path name to an icon file.
b. emphasized (3.0). Click the value field and then select true to add a border around the button. If you select false, the button is normal.
c. label. Click the value field, and then enter a label for the Button component.
d. labelPlacement. Click the value field, and then select between right, left, top, or bottom for the placement of the Button component text.
e. selected. When you click the value field and select true, the button appears selected. If you select false, the button is normal or deselected.
f. toggle. When you click the value field, and select true, the button, when selected, returns a true value. If you select false, the button returns false when selected.
g. enabled. When you click the value field and select true, the button can be clicked. If you select false, the button is grayed out and cannot be clicked.
h. visible. When you click the value field and select true, the Button can be viewed. If you select false, the Button is invisible.
i. minHeight (2.0). Click the value field, and then enter a minimum height for the Button.
j. minWidth (2.0). Click the value field, and then enter a minimum width for the Button.
Click the Control menu, and then click Test Movie.
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.
The Menu component (ActionScript 2.0) lets a visitor select items from a menu. The Menu component opens in an application when a user rolls over or clicks a button-like menu activator. Flash conserves valuable space by creating Menu components dynamically at runtime. Menu components have an obvious advantage over static menus: They only display information when requested, and they give a sense of order to a site that requires the visitor to select from many choices.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the MenuBar component (2.0) onto the Stage, and then select the component.
Open the Component Inspector panel, and then click the Parameters tab.
Important
Menus represent the navigation, or steering wheel, of your Flash document. Visitors require a powerful, yet easy-to-understand way to navigate. Not only should your menus be easy, they should be designed to allow visitors to get to any page, scene or document within three clicks. It’s called the three-click rule (of course), and it keeps visitors from getting frustrated trying to navigate through your site. Remember, build it, and they will come... make it easy to navigate, and they will stay.
Select from the following MenuBar parameters:
a. labels. Click the Zoom button to the right of the value field, and then enter the labels used in the Menu Bar. Click the plus (+) sign to add a label, and the minus sign (-) to remove a label. Click the up and down arrow keys to reorder the values.
b. enabled. When you click the value field and select true, the menu can be used. If you select false, the menu is grayed out and cannot be used.
c. visible. When you click the value field and select true, the menu can be viewed. If you select false the menu is invisible.
d. minHeight. Click the value field, and then enter a minimum height for the menu.
e. minWidth. Click the value field, and then enter a minimum width for the menu.
Click the Control menu, and then click Test Movie.
In the example, when you roll over the menu, the buttons change color. You can now attach ActionScripts to the buttons to load other scenes or movies.
The Alert component (ActionScript 2.0) lets you create a popup window that presents the user with a message and response buttons. An Alert window can have any combination of Yes, No, OK, and Cancel buttons. Alert components are used when it’s important to get a piece of information to the user. For example, a data validation routine indicates that the user is not entering in their zip code; you can create an Alert component that informs them of their error, and makes them go back and type in their zip code.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the Alert component (2.0) onto the Stage, and then select the component.
Press the Backspace key to delete the Alert window from the Stage. This removes the Alert component from the Stage, but keeps the component as a complied clip in the Library.
Select the first keyframe in the Flash document.
See Also
See Chapter 14, “Using Basic ActionScripts” on page 347 for more information on writing ActionScripts.
Open the Actions panel, and then enter the script as shown in the illustration.
This code creates an Alert window with OK and Cancel buttons. When either button is pressed, the myClickHandler function is called. But when the OK button is pressed, the startKnowledgeApplication() method is called. In this test, a trace box opens and displays the message “Launch Knowledge Application.”
Click the Control menu, and then click Test Movie.
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 triangle button to the right of the list).
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag the List component onto the Stage, and then select the component.
Open the Component Inspector panel, and then click the Parameters tab.
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:
a. data. Click the value field, 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.
b. enabled (3.0). When you click the value field and select true, the field can be clicked. If you select false, the field is grayed out and cannot be clicked.
labels (2.0). Click the value field, 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. 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 (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, and then click Test Movie.
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.
A Label component consists of a single line of text. You can specify that a label be formatted with HTML. You can also control alignment and sizing of a label. Label components do not have borders, nor do they contain input that can be changed by the user. They are simply text information. Labels can be used to identify data input fields, or they can contain visitor information important to the understanding of a form. Labels can change what they display, as the Flash movie plays.
Open the Components panel.
Click the User Interface plus (+) sign to expand the list.
Drag one or more Label components onto the Stage, and then select the component, one at a time.
Open the Component Inspector panel, and then click the Parameters tab.
Select from the following Label parameters:
a. autoSize. Click the value field, and then select between left, center, right, or none. The autoSize parameter uses this information when automatically resizing the text.
b. condenseWhite (3.0). When you click the value field, select true, to remove extra white space (spaces, line breaks) in a text field. If you select false, the white space remains.
c. enabled (3.0). When you select true, the field can be edited. If you select false, the field appears grayed out and is not selectable, or editable.
d. html. When you click the value field, select true to allow HTML to control the formatting of the text. If you select false, the field cannot be modified using HTML.
e. text. Click the value field, and then enter the text that will appear in the field when the Flash document opens.
f. selectable (3.0). When you click the value field and select true, the field text is selectable. If you select false, the field text is not selectable.
g. visible. When you click the value field and select true, the field can be viewed. If you select false, the field is invisible.
h. minHeight (2.0). Click the value field, and then enter a minimum height for the Label.
i. minWidth (2.0). Click the value field, and then enter a minimum width for the Label.
j. wordWrap (3.0). When you click the value field and select true, the text typed by the visitor wraps in the TextArea box. If you select false, the text will not wrap
Click the Control menu, and then click Test Movie.
In the example, the Label components represent visitor information in which the labeling fields require visitor input.
When you create a form, you’re incorporating all the various Flash components onto the Stage. Flash components make creating a form easy; however, there are still design considerations to be made. For example, what information do you need to extract from your visitors, and how will you receive it? Does your audience primarily speak and read English, or do you need to make the form multi-lingual (that’s possible by creating label components that display text in a language selected by the visitor). And what about handicap and accessibility standards, how do you handle them? Yes, Flash does make the creation of a form easy, but you are still responsible for the overall design, and that includes images, backgrounds, colors, fonts and sizes, readability, and accessibility. The following Flash document is an example of incorporating multiple components to create an interactive form.
When you create a form, it is a good programming practice to isolate components onto separate layers. That way, they’re easier to locate and edit, and you can always lock the component’s layer to prevent accidental tampering.