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:
-
/**
-
* @author Matt Przybylski [http://www.reintroducing.com]
-
* @version 1.0
-
*/
-
-
package com.reintroducing.menusystem
-
{
-
import flash.display.Sprite;
-
-
import com.reintroducing.menusystem.events.MenuButtonEvent;
-
import com.reintroducing.menusystem.ui.MenuButton;
-
-
public class Main extends Sprite
-
{
-
//- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
-
-
private var _holder:Sprite;
-
private var _numButtons:int;
-
-
//- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
-
-
public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.Main";
-
-
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
-
-
public function Main()
-
{
-
this._numButtons = 5;
-
this._holder = new Sprite();
-
this._holder.x = this._holder.y = 10;
-
-
this.addChild(this._holder);
-
-
this.createMenu();
-
}
-
-
//- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
-
-
/**
-
* Lays out the buttons on the stage and initializes them.
-
*/
-
private function createMenu():void
-
{
-
var xPosition:int = 160;
-
-
for (var i:int = 0; i <this._numButtons; i++)
-
{
-
var mb:MenuButton = new MenuButton();
-
mb.x = (i * xPosition);
-
mb.create(("mb" + i), i);
-
mb.addEventListener(MenuButtonEvent.CLICKED, onMenuButtonClicked);
-
-
this._holder.addChild(mb);
-
}
-
}
-
-
//- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
-
-
-
-
//- EVENT HANDLERS ----------------------------------------------------------------------------------------
-
-
/**
-
* Reacts when a button is clicked to set all the buttons to their proper state.
-
*/
-
private function onMenuButtonClicked($evt:MenuButtonEvent):void
-
{
-
for (var i:int = 0; i <this._numButtons; i++)
-
{
-
var mb:MenuButton = MenuButton(this._holder.getChildByName("mb" + i));
-
-
if ($evt.params.id == i)
-
{
-
mb.setDisabled();
-
}
-
else
-
{
-
mb.setEnabled();
-
}
-
}
-
}
-
-
//- GETTERS & SETTERS -------------------------------------------------------------------------------------
-
-
-
-
//- HELPERS -----------------------------------------------------------------------------------------------
-
-
public override function toString():String
-
{
-
return "com.reintroducing.menusystem.Main";
-
}
-
-
//- END CLASS ---------------------------------------------------------------------------------------------
-
}
-
}
MenuButton.as
Actionscript:
-
/**
-
* @author Matt Przybylski [http://www.reintroducing.com]
-
* @version 1.0
-
*/
-
-
package com.reintroducing.menusystem.ui
-
{
-
import flash.display.MovieClip;
-
import flash.events.MouseEvent;
-
-
import com.reintroducing.menusystem.events.MenuButtonEvent;
-
-
public class MenuButton extends MovieClip
-
{
-
//- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
-
-
private var _id:int;
-
-
//- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
-
-
public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.ui.MenuButton";
-
-
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
-
-
public function MenuButton()
-
{
-
super();
-
-
this.init();
-
}
-
-
//- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
-
-
private function init():void
-
{
-
this.buttonMode = true;
-
this.setEnabled();
-
}
-
-
/**
-
* Resets the button to its original state.
-
*/
-
private function reset():void
-
{
-
this.gotoAndStop(1);
-
}
-
-
/**
-
* Executed when you mouse over the button.
-
*/
-
private function doMouseOver($evt:MouseEvent):void
-
{
-
this.gotoAndStop(2);
-
}
-
-
/**
-
* Executed when you mouse out of the button.
-
*/
-
private function doMouseOut($evt:MouseEvent):void
-
{
-
this.reset();
-
}
-
-
/**
-
* Executed on release of the button.
-
*/
-
private function doClick($evt:MouseEvent):void
-
{
-
this.dispatchEvent(new MenuButtonEvent(MenuButtonEvent.CLICKED, {id: this._id}));
-
}
-
-
//- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
-
-
/**
-
* Assigns the button a name and ID for later retrieval through events.
-
*/
-
public function create($name:String, $id:int):void
-
{
-
this.name = $name;
-
this._id = $id;
-
}
-
-
/**
-
* Allows the button to be clickable and functional.
-
*/
-
public function setEnabled():void
-
{
-
this.enabled = true;
-
this.reset();
-
-
this.addEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
-
this.addEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
-
this.addEventListener(MouseEvent.CLICK, doClick);
-
}
-
-
/**
-
* Disables the button and kills its events.
-
*/
-
public function setDisabled():void
-
{
-
this.enabled = false;
-
-
this.removeEventListener(MouseEvent.MOUSE_OVER, doMouseOver);
-
this.removeEventListener(MouseEvent.MOUSE_OUT, doMouseOut);
-
this.removeEventListener(MouseEvent.CLICK, doClick);
-
}
-
-
//- EVENT HANDLERS ----------------------------------------------------------------------------------------
-
-
-
-
//- GETTERS & SETTERS -------------------------------------------------------------------------------------
-
-
public function get id():int
-
{
-
return this._id;
-
}
-
-
public function set id($val:int):void
-
{
-
this._id = $val;
-
}
-
-
//- HELPERS -----------------------------------------------------------------------------------------------
-
-
public override function toString():String
-
{
-
return "com.reintroducing.menusystem.ui.MenuButton";
-
}
-
-
//- END CLASS ---------------------------------------------------------------------------------------------
-
}
-
}
MenuButtonEvent.as
Actionscript:
-
/**
-
* @author Matt Przybylski [http://www.reintroducing.com]
-
* @version 1.0
-
*/
-
-
package com.reintroducing.menusystem.events
-
{
-
import flash.events.Event;
-
-
public class MenuButtonEvent extends Event
-
{
-
//- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
-
-
-
-
//- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
-
-
public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.events.MenuButtonEvent";
-
-
// event constants
-
public static const CLICKED:String = "clicked";
-
-
public var params:Object;
-
-
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
-
-
public function MenuButtonEvent($type:String, $params:Object, $bubbles:Boolean = false, $cancelable:Boolean = false)
-
{
-
super($type, $bubbles, $cancelable);
-
-
this.params = $params;
-
}
-
-
//- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
-
-
-
-
//- PUBLIC & INTERNAL METHODS -----------------------------------------------------------------------------
-
-
-
-
//- EVENT HANDLERS ----------------------------------------------------------------------------------------
-
-
-
-
//- GETTERS & SETTERS -------------------------------------------------------------------------------------
-
-
-
-
//- HELPERS -----------------------------------------------------------------------------------------------
-
-
public override function clone():Event
-
{
-
return new MenuButtonEvent(type, this.params, bubbles, cancelable);
-
}
-
-
public override function toString():String
-
{
-
return formatToString("MenuButtonEvent", "params", "type", "bubbles", "cancelable");
-
}
-
-
//- END CLASS ---------------------------------------------------------------------------------------------
-
}
-
}
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.
(No Ratings Yet)
Loading ...
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.
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 [...]