Global Navigation: Getting Started

These are the basic steps to give you an idea. The best and most efficient way is if you choose an example and examine the files to get you started.

Step 1: Download

Download the latest version of Global Navigation

Step 2: Create button

Open the mainBtn.fla. It has infos and explanations on the timeline and in the movieclips. In this file you define the design of your button: the backgrounds and text labels of the different states (rollover,rollout, press, release etc.)

Step 3: Create XML

Create the XML file that contains the navigation structure. Be sure to read the infos about the xml attributes.

Example:

<?xml version="1.0" encoding="UTF-8"?>
<global_navigation>
  <button btnID="b0" btnSWF="mainBtn.swf" btnPosX="10" btnPosY="10" btnLabel="button-0"/>
  <button btnID="b1" btnSWF="mainBtn.swf" btnLabel="button-1">
    <button btnID="b1_0" btnSWF="mainBtn.swf" btnPosY="+23" btnLabel="button-1-0"/>
    <button btnID="b1_1" btnSWF="mainBtn.swf" btnLabel="button-1-1">
      <button btnID="b1_1_0" btnPosY="+23" btnSWF="mainBtn.swf" btnLabel="button-1-1-0"/>
      <button btnID="b1_1_1" btnSWF="mainBtn.swf" btnLabel="button-1-1-1"/>
      <button btnID="b1_1_2" btnSWF="mainBtn.swf" btnLabel="button-1-1-2"/>
      <button btnID="b1_1_3" btnSWF="mainBtn.swf" btnLabel="button-1-1-3"/>
    </button>
    <button btnID="b1_2" btnSWF="mainBtn.swf" btnLabel="button-1-2"/>
  </button>
  <button btnID="b2" btnSWF="mainBtn.swf" btnLabel="button-2">
    <button btnID="b2_0" btnPosY="+23" btnSWF="mainBtn.swf" btnLabel="button-2-0"/>
    <button btnID="b2_1" btnSWF="mainBtn.swf" btnLabel="button-2-1"/>
    <button btnID="b2_2" btnSWF="mainBtn.swf" btnLabel="button-2-2"/>
    <button btnID="b2_3" btnSWF="mainBtn.swf" btnLabel="button-2-3"/>
  </button>
  <button btnID="b3" btnSWF="mainBtn.swf" btnLabel="button-3">
    <button btnID="b3_0" btnPosY="+23" btnSWF="mainBtn.swf" btnLabel="button-3-0"/>
    <button btnID="b3_1" btnSWF="mainBtn.swf" btnLabel="button-3-1"/>
    <button btnID="b3_2" btnSWF="mainBtn.swf" btnLabel="button-3-2"/>
    <button btnID="b3_3" btnSWF="mainBtn.swf" btnLabel="button-3-3"/>
  </button>
  <button btnID="b4" btnSWF="mainBtn.swf" btnLabel="button-4"/>
</global_navigation>

Step 4: Setup the navigation

Create a new FLA file and initialize the NavigationManager:

import net.kaegi.navigation.NavigationManager;
import net.kaegi.events.EventCentral;
import net.kaegi.events.NavigationEvent;
 
var navigationManager:NavigationManager = new NavigationManager(this, "navigationstructure.xml");
 
EventCentral.getInstance().addEventListener(NavigationEvent.MC_ACTIVATED, btnActivateHandler);
function btnActivateHandler(event:NavigationEvent) {
	// your action here...
}