Skinning

 

Skinning the navigation components

The flipNavigation_horizontalMenu, flipNavigation_verticalMenu and flipNavigation_button components can all be skinned. The steps described in this tutorial apply to all three.

 

First you will need to complete the Basic tutorial so that you have a flipNavigation_horizontalMenu on the stage that can be skinned.

 

flipNavigation-AS2:


1) In Flash select 'windows > common library > flipNavigation skins' from the main menu.

 

2) Drag a copy of the MenuButtonSkin folder into your library. (If you wish to skin the button component drag a copy of the ButtonSkin into your library instead.)

 

3) In your library double-click the MenuButtonSkin to access its timeline. Double-click each state you wish to edit.

 

4) Save your file and test it.

 

flipNavigation-AS3:


1) Double click on the flipNavigation_horizontalMenu or flipNavigation_verticalMenu that's on the stage in order to view the skins for the button states.

 

2) Double click on each state in order to edit it.

 

3) Save your file and test it.

 

 

Skinning the preloader

In addition to skinning the navigation elements you can also skin the components preloader and the preload text. To do so follow these steps:


flipNavigation-AS2:


1) In Flash select 'windows > common library > flipNavigation skins' from the main menu.

 

2) Drag the FlipNavigationPreloader skin folder into your library.

 

3) Double-click on the flipNav_preloader_bar movie clip, that's in your library, in order to edit the color of the bar. You can change the textfield on the flipNavigation_preloader movie clip. The text can be edited by editing the ActionScript inside the flipNavigation_preloader movie clip. To do this, locate the onUpdate function and edit the bold text below:

function onUpdate(percent:Number,loadingPage:Number,totalPage:Number){
txs=percent;
status_txt.text="Loading "+loadingPage+ "/"+totalPage;
}

4) Save your file and test it.


flipNavigation-AS3:


1) Double-click on the flipNavigation component that's on your stage.

 

2) Double-click on the preloader bar or the textfield in order to edit each of these symbols. The text can be edited by editing the ActionScript inside this movie clip. To do this, locate the onUpdate function and edit the bold text below:

function onUpdate(percent:Number,loadingPage:Number,totalPage:Number){
txs=percent;
status_txt.text="Loading "+loadingPage+ "/"+totalPage;
}

4) Save your file and test it.