Tutorial for Dynamic Flash Photo Galleries With Thumbnails

Written by sue smith Google
  • Share
  • Tweet
  • Share
  • Pin
  • Email
Tutorial for Dynamic Flash Photo Galleries With Thumbnails
Dynamic Flash galleries are an interactive way to display images. (a lot pf pictures - flowers. image by Olaru Radian-Alexandru from Fotolia.com)

Creating dynamic Flash photo galleries is not complicated, but does require a number of discrete components working together. Following a few straightforward steps, you can create a Flash gallery quickly, even if you're not an experienced programmer. There are a few technologies involved, but you do not need to be deeply familiar with these. To create your dynamic gallery, you will need to use XML, Flash, ActionScript and possibly an image editing program.

Skill level:


  1. 1

    Prepare your images. Gather the images for your gallery and ensure they are cropped to the correct dimensions, keeping the file sizes as small as possible while still maintaining good quality. Resize each image to the size you want your thumbnails to be -- it's better to do this in advance rather than resizing in Flash when your gallery is viewed, as this will result in poorer quality. Save your main images in one directory and the thumbnails in another, giving each thumbnail a name that is the same or similar to its main image, so that you can match them up easily in Flash.

  2. 2

    Create XML to hold the details of your image gallery. You can use a database and server-side script to fetch your image data, but using XML is more common, as it is fast and easy to implement in Flash. Create an XML document to hold the list of your images, including their URLs. You can optionally include other information about the images, such as their file types and dimensions, but this is not essential. (See Reference 1)

  3. 3

    Create your Flash file with design elements. Create a new file in Flash and set up the document properties as well as any visual elements you need. Use the drawing tools in Flash to create the Symbols you need for the gallery. Your Flash file should contain holders for displaying the main images, holders for the thumbnails, and any user controls you need. Use Movie Clip, Button and Graphic Symbols as you require. (See Reference 2)

  4. 4

    Load the image data from XML. Use ActionScript in your Flash movie to load the XML data. In ActionScript 3.0, this involves using the URLLoader, URLRequest and XML Classes. In ActionScript 2.0, you can use the MovieClipLoader and XML Classes. When you load the XML and begin to process it, store the image data within your Flash code, using arrays so that you can then access this data for loading the images themselves. (See Reference 3)

  5. 5

    Load your images. Using the data from your XML, load each of your images into the Flash file one at a time, looping through the full list. Remember to load both the main images and the thumbnails, and load them into whatever holder you have created for displaying them. You can use the Loader and URLRequest Classes if you're coding in ActionScript 3.0, or the MovieClipLoader Class if you're using ActionScript 2.0. (See Reference 4)

Tips and warnings

  • Include an indication of load progress for your users; for example, this could be a load bar displaying the percentage loaded so far. This function is called a preloader, and makes people far more likely to wait and view your gallery if the images take a while to load.
  • If your image gallery has user interaction within it, you should prevent the controls from working while the content is still being loaded. Allowing user interaction while the images are in the process of loading will cause unpredictable effects.

Don't Miss

  • All types
  • Articles
  • Slideshows
  • Videos
  • Most relevant
  • Most popular
  • Most recent

No articles available

No slideshows available

No videos available

By using the eHow.co.uk site, you consent to the use of cookies. For more information, please see our Cookie policy.