blackcj.com » Singleton http://www.blackcj.com/blog Cutting edge development with Adobe Flex, ActionScript and AIR Thu, 15 Dec 2011 01:01:57 +0000 en hourly 1 http://wordpress.org/?v=3.3 Re-Learning ActionScript 2 http://www.blackcj.com/blog/2009/05/26/re-learning-actionscript-2/ http://www.blackcj.com/blog/2009/05/26/re-learning-actionscript-2/#comments Tue, 26 May 2009 17:51:53 +0000 Chris Black http://www.blackcj.com/blog/?p=357 It's amazing how easy it is to forget the little niches in programming languages after going almost a year without using them. I recently had the pleasure of working on an ActionScript 2 project after almost a year of doing primarily ActionScript 3 development. This post will highlight a few things that can make ActionScript 2 development a bit more like 3. I'll also provide links to resources that helped get me back in the mindset of AS2.

Event dispatching.
One of the toughest parts of going back to AS2 is the event handling. AS3 does this much better and one of my co-workers (@rexeisen) sent me this great link: AS3 Style Events in AS2

Singleton design pattern.
I found a great PDF outlining how to implement the singleton design pattern using AS2: Singleton Design Patter with AS2

My singleton implementation:

PLAIN TEXT
Actionscript:
  1. import com.cb.Utils.messaging.*;
  2. import com.cb.events.Event;
  3. import mx.utils.Delegate;
  4.  
  5. class com.sierrabravo.Utils.messaging.MessageManager
  6. {
  7.     private static var instance:MessageManager;
  8.     private var _container:MovieClip;
  9.     private var _currentContent:MovieClip;
  10.     private var _tint:MovieClip;
  11.  
  12.     private function MessageManager()
  13.     {
  14.         // Do nothing
  15.     }
  16.  
  17.     public static function getInstance():MessageManager
  18.     {
  19.         if(MessageManager.instance == null)
  20.         {
  21.             MessageManager.instance = new MessageManager();
  22.         }
  23.         return MessageManager.instance;
  24.     }
  25.  
  26.     public function setParent(parentClip:MovieClip):Void
  27.     {
  28.         _container = parentClip;
  29.     }
  30.    
  31.     public function updatePosition():Void
  32.     {
  33.         if(_currentContent){
  34.             _currentContent._x = (Stage.width - _currentContent._width) / 2;
  35.             _currentContent._y = (Stage.height - _currentContent._height) / 2;
  36.         }
  37.         if(_tint){
  38.             _tint._width = Stage.width;
  39.             _tint._height = Stage.height;
  40.         }
  41.     }
  42.    
  43.     public function addMessageWindowContent(contentWindow:MessageContentBase):Void
  44.     {
  45.         tint();
  46.         _currentContent = _container.createEmptyMovieClip( "content", _container.getNextHighestDepth() );
  47.         contentWindow.init( _currentContent );
  48.  
  49.         _currentContent._x = (Stage.width - _currentContent._width) / 2;
  50.         _currentContent._y = (Stage.height - _currentContent._height) / 2;
  51.         contentWindow.addEventListener(Event.CLOSE, Delegate.create( this, closeWindow ));
  52.     }
  53.    
  54.     public function closeWindow():Void
  55.     {
  56.         trace('close window');
  57.         _currentContent.removeMovieClip();
  58.         clearTint();
  59.     }
  60.    
  61.     public function clearTint():Void
  62.     {
  63.         _tint.removeMovieClip();
  64.     }
  65.  
  66.     public function tint():Void
  67.     {
  68.         _tint = _container.createEmptyMovieClip("rectangles", _container.getNextHighestDepth());
  69.        
  70.         _tint.beginFill(0x000000, 50);
  71.         _tint.lineStyle(1, 0x000033, 100);
  72.         _tint.moveTo(0, 0);
  73.         _tint.lineTo(Stage.width, 0);
  74.         _tint.lineTo(Stage.width, Stage.height);
  75.         _tint.lineTo(0, Stage.height);
  76.         _tint.endFill();
  77.         _tint.onRelease = function(){
  78.             //DO NOTHING
  79.         }
  80.         _tint.useHandCursor = false;
  81.     }
  82. }

Preventing click through.
In the above example the screen is tinted to put focus on the pop up window. Unfortunately, even though there is a movie clip on top of everything else, it does not prevent interaction with the elements layered below it. In order to get around this I added an onRelease to the _tint movie clip along with a useHandCursor of false. This prevents interaction with elements below the tint. Here is the link to where I found this solution: Disable "Click-Through" on MovieClips in Flash

Debugging in ActionScript 2.
For the project we were working on it was not possible to use the built in debugger for Flash. Another great opportunity to use the Singleton design patter to include a trace window that can have text dumped out from any part of the application.

PLAIN TEXT
Actionscript:
  1. class com.cb.Utils.debug.Debugger
  2. {
  3.     private static var instance:Debugger;
  4.     private var _textField:TextField;
  5.     private var _parentClip:MovieClip;
  6.  
  7.     private function Debugger()
  8.     {
  9.         // Do nothing
  10.     }
  11.  
  12.     public static function getInstance() :D ebugger
  13.     {
  14.         if(Debugger.instance == null)
  15.         {
  16.             Debugger.instance = new Debugger();
  17.         }
  18.         return Debugger.instance;
  19.     }
  20.  
  21.     public function init(myText:TextField, parentClip:MovieClip):Void
  22.     {
  23.         _textField = myText;
  24.         _textField.wordWrap = true;
  25.         _textField.background = true;
  26.         _textField.border = true;
  27.         _textField.multiline = true;
  28.         _parentClip = parentClip;
  29.     }
  30.    
  31.     public function output(myString:String):Void
  32.     {
  33.         if(_textField) {
  34.              _textField.swapDepths(_parentClip.getNextHighestDepth());
  35.              _textField.text += myString + "\n";
  36.         }
  37.     }
  38. }

XML parsing.
Parsing XML is a key part of AS2 and AS3. I found a great tutorial on Loading XML data in Flash using ActionScript 2. This is my code for parsing XML.

PLAIN TEXT
Actionscript:
  1. public function init(clip:MovieClip):Void
  2. {
  3.     example_xml = new XML();
  4.     example_xml.ignoreWhite = true;
  5.     example_xml.load("xml/BookDefinition.xml");
  6.     example_xml.onLoad = Delegate.create(this, onLoadEvent);
  7. }
  8. function onLoadEvent(success:Boolean):Void {
  9.     if (success) {
  10.         var myImage = example_xml.firstChild.firstChild.childNodes;
  11.         for (var i = 0; i<myImage.length; i++) {
  12.             var pageNumber:Number = parseInt(myImage[i].childNodes[0].firstChild);
  13.             var imageURL:String = myImage[i].childNodes[1].firstChild;
  14.             var keywords:String = myImage[i].childNodes[2].firstChild.toString().toLowerCase();
  15.         }
  16.     }
  17. }

PLAIN TEXT
XML:
  1. <book>
  2.     <pages>
  3.         <page>
  4.             <pageNumber>1</pageNumber>
  5.             <pageFlash>thumbnails/page01.jpg</pageFlash>
  6.             <pageText>This is page 1.</pageText>k
  7.         </page>
  8.         <page>
  9.             <pageNumber>2</pageNumber>
  10.             <pageImage>thumbnails/page02.jpg</pageImage>
  11.             <pageText>This is page 2.</pageText>
  12.         </page>
  13.     </pages>
  14. </book>

Delegate functions.
Notice above that a delegate function was used to keep the scope of the function with the current class. More information on delegate functions can be found here: The Delegate Class

That's it for now. I know that I'll be using this post as a reference the next time I have to jump on another AS2 project. Being able to use design patterns, event dispatching, and debugging actually made coding in AS2 fun! Enjoy.

Additional resources.
http://www.flashmobileblog.com/tag/flash-lite-31/
http://www.adobe.com/products/flashlite/features/

]]> http://www.blackcj.com/blog/2009/05/26/re-learning-actionscript-2/feed/ 2