Category list

11.7 Let s See It in Action

< Day Day Up >

11.7 Let's See It in Action!

Although this chapter may have felt quite conceptual, it lays very important groundwork for OOP development and for many of the examples in the remainder of this book. In the next chapter, we'll put some meat on the bones of our application framework by building a currency conversion application.

< Day Day Up >

Chapter 12. Using Components with ActionScript 2.0

In Chapter 11, we learned how to structure a basic OOP application in ActionScript 2.0. In this chapter, we'll see how to create a GUI application based on that structure. As usual, you can download the sample files discussed in this chapter from http:// moock .org/eas2/examples.

< Day Day Up >

12.1 Currency Converter Application Overview

Our example GUI application is a simple currency converter. Figure 12-1 shows the components used in our currency converter interface (Button, ComboBox, Label, TextArea, and TextInput). The user must specify an amount in Canadian dollars, select a currency type from the drop-down list, and click the Convert button to determine the equivalent amount in the selected currency. The result is displayed on screen.

Figure 12-1. The currency converter application

We'll place the assets for our application in the following directory structure, which mirrors the structure we used in Chapter 11. Note that the deploy and source folders are both subdirectories of CurrencyConverter and that org/ moock /tools is a subdirectory of the source folder:

CurrencyConverter/

  deploy/

  source/

    org/

      moock/

        tools/

Our application's main Flash document is named CurrencyConverter.fla . It resides in CurrencyConverter/source . To create the CurrencyConverter.fla file, we'll copy the file AppName.fla (which we created in Chapter 11) to the CurrencyConverter/source directory, and rename the file to CurrencyConverter.fla . That gives CurrencyConverter.fla the basic structure it needs, including a class preloader on frames 2 and 3 and a frame labeled main , on which we'll start the application.

Our application's only class is CurrencyConverter . It is stored in an external .as class file named CurrencyConverter.as , which resides in CurrencyConverter/source/org/moock/tools . Our exported application (a Flash movie) is named CurrencyConverter.swf . It resides in CurrencyConverter/deploy .

Now let's take a closer look at each of these parts of our application.

< Day Day Up >

12.2 Preparing the Flash Document

Our CurrencyConverter class instantiates all the components needed for our application at runtime. Even though we create instances of components at runtime, Flash requires us to add the components to the CurrencyConverter.fla 's Library during authoring. Unfortunately, Flash does not allow us to simply drag the required components from the Flash Components panel to CurrencyConverter.fla 's Library. Instead, to add a component to the Library, we must drag an instance of it to the Stage. Although component instances can be left on the Stage of a .fla file, that development style is not our current focus. So we'll delete the instances from the Stage; however, Flash leaves a copy of the underlying component in the Library (which was our original goal).

12.2.1 Adding Components to the Document

Here are the steps to follow to add the Button component to CurrencyConverter.fla 's Library. To add the ComboBox, Label, TextArea, and TextInput components to the Library, follow the same steps, choosing the appropriate component instead of Button.

With CurrencyConverter.fla open in the Flash authoring tool, select Window Development Panels > Components.
Select and delete the Button instance from the Stage.

If we were working in a brand new .fla file, our components would now be ready for runtime instantiation. However, recall that we're working with the basic Flash document we created in Chapter 11, which exports its classes at frame 10 and displays a preloading message while those classes load. Because of this preloading structure, our components would not currently work if we attempted to use them! We need to integrate the components into our preloading structure.

When a document's ActionScript 2.0 classes are exported on a frame later than frame 1, components will not work in that document unless they are loaded after the class export frame!

To load our components after frame 10, we must set them to not export on frame 1, and then we must place a dummy instance of each component on stage after frame 10. The dummy instance is not used; it merely forces the component to load.

Here are the steps we follow to prevent the Button component from being exported on frame 1. To prevent the remaining components from being exported on frame 1, follow the same steps, choosing the appropriate component instead of Button.

Select the Button component in the Library.
From the Library's pop-up Options menu in the top-right corner of the panel, select Linkage.
In the Linkage Properties dialog box, under Linkage, uncheck the Export in First Frame checkbox.
Click OK.

When a component's Export in First Frame option is unchecked, the component is not compiled with the movie unless an instance of the component is placed on the document's timeline. The component loads at the frame on which an instance of it is placed. But the component initialization process requires a movie's ActionScript 2.0 classes to be available before the component is exported. Hence, in our CurrencyConverter.fla document, we'll place an instance of each of our components on frame 12, two frames after our document's ActionScript 2.0 classes are exported. To store the dummy component instances, we'll create a new timeline layer and keyframe, as follows :

Select Insert Timeline Layer.
Select frame 12 in the load components layer.
Select Insert Timeline Keyframe.
Select Insert Timeline Keyframe. This second keyframe prevents the dummy component instances from showing up in our application. We need them only for loading; the CurrencyConverter class handles the actual creation of component instances in our application.

With our component-loading keyframe prepared, we can now place a dummy instance of each component on our document's timeline, as follows:

Select frame 12 in the load components layer.
From the Library, drag an instance of each component to the Stage.
Optionally use the Component Inspector panel (Window Development Panels Component Inspector) to add dummy text to each component instance indicating that it is not used, as shown in Figure 12-2. Consult Flash's online help for instructions on setting component parameters via the Component Inspector.

Figure 12-2 shows how our document's timeline and Stage look with frame 12 of the load components layer selected.

Figure 12-2. CurrencyConverter.fla's timeline and Stage

12.2.2 Starting the Application

In Chapter 11, we saw how to start an OOP application by invoking the main( ) method of the application's primary class (i.e., the class and method that we design to be the program launch point). We'll start our currency converter by invoking main( ) on our application's primary (indeed, only) class, CurrencyConverter . The main( ) call comes on frame 15 of the scripts layer in CurrencyConverter.fla 's timeline, after our classes and components have been preloaded. Here's the code:

import org.moock.tools.CurrencyConverter;

CurrencyConverter.main(this, 0, 150, 100);

Notice that the import statement allows us, in the future, to refer to the CurrencyConverter class by its name without typing its fully qualified package path . As implied by the preceding code, our class's main( ) method expects four parameters: the movie clip to hold the currency converter ( this ) and the depth, horizontal position, and vertical position ”0, 150 and 100, respectively ”at which to display the converter within the clip.

Our CurrencyConverter.fla file is now ready. We can now turn our attention to the class that creates and manages the currency converter application itself, CurrencyConverter .

< Day Day Up >