Home arrow Flash arrow Page 4 - Using Concrete Decorator Classes

Using Concrete Decorator Classes

In this fifth part of a six-part series on the decorator pattern, we create a whimsical example involving good and evil to show you concrete decorators in action. This article is excerpted from chapter four of ActionScript 3.0 Design Patterns Object Oriented Programming Techniques, written by William B. Sanders and Chandima Cumaranatunge (O'Reilly, 2007 ISBN: 0596528469). Copyright © 2007 O'Reilly Media, Inc. All rights reserved. Used with permission from the publisher. Available from booksellers or direct from O'Reilly Media.

Author Info:
By: O'Reilly Media
Rating: 5 stars5 stars5 stars5 stars5 stars / 4
December 24, 2008
  1. · Using Concrete Decorator Classes
  2. · Deadly sins
  3. · Implementing the Good and Evil Decorator
  4. · Charting souls

print this article

Using Concrete Decorator Classes - Charting souls
(Page 4 of 4 )

Like any of the other design patterns, what you do with the output is up to you. However, because ActionScript 3.0 is part of Flash, this next implementation shows how to place the output into different formats with graphic elements. The getSoul() generates a string, and the good() and evil() methods generate numbers. The string will be placed in a text field embedded in a movie clip, and the vertical position of the movie clip will be determined by the values generated by the good() and evil()methods. To get started, save the script in Example 4-37 in an ActionScript file namedSoul.as.

Example 4-37. Soul.as

   import flash.display.Sprite;
   import flash.display.MovieClip;
   public class Soul extends Sprite
//Instantiate the two MovieClip objects in
      //the Library
      var devil:Devil=new Devil();
      var angel:Angel=new Angel();
      public function Soul()
var life:Component=new Jane();
         //***Add Good***
         life=new Courage(life);
         life=new Compassion(life);
         life=new Hope(life);
         //life=new Integrity(life);
         life=new Openness(life);
         life=new Diligence(life);
         life=new Justice(life);
         //***Add Evil***
         life=new Malice(life);
         life=new Prejudice(life);
         //life=new Dogmatisms(life);
         life=new Arrogance(life);
         //life=new Indifference(life);
         //life=new Rage(life);
         //life=new Obsfuscation(life);
      private function setAngelDevil(right:Number,wrong:Number,
         var booWrong:Number=Number(wrong>0);
var booRight:Number=Number(right>0);
         if (booWrong)
         } else

In looking at the script, all it does is pass the three different values generated by the getter methods,good(),evil()andgetSoul(), to thesetAngelDevil()function. ThesetAngelDevil()function uses two movie clips from the library and positions them on the stage. Depending on the outcome, the concrete component’s name appears in the angel or devil icon. Figure 4-7 shows what the output will look like. Use it as a guide for setting up your stage.

Figure 4-7.  Decorator generated values used for placement and labels

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 in Soul in the Document class window, and save the file as SoulChart.fla.
  2. Add a layer to the existing layer, and name the top layer, Labels and the bottom layer “Lines.” (Say that last sentence fast three times!)
  3. Select Insert -> New Symbol from the menu bar. Type Angel in the Name window, 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 Figure4-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 adjustments 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.

Please check back next week for the conclusion to this article.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

blog comments powered by Disqus

- More Top Flash Game Tutorials
- Top Flash Game Tutorials
- Best Flash Photo Gallery Tutorials
- The Top Flash Tutorials for Menus
- 7 Great Flash Tutorials
- Adobe Creative Suite 5.5 Now Available
- Critical Flash Vulnerability Heats Up the Web
- More on Nonpersistent Client-Side Remote Sha...
- Nonpersistent Client-Side Remote Shared Obje...
- Using the Decorator Pattern for a Real Web S...
- Using Concrete Decorator Classes
- Delving More Deeply into the Decorator Patte...
- The Decorator Pattern in Action
- A Simple Decorator Pattern Example
- Decorator Pattern

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials