Creating a simple application with components

Creating a simple application with components

Buck DeFore

This video shows you how to use events with the new ActionScript 3.0 components in Flash. You learn how to create a simple interactive application with List and Button component, and add items to the list using a DataProvider. The list responds when you click items and removes selected items when you click a button.

Requirements

To follow along with this article, you will need the following software and files:

Flash CS3 Professional
Sample file (ZIP, 7.6 MB)

Watch this tutorial in the Adobe Creative Suite 3 Video Workshop.

Creating a simple application with components

In Flash, choose File > Open and choose the Creating_A_Simple_Application_With_Components.fla file. Click Open.

In this file, you are going to create a list of food items for the user to select and "eat" using list and button components. It's a basic application, but you can use the same principles to create more advanced ones on your own.
Choose Window > Components to open the Components panel. Drag the List icon to the Stage.
Drag the Button component directly beneath the List. Align both components in the upper left corner of the Stage (see Figure 1).

Figure 1: Place a Button and a List component on the Stage.
Choose the Selection tool in the Tools panel and select the List object.
Make sure the Parameters panel is open. If not, choose Window > Properties > Parameters to open it. In the Instance Name text box, type myList to rename the component.
Select the Button object.
Make sure the Property inspector is open. If not, choose Window > Properties > Properties to open it. Type myButton for the Instance Name in the inspector.
Go to the Parameters panel and change the Label name to Eat Item.

Instance names are required for referencing your objects in ActionScript, so it's important to change the default names immediately after you create them.
Choose Window > Actions to open the Actions panel. Here you import the classes that you'll use to build the application.
Select the first line and type import fl.events.*;
Press Enter or Return to go to the next line. Type import flash.events.*;

These two statements ensure that both native Flash events and fl namespace events are imported. The fl namespace is used for component events.
Press Enter or Return to go to line 3. Type import fl.data.DataProvider;

This statement (see Figure 2) ensures that the items in Mylist are sorted by the specified data provider, which you'll enter in the next step.

Figure 2: Type code in the Actions panel.
Skip to line 5 and type var dp:DataProvider = new DataProvider ();

Now you simply add items to your list.
Skip to line 6 and type dp.addItem ( { label: "tomato"} );

To save some time, select the addItem code on line 6 and press Ctrl/Cmd and C to copy the code. Go to line 7 and press Ctrl/Cmd and V to paste the code. Repeat for lines 8 and 9 (see Figure 3).

Figure 3: Add the code for the list items.
Change the label names in lines 7 through 9 of the code to Carrot, Blueberry, and Turnip, respectively.

Now you can connect the DataProvider with the list components.
Go to line 11 in the Action panel and type myList.dataProvider = dp

It's time to test the application.
Choose Control > Test Movie. As you can see, content now fills in the list (see Figure 4).

Figure 4: Test the application.
Close the Preview window.
Return to the Action panel and type:

myList.addEventListener(Event.CHANGE, announceSelect);

This declaration adds an event listener that updates the list every time a change is made.

Every time a list item is selected, the user can remove it from the list by clicking the Eat Item button. The next statement you add makes this happen.
Go to the next line and type:

myButton.addEventListener(MouseEvent.CLICK, eatItem);

Now you add announcements for when the user has selected or eaten an item, as well as the function that removes the respective item from the list once it is eaten.
Go to the next line and type:

function announceSelect(e:Event): void {
trace(" You have selected item:" + myList.selectedItem.label);
}
function eatItem(e:MouseEvent): void {
trace( "You have eaten item:" + myList.selectedItem.label);
dp.removeItem(myList.selectedItem);
}
Choose Control > Test Movie. Select the individual list items and notice that the Output panel fills up with the selection announcements you set up in the last step (see Figure 5).

Figure 5: Selecting list items fills in the Output window.
Select Turnip and click Eat Item. Notice that the item is removed from the list.

Where to go from here

For more information and additional tutorials, visit the Adobe Design Center.