XML Flash Gallery Documentation

Basic Gallery Setup

Your download includes everything you need to create a stand-alone flash gallery or a gallery to add to your html pages. You do not need the Flash Authoring software to use the xml flash gallery unless you plan to add the gallery to your flash movies.

Step1 – Prepare Images

This is a pretty easy step, as there is no need to create thumbnails, or worry too much about the sizes of your images. The gallery will scale the images to the right size. Still, it’s best to keep the image sizes reasonable to save on download time.

Save your images in JPG format into the images folder, or another folder in the same directory as the gallery. Make sure the JPG’s are saved as non-progressive JPG’s.

Step 2 – Add Images To XML

Open data.xml using a text or html editor. Avoid using word processing software. This is a simple text file that tells the gallery which images to use, what are the captions for each and in what order they should be displayed. It is also used to customize the way the gallery looks and behaves. The structure looks like this:

<gallery
rows="3"
cols="3"
…[more attributes]
>
<pic image="image01.jpg" thumb="image01_thumb.jpg" title="Caption text here " link="images/image01.jpg" link_title="Link text here " target="_self"/>

</gallery>

View entire xml file

At the top, right after the <gallery opening tag is a list of attributes that are used to define how the gallery will look and behave. See chart below for a description of each.

Each image in the gallery is represented by a <pic /> node. Attributes image, thumb, title, link, link_title and target correspond to the JPG, thumbnail, caption, link and the link text that will appear in the gallery and link target. There is no limit at to the number of images that the gallery can display.

Note:
The only required attribute is image. If you omit any of the other attributes, they will not be displayed. If you omit the image tag or provide a faulty image path, the gallery will skip the image and shift the rest of the images in it’s place.

Test And Publish

Once you have finished updating your xml file, save it and test the gallery by opening xmlGallery.html. Now you can publish your gallery by uploading the following files to your server: xmlGallery.html, xmlGallery.swf, data.xml, flashdetect.js, and the images folder. That’s it!

 

Customizing The Gallery Using XML

Open data.xml using a text or html editor. You will notice some variables defined at the top. The following is a table of descriptions and sample values.

Attribute with sample value Description
rows="3" Rows of thumbs per page.
cols="3" Columns of thumbs per page.
stage_width="500" Width of gallery.
stage_height="500" Height of gallery.
galleryMargin="20" Number of pixels between the enlarged image and gallery edge.
thumb_width="50" Width of thumbnails, not including the shadow.
thumb_height="50" Height of thumbnails, not including the shadow.
thumb_space="20" Space between thumbnails.
thumbs_x="auto" Horizontal placement of the thumbnails. Set to "auto" to center horizontally.
thumbs_y="auto" Vertical placement of the thumbnails. Set to "auto" to center vertically.
large_x="auto" Horizontal placement of enlarged image. Set to "auto" to center horizontally.
large_y="auto" Vertical placement of enlarged image. Set to "auto" to center vertically.
nav_x="0" Horizontal placement of the page numbers.
nav_y="0" Vertical placement of the page numbers.
nav_slider_alpha="50" Navigation slider opacity.
nav_padding="7" padding around each page number.
use_flash_fonts="false" Set to "true" to use custom embedded fonts. Set to "false" to use font values from xml. If set to "true", a TextFormat object must be created for captions, links and nav fonts. See Defining Text Styles for more info.
nav_text_size="11"

Size of page numbers text.
nav_text_bold="false" Set to "true" to make page numbers text bold.
nav_font="Verdana" Font of of page numbers text.
bg_alpha="100" Gallery background opacity.
text_bg_alpha="50" Captions background opacity.
text_xoffset="20" Horizontal padding of captions.
text_yoffset="10" Vertical padding of captions.
text_size="11"

Size of caption text.
text_bold="false" Set to "true" to make caption text bold.
text_font="Verdana" Font of captions.
link_xoffset="-2" Horizontal offset of link text from picture’s left edge.
link_yoffset="5" Vertical offset from of link text from pictures’s bottom edge.
link_text_size="11"

Size of link text.
link_text_bold="false" Set to "true" to make link text bold.
link_font="Verdana" Font of link text.
border="5" Border thickness.
corner_radius="5" Roundness of the corners inside the border. Set to "0" to make hard corners.
shadow_alpha="50" Shadow opacity.
shadow_offset="3" Distance of shadow from border.
shadow_size="7" Blurriness up the shadow (large number here will slow down the gallery).
shadow_spread="0" Spread of shadow.
friction=".3" Speed with which images open and close. Should be set between .01 and .99 – the lower the number, the slower transitions.
bg_color="333333" Gallery background color.
border_color="FFFFFF" Border color.
thumb_bg_color="666666" Thumb background color, while loading.
thumb_loadbar_color="CCCCCC" Loading bar color.
nav_color="FFFFFF" Navigation text color. Navigation appears if total number of images is more than rows multiplied by columns.
nav_slider_color="FF0000" Navigation slider color.
txt_color="FFFFFF" Caption text color.
text_bg_color="000000" Caption background color.
link_text_color="666666" Color of link text.
link_text_over_color="FF9900" Link roll-over color.
auto_size="true" Setting to true will make gallery use entire size of the movie for stage_width and stage_height properties. Setting to true will also disable the stage_width and stage_height properties. In order for gallery to appear full screen, it should be embedded at 100% width and height in html.
showHideCaption="true" Enables/disables showing of captions on roll-over. "false" will show captions always.
autoShowFirst="false" Set to "true" to automatically expand first image on page.
disableThumbOnOpen="true" "true" will disable thumbnails when large image is open. "false" will keep them active.
duplicateThumb="true" Setting to true, will leave a copy of thumbnail in place when the large image is clicked.

activeThumbAlpha="50"

Opacity of active thumbnail. Only applies if duplicateThumb is set to true.
abortLoadAfter="20"
Number of frames before an image is skipped. The gallery will try to load an image for a set number of frames, after which, if there is no progress, the image is skipped. This number should be set a higher(50-100) if you have a slow web server or very large images.
bgImage="images/bg.jpg"
Location of an image to be used as a background.
bgImageSizing="fill"
"fill" – image is scaled up to fill the background and is not distorted.
"stretch" – image is stretched to fill the background.
galleryTitle="My Gallery "
Text that can be used as a gallery title.
galleryTitleX="120"
Placement of gallery title from the left.
galleryTitleY="0"
Placement of gallery title from the top.
galleryTitle_size="20"
Gallery title font size.
galleryTitle_bold="true"
Setting to true will make the font bold.
galleryTitle_font="Verdana" Font of gallery title.
galleryTitle_color="FF0000" Gallery title color
music="music.mp3"
Path to .mp3 file to play in the background.
musicVolume="100"
Music Volume.
loopMusic="true" Set to true to loop music. Set to false to stop after playing once.
smoothImages="true" Set to set to false if you don’t want to use smoothing on images.


Play around with the above settings to achieve the desired style for your gallery.

 

Using The xmlGallery Component

mxp You can use the xmlGallery component to add the gallery to flash movies. The download includes an example flash file to help you get started. You will need Flash MX or higher to use the component. Flash movies should be published for flash player 6 or higher.


Step 1 – Install Component

Make sure you have the latest version of Macromedia Extensions Manager. This is a free software available here. Once you have launched Macromedia Extensions Manager, double-click on xmlGallery.mxp. This will install and activate the component. Launch Flash MX or Professional 2004.

Step 2 – Add Gallery To Your Flash

You should see the component in the Flashnifties sub-directory of the components panel. Drag a copy onto the stage, then open the component inspector panel to set the styles of the gallery.

Note: Any parameters defined in xml will override the ones defined in component inspector. Using xml to define parameters is a good way to update the look of the gallery without having to republish each time. To give priority to the component parameters, simple delete the attribute from xml.

Step 3 – Prepare Images And XML

Follow the steps outlined above for preparing images and adding them to the xml.

 

Customizing xmlGallery Using Component Inspector

component_inspector
You can customize the gallery using the Component Inspector. Note that that values defined in xml will override those defined in the component parameters. The following is a table of parameters, sample values and descriptions:

Parameter Sample Value Description

XML File

data.xml Path to XML file
Skins Clip skinsMc Skins movie clip that is used to replace existing skins. Should contain the following movie clips "close_button", "arrow_next", "arrow_prev", exported with these names for actionscript.
Rows 3 Rows of thumbs per page

Columns

3 Columns of thumbs per page
Movie Width 500 Width of gallery
Movie Height 500 Height of gallery
Gallery Margin 20 Number of pixels between the enlarged image and gallery edge
Thumb Width 50 Width of thumbnails, not including the shadow
Thumb Height 50 Height of thumbnails, not including the shadow
Thumb Space 20 Space between thumbnails
Thumb X auto Horizontal placement of the thumbnails. Set to "auto" to center horizontally
Thumb Y auto Vertical placement of the thumbnails. Set to "auto" to center vertically
Large X auto Horizontal placement of enlarged image. Set to "auto" to center horizontally
Large Y auto Vertical placement of enlarged image. Set to "auto" to center vertically
Nav X 0 Horizontal placement of the page numbers
Nav Y 0 Vertical placement of the page numbers
Nav Slider Alpha 50 Navigation slider opacity
Nav Padding 7 padding around each page number
Background Alpha 100 Gallery background opacity
Text Bg Alpha 50 Captions background opacity
Text X Offset 20 Horizontal padding of captions.
Text Y Offset 10 Vertical padding of captions
Link X Offset -2 Horizontal offset of link text from picture’s left edge.
Link Y Offset 5 Vertical offset from of link text from pictures’s bottom edge.
Border Width 5 Border thickness
Corner Radius 5 Roundness of the corners inside the border. Set to "0" to make hard corners.
Shadow Alpha 50 Shadow opacity
Shadow Offset 3 Distance of shadow from border
Shadow Size 7 Blurriness up the shadow (large number here will slow down the gallery)
Shadow Spread 0 Spread of shadow
Friction .3 Speed with which images open and close. Should be set between .01 and .99 – the lower the number, the slower transitions.
Background Color 333333 Gallery background color
Border Color FFFFFF Border color
Thumb Background Color FFFFFF Thumb background color, while loading
Nav Text Color FFFFFF Navigation text color. Navigation appears if total number of images is more than rows multiplied by columns
Nav Slider Color 000000 Navigation slider color
Text Color FFFFFF Caption text color
Text Background Color 000000 Caption background color
Link Color 666666 Color of link text
Link Hover Color FF9900 Link roll-over color
Auto Size true Setting to true will make gallery use entire size of the movie for stage_width and stage_height properties. Setting to true will also disable the stage_width and stage_height properties. In order for gallery to appear full screen, it should be embedded at 100% width and height in html.
Show/hide Captions true Enables/disables showing of captions on roll-over. "false" will show captions always
Auto-show First true Set to "true" to automatically expand first image on page
Disable Thumbs On-open true "true" will disable thumbnails when large image is open. "false" will keep them active.
Embed Nav Font true Set to "true" if you plan to use your own fonts for page numbers. Font you use must be in the library. See defining text styles for more info.
Embed Caption Font true Set to "true" if you plan to use your own fonts for captions.
Embed Link Font true Set to "true" if you plan to use your own fonts for link text.
Duplicate Thumb true Setting to true, will leave a copy of thumbnail in place when the large image is clicked.

Active Thumb Alpha

50 Opacity of active thumbnail. Only applies if duplicateThumb is set to true.
Abort Thumb After
20 Number of frames before an image is skipped. The gallery will try to load an image for a set number of frames, after which, if there is no progress, the image is skipped. This number should be set a higher(50-100) if you have a slow web server or very large images.
Background Image images/bg.jpg Location of an image to be used as a background.
Background Sizing
fill "fill" – image is scaled up to fill the background and is not distorted.
"stretch" – image is stretched to fill the background.
Gallery Title My Gallery Text that can be used as a gallery title.
Title X
120 Placement of gallery title from the left.
Title Y
0 Placement of gallery title from the top.
Title Text Size
20" Gallery title font size.
Title Bold
true Setting to true will make the font bold.
music
music.mp3 Path to .mp3 file to play in the background.
musicVolume
100 Music Volume.
loopMusic true Set to true to loop music. Set to false to stop after playing once.

 

Controlling xmlGallery with Actionscript

You can control the gallery with actionscript within flash by calling methods, setting properties and creating responders for events. The following is a list of methods, events and properties along with descriptions:

Method Description

myGallery.loadXml("xmlfile")

Loads xmlfile and creates a new gallery.
myGallery.nextImage() Opens next image and closes the currently open one.
myGallery.prevImage() Opens previous image and closes the currently open one.
myGallery.showPage(page) Loads a page in the gallery. Parameter "page" indicates page number. For page "02" call myGallery.showPage(2)
Event Description
onLoadFinished Triggered when xml file loads and before styles are applied.
EventObject.pics is an array array of image objects, each contains image & title
onStylesSet Triggered when styles have been defined from xml.
EventObject.styles is an object containing all applied styles.
onStageResize Triggered when Stage is resized.
onNavDrawn Triggered when subnav has been created. You will need to listen for this event before you can call the showPage() method.
onLoadFailed Triggered when thumbnail fails to load image and is being skipped.
EventObject.thumb is reference to thumbnail.
onThumbLoaded Triggered when thumbnail successfully completes loading image.
EventObject.thumb is reference to thumbnail.
thumbClick Triggered when thumbnail is clicked
EventObject.thumb is reference to thumbnail.
thumbRollOver Triggered when thumbnail is rolled over
EventObject.thumb is reference to thumbnail.
thumbRollOut Triggered when thumbnail is rolled out
EventObject.thumb is reference to thumbnail.
thumbClose Triggered when the close button on the image is clicked.
allThumbLoaded Triggered when last thumb has loaded
Property Description
autoLoadXml Boolean default true determines if xml is to be loaded when component loads.
Should be set to false when invoking myGallery.loadXml().
disableRollovers Boolean default to false determines if rollover effect is to be displayed.
Set to true to create your own rollovers using "thumbRollOver" and "thumbRollOut" events
loadFailFrames Number default 30, determines how many frames should pass before onLoadFailed is
triggered and thumbnail is skipped
xmlFile Default xml file for gallery to use
captionFormat myGallery.captionFomat can be defined as a new TextFormat() and used to define styles of captions
navFormat myGallery.navFomat can be defined as a new TextFormat() and used to define styles of navigation text
All attributes from xml For a full list of properties see xml attributes table

Example Using Event Listeners

The following is an example of using the thumbRollOver, thumbRollOut, and thumbClick events to set custom rollover effect.

// create event listener object
var mylistner:Object = new Object()

// set roll over behavior
mylistner.thumbRollOver = function(eventObject:Object){
     eventObject.thumb._xscale = eventObject.thumb._yscale = 110
}

//set roll out and click behavior
mylistner.thumbRollOut = mylistner.thumbClick = function(eventObject:Object){
     eventObject.thumb._xscale = eventObject.thumb._yscale = 100
}

// Add event listeners to instance of component
myGallery.addEventListener("thumbRollOver", mylistner)
myGallery.addEventListener("thumbRollOut", mylistner)
myGallery.addEventListener("thumbClick", mylistner)

Defining Text Styles

xmlGallery allows you to easily style text with your own fonts, sizes, etc. Depending on whether or not you are using the Flash component, you will use one of the two methods below:

Text Styles Using XML

First, make sure that use_flash_fonts is set to "false" in the xml. This will give priority to xml values over those set in flash. Now, you can set the values for nav, captions and link font, text size and bold. When using this method, it is important to know that the font you choose will not be embedded into flash, so you should use web-friendly fonts such as Arial, Verdana, Times, etc. If you want to use a wider range of fonts, see the second method below.

Text Styles Using Flash Component

First, make sure that use_flash_fonts is set to "true" in the xml. To define a style for your text using the component, you will need to create an new TextFormat() object, and assign it the desired properties. If you would like to assign a font, you will need to make sure add that font in the library and set it’s linkage to export for actionscript on the first frame, or place a dynamic text field somewhere on the stage with that font embedded. The following is an example of setting caption style:

//create new text format object
myGallery.captionFormat = new TextFormat()
//assign styles
myGallery.captionFormat.bold = true
myGallery.captionFormat.font="Marker Felt" // make sure font is in library
myGallery.captionFormat.size = 20

Note: captionFormat.color will not work, as color is set via component parameters or xml.

 

Creating Multiple Galleries From One SWF

You can create multiple galleries from one swf file by setting up multiple xml documents and passing the file_to_load variable to the flash file indicating which xml file to use.
Below is an example of a gallery that uses portfolio/images.xml instead of data.xml:

<div id="flashcontent">Contents will be replaced with flash</div>
<script type="text/javascript">
var so = new SWFObject("xmlGallery.swf", "gallery", "100%", "100%", "6", "#FFFFFF");
so.addVariable("file_to_load", "portfolio/images.xml");
so.write("flashcontent");
</script>

Note that the image paths in your xml will need to be relative to the html file, not the flash or xml file. So if you have your main html file in the root folder, and xml file in root/portfolio/images.xml, and your image is here: root/portfolio/images/image1.jpg, your xml image node might look like this:
<pic image="portfolio/images/image1.jpg" />

 


Setting up iPhone version

The gallery comes with a javascript/php version that runs on a mobile device such as an iphone or iPad. If a user does not have a flash-enabled device, a link to the gallery is displayed in place of flash. If you are using the basic setup, you should not need to make any modifications for the iPhone gallery to work. The gallery reads all the content from data.xml, and creates all the appropriate image and thumbnail sizes.

If you change your file structure or rename the xml file, you will need to set the right paths for the iPhone version.

Inside the iphone/ folder, find _config_pipho.php and open it in an html editor. At the very top you’ll see two settings that you should consider:

define(‘CONTENT_XML’, ‘../data.xml’);
This sets the path for your data.xml file relative to the iPhone folder. If you move the folder, you should adjust this accordingly.

define(‘BASE_URL’, ‘../’);
This is the text added to all of the image and thumbnail paths when viewing the iphone version. Again, this needs to be relative to the iphone/ folder.

NOTE: iPhone gallery requires PHP 5 with GD graphic library support.

 


Adding iPhone gallery to older gallery

Follow these steps to add iPhone support to an earlier release of the gallery without losing any of your settings or content.

1. Download latest release and unzip the files.

2. Copy over the iphone/ folder into your gallery folder.

3. On the page where your gallery appears add a link to the iPhone gallery. In the source code change:

<div id="flashcontent">
<h3>Oops!</h3>
<p>It looks like you don’t have flash player 6 installed. <a href="http://www.adobe.com/shockwave/download/download.cgi?P1_Prod_Version=
ShockwaveFlash" >Click here</a> to go to Adobe download page.
</p>
</div>

to:

<div id="flashcontent">
<a href="iphone/index.php" class="iphoneBtn">Launch iPhone Gallery</a>
</div>

If your file structure is different from the default setup, make necessary path adjustments outlined above.

 

 

 

Free Package

Want to try before you buy? Free version has all the functionality, but includes a small link to this site.

Download

Paid Package

Use a credit card or PayPal. Download will start immediately after purchse. You’ll also receive an email with the download link.

Price: $20

Purchase

Nifty Products

About Flash Nifties

Flash Nifties is a collection of flash components and tools designed to take the pain out of creating rich interactive presentations. These robust flash tools can be set up in minutes, and most have a fully functional free download, so you can give them a try without putting up any cash. Enjoy!

Testimonials

"Masterfully executed!"

I would like to say that you have done an amazingly great job! Masterfully executed! Throughly designed! Perfect in every way. Thank you so much for offering a photo gallery that works like a photo gallery should.

Steve Nyhof (Auto flash gallery)

"Can't say enough good things"

Just bought your product and i can't say enough good things about it. I'm not the most proficient flash user, which is part of the reason i got this product...to help a project.

Sandlog (Flash Media Gallery)

"All I could have asked for an more"

I've used your xml flash gallery just a couple of days, but I was so impressed that I just had to give you props. This is all I could have asked for an more. Thanks!

Todd D. (XML flash gallery)

more testimonials