Global Navigation v2: 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"?>
<root>
  <navigation>
    <button btnSWF="mainBtn.swf" btnPosX="10" btnPosY="10" btnLabel="button-0"/>
    <button btnSWF="mainBtn.swf" btnLabel="button-1">
      <button btnSWF="mainBtn.swf" btnPosY="+23" btnLabel="button-1-0"/>
      <button btnSWF="mainBtn.swf" btnLabel="button-1-1">
        <button btnPosY="+23" btnSWF="mainBtn.swf" btnLabel="button-1-1-0"/>
        <button btnSWF="mainBtn.swf" btnLabel="button-1-1-1"/>
        <button btnSWF="mainBtn.swf" btnLabel="button-1-1-2"/>
        <button btnSWF="mainBtn.swf" btnLabel="button-1-1-3"/>
      </button>
      <button btnSWF="mainBtn.swf" btnLabel="button-1-2"/>
    </button>
    <button btnSWF="mainBtn.swf" btnLabel="button-2">
      <button btnPosY="+23" btnSWF="mainBtn.swf" btnLabel="button-2-0"/>
      <button btnSWF="mainBtn.swf" btnLabel="button-2-1"/>
      <button btnSWF="mainBtn.swf" btnLabel="button-2-2"/>
      <button btnSWF="mainBtn.swf" btnLabel="button-2-3"/>
    </button>
    <button btnSWF="mainBtn.swf" btnLabel="button-3">
      <button btnPosY="+23" btnSWF="mainBtn.swf" btnLabel="button-3-0"/>
      <button btnSWF="mainBtn.swf" btnLabel="button-3-1"/>
      <button btnSWF="mainBtn.swf" btnLabel="button-3-2"/>
      <button btnSWF="mainBtn.swf" btnLabel="button-3-3"/>
    </button>
    <button btnSWF="mainBtn.swf" btnLabel="button-4"/>
  </navigation>
</root>

Step 4: Setup the navigation

Create a new FLA file and initialize the NavigationManager2:

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