AS3: Event Responsive Menu Extended

View Example
Download Example Files
Download Environment
Download TweenLite

Last 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 version but rather ugly/useless in the sense that we didn't add any actual functionality to it so now we are going to go ahead and load the button data from an XML file and then use TweenLite to "spruce" them up a bit with fades of color.

Let's take a look at the XML file we are going to use to store the button data:

XML:
  1. <menu>
  2.     <item name="Home" url="http://www.google.com" />
  3.     <item name="Portfolio" url="http://www.google.com" />
  4.     <item name="Services" url="http://www.google.com" />
  5.     <item name="About" url="http://www.google.com" />
  6.     <item name="Contact" url="http://www.google.com" />
  7. </menu>

Then here is the Main.as file:

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.     import flash.events.Event;
  10.     import flash.net.URLLoader;
  11.     import flash.net.URLRequest;
  12.    
  13.     import com.reintroducing.debug.Environment;
  14.     import com.reintroducing.menusystem.events.MenuButtonEvent;
  15.     import com.reintroducing.menusystem.ui.MenuButton;
  16.    
  17.     public class Main extends Sprite
  18.     {
  19. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  20.  
  21.         private var _holder:Sprite;
  22.         private var _numButtons:int;
  23.         private var _menuData:XML;
  24.         private var _env:Environment;
  25.        
  26. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  27.        
  28.         public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.Main";
  29.        
  30. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  31.    
  32.         public function Main()
  33.         {
  34.             this._numButtons             = 5;
  35.             this._holder                = new Sprite();
  36.             this._holder.x = this._holder.y = 10;
  37.             this._env                  = Environment.getInstance();
  38.            
  39.             this._env.setPaths("../", "");
  40.            
  41.             this.addChild(this._holder);
  42.            
  43.             this.loadXML();
  44.         }
  45.        
  46. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  47.        
  48.         private function loadXML():void
  49.         {
  50.             var xmlURL:String = this._env.basePath + "xml/menuData.xml";
  51.             var xmlLoader:URLLoader = new URLLoader();
  52.            
  53.             xmlLoader.addEventListener(Event.COMPLETE, createMenu);
  54.             xmlLoader.load(new URLRequest(xmlURL));
  55.         }
  56.        
  57.         /**
  58.          * Lays out the buttons on the stage and initializes them.
  59.          */
  60.         private function createMenu($evt:Event):void
  61.         {
  62.             var xPosition:int = 160;
  63.             var buttonURL:String;
  64.             var buttonName:String;
  65.            
  66.             this._menuData = new XML($evt.target.data);
  67.            
  68.             for (var i:int = 0; i <this._numButtons; i++)
  69.             {
  70.                 buttonURL = this._menuData.item[i].@url;
  71.                 buttonName = this._menuData.item[i].@name;
  72.                
  73.                 var mb:MenuButton = new MenuButton();
  74.                 mb.x = (i * xPosition);
  75.                 mb.create(("mb" + i), buttonName, i, buttonURL);
  76.                 mb.addEventListener(MenuButtonEvent.CLICKED, onMenuButtonClicked);
  77.                
  78.                 this._holder.addChild(mb);
  79.             }
  80.         }
  81.        
  82. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  83.    
  84.        
  85.    
  86. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  87.    
  88.         /**
  89.          * Reacts when a button is clicked to set all the buttons to their proper state.
  90.          */
  91.         private function onMenuButtonClicked($evt:MenuButtonEvent):void
  92.         {
  93.             for (var i:int = 0; i <this._numButtons; i++)
  94.             {
  95.                 var mb:MenuButton = MenuButton(this._holder.getChildByName("mb" + i));
  96.                
  97.                 if ($evt.params.id == i)
  98.                 {
  99.                     mb.setDisabled();
  100.                 }
  101.                 else
  102.                 {
  103.                     mb.setEnabled();
  104.                 }
  105.             }
  106.         }
  107.    
  108. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  109.    
  110.        
  111.    
  112. //- HELPERS -----------------------------------------------------------------------------------------------
  113.    
  114.         public override function toString():String
  115.         {
  116.             return "com.reintroducing.menusystem.Main";
  117.         }
  118.    
  119. //- END CLASS ---------------------------------------------------------------------------------------------
  120.     }
  121. }

Here is the updated MenuButton.as file:

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.     import flash.net.URLRequest;
  11.     import flash.net.navigateToURL;
  12.     import flash.text.TextField;
  13.    
  14.     import com.reintroducing.menusystem.events.MenuButtonEvent;
  15.    
  16.     import gs.TweenLite;
  17.    
  18.     public class MenuButton extends MovieClip
  19.     {
  20. //- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
  21.  
  22.         private var _id:int;
  23.         private var _url:String;
  24.        
  25. //- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
  26.        
  27.         public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.ui.MenuButton";
  28.        
  29.         // instances
  30.         public var bg_mc:MovieClip;
  31.         public var title_txt:TextField;
  32.        
  33. //- CONSTRUCTOR -------------------------------------------------------------------------------------------
  34.    
  35.         public function MenuButton()
  36.         {
  37.             super();
  38.            
  39.             this.init();
  40.         }
  41.  
  42. //- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
  43.        
  44.         private function init():void
  45.         {
  46.             this.buttonMode = true;
  47.             this.mouseChildren = false;
  48.             this.setEnabled();
  49.         }
  50.        
  51.         /**
  52.          * Resets the button to its original state.
  53.          */
  54.         private function reset():void
  55.         {
  56.             TweenLite.to(this.bg_mc, .25, {mcColor: 0x999999});
  57.         }
  58.        
  59.         /**
  60.          * Executed when you mouse over the button.
  61.          */
  62.         private function doMouseOver($evt:MouseEvent):void
  63.         {
  64.             TweenLite.to(this.bg_mc, .25, {mcColor: 0x333333});
  65.         }
  66.        
  67.         /**
  68.          * Executed when you mouse out of the button.
  69.          */
  70.         private function doMouseOut($evt:MouseEvent):void
  71.         {
  72.             this.reset();
  73.         }
  74.        
  75.         /**
  76.          * Executed on release of the button.
  77.          */
  78.         private function doClick($evt:MouseEvent):void
  79.         {
  80.             navigateToURL(new URLRequest(this._url));
  81.            
  82.             this.dispatchEvent(new MenuButtonEvent(MenuButtonEvent.CLICKED, {id: this._id}));
  83.         }
  84.        
  85. //- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
  86.    
  87.         /**
  88.          * Assigns the button a name and ID for later retrieval through events.
  89.          */
  90.         public function create($name:String, $title:String, $id:int, $url:String):void
  91.         {
  92.             this.name       = $name;
  93.             this._id          = $id;
  94.             this.title_txt.text = $title;
  95.             this._url       = $url;
  96.         }
  97.        
  98.         /**
  99.          * Allows the button to be clickable and functional.
  100.          */
  101.         public function setEnabled():void
  102.         {
  103.             this.enabled = true;
  104.             this.reset();
  105.            
  106.             this.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
  107.             this.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
  108.             this.addEventListener(MouseEvent.CLICK, doClick);
  109.         }
  110.        
  111.         /**
  112.          * Disables the button and kills its events.
  113.          */
  114.         public function setDisabled():void
  115.         {
  116.             this.enabled = false;
  117.            
  118.             this.removeEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
  119.             this.removeEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
  120.             this.removeEventListener(MouseEvent.CLICK, doClick);
  121.         }
  122.    
  123. //- EVENT HANDLERS ----------------------------------------------------------------------------------------
  124.    
  125.        
  126.    
  127. //- GETTERS & SETTERS -------------------------------------------------------------------------------------
  128.    
  129.         public function get id():int
  130.         {
  131.             return this._id;
  132.         }
  133.        
  134.         public function set id($val:int):void
  135.         {
  136.             this._id = $val;
  137.         }
  138.    
  139. //- HELPERS -----------------------------------------------------------------------------------------------
  140.    
  141.         public override function toString():String
  142.         {
  143.             return "com.reintroducing.menusystem.ui.MenuButton";
  144.         }
  145.    
  146. //- END CLASS ---------------------------------------------------------------------------------------------
  147.     }
  148. }

The MenuButtonEvent file has stayed the same so I won't post it for the sake of brevity. If you'd like to see anything else added to this example, let me know as I've probably taken it as far as it will go for the time being.

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

No Comments

No comments yet.

Leave a comment

(required)

(required)