AS3: Event Responsive Menu Extended

Posted on

11/6/2007 in AS3 • FLAs

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:

PLAIN TEXT

XML:

<menu>
<item name="Home" url="http://www.google.com" />
<item name="Portfolio" url="http://www.google.com" />
<item name="Services" url="http://www.google.com" />
<item name="About" url="http://www.google.com" />
<item name="Contact" url="http://www.google.com" />
</menu>

Then here is the Main.as file:

PLAIN TEXT

Actionscript:

/**
* @author Matt Przybylski [http://www.reintroducing.com]
* @version 1.0
*/
package com.reintroducing.menusystem
{
import flash.display.Sprite;
import flash.events.Event;
import flash.net.URLLoader;
import flash.net.URLRequest;
import com.reintroducing.debug.Environment;
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;
private var _menuData:XML;
private var _env:Environment;
//- 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._env = Environment.getInstance();
this._env.setPaths("../", "");
this.addChild(this._holder);
this.loadXML();
}
//- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
private function loadXML():void
{
var xmlURL:String = this._env.basePath + "xml/menuData.xml";
var xmlLoader:URLLoader = new URLLoader();
xmlLoader.addEventListener(Event.COMPLETE, createMenu);
xmlLoader.load(new URLRequest(xmlURL));
}
/**
* Lays out the buttons on the stage and initializes them.
*/
private function createMenu($evt:Event):void
{
var xPosition:int = 160;
var buttonURL:String;
var buttonName:String;
this._menuData = new XML($evt.target.data);
for (var i:int = 0; i <this._numButtons; i++)
{
buttonURL = this._menuData.item[i].@url;
buttonName = this._menuData.item[i].@name;
var mb:MenuButton = new MenuButton();
mb.x = (i * xPosition);
mb.create(("mb" + i), buttonName, i, buttonURL);
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 ---------------------------------------------------------------------------------------------
}
}

Here is the updated MenuButton.as file:

PLAIN TEXT

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 flash.net.URLRequest;
import flash.net.navigateToURL;
import flash.text.TextField;
import com.reintroducing.menusystem.events.MenuButtonEvent;
import gs.TweenLite;
public class MenuButton extends MovieClip
{
//- PRIVATE & PROTECTED VARIABLES -------------------------------------------------------------------------
private var _id:int;
private var _url:String;
//- PUBLIC & INTERNAL VARIABLES ---------------------------------------------------------------------------
public static const DEFAULT_NAME:String = "com.reintroducing.menusystem.ui.MenuButton";
// instances
public var bg_mc:MovieClip;
public var title_txt:TextField;
//- CONSTRUCTOR -------------------------------------------------------------------------------------------
public function MenuButton()
{
super();
this.init();
}
//- PRIVATE & PROTECTED METHODS ---------------------------------------------------------------------------
private function init():void
{
this.buttonMode = true;
this.mouseChildren = false;
this.setEnabled();
}
/**
* Resets the button to its original state.
*/
private function reset():void
{
TweenLite.to(this.bg_mc, .25, {mcColor: 0x999999});
}
/**
* Executed when you mouse over the button.
*/
private function doMouseOver($evt:MouseEvent):void
{
TweenLite.to(this.bg_mc, .25, {mcColor: 0x333333});
}
/**
* 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
{
navigateToURL(new URLRequest(this._url));
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, $title:String, $id:int, $url:String):void
{
this.name = $name;
this._id = $id;
this.title_txt.text = $title;
this._url = $url;
}
/**
* 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 ---------------------------------------------------------------------------------------------
}
}

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.