ActionScript 3.0 Design Patterns

164 | Chapter 4: Decorator Pattern

The following steps guide you through the process of preparing the two MovieClip

classes in the Flash IDE and setting the stage as a “soul chart.”

1. Open a new Flash document file, type inSoulin the Document class window,
   and save the file asSoulChart.fla.


2. Add a layer to the existing layer, and name the top layer,Labelsand the bottom
   layer “Lines.” (Say that last sentence fast three times!)


3. Select Insert ➝ New Symbol from the menu bar. TypeAngelin the Name win-
   dow, and click the Export for ActionScript checkbox. Click OK. You are now in
   the Symbol Edit Mode. (Be sure to capitalize the “A” in “Angel” because this is a
   class name.)


4. In the Symbol Edit window, draw or import an image of an angel.


5. Click the Text icon in the Tools panel, and select Dynamic Text for the type of
   text. In the Properties panel, provide the instance namesoul_txtfor the dynamic
   text object.


6. Exit the Symbol Edit Mode by clicking the Scene 1 icon. You should now see a
   movie clip icon in the Library named “Angel.”


7. Repeat steps 3 to 6, substituting “Devil” for “Angel.” Once you’re finished, you
   should see both Devil and Angel movie clip icons in the Library panel.


8. Click the Lines layer and add 11 horizontal lines and one vertical line as shown
   in Figure 4-7. Lock the layer.


9. Click the Labels layer, number the lines from 0 to 100, and place a “Good” and
   “Evil” label at the top of the stage as shown in Figure 4-7. Lock the layer and
   save the file once again.

By adding and removing the comment lines in theSoul.asfile, you can change the

vertical positions of the angel and devil images. You may have to make some adjust-

ments depending on the size of your angel and devil movie clips and/or if you change

the default size of the stage from 550 by 400.

Dynamic Selection of Concrete Components and

Decorations: A Hybrid Car Dealership

Up to this point, the examples have focused on different dimensions of the Decora-

tor design pattern, with the emphasis on how the different elements in the Decora-

tor design pattern can be used with different components and decorations. Both

concrete and abstract output has shown different ways to display information, but

no example has illustrated how to input data dynamically. This Decorator example

uses the case of selecting automobiles and their options to illustrate how to dynami-

cally input data for both decorators and concrete components.