Global Navigation

Fleb comes with a very useful Global Navigation system.

Customizing the buttons using navigation_settings xml field

Inside structure.xml you will find a this XML field:

<navigation_settings>
    <setSuspendAfterInit>true</setSuspendAfterInit>
    <setFade>true</setFade>
    <setFadeInOnMouseOver>true</setFadeInOnMouseOver>
    <setFadeInDepth>front</setFadeInDepth>
    <setFadeOutTimerDelay>2</setFadeOutTimerDelay>
    <setFadeInChainDelay>0</setFadeInChainDelay>
    <setKeepRolloverStatus>false</setKeepRolloverStatus>
    <setHideChildren always="false" atRelease="false"/>
    <setBtnLabelTextNewLine>$</setBtnLabelTextNewLine>
    <setBtnDepths rollout="front" rollover="front" press="front" release="front"/>
    <setAutoActivateDelay>0.3</setAutoActivateDelay>
</navigation_settings>

You can change the settings here or add any other available and customize some options of the navigation buttons.

Let's see some of the properties:

setSuspendAfterInit:

Set this to true, if you want the navigation to be suspended (not visible) right after initialisation. This comes in very handy if you need to wait for an intro to finish or some assets to be loaded. When everything is ready, you can release the navigation. Set it to false, if you want the navigation button to be seeen right after initialisation.

setFade:

This controls how the children buttons (submenu) of a parent button are shown when you rollover the parent button.

Set this to true, if you want to apply some animation during rollover and release. Otherwise, set it to false (the default) so that the children of a button are visible immediatly at rollOver or release.

Default is "false".

setFadeInOnMouseOver:

Set this to true, if you want the children buttons of a parent button to be seen when you roll over the parent button. If you set it to false, then you will have to click the parent button in order to see the children.

If you use the xml attribute btnMakeRoomY, set this to “false”.

Default is true.

setFadeOutTimerDelay:

Here, you set a number which represent the time (in seconds) the children buttons remain visible when the mouse has rolled out before they fade out again. Do not give a very small value (0 – 0.2), because you will have problems seeing the children.

Default is 2 seconds.

setKeepRolloverStatus:

Set this to true, if you want the parent button to be activated when you roll over its child buttons. See example 15 in the demos.

Default is "false".

setHideChildren:

Set always to true if you want the submenu to fold whenever you click one of its child buttons. If you set it to false, then the submenu will always stay open.

Default is "false".

<setHideChildren always="true" atRelease="false"/>

setBtnLabelTextNewLine:

Here, you use the symbol $ if you want to be able to insert line breaks in the button label texts.

For example:

btnLabel="Insert a line break$here"

For a full list see here.

Customizing the buttons adding properties to buttons inside structure.xml

id (required):

A unique ID for your button. This could be “home”, “about_us” etc.

btnSwf (required):

The SWF file of your button. You can have a different SWF for each button if you like. This comes in very handy if you need to use different swf for the parent button and different swf for it's submenu.

btnLabel:

This is the text inside the button (what you actually see on screen). To insert a line break, use the $ symbol, as noted before. To insert a special character (eg. the & symbol), use its HTML character entity reference, for example:

btnLabel="Me &amp; you"

For a list of all the HTML character entity references, click here.

btnSize:

This is the width of the button. Set this to "0" (or don't set it at all) if you want the button width be set according to the text inside it. Or set a number (in pixels) if you want it to have a specific width.

btnLabelAlign:

The horizontal alignment of the button label text. The vertical alignment is handled in the btn.swf itself. Set this to "left" or "right" if you do not want it centered.

btnSpacingX:

If you want to leave a space between buttons, set this property to the first button of the menu.

btnReselect:

Default is “false”. Normally a button cannot be selected again after it has been activated. If you need to reselect it, you can do so by setting this attribute to “true”.

btnIgnoreRelease:

Default is “false”. If a button has children buttons which are shown ar rollOver, you may not want to have any action performed if you click the main button. You can set btnIgnoreRelease=“true” to avoid it. In that case, the data node in XML is not needed, so delete it.

btnHide:

Use this if you don't need a button, but the functuality of it. If you want to have an extra or another button (or mc) that acts as a button and interacts with the global navigation, just use the xml attribute "btnHide=true". Then just add a click listener on the button, and on click, for example, run this:

varcentral.flebSWFAddress.setValue("/en/contact/");

Because the global navigation reacts to the goto the navigation is also updated. So, to make it short, if you want to have a special behaviour of any button in the global navigation just make it invisible (btnHide attribute) and use your own btn. I do this almost every time with "home": I don't have a button but use the logo instead and just call the command line above. For example, you don't need a visible “Home” button, instead the user can click on the logo of your website. But the navigation has to be deactivated in that case.

One more thing. If btnHide is true, the only xml attributes you'll need to define are id, btnSwf (these are mandatory) and btnLabel (this will be seen in the html alternative page).

btnDisabled:

If set to “true”, the button will be visible, but with alpha=0.3 and mouseEnabled=false. Use this if the button should be visible, but not active yet. For example when the Website you are working on goes online before all the content is ready. So the visitors get the whole picture of the site but also see where they cannot click yet. Or for your clients when you want to show them a not fully working draft.

btnJoker:

Default is "". btnJoker can be used for anything.

Positioning the buttons

Open structure.xml and change the properties btnPosX and btnPosY of the first button.

<navigation>
<button id="home" btnSWF="mainBtn.swf" btnPosX="20" btnPosY="20" >

XML attributes

For a full list see here.

Customizing the buttons inside mainBtn.fla

Changing the textfield properties

Open the file MainBtn.fla. Now, in the library open the textFieldMc movie clip. There just edit the textFieldMc movie clip. Change font family, embed your desired font, change text color, size or whatever, compile and you're done.

Changing the interaction area

Open navigBtnArea and change its height. To change its width use the xml.

Changing the button states

In the MainBtn.fla, there are the graphics and textfield for the different button states:

  • intro (called when the btn is initially loaded)
  • rollOut
  • rollOver
  • press
  • release
  • deactivate (called when the button is unpressed, when another button is pressed)
  • outro (called when the button is faded out)

Changing the states using Greensock TweenMax

I am a fan of Greensock tweening engine. So here is how you will use it to animate the different button states.
 

Open MainBtn.fla and in the library open navigBtnLabel. In the first action frame insert the code below:

import com.greensock.TweenMax;

function startRollOverTween():void {
    new TweenMax(textFieldMc, 0.3, { tint:0x000000 });
}

function startRollOutTween():void {
    new TweenMax(textFieldMc, 0.3, { tint:0xFFFFFF });
}

In the rollover, press and release action keyframes insert this:

startRollOverTween();

In the rollout and deactivate action keyframes insert this:

startRollOutTween();

Lastly, press "edit ActionScript settings", press "source path" tab, press "add new path" and insert the path that contains your GreenSock classes, which in my case is:

../src

Now everytime you roll over the button, the text will animate from white to black and on vise versa on roll out.

Changing the way the button sequences animate in and out

Main menu buttons

To change the way main menu buttons animate in (when you first enter the site), open Main.as and change the code below (line 203):

for (i = 0; i < btns.length; i++) {
    btns[i].alpha = 0;
    btns[i].visible = true;
    btns[i].x = btns[i].initX;
    btns[i].y = btns[i].initY + 200;
    btns[i].rotation = 270;
    TweenLite.to(btns[i], 0.5, {alpha:1, scaleY:1, y:btns[i].initY, rotation:0, overwrite:1, delay:delay, onStart:btnIntro, onStartParams:[btns[i]]});
    delay += delaySteps;
}

To change the way these menus animate out (line 242):

while (i--) {
    TweenLite.to(btns[i], 0.5, { alpha:0, x:"+400", overwrite:1, delay:delay, onStart:btnOutro, onStartParams:[btns[i]], onComplete:btnRemove, onCompleteParams:[btns[i]]});
    delay += delaySteps;
}

Submenu buttons

To change the way submenus animate in (when you roll over on a parent button), open Main.as and change the code below (line 213):

for (i = 0; i < btns.length; i++) {
    btns[i].scaleY = 0;
    btns[i].alpha = 0;
    btns[i].visible = true;
    TweenLite.to(btns[i], 0.2, {alpha:1, scaleY:1, overwrite:1, delay:delay, onStart:btnIntro,         onStartParams:[btns[i]]});
    delay += delaySteps;
}

Don't forget to change the way submenus animate out (line 247):

while (i--) {
    TweenLite.to(btns[i], time, { alpha:0, scaleY:0, overwrite:1, delay:delay, onStart:btnOutro, onStartParams:[btns[i]], onComplete:btnRemove, onCompleteParams:[btns[i]]});
    delay += delaySteps;
}

Navigating to a page using a custom button inside the content page

Say for example that you have a movie clip button in you Main.fla, named "myButton". When you click the button, you want to be redirected to the contact page of your site.

myButton.addEventListener(MouseEvent.CLICK, onButtonClick, false, 0, true);

private function onButtonClick(e:MouseEvent):void
{
    varcentral.flebSWFAddress.setValue("/en/contact/");
}

Navigating to a pdf

Let's say that you want the button in the previous example to open a pdf file in another browser page.

import flash.net.navigateToURL;
import flash.net.URLRequest;

private function onButtonClick(e:MouseEvent):void
{
    navigateToURL(new URLRequest('docs/myBook.pdf'));
}

Important notice!

Make sure the path is relative to the deploy folder. In this example, the docs folder is inside the deploy folder. Also, and most important, make sure you insert the correct path. One mispelling, and you might pull your hair out, trying to find why it doesn't work. If fleb doesn't find the correct file path, then it will redirect you to the same page!

Reparenting buttons

You may need to set up a navigation where some groups are decoupled from each other. Let’s say, you have a main navigation on the left side, and when you select a menu item, show the sub navigation on the right side. What you have to do in such a case is reparenting the buttons. By default, they are all inside the same movie clip. But of course you can easely take them out and move them where you need them.

To do so, just retrieve the desired buttons, and add them to any holder you want.

var footerBtn:*;
var footerBtns:Array = varcentral.flebNavigationManager.getBtnsByID(["footerBtn1", "footerBtn2"]);
for each (footerBtn in footerBtns) {
    website.footer.footerBtnsHolder.addChild(footerBtn);
}

Don't forget to set the appropriate btnPosX and btnPosY for footerBtn1. These will be according to your new holder.

Events

Built-in events

See NavigationEvent.as to see all the events fleb has set up for you. To use them just use like that:

varcentral.flebNavigationManager.addEventListener(NavigationEvent.MC_MOUSE_OVER, onMenuBtnOverHandler, false, 0, true);
Just make sure the flebNavigationManager has been inited. A safe place to set your navigation listeneres is inside this function:
private function releaseNavigation():void
{
     // add you navigation manager listeners here
     varcentral.flebCore.releaseNavigation();
 }

Make your own custom events

Say for example you want to add a click handler to the navigation buttons.

First open NavigationEvent.as and add this line:

public static const MC_MOUSE_CLICK:String = "NavigationEvent.onMcMouseClick"

Now open NavigationBtn2 and add this line (line 641):

navManager.dispatchEvent(new NavigationEvent(NavigationEvent.MC_MOUSE_CLICK, {state:"mouseClick", id:this.id, btnID:this.name, btn:this}));

Now, for example in Main.as you can add your listener:

varcentral.flebNavigationManager.addEventListener(NavigationEvent.MC_MOUSE_CLICK, onMainMenuBtnClick, false, 0, true);

private function onMainMenuBtnClick(e:NavigationEvent):void
{
    // when you click any nav btn, do something here
    trace(e.params.id) // traces 'company'
    var curBtn:NavigationBtn2 = e.params.btn; // reference the nav button
}

See this post for more.

Navigation Manager Public Methods

Fleb gives a bunch of public methods which you can call in the navigation manager. To do so, just use the global variable varCentral.flebNavigationManager, add a dot, and attach the desired method. For example:

varCentral.flebNavigationManager.deactivateAll();

getBtnsByID

Returns an array of NavigationButtons according to the IDs you pass.

var b:Array = navigationManager.getBtnsByID(["home","about_us","products"]);
trace(b[0].btnSize)
trace(b[1].initX)
trace(b[2].makeRoomY)

getParent

Returns the parent button (NavigationButton) of a button.

trace(varcentral.flebNavigationManager.getParent(varcentral.flebActiveBtn.id).id); // traces 'company'

deactivateAll

Deactivates all the menu buttons.

changeLanguage

Changes menu language.

varCentral.flebNavigationManager.changeLanguage();

See this post for more.

Navigation Button Properties

Fleb also gives a bunch of properties for each button that is contained in navigation manager. To use them, first we have to store a reference to the desired button, for example:

var myBtnsArray:Array = navigationManager.getBtnsByID(["products"]);
var myBtn:NavigationButton2 = myBtnsArray[0];

Or:

var myBtn:NavigationButton2 = varcentral.flebActiveBtn;

To check which properties are available in fleb, check the get and set functions in NavigationButton2.as. Here is a list of the most useful properties.

btnLabelText

Return the button text.

trace(myBtn.btnLabelText); // traces 'Contact us!'

parentBtn

Returns the parent button id.

trace(myBtn.parentBtn); // traces 'b2_1'

children

Returns an array with the children's button ids.

var myBtnChildren:Array = myBtn.children;
trace(myBtnChildren[0]); // traces 'b4_0_0'

data

Stores the data object of the currently active content page (defined in structure.xml):

  • data.swfArr
  • data.sourceArr
  • data.titleArr
  • data.addressArr

The arrays (swfArr etc.) contain 5 values for 5 languages. For example, if varcentral.flebLanguage is 2, then the third element of the arrays will be used.

trace(myBtn.data.addressArr[varcentral.flebLanguage]) // traces '/en/products/'

node

Returns the current button xml node.

trace(varcentral.flebActiveBtn.node.myCustomNode);

 

Post A Comment

Anti-Spam Quiz: