Using the thumbNailerPro

It is possible to integrate the flipNavigation component with our thumbNailerPro, this tutorial will show you how. Note that the thumbNailerPro can only be published for Actionscript 2 and is therefore only compatible with the Actionscript 2 version of the flipNavigation component.

1) Before you begin this tutorial you will need to gather together some images you wish to use as large images in the flipNavigation component and smaller images you wish to use as thumbnails. For the purposes of this tutorial save three images as 'img1.jpg', 'img2.jpg' and 'img3.jpg' in a single folder and three smaller images as 't1.jpg', 't2.jpg' and 't3.jpg' (all without the quotes).

2) Open a plain text editor (such as Notepad in Windows or TextEdit on Mac) and start a new file. Type the following line which is a standrad XML opener:

<?xml version="1.0" encoding="utf-8"?>

Next enter the following line which defines a thumbNailer instance

<thumbnailer width="450" height="100" distance="2" acceleration="2" path="" imgPath="">

Next, create an item node like this:

<item>

Next, define a thumbnail, specify the value of the file attribute as the filename of the thumbnail you created in step 1:

<thumb file="t1.jpg">

Next, define the event that should be triggered when the thumbnail is clicked, in this case you wish to use asfunction to call the flipImage function (which we will define later), the parameter passed is the image's id identifying which image the flipNavigation should flip to:

<event type="release" url="asfunction:_root.flipImage,img1"/>

Next, close the thumb and item nodes

</thumb>
</item>

Repeat the item, thumb and event nodes for each thumbNail you wish to define

Finally, close the thumbnailer node:

</thumbnailer>

Your complete xml file should look something like this:

<?xml version="1.0" encoding="utf-8"?>
<thumbnailer width="450" height="100" distance="2" acceleration="2" path="" imgPath="">
	<item>
		<thumb file="t1.jpg">
			<event type="release" url="asfunction:_root.flipImage,img1"/>
		</thumb>
	</item>
	<item>
		<thumb file="t2.jpg">
			<event type="release" url="asfunction:_root.flipImage,img2"/>
		</thumb>
	</item>
	<item>
		<thumb file="t3.jpg">
			<event type="release" url="asfunction:_root.flipImage,img3"/>
		</thumb>
	</item>
</thumbnailer>

Save your xml file as thumbnailer.xml in the same folder as your images.

Note that you can find a full explanation of the XML used by the thumbNailer in its userguide.

3) Start Flash and create a new Acionscript 2 file. Save it in the same folder as your images and the xml file you've just created.

4) Open the component panel and locate the flipNavigation folder, open it and drag a copy of the FlipNavigation component out, onto the stage.

5) With the component still selected open the properties panel and give it the instance name 'flipNav' (without the quotes).

6) 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.

7) Return to the components panel and drag a copy of the Thumbnailer onto your stage. Give it the instance name 'tNailer' (without the quotes).

8) Create a new layer on your timeline, select the keyframe and open the Actions panel. Enter the following script:

function flipImage(id){
	flipNav.flipToId(id);
}

9) Save your file in the same directory as your images and xml file and then test it.