Using ActionScript 2.0 Components
Creating an Application with Components > Build the main page

Build the main page

Follow these steps to create the application's main page by adding components to a skeletal starter page. Then add ActionScript code to customize the components, import the ActionScript classes that allow you to manipulate the application's components, and access a web service to populate the combo box with a list of offenses. The code populates the combo box by setting its dataProvider property to receive the results from the web service.

1. Open the first_app_start.fla file. For the sample .fla file, see the Flash Samples page at www.adobe.com/go/learn_fl_samples.

   The file contains a start page that looks like the following:

   

   The start_app.fla file contains three layers: a background layer with a black background image and text titles, a text layer with text labels for sections of the application, and a labels layer with labels on the first frame (Home) and the tenth frame (Checkout).

2. Select File > Save As. Rename the file and save it to your hard disk.
3. In the Timeline, select the Labels layer and click the Add Layer button to add a new layer above it. Name the new layer Form. You will place the component instances in this layer.
4. Make sure the Form layer is selected. In the Components panel (Window > Components), locate the ComboBox component. Drag an instance of ComboBox onto the Stage. Place it below the What Did You Do? text. In the Property inspector (Window > Properties > Properties), enter problems_cb for the instance name. Enter 400 (pixels) for the width. Enter 76.0 for the x location and 82.0 for the y location.

   NOTE

   The ComboBox component symbol is added to the library (Window > Library). When you drag an instance of a component to the Stage, the compiled clip symbol for the component is added to the library. As with all symbols in Flash, you can create additional instances of the component by dragging the library symbol onto the Stage.

5. Drag an instance of the DataGrid component from the Components panel onto the Stage. Place it below the Gift Ideas text. Enter products_dg for the instance name. Enter 400 (pixels) for the width and 130 for the height. Enter 76.0 for the x location and 128.0 for the y location.
6. Drag an instance of the DataSet component from the Components panel onto the side of the Stage. (The DataSet component does not appear in the application at runtime. The DataSet icon is simply a placeholder that you work with in the Flash authoring environment.) Enter products_ds for the instance name.

   Drag an instance of the XMLConnector component from the Components panel to the side of the Stage. (Like the DataSet component, the XMLConnector component does not appear in the application at runtime.) Enter products_xmlcon for the instance name. Click the Parameters tab in the Property inspector, and type http://www.flash-mx.com/mm/firstapp/products.xml for the URL property. Click the value for the direction property to activate the combo box, click the down-arrow and select receive from the list.

   NOTE

   You can also use the Component inspector (Window > Component Inspector) to set parameters for components. The Parameters tab in the Property inspector and the Component inspector work in the same way.

   The URL specifies an external XML file with data about the products that appear in the Gift Ideas section of the application. Later in the tutorial you will use data binding to bind the XMLConnector, DataSet, and DataGrid components together; the DataSet component filters data from the external XML file, and the DataGrid component will display it.

7. Drag an instance of the Button component from the Components panel onto the Stage. Place it in the lower-right corner of the Stage. Enter checkout_button for the instance name. Click the Parameters tab and enter Checkout for the label property. For the x and y coordinates, enter 560.3 and 386.0, respectively.

View comments on LiveDocs