AS3: Event Responsive Menu

View Example
Download Example Files

Normally when I build menus for my projects I usually end up having to keep track of which button is selected and disable it while clicking on another button will disable that one and re-enable the one previously selected. I could build that very quickly in AS2 but have yet to try it out in AS3 so I put together this little example that would demonstrate how I'd do it in the new age. It is made up of three classes:

Main.as

Actionscript:
  1. /**
  2. * @author Matt Przybylski [http://www.reintroducing.com]
  3. * @version 1.0
  4. */
  5.  
  6. package com.reintroducing.menusystem
  7. {
  8.     import flash.display.Sprite;
  9.    
  10.     import com.reintroducing.menusystem.events.MenuButtonEvent;
  11.     import com.reintroducing.menusystem.ui.MenuButton;
  12.    
  13.     public class Main extends Sprite
  14.     {
  15. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  16.  
  17.         private var _holder:Sprite;
  18.         private var _numButtons:int;
  19.        
  20. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  21.        
  22.         public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.Main";
  23.        
  24. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  25.    
  26.         public function Main()
  27.         {
  28.             this._numButtons             = 5;
  29.             this._holder                = new Sprite();
  30.             this._holder.x = this._holder.y = 10;
  31.            
  32.             this.addChild(this._holder);
  33.            
  34.             this.createMenu();
  35.         }
  36.        
  37. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  38.        
  39.         /**
  40.          * Lays out the buttons on the stage and initializes them.
  41.          */
  42.         private function createMenu():void
  43.         {
  44.             var xPosition:int = 160;
  45.            
  46.             for (var i:int = 0; i <this._numButtons; i++)
  47.             {
  48.                 var mb:MenuButton = new MenuButton();
  49.                 mb.x = (i * xPosition);
  50.                 mb.create(("mb" + i), i);
  51.                 mb.addEventListener(MenuButtonEvent.CLICKED, onMenuButtonClicked);
  52.                
  53.                 this._holder.addChild(mb);
  54.             }
  55.         }
  56.        
  57. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  58.    
  59.        
  60.    
  61. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  62.    
  63.         /**
  64.          * Reacts when a button is clicked to set all the buttons to their proper state.
  65.          */
  66.         private function onMenuButtonClicked($evt:MenuButtonEvent):void
  67.         {
  68.             for (var i:int = 0; i <this._numButtons; i++)
  69.             {
  70.                 var mb:MenuButton = MenuButton(this._holder.getChildByName("mb" + i));
  71.                
  72.                 if ($evt.params.id == i)
  73.                 {
  74.                     mb.setDisabled();
  75.                 }
  76.                 else
  77.                 {
  78.                     mb.setEnabled();
  79.                 }
  80.             }
  81.         }
  82.    
  83. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  84.    
  85.        
  86.    
  87. //- HELPERS -----------------------------------------------------------------------------------------------
  88.    
  89.         public override function toString():String
  90.         {
  91.             return "com.reintroducing.menusystem.Main";
  92.         }
  93.    
  94. //- END CLASS ---------------------------------------------------------------------------------------------
  95.     }
  96. }

MenuButton.as

Actionscript:
  1. /**
  2. * @author Matt Przybylski [http://www.reintroducing.com]
  3. * @version 1.0
  4. */
  5.  
  6. package com.reintroducing.menusystem.ui
  7. {
  8.     import flash.display.MovieClip;
  9.     import flash.events.MouseEvent;
  10.    
  11.     import com.reintroducing.menusystem.events.MenuButtonEvent;
  12.    
  13.     public class MenuButton extends MovieClip
  14.     {
  15. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  16.  
  17.         private var _id:int;
  18.        
  19. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  20.        
  21.         public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.ui.MenuButton";
  22.        
  23. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  24.    
  25.         public function MenuButton()
  26.         {
  27.             super();
  28.            
  29.             this.init();
  30.         }
  31.  
  32. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  33.        
  34.         private function init():void
  35.         {
  36.             this.buttonMode = true;
  37.             this.setEnabled();
  38.         }
  39.        
  40.         /**
  41.          * Resets the button to its original state.
  42.          */
  43.         private function reset():void
  44.         {
  45.             this.gotoAndStop(1);
  46.         }
  47.        
  48.         /**
  49.          * Executed when you mouse over the button.
  50.          */
  51.         private function doMouseOver($evt:MouseEvent):void
  52.         {
  53.             this.gotoAndStop(2);
  54.         }
  55.        
  56.         /**
  57.          * Executed when you mouse out of the button.
  58.          */
  59.         private function doMouseOut($evt:MouseEvent):void
  60.         {
  61.             this.reset();
  62.         }
  63.        
  64.         /**
  65.          * Executed on release of the button.
  66.          */
  67.         private function doClick($evt:MouseEvent):void
  68.         {
  69.             this.dispatchEvent(new MenuButtonEvent(MenuButtonEvent.CLICKED, {id: this._id}));
  70.         }
  71.        
  72. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  73.    
  74.         /**
  75.          * Assigns the button a name and ID for later retrieval through events.
  76.          */
  77.         public function create($name:String, $id:int):void
  78.         {
  79.             this.name = $name;
  80.             this._id = $id;
  81.         }
  82.        
  83.         /**
  84.          * Allows the button to be clickable and functional.
  85.          */
  86.         public function setEnabled():void
  87.         {
  88.             this.enabled = true;
  89.             this.reset();
  90.            
  91.             this.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
  92.             this.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
  93.             this.addEventListener(MouseEvent.CLICK, doClick);
  94.         }
  95.        
  96.         /**
  97.          * Disables the button and kills its events.
  98.          */
  99.         public function setDisabled():void
  100.         {
  101.             this.enabled = false;
  102.            
  103.             this.removeEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
  104.             this.removeEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
  105.             this.removeEventListener(MouseEvent.CLICK, doClick);
  106.         }
  107.    
  108. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  109.    
  110.        
  111.    
  112. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  113.    
  114.         public function get id():int
  115.         {
  116.             return this._id;
  117.         }
  118.        
  119.         public function set id($val:int):void
  120.         {
  121.             this._id = $val;
  122.         }
  123.    
  124. //- HELPERS -----------------------------------------------------------------------------------------------
  125.    
  126.         public override function toString():String
  127.         {
  128.             return "com.reintroducing.menusystem.ui.MenuButton";
  129.         }
  130.    
  131. //- END CLASS ---------------------------------------------------------------------------------------------
  132.     }
  133. }

MenuButtonEvent.as

Actionscript:
  1. /**
  2. * @author Matt Przybylski [http://www.reintroducing.com]
  3. * @version 1.0
  4. */
  5.  
  6. package com.reintroducing.menusystem.events
  7. {
  8.     import flash.events.Event;
  9.    
  10.     public class MenuButtonEvent extends Event
  11.     {
  12. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  13.  
  14.        
  15.        
  16. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  17.        
  18.         public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.events.MenuButtonEvent";
  19.        
  20.         // event constants
  21.         public static const CLICKED:String = "clicked";
  22.        
  23.         public var params:Object;
  24.        
  25. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  26.    
  27.         public function MenuButtonEvent($type:String, $params:Object, $bubbles:Boolean = false, $cancelable:Boolean = false)
  28.         {
  29.             super($type, $bubbles, $cancelable);
  30.            
  31.             this.params = $params;
  32.         }
  33.        
  34. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  35.        
  36.        
  37.        
  38. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  39.    
  40.        
  41.    
  42. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  43.    
  44.        
  45.    
  46. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  47.    
  48.        
  49.    
  50. //- HELPERS -----------------------------------------------------------------------------------------------
  51.    
  52.         public override function clone():Event
  53.         {
  54.             return new MenuButtonEvent(type, this.params, bubbles, cancelable);
  55.         }
  56.        
  57.         public override function toString():String
  58.         {
  59.             return formatToString("MenuButtonEvent", "params", "type", "bubbles", "cancelable");
  60.         }
  61.    
  62. //- END CLASS ---------------------------------------------------------------------------------------------
  63.     }
  64. }

The Main class is just the Document class for the FLA file provided. You may notice that the event for controlling the menu selections is in the Main class because that's just how I've always done it. If you have a better way of doing this, by all means let me know. I find this to be fairly easy and controllable. The MenuButton class is just what the box extends in the FLA and it controls its button actions. The MenuButtonEvent is just following my Event template that I outlined here and it allows me to dispatch an event when the menu button is clicked which is what the Main class reacts to to set the button states.

If anyone has any questions, feel free to post a comment.

If you found this post useful, please consider leaving a comment, subscribing to the feed, or making a small donation.

4 Comments

Not sure if this is correct or the right way but I discovered that instead of making a create(); method you could just do the below. I tested it and it works.

Actionscript:
  1. var mb:MenuButton = new MenuButton();
  2. mb.x = (i * xPosition);
  3. mb.name = ( "mb"   i );
  4. mb.id = i;

yes, you can do that, but by passing it in to a create method you can keep that information internalized within the class rather than a dynamic property on the instance.

[...] time we looked at the Event Responsive Menu we made a menu system that responded to events based on what button was clicked. This was a working [...]

This is great. I have a question, how can i make it load the external swf when I click on the button. I know right now when I click on the button it URL to new window. I have look at the xml file but don't know how to do the load the external swf.

Can you help me with this?

Thanks,

LM

Leave a comment

(required)

(required)