Getting started with Flash CS4 user interface components

The Adobe Flash CS4 Professional User Interface components are ActionScript 3.0 class objects that implement commonly used pieces of the user interface of a web page. These components help you accelerate development of your web pages by providing elements that you can easily plug in and customize. Flash CS4 provides the following user interface components:

This article covers the following topics: adding user interface components to your Flash application, setting component properties and parameters, changing a component's default size and its location on the Stage, and handling events. It concludes with a small shopping cart example.

There are two ways to add a component to a Flash application:

• Using the Flash authoring tool during development
• Using ActionScript as the application is executing

Using the Flash authoring tool during development

The following procedure shows how to add a Button component to your Flash application during development. You can use the same process to add any of the User Interface components to your application.

To add a Button component to your Flash application during development

1. If the Components panel is not open, select Window > Components.
2. Either double-click the Button in the Components panel or drag it with the mouse from the Components panel to the Stage.
3. If the Component inspector is not open, select Window > Component Inspector.
4. With the Button selected on the Stage, click the label value in the Component inspector and enter Accept for the label parameter.
5. Select Control > Test Movie or press Control+Enter (Windows) or Command+Enter (Mac OS) to compile the document.

Result

To get the source files for this example, download ButtonExample.zip at the top of this page.

Using ActionScript as the application is executing

1. During authoring, place the Button in the library by dragging it from the Components panel (Window > Components) and dropping it in the Library panel (Window > Library).
2. Add an import statement to the Actions panel on the first frame of the Timeline to make the component's class available to your application. For the Button component, you would add the following import statement:

3. In the Actions panel, create an instance of the component by invoking the component’s ActionScript constructor. For example, the following statement creates an instance of a Button called aButton:

4. In the Actions panel, call the static addChild() method to add the component instance to the Stage or application container. For example, the following statement adds the Button instance aButton to the current display container:

Each component's class has properties that you can read to obtain information about the component or write to affect the component's appearance and behavior. Generally, you set generic properties common to all components, such as position, dimension, color effect, and blending mode in the Property inspector. You set component-specific properties in the Parameters tab of the Component inspector. When you set a parameter in the Flash authoring tool, you are setting the corresponding property in the ActionScript class.

You can directly access and set a component's properties using ActionScript. Setting a property in ActionScript overrides a value that was set using the Property inspector or the Component inspector.

Note: To assign a name to a component instance you must use either the Property inspector or ActionScript

To set parameters using the Property inspector

1. Using the mouse, either double-click a component in the Components panel or click it and drag it to the Stage.
2. If the Property inspector panel is not open, select Window > Properties to open it.

3. In the Property inspector, enter a name for the component instance in the text input field that contains the prompt <Instance Name>.

To set parameters using the Component inspector

1. Using the mouse, either double-click the component in the Components panel or click it and drag it to the Stage.
2. If the Component inspector panel is not open, select Window > Component Inspector to open it.

3. On the Parameters tab, Flash lists the component's parameters in the Name column and their values in the Value column. You can change the default value to assign a new value to a parameter. The image above shows the Component inspector for the Button component. The parameters vary for different components. For the ComboBox component, where you would see different parameters displayed in the Component inspector, you could change the value of the editable property to true to make the text field editable. Or you could set rowCount to set the maximum number of rows that can appear in the drop-down list.

To set properties using ActionScript

In ActionScript, you use the dot (.) operator to access a component's properties. For example, to implement word wrapping for a Label called titleLabel, you would write the following line of ActionScript code to set the wordWrap property:

To place the Label 100 pixels from the left of the Stage and 50 pixels from the top, you could add the following code to set the x and y properties:

You would place this code in the Actions panel (Window > Actions) as shown below:

You can change a component's size and location on the Stage in the following ways:

• Using the Flash authoring tool during development
• Setting parameters during development
• Using ActionScript

Using the Flash authoring tool during development

The easiest way to change a component's default size is by using the Free Transform tool, located in the Tools panel (Window > Tools). The Free Transform tool looks like this:

To change a component's size using the Free Transform tool

1. Click the Free Transform tool in the Tools palette.
2. Click the component instance on Stage to select it.
3. Click and drag the handles that appear at the corners and at the midpoint of each side until the desired size is achieved. The new height (H) and width (W) dimensions appear in the Property inspector.

To change a component's location on the Stage using the Flash authoring tool, simply click the component and drag it to the desired location. When you release the component, you can see the x (horizontal) and y (vertical) coordinates of the new location in the Property inspector. You can make finer adjustments using the keyboard. You can make horizontal adjustments of one pixel by holding down the Ctrl key (Windows) or the Command key (Mac OS) and pressing the left or right arrow keys. You can adjust the vertical location 10 pixels at a time by holding down the Shift key and pressing the up arrow or down arrow keys.

Setting parameters during development

You can also specify a component's size and location by setting parameters in the Property inspector.

To change a component's size and location by setting parameters

Each component's dimensions are shown as width (W) and height (H) values in the Property inspector. You can change the size of a component instance by changing the values of these W and H parameters.

Each component's location on the Stage is shown as x (horizontal) and y (vertical) coordinates in the Property inspector. These parameters correspond to the class's x and y properties. The horizontal position represents the number of pixels from the left edge of the Stage and the vertical position represents the number of pixels from the top. You can change the location of a component instance on the Stage by changing the values of the X and Y parameters.

Using ActionScript

You can also specify a component's size and location using ActionScript.

To change a component's size and location using ActionScript

You can change the size of a component instance by setting its height and width properties and you can change its location by setting its x and y properties. For example, the following lines of code specify the size and location of a List component called citiesList:

Components communicate with the application that contains them by dispatching events. Events are noteworthy occurrences in your Flash application that you might want to handle with ActionScript code. For example, an event occurs when a user clicks a button or enters characters in a text field. Events also occur when a user scrolls using the UIScrollBar component and when the UILoader component completes a loading operation. Each component class defines the events that occur for that component. The ColorPicker class, for example, has the following events, in addition to the events that it inherits from its parent classes:

Handling an event refers to taking an action in response to the event. Handling an event consists of listening for the event and executing the actions you want to take in response.

To listen for an event you must add an event listener for the component instance on which the event occurs. In ActionScript 3.0, use the addEventListener() method to add an event listener. When you add an event listener, you specify the event that you are listening for and the name of a function to call when the event occurs. The function is the event handler, which you must provide. For example, the following line of code adds an event listener that listens for a change event on a List instance called laundryList:

The first parameter, Event.CHANGE, is a constant in the Event class that specifies the name of the change event. The second parameter, howMuch, is the name of the function to call when the event occurs.

When a change event does occur on the laundryList instance, Flash calls the function howMuch() and passes it an event object that contains information about the event. The base event object is defined by the Event class.

To implement the event handling function howMuch(), define the function and add the logic that you want to execute. The following implementation of the howMuch() function accesses the data field of the selected list item and adds it to a variable called total. The function casts selectedItem.data to a Number type because in the Event object the data property is defined as a String and the operation would generate an error otherwise:

The following example creates an abbreviated shopping cart application using Flash CS4 User Interface components. It uses Label instances for all of the text prompts. It uses a variety of other components to build the user interface, including:

• Two TextArea instances that describe the item being purchased and provide a checkout summary when you click the Checkout button
• Two RadioButtons to allow you to choose a men's or women's parka
• A NumericStepper to let you select the quantity
• Two ComboBox instances to let you make size and shipping choices
• A ColorPicker instance to provide an array of available colors for the item

The item description is provided through the text parameter of the item TextArea (itemTa). The data in the Size (sizeCb) and Shipping (shipCb) ComboBoxes is created during authoring by double clicking the value cell for the dataProvider parameters in the Property inspector and adding items to the Values collection dialog. The values seen in the Size ComboBox were added simply by filling in the label parameter with the values that the ComboBox displays. The following illustration shows the values provided to the dataProvider parameter for the Shipping ComboBox.

The example also requires the following ActionScript code, which:

• Sets the colors for the ColorPicker and disables its text field
• Adds an event listener for a MouseEvent.CLICK event on the Checkout button
• Implements the checkOut() function to perform the following tasks when the event occurs:
  
  
  • Creates the total variable to calculate the total amout due for the order
  • Checks to see that the user has selected a size
  • Assembles the content of the order summary in the text property of the checkout summary TextArea (summaryTxt)
  • Calculates the total amount of the order by multiplying the quantity by the item amount and adding the shipping charge
  • Displays the total amount due by appending the value of the total variable to summaryTxt.text
  • Makes the order summary TextArea (summaryTxt) visible

Here is the source code for the example application. Note that this source code depends on having a number of components already on the stage. Please download the source file to see how the components are placed.

Result

To get the source files for this example, download SmallShoppingCart.zip at the top of this page.

For more information about this topic, see Using ActionScript 3.0 Components and the ActionScript 3.0 Language and Components Reference.

Related Flash Quick Starts

• Using the Button component
• Using the Label component
• Creating, populating, and resizing the DataGrid component
• Customizing and sorting the DataGrid component
• Filtering and formatting data in the DataGrid component
• Displaying images with the TileList component