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:
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>
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. |
Play around with the above settings to achieve the desired style for your gallery.
Using The xmlGallery Component
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
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:
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>
<pic image="portfolio/images/image1.jpg" />
© Copyright 2010 FlashNifties.com | savdesign.com