1. Copy the necessary files.
The template is located in the “template” directory of downloaded zip file. You can extract the file in a temporary directory and double click the template-xxxx.html to see the output of the template.
Below is the description of each file in the template.
Source files
template-xxxx.fla      - the source file for the Flash movie
template.as            - the action script file source
Template files (Files needed to upload)
template-xxxx.swf     – complied swf movie
template-xxxx.html    - html which hold the flash movie
gallery/images.xml      - sample xml file
gallery/images.xml      - sample xml file
gallery/images/*.jpg      - sample image
gallery/thumbnail/*.jpg   - sample thumbnail image
AC_RunActiveContent.js   - javascript file use by the html
2. Editing the xml file
The template is driven by xml file. You need to edit the xml file in order to define the image and setting of the banner rotator.
You can edit the default xml in gallery/images.xml by TextEdit on Mac or NotePad on Windows. The default format is show below.
<items relativepath=”true”>
<item path=”images/p1″ thumbnail=”thumbnails/p1″ width=”422″ height=”284″>
<title>Title Here</title>
<OTHER_SETTING></OTHER_SETTING>
</item>
<item path=”images/p2.jpg” thumbnail=”thumbnails/p2.jpg” width=”422″ height=”284″>
<title>Title Here</title>
</item>
</items>
tag have one attribute “relativepath” which define if the images path is related to the xml file. If set to true, the path of the image will related to the xml file. e.g. if put the xml inside a folder called “gallery” and put the image files in a folder called “gallery/images”, you just need to define the image path in the xml as “images/xxxxx.jpg”.
Each tag have several attribute. The definition of each attribute is show below.
path: define the image path file (large image) of corresponding slide
thumbnail: define the thumbnail image path of corresponding slide
width/height: define the dimension of the image file
3. Parameter setting for each slide
You can add additional setting for each slide by adding child tag to tag.
For example, we want to set the transition duration for this slide. You can edit the xml like below.
<item path=”images/p1″ thumbnail=”thumbnails/p1″ width=”422″ height=”284″>
<title>Title Here</title>
<transitionDuration>5</transitionDuration >
</item>
For settings available for each banner rotator, you can refer to this guide.
4. Setting for the layout
Beside the setting of each slide, you can setup the layout of the template by html.
Edit the template-xxxxx.html by any text editor. Search for the code “FlashVars”. You will see the settings like below.
You can edit the value to change the layout of the template.
titleBackgroundColor : Color of the title background
titleBackgroundAlpha : Alpha of the title background
thumbnailAlign : Alignment of the thumbnail. 0: Top 1: Right 2: Bottom 3: Left 7: Hide
thumbnailWidth : Width of the thumbnail
thumbnailHeight : Height of the thumbnail
5. (Optional) Setting in Dreamweaver
If you are using dreamweaver instead of using the stock html. You can copy the swf in your project directory and insert the swf by menu “Insert>media>Flash(swf)”
Then you can adding the parameter by:
a. Select the flash object in the page
b. Open properties panel. Click the parameter button.
c. Add a parameter called “FlashVars” and add the setting to the value