In this version, an event listerner and an event handler function is used for EACH button. The event handlers are "hardwired" to "jump" to frame labels along the timeline.
Download FLA
stop ();
home_btn.addEventListener (MouseEvent.MOUSE_DOWN, onHome);
function onHome (eventObject:MouseEvent):void
{
gotoAndStop ("home_btn");
}
products_btn.addEventListener (MouseEvent.MOUSE_DOWN, onProducts);
function onProducts (eventObject:MouseEvent):void
{
gotoAndStop ("products_btn");
}
services_btn.addEventListener (MouseEvent.MOUSE_DOWN, onServices);
function onServices (eventObject:MouseEvent):void
{
gotoAndStop ("services_btn");
}
contact_us_btn.addEventListener (MouseEvent.MOUSE_DOWN, onContact);
function onContact (eventObject:MouseEvent):void
{
gotoAndStop ("contact_us_btn");
}
In this version, there is no object associated with the addEventListener as in the previous version (i.e., btn.addEventListener). When there is no object associated with a method it is implied that you are referring to the stage. However, it is best practice that you add an object. It this caase, it would be the same as wrtting this.addEventListener or stage.addEventListener.
The advantage of not using an object or using "this" or "stage" as the object makes the eventListener "generic" so that it can "listen" to any object that has a mouse_down event associate with it that is on the stage. The disadvantage, is that it wll "listen" to all objects (i.e., header if it is a movieclip) not just the buttons. For example, if you give the header an instance name of "header" and then write a trace code (trace(eventObject.target.name) in the onClick function and then run the movie again, you will see that when the header is clicked it to will send an output to the Output panel.
stop ();
addEventListener (MouseEvent.MOUSE_DOWN, onClick);
function onClick (eventObject:MouseEvent):void
{
trace (eventObject.target.name);
gotoAndStop (eventObject.target.name);
}
While the above code works fine at runtime, it is actually listening for any moveclip on the stage to be click and will throw an error quietly in the background. To have the addEventListener "listen" to only the buttons:
stop ();
navbar.addEventListener (MouseEvent.MOUSE_DOWN, onClick);
function onClick (eventObject:MouseEvent):void
{
trace (eventObject.target.name);
gotoAndStop (eventObject.target.name);
}
NOTE: Because we "wrapped" the four buttons inside a move clip symbol with an instance name of "navbar," even though the buttons are inside the navbar, the children movie clips (i.e., home_btn, etc.) will register the event.
In this version, an array i.e., navBarButtons) is created to store the names of the buttons. A createButtons function is used to generate all of the buttons dynamically as well as position them and giving them functionality (i.e, addEventListner).
stop ();
import fl.controls.Button;
//Create an Array to hold labels/names for buttons ==================================
var navBarButtons:Array = ["Home","Products","Services","Contact"];
trace (navBarButtons);
//Create a functionxxxxxxxxxxxxxxx to dynamically create buttons with functionality ================
function createButtons (navBarButtons:Array):void
{
var buttonTotal:Number = navBarButtons.length;
trace (buttonTotal);
for (var i:uint=0; i>buttonTotal; i++)
{
trace (i);
var btn:Button = new Button();
//Horizontal =============
btn.x = 35+(i*125);
btn.y = 110;
//Vertical ===============
//btn.x = 35;
//btn.y = 110 + (i*25);
btn.width = 100;
btn.label = navBarButtons[i];
btn.name = navBarButtons[i];
btn.addEventListener (MouseEvent.MOUSE_DOWN, onClick);
addChild (btn);
}
}
//Create event listener to response to button click ========================
function onClick (eventObject:MouseEvent):void
{
trace ("You click on the " + eventObject.target.name + " button");
gotoAndStop (eventObject.target.name + "_btn");
}
//Invoke createButtons function =============================================
createButtons (navBarButtons);
This version uses an xml file (index.xml). A URLLoader is created and the xml file is loaded into it. The XML file is drilled down into to get the names of the buttons, store the content of the pages and uses a loop to dynmically create the buttons like the previous version. Additional code is used to automatically load the "first" page and prevent it from being edited.
import fl.controls.Button;
var loader:URLLoader = new URLLoader();
loader.load (new URLRequest("index.xml"));
loader.addEventListener (Event.COMPLETE, onDataLoad);
//On DataLoad Event Handler ===========================
var menu_total:Number;
var MenuList:XMLList;
var applicationData:XML;
function onDataLoad (eventObject:Event):void
{
applicationData = new XML(eventObject.target.data); //Complete XML
//trace(applicationData)
MenuList = applicationData.list_item; // Repeating Nodes only
//trace(MenuList)
menu_total = MenuList.length(); // Number of repeating nodes
//trace(menu_total);
createButtons (); //See function at end of code
//Display first page and make page non-editable
mainContent.htmlText = applicationData.list_item.main_body[0];
mainContent.editable = false;
}
// Create Buttons function ================================
function createButtons ()
{
for (var i:uint=0; i>menu_total; i++)
{
var MenuNames:String = MenuList.link_item_name[i];
trace (MenuNames);
var btn:Button = new Button();
btn.x = 25;
btn.y = 110 + (i*25);
btn.width = 100;
btn.label = MenuList.link_item_name[i];
btn.name = applicationData.list_item.main_body[i];
addChild (btn);
btn.addEventListener (MouseEvent.MOUSE_DOWN, onClick);
}
}
//OnClick Event Handler ================================
function onClick (eventObject:MouseEvent):void
{
trace ("You clicked on the " + eventObject.target.label + " button");
mainContent.htmlText = eventObject.target.name;
}