ADVANCED TUTORIAL

This tutorial shows you how to use some of the advanced features of the Thumbnailer and ThumbImager components.

LOADING INDICATOR

We will now explain how to create a loading percentage indicator.

1. Open the Thumbnailer movie .fla that you created in the basic tutorial.

2. Click on the ThumbImager component and find the Percentage Text parameter in the properties panel. You will see the text "Loading XX%". Leave it as is for now. This will be displayed inside the loading indicator text field.

The "XX" variable defines the loading percentage number ( For example: your loading text will start with "Loading 0%" ).

3. We will now set the Percentage Variable parameter so that the ThumbImager will know which text field to send the loading percentage information to. Enter perc for the Percentage Variable, this will be the variable name for the text field that we are about to create.

4. Create a new text field and position it between the Thumbnailer and Thumbimager components. View the properties panel and enter perc into the "Var" input field.

Our text field is now ready to display the loading percentage information.

Test the movie using Simulate Download (press Ctrl+Enter twice).

NUDGE AND EASING

We will now create arrows for scrolling the Thumbnailer content and apply easing effects.

1. Open the tnailerPRO_demo2.file.

2. Drag an arrow movie clip from the library on to the Stage. Duplicate this movie clip and rotate/position both arrows so that it looks similar to the picture below:

3. Give the left arrow the instance name "arrow_left" and give the right arrow the instance name "arrow_right".

4. Click on the first (and only) frame and open the Actions Panel (F9). We will now enter the code that will instruct the arrows to move the thumbNailer content. Enter the following code:

import mx.transitions.easing.*;

tnailer.setNudgeProperties(Back.easeInOut, 350);
arrow_left.onRelease=function()
{
tnailer.nudge("prev");
}
arrow_right.onRelease=function()
{
tnailer.nudge("next");
}

The first line of the code is necessary to make the easing options available. You can find more information about the various easing options in the help panel of Flash inside Flash Help/Using Components/Customizing component animations. Please refer to the ActionScript Reference section for an explanation of each function/method.

Let's see how this is working is far:

You can see how are these procedures are implemented inside tnailerPRO_demo3.fla.

CREATING DESCRIPTION FIELDS

This section explains how to add description fields for the thumbNailer and/or thumbImager images using XML. Before reading this section please ensure that you have completed the XML Tutorial .

We will use the tnailer.xml file from the tnailerPro_demo folder, which has already been defined. Let's take a look at some parts of this XML file:

<item>
   <thumb file="th_1.jpg">
     <event type="over">
       <text field="desc">This is the second thumbnail</text>
     </event>
   </thumb>
   <image file="pic_1.jpg">
     <event type="load">
       <text field="pdesc">Image 1</text>
     </event>
   </image>
</item>

In the text tags we refer to the description textield instance names of "desc" and "pdesc". desc is the instance name of the text field that will display the Thumbnailer's image information, and pdesc will display the ThumbImager's information.

1. Open the tnailerPRO_demo3.fla file.

2. Create two text fields and give them instance names as described above.

3. In the Properties Panel for the Thumbnailer enter tnailer.xml for the XML File parameter.

4. Test your movie (ctrl+enter). You should see results similar to the example below: