ThumbGallery-AS3 Template Tutorial
ThumbGallery-AS3 Component Tutorial
Customizing ThumbGallery-AS3 in the Component Inspector
Customizing ThumbGallery-AS3 using XML
How to add captions to a gallery
Setting Properties with Actionscript
Actionscript Methods
Actionscript Events
Requirements



ThumbGallery-AS3 Template Tutorial
 


The ThumbGallery-AS3 Template includes all you need to create a stand-alone gallery or a gallery to add to your html pages. You do not need the Flash application to use the ThumbGallery-AS3 Template.

Step 1- Create your images
Create two JPGs for each image - one sized for the thumbnail and one sized for the main image. These images can be any dimension. Add these JPGs to the images folder.

Step 2- Populate the XML file
The XML file is a simple text file that tells ThumbGallery-AS3 where the images are and in what order to display them. It is also used to customize the look of the gallery. The Template includes an XML file named "gallery_data.xml" for you to update. The XML structure looks like this:

 

<gallery>
       <!--The line below defines the path to the folder where your images are-->
       <setup path="images/" >
              <!--The lines below are used to edit and add properties to change the look of the gallery-->
              <imgWidth>500</imgWidth>
              <imgHeight>400</imgHeight>
              <thumbWidth>50</thumbWidth>
              <thumbHeight>50</thumbHeight>
              <transitionType>wipe</transitionType>
       </setup>
       <!--The following lines are where you set the names of images and thumbnails -->
       <item>
              <thumb>thumb1.jpg</thumb>
              <img>image1.jpg</img>
        </item>
        <item>
              <thumb>thumb2.jpg</thumb>
              <img>image2.jpg</img>
        </item>
</gallery>

Within the <setup> node you can add many properties to change the look of the gallery. A full list can be found here. Each image you have in your gallery is defined in the <item> node. This is where you type in the name of the main image and thumbnail image. There is no limit to the number of images in a gallery.

Step 3- Test and load to your web site
Test your gallery by opening the gallery.html file in a browser. Then upload the following files to your web server: gallery.swf, gallery.html, gallery_data.xml, swfobject.js and the images folder. - you're done!

ThumbGallery-AS3 Component Tutorial
 


Use the ThumbGallery-AS3 Component to add a gallery inside your Flash files. The download comes with sample Flash files - some people find it easier to learn my exploring the sample Flash files.

Step 1- Set up the ThumbGallery-AS3 Component in Flash
In Flash, drag an instance of the ThumbGallery-AS3 component to the stage.
In the Flash menu, select: Window > Component Inspector.
The component inspector is where you customize your gallery. Find the property named "XML path", enter the location of your XML file. In this case enter: "gallery.xml"
Next, enter values for the following: Image Height, Image Width, Thumb Height, ThumbWidth.
These values should match the pixel size of the JPGs you created earlier. Lastly, enter any other
values that you would like to customize the gallery.

Next follow the three steps outlined in "ThumbGallery-AS3 Template Tutorial" above. Go there now
Note: any properties you define in the XML file will override properties you define in component Inspector.
Using the XML file to define your properties is any easy way to customize your gallery without having to republish the Flash file.


Customizing ThumbGallery-AS3 using the Component Inspector
 


You can customize the ThumbGallery-AS3 Component using the Component Inspector. To find the Component Inspector in Flash go to the menu: Window > Component Inspector.

The following is a list of all the properties you can change in the Component Inspector.

Parameter sample value Description
Image Height 250 height of the main image (jpg)
Image Width 400 width of the main large image (jpg)
Thumb Height 30 height of a thumbnail (jpg)
Thumb Width 35 width of a thumbnail (jpg)
thumbType images Changes the style of thumbnail to be displayed. Valid values are: "images", "numbers" and "solidColor". Default value is "images".
captionText TextField

Defines the location of a TextField where the text captions will be placed. The caption text is defined in an external XML file.
autoPlay 4 number of seconds that an image is displayed while in auto mode
XML Path xml/gallery.xml name and location of the XML file
background alpha 50 Alpha value of the Background rectangle
backgroundBorder 10 Thickness of the background rectangles edge
Color - Background #FF0000 Color of the background rectangle
Color - Thumb Active #333333 Color of the Thumbnail outline once clicked on
Color - Thumb Default #CCCCCC Default color of the Thumbnail outline
Color - Thumb Rollover #FFFFFF Color of the outline when rolling over
Corner - Background 10 Corner radius of the background rectangle
Corner - Main Image 10 Corner radius on the main image
Corner - Thumbnail 5 Corner radius of the thumbnails
Corner - Thumb Mask 5 Corner radius of the thumbnail Mask. Edges can be seen when thumbs are scrolling on/off screen.
scrollspeed 6 Speed that the thumbnails scroll when rolled over.
Showloader true Defines whether or not to show the loading animation. Default is true
Thumb Spacing 3 Distance in pixels between the thumbnails
thumbBorder 2 Thickness of the outline on the thumbnails
thumbPosition left Position of the thumnails relative to the main image area. Options are: left, right, top or bottom
thumbAlpha 50 Alpha percentage of the non-selected thumbnails
thumbRowGap 5 The distance between the thumbnails and the main image area
transitionspeed 5 Speed at which the main image will transition to the next image after a thumbnail is clicked .
transitiontype fade Type of transition on the main image when a thumbnail is clicked. select from: fade, zoom, squeeze, pixeldissolve, blinds, wipe, iris, photo or fly
soundThumbRoll Roll This property sets the sound that will play when a thumbnail is rolled over. The sound defined must match a sound in the library with the same linkage name. The library sound should also be set to "Export for actionscript" and "Export in first frame" If no sound is defined, no sound will play.
soundThumbClick Click This property sets the sound that will play when a thumbnail is clicked on. The sound defined must match a sound in the library with the same linkage name. The library sound should also be set to "Export for actionscript" and "Export in first frame" If no sound is defined, no sound will play.
stopAutoOnClick true Property that changes whether or not to stop the automatic cycling of images after a thumbnail is clicked or after the following methods are called: nextImage() prevImage(). Default value is true.
randomImages true Property that changes whether or not to randomize the order of images displayed. If set to false, the image order will be the order the images are defined in the XML file
loopImages true Property that changes whether or not to loop through the images when the autoPlay feature is on or if browsing images using the method: nextImage()
scaleImage none, noBorders, exactFit Property that changes whether or not to scale the main images to fit the viewable area. If set to none, no scaling will occur. If set to noBorders, then the image will scale to fill the entire area. Cropping may occur if proportions are different. If set to exactFit, the image will scale either up or down so the entire image is shown
 
Customizing the gallery using XML
 


You can customize the look of ThumbGallery-AS3 using the XML file. When using the ThumbGallery-AS3 Component, any properties you add to the XML file will override properties in the Component Inspector. Add the properties you want to change by adding nodes inside the <setup> node.
Example:

 

<setup path="images/" >
       <!--add any properties you would like to change for the gallery-->
       <imgWidth>500</imgWidth>
       <imgHeight>400</imgHeight>
       <thumbWidth>50</thumbWidth>
       <thumbHeight>50</thumbHeight>
       <transitionType>wipe</transitionType>
</setup>


The following is a list of all the properties you can add in the XML file.

Parameters with sample values Description
<imgHeight>500</imgHeight> height of the main image area (jpg)
<imgWidth>400</imgWidth> width of the main large image area (jpg)
<thumbHeight>50</thumbHeight > height of a thumbnail (jpg)
<thumbWidth>50</thumbWidth > width of a thumbnail (jpg)
<imgLink target="_new">http://yahoo.com</imgLink> This will turn the main image into a link that when clicked on will take you to the URL.
<autoPlay>5</autoPlay> number of seconds that an image is displayed while in auto mode
<backgroundAlpha>50</backgroundAlpha > Alpha value of the Background rectangle
<backgroundBorder>5</backgroundBorder> Thickness of the background rectangles edge
<backgroundColor>#FFFFFF</backgroundColor> Color of the background rectangle
<thumbActiveColor>#FFFFFF</thumbActiveColor> Color of the Thumbnail outline once clicked on
<thumbColor>#FFFFFF</thumbColor> Default color of the Thumbnail outline
<thumbRollColor>#FFFFFF</thumbRollColor> Color of the outline when rolling over
<backgroundCorner >5</backgroundCorner > Corner radius of the background rectangle
<imgCorner>5</imgCorner> Corner radius on the main image
<thumbCorner>5</thumbCorner> Corner radius of the thumbnails
<thumbMaskCorner>5</thumbMaskCorner> Corner radius of the thumbnail Mask. Edges can be seen when thumbs are scrolling on/off screen.
<scrollSpeed>8</scrollSpeed> Speed that the thumbnails scroll when rolled over.
<showLoader>true</showLoader> Defines whether or not to show the loading animation. Default is true
<thumbSpace>5</thumbSpace> Distance in pixels between the thumbnails
<thumbnailRows>3</thumbnailRows> Number off rows of thumbnails to display
<thumbAlpha>50</thumbAlpha> Alpha percentage of the non-selected thumbnails
<thumbBorder>2</thumbBorder> Thickness of the outline on the thumbnails
<thumbPosition>left</thumbPosition> Position of the thumnails relative to the main image area. Options are: left, right, top or bottom
<thumbToImgSpace>12</thumbToImgSpace> The distance between the thumbnails and the main image area
<transitionSpeed>1</transitionSpeed> Speed at which the main image will transition to the next image after a thumbnail is clicked .
<transitionType >fade</transitionType > Type of transition on the main image when a thumbnail is clicked. select from: fade, blur, zoom, squeeze, pixeldissolve, blinds, wipe, iris, photo or fly
<soundThumbRoll>Roll</soundThumbRoll> This property sets the sound that will play when a thumbnail is rolled over. The sound defined must match a sound in the library with the same linkage name. The library sound should also be set to "Export for actionscript" and "Export in first frame" If no sound is defined, no sound will play. The sound can't be changed when using the stand-alone template but you can turn it off by setting this property to blank..
<soundThumbClick>Click</soundThumbClick> This property sets the sound that will play when a thumbnail is clicked on. The sound defined must match a sound in the library with the same linkage name. The library sound should also be set to "Export for actionscript" and "Export in first frame" If no sound is defined, no sound will play. The sound can't be changed when using the stand-alone template but you can turn it off by setting this property to blank..
<stopAutoOnClick>true</stopAutoOnClick> Property that changes whether or not to stop the automatic cycling of images after a thumbnail is clicked or after the following methods are called: nextImage() prevImage(). Default value is true.
<randomImages>true</randomImages> Property that changes whether or not to randomize the order of images displayed. If set to false, the image order will be the order the images are defined in the XML file
<loopImages>true</loopImages> Property that changes whether or not to loop through the images when the autoPlay feature is on or if browsing images using the method: nextImage()
<scaleImaget>noBorders</scaleImage> Property that changes whether or not to scale the main images to fit the viewable area. If set to none, no scaling will occur. If set to noBorders, then the image will scale to fill the entire area. Cropping may occur if proportions are different. If set to exactFit, the image will scale either up or down so the entire image is shown
<captionPosition>bottom<captionPosition> For the Template only. Sets the location of the caption and next/previous controls. Can either be "top" or "bottom". This is not needed for the component because caption and controls can be placed anywhere manually in Flash.
<showControls>false</showControls> For the Template only. Defines whether or not to display the next/previous/play/pause copntrols. This is not needed for the component because controls can be manually edited.
 
How to add captions to a gallery
 


To add captions to a gallery, the first step is to add caption tags to your XML file. See orange text below.

 

<gallery>
   <!--The line below defines the path to the folder where your images are-->
   <setup path="images/" / >
   <!--The following lines are where you set the names of images and thumbnails -->
   <item>
       <thumb>thumb1.jpg</thumb>
       <img>image1.jpg</img>
        <caption>This is me at the beach!</caption>
   </item>
   <item>
       <thumb>thumb2.jpg</thumb>
       <img>image2.jpg</img>
        <caption>This is me on top of a mountain!</caption>
   </item>
</gallery>


If you're using the Template version you can color and style the text using HTML tags in the XML like this:<caption><![CDATA[<font size="14" color="#FF0000">Text here!</font>]]></caption>

If using the component, in Flash add a TextField on to the Stage. Give the TextField a name like "captionText" Open the Component inspector, find the property named "captionTextField" and enter the path to your TextField. In this case, enter "captionText". If your TextField is inside a MovieClip, enter the full path: for example "mc.captionText".

Note: A sample gallery with captions is included in the download.


Setting properties with actionscript
 


All properties that can be set in the Component Inspector and XML can also be set using actionscript.
A complete list of properties can be found in Flash in the Actions panel at the list on the left hand side. Listed under the directory: FlashRelief>ThumbGallery-AS3. They can also be found in the help menu at the top under: Help>Flash Help. Then select: FlashRelief>ThumbGallery-AS3

The following example sets properties using actionscript. Note: At the end, you need to call the createGallery() method.

 

myGallery.imgHeight=400
myGallery.imgHeight=400
myGallery.thumbWidth=40
myGallery.tumbWidth=40
myGallery.createGallery("xml.gallery.xml")




 
Actionscript methods and properties
 


ThumbGallery.createGallery()

 

Parameters
url A string that represents the URL where the XML document to be loaded is located. If the SWF file that issues this call is running in a web browser, url must be in the same domain as the SWF file.

Description:
CreateGallery() is used to draw a new gallery based on the information in the XML file. This is useful for example if you want to display different galleries. You could load in different XML files when different buttons are clicked.

Usage:
myGallery.createGallery("gallery.xml")

 


ThumbGallery.nextImage()

 

Description:
This method will display the next image that follows the currently selected image. Useful for adding aarrows to navigate through the images.
To display the previous image, use the method: prevImage()

Usage:
myThumbGallery.nextImage()


ThumbGallery.prevImage()

 

Description:
This method will display the image previous to the currently selected image. Useful for adding aarrows to navigate through the images.
To display the next image, use the method: nextImage()

Usage:
myThumbGallery.prevImage()

 

ThumbGallery.loadImage(number)

 

Parameter:
Number: Sets the which image to display. The number is relative to the order that the image appears in the XML file

Description:
This method will display the image number defined in the parameter. This is useful if you want a link(s) to jump to a specific image in the gallery.

Usage:
myThumbGallery.loadImage(3)

 

ThumbGallery.startAutoPlay()

 

Description:
This method will start the automatic display of images. An image will display for the set number of seconds before the next image is displayed.
When this method is invoked, the next image following the currently selected image will display.

Usage:
myThumbGallery.startAutoPlay()

 

ThumbGallery.stopAutoPlay()

 

Description:
This method will stop the automatic display of images. To restart, use the method: startAutoPlay()

Usage:
myThumbGallery.stopAutoPlay()

 

ThumbGallery.totalWidth

 

Description:
Returns the total width of the gallery. This method is only available after the XML is loaded and the gallery is drawn. This method is available after the event GALLERY_COMPLETE has been called.

Usage:
 var gWidth= myThumbGallery.totalWidth

 

ThumbGallery.totalHeight

 

Description:
Returns the total height of the gallery. This method is only available after the XML is loaded and the gallery is drawn. This method is available after the event GALLERY_COMPLETE has been called.

Usage:
  var gHeight= myThumbGallery.totalHeight
  trace(gHeight)
}


 


Actionscript Events
 


Gallery.GALLERY_COMPLETE

 

Description:
This event is executed after the gallery XML is loaded and the gallery elements, such as the background rectangle, are drawn. This is useful is you want to immediately use the methods getWidth() and getHeight()

Usage:
import com.flashrelief.thumbGallery.Gallery;
myGallery.addEventListener(Gallery.GALLERY_COMPLETE, onComplete);

//
function onComplete(e:Event){
trace(myGallery.totalWidth);
}
trace  

 
Requirements
 


To use the stand-alone ThumbGallery-AS3 Template, you just need a text editor to update the XML file. Your browser must have Flash Player 7 or 8 installed. This is a free plugin available here.

To use the ThumbGallery-AS3 Component you need Flash CS3 or CS4 Window or Macintosh. May be published for Flash Player 9 or 10


Disclaimer and Privacy Policy