1) Before you begin this tutorial you will need to gather together some images you wish to use. For the purposes of this tutorial save three images as 'img1.jpg', 'img2.jpg' and 'img3.jpg' in a single folder.
2) Start Flash and create a new file. If you wish to publish for Actionscript 2 start a new Actionscript 2 file, if you wish to publish for Actionscript 3 start a new Actionscript 3 file. Save it in the same folder as the images.
3) Open the component panel and locate the flipNavigation folder (for Actionscript 2) or the flipNavigation AS3 folder (for Actionscript 3), open it and drag a copy of the FlipNavigation component out, onto the stage.
4) With the component still selected open the properties panel and give it the instance name 'flipNav' (without the quotes).
5) With the component still selected on the stage open the component inspector panel and double-click the pages parameter to add images to your component.
Enter the page ID, a title for the page, the type of effect and the URL of the image. Repeat this step until each of your images has been defined.
For the purposes of this tutorial the URLs of your images are the file names of the images you created in step 1 ('img1.jpg', 'img2.jpg' and 'img3.jpg').
Note, if you are using Actionscript 2 you will see a linkageId property, alternately, if you're using Actionscript 3 you'll see a className property. Use either of the properties to load images from your library. For the purposes of this tutorial, leave these properties blank.
For the purposes of this tutorial the mouseEvent parameter can be left at the default (true) however if you were loading content that used mouse interaction such as buttons you should set this parameter to false to enable the actions in the loaded content. This parameter does not exist in the ActionScript 3 version as it is not necessary to set this in ActionScript 3.
6) Open a plain text editor (eg. Notepad on Windows or TextEdit on Mac) and enter the following code:
<?xml version="1.0"?>
<menu>
<item pageId="img1" title="image 1" />
<item pageId="img2" title="image 2" />
<item pageId="img3" title="image 3" />
</menu>
The code is used to create your menu. The first line of the code is the standard opener for an XML file; the second line opens the menu node; the third, fourth and fifth lines define your images; the sixth line closes the menu node. Within each item node you specify the id of the image the menu button should link to and the title it should display.
Save this file as 'menu.xml' (without the quotes) in the same folder as the images you created in step 1.
7) Return to Flash, open the components panel and drag a copy of the flipNavigation_horizontalMenu component onto the stage.
Open the component inspector and enter in the 'FlipNavigation target' parameter the instance name you gave your FlipNavigation component in step 4 ('flipNav' without the quotes).
For the xmlURL parameter enter the filename of the xml file you created in step 6 ('menu.xml' without the quotes).
Note that if you prefer you can add a flipNavigation_verticalMenu instead of a flipNavigation_horizontalMenu by following exactly the same steps.
8) Save your file in the same directory as your images and xml file and test it.