Thumbnailer Tutorial

XML TUTORIAL

Using an external XML file with the Thumbnailer allows you to qucikly and easily update your thumbnail galleries and the image descriptions withou having to edit the .fla.

By filling in a value in the XML field in the component's properties panel, you instruct the component to load the Thumbnailer's data from an external XML file. The XML file can be created using any text editor (e.g. Notepad). Here is an example as to how the XML file might look:

<?xml version="1.0" encoding="utf-8"?>
<thumbnailer width="520" height="85" distance="5" acceleration="5" path="thumbs/" imgPath="images/">
<item>
   <thumb file="th_0.jpg">
      <event type="over">
         <text field="desc">This is the first thumbnail</text>
      </event>
      <event type="out">
         <text field="desc"></text>
      </event>
      <event type="release" url="http://www.flashloaded.com"/>
   </thumb>
   <image file="pic_0.swf">
      <event type="load">
         <text field="pdesc">Image 0</text>
      </event>
   </image>
</item>
</thumbnailer>

The first line of the file is a typical XML declaration. It declares the version of the XML file and the encoding that will be used.

thumbnailer tag

This is used to describe the most common parameters that we can also find in the properties panel. Width and Height sets the Thumbnailer's dimensions. An explanation of the other parameters can be found in the Properties Panel section.

Optional alternative thumbnailer tag:

Note: The movement, delay and speed attributes are optional, however they should all be used together.

item tag

This tags is used to define each image that must to be loaded, both thumbnail and full size images. This tag also contains two additional tags inside: the thumb tag and the image tag.

thumb tag

This tag contains the filename of the thumbnail. As the thumbnails act as buttons, this tag can also contain a series of event tags.

The thumb tag has one property:

Argument Name	Description	Possible Values
file	file name of a thumbnail	Filenames with extension .jpg or .swf

Example: <thumb file="th_0.jpg"></thumb>

image tag

This tag contains the filename of the full size image that will be loaded into the ThumbImager.

The image tag has one property:

Argument Name	Description	Possible Values
file	file name of a full size image	Filenames with extension .jpg or .swf

Example: <image file="pic_0.swf"></image>

event tag

The event tag defined the action that will be executed after a specific event occurs. Actions that can be executed can either open URLs or apply text to a custom textfield.

The event tag properties are:

Argument Name	Description	Possible Values
type	defines the type of event that will trigger the action.	"over","press","release","out","releaseOutside" and "load"
url	defines the url that will be opened when the specified event occurs.	any type of URL
target	defines the target window in which the URL should open.	"_blank","_self","_parent" and "_top" . If no target is specified URL will be opened in a blank window

Example:<event type="release" url="http://www.flashloaded.com" target="_blank"/>

text tag

Use this tag to apply text to a custom Text Field after a specified event. For this, you will first need to create one or more dynamic TextFields on the stage and give them instance names, for example: desc and pdesc. We can use the desc textField to display the text for the thumbnails events and pdesc to display the text for the full size images events.

The thumb tag has one property:

Argument Name	Description	Possible Values
field	instance name of the textfield in which the new text will be applied.	instance name

Example:<text field="desc">This is the first thumbnail</text>

DISPLAYING CONTENT USING HTML TAGS

You can display the text content on multlple lines, include hyperlinks and format the text using HTML tags. In order to include HTML tags in the XML file you should wrap the content in CDATA tags.

For example:

<text field="desc"><![CDATA[This is the <b>first</b> thumbnail]]></text>

When you assign the content to a dynamic textfield you should also use the htmlText property instead of the text property.

The following example shows both of these texfields:

You can download the XML for this movie here.

Note:
All of settings that you apply to the Thumbnailer through an XML file will override your settings in the properties panel.