1. Home
2. Developer Connection
3. Flash Developer Center
4. Flash Quick Start

Flash Quick Starts: Using components

Getting started with Flash CS3 user interface components

The Adobe Flash CS3 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. Adobe Flash CS3 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
• Handling events
• A small shopping cart example

Adding user interface components to your Flash application

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. On the Parameters tab in the Properties inspector, enter Accept for the label parameter.
4. Select Control > Test Movie or press Control+Enter (Windows) or Command+Enter (Mac OS) to compile the document

Result

This content requires Flash

Download the free Flash Player now!

To download the source files for this example, click here.

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:

   import fl.controls.Button;

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:

   var aButton:Button = new Button();

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:

   addChild(aButton);
   aButton.label = "Accept";
   

Back to top

Setting component properties and parameters

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. Typically, some of a component's properties are exposed in the Flash Authoring tool in the Properties inspector or in the Component Inspector. Generally, the Properties inspector contains a subset of the parameters listed in 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 Properties inspector or the Component Inspector.

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

To set parameters using the Properties 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 Propeties inspector panel is not open, select Window > Properties to open it.

   

3. In either the Properties tab or the Parameters tab of the Properties inspector, enter a name for the component instance in the text input field that contains the prompt <Instance Name>.
4. On the Parameters tab, Flash lists the component's parameters by their names and displays the default value for each one. You can change the default value to assign a new value to a parameter. For example, for a Button component you could change the value of the label parameter from Label to a value that's appropriate to the purpose of the Button. Or you could double-click the emphasized parameter and change the default value of false to true to have the Button display with a double-line emphasized border rather than a single-line border.

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. For the ComboBox component, for example, 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 dropdown 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:

titleLabel.wordWrap = true;

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:

titleLabel.x = 100;
titleLabel.y = 50;

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

Actions panel

Back to top

Changing a component's default size and its location on the Stage

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 Tranform 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 Properties 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 Properties inspector. You can make finer adjustments using the keyboard. You can make horizontal adjustments of 1 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 Properties 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 Properties inspector. You can change the size of a component instance by changing the values of the W and H parameters, which correspond to the class's width and height properties.

Each component's location on the Stage is shown as X (horizontal) and Y (vertical) coordinates in the Properties 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.

citiesList.height = 100;
citiesList.width  = 125;
citiesList.x = 100;
citiesList.y = 50;

Back to top

Handling events

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 1) listening for the event and 2) 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, you 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.

laundryList.addEventListener(Event.CHANGE, howMuch);

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(), you must 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 the data property is defined as a String and the operation would generate an error otherwise.

var total:Number = 0; 

function howMuch(event_obj:Event):void {
    total += Number(event.target.selectedItem.data);
}

Back to top

A small shopping cart example

The following example creates an abbreviated shopping cart application using Flash CS3 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 Properties 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:

1. sets the colors for the ColorPicker and disables its text field,
2. adds an event listener for a MouseEvent.CLICK event on the Checkout button, and
3. 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.

// Sets colors for the ColorPicker
itemCp.colors = [0x000000, 0x990000, 0x333366, 0x336633];
// Hides the text input field for the color picker
itemCp.showTextField = false; 
// Hides the checkout summary text
summaryTxt.visible = false;
// Listens for a click on the checkout button
checkoutBtn.addEventListener(MouseEvent.CLICK, checkOut);  

/**
 * Assembles the checkout summary text.
 */
function checkOut(event_obj:MouseEvent):void 
{ 
    // 
    var total:Number = 0;
    // First makes sure a size is selected
    if(sizeCb.selectedItem == null)
    {   
        summaryTxt.text = "Please select a size!";
        summaryTxt.visible = true;
        return;
    }
    summaryTxt.text = String(qtyNs.value) + " ";  
    // Identifies the item as men's or women's 
    if(mensRb.selected)
    {
        summaryTxt.text += mensRb.label + " ";
    }
    else
    {
        summaryTxt.text += womensRb.label + " ";
    }
    summaryTxt.text += sizeCb.selectedItem.label + " ";
    switch(itemCp.hexValue) 
    {    
        // Adds the color choice
        case "990000" :
            summaryTxt.text += "Burgundy ";
            break;
        case "333366" :
            summaryTxt.text += "Navy ";
            break;
        case "336633" :
            summaryTxt.text += "Forest ";
            break;
        default :
            summaryTxt.text += "Black ";
    }
    summaryTxt.text += itemDescTxt.text + "\n";   
    summaryTxt.text += "Total: " + String(qtyNs.value) + " x 259.95 + ";
    summaryTxt.text += shipCb.selectedItem.data  + " (Shipping) = $";
    total = qtyNs.value * 259.95 + Number(shipCb.selectedItem.data);
    summaryTxt.text += String(total.toFixed(2));  
    // Shows the checkout summary
    summaryTxt.visible = true;   
}
stop();

Result

This content requires Flash

Download the free Flash Player now!

To download the source files for this example, click here.

Back to top

For more information

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
• Getting started with Flash CS3 user interface components
• Creating, populating, and resizing the DataGrid component
• Customizing and sorting the DataGrid component
• Filtering and formatting data in the DataGrid component (New)
• Displaying images with the TileList component

About the author