FORUMS: list search recent posts

XML Driven Flash Photo Gallery Thumbnails Control

COW Forums : Adobe Flash

<< PREVIOUS   •   FAQ   •   VIEW ALL   •   PRINT   •   NEXT >>
Thomas Cho
XML Driven Flash Photo Gallery Thumbnails Control
on Dec 2, 2010 at 5:28:53 pm

Hi, I need to make a XML Driven Photo slide in Flash CS5.

It needs to have a Box that contains 5 Thumbnails(by XML) act as buttons.

The Box sits on top of the Main photo area and shrinks (or close out) when user click its close button. And it opens out by clicking on a open button.

I'm sure it can be done by using timeline, Tweening or you name it..But what about the Thumbnails that run from the XML file?

Can they disappear with the Box and retrieve when it opens? is it possible?

If yes, what would be the best way to do that?

Any comment would be greatly appreciated!

Here is the ActionScript.





import fl.controls.Button;

import flash.display.Shape;


import flash.display.MovieClip;

import flash.display.Loader;

import flash.text.TextField;

import fl.transitions.*;

import fl.transitions.easing.*;

import flash.display.Shader;

var hasloaded:Boolean = false;

var firstLoaded:Boolean = false;

var barWidth:int;

var barHeight:int;

var images;

var imageCount:int;

var thumbnailArray:Array = new Array();

var bigImageArray:Array = new Array();

var descriptionArray:Array = new Array();

var xmlLoader:URLLoader = new URLLoader();

var imageXML:XML = new XML();

xmlLoader.addEventListener(Event.COMPLETE, LoadXML);

xmlLoader.load(new URLRequest("slideshow.xml"));

function LoadXML(e:Event):void {

imageXML = new XML(;




Populates the arrays with the image values

and the text for each picture.


function ParseImages(imageInput:XML):void {

var iconList:XMLList = imageInput.image.icon;

var mainImageList:XMLList = imageInput.image.mainimage;

var descriptionList:XMLList = imageInput.image.description;

for (var i:int = 0; i < iconList.length(); i++) {

var imageElement:XML = iconList[i];


thumbnailArray[i] = imageElement;


for (var j:int = 0; j < mainImageList.length(); j++) {

var mainimageElement:XML = mainImageList[j];


bigImageArray[j] = mainimageElement;


for (var l:int = 0; l < descriptionList.length(); l++) {

var descriptionElement:XML = descriptionList[l];


descriptionArray[l] = descriptionElement;




function loadImages():void{

trace("inside of loadimages function.");


for(var i:int=0; i < thumbnailArray.length; i++){


populateContainers(thumbnailArray[i], i);


trace("Loaded " + thumbnailArray[i]);



var loader:Loader;

var xStart = -210;

var ypos = -34;

var currentPos = xStart;

var incrementValue = 66;


This takes in the name of the image file and

displays it within the newly created movie clip


function populateContainers(file:String, pos:int):void{

//create a movie clip to hold the image

var mc:MovieClip = new MovieClip();;, 0, 50, 51);;

mc.buttonMode = true;

mc.x = currentPos;

mc.y = ypos; = "thumb_" + pos;

mc.addEventListener(MouseEvent.CLICK, clickHandler);

loader = new Loader();

//loader.mask = imagemask;

var url:URLRequest = new URLRequest(file);

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadInitialImage);


//add the image to the movie clip



//increment the currentPos

currentPos += incrementValue;


function clickHandler(e:MouseEvent):void{

var str:String =;

var index:int = int(str.substr(6,1));

if(hasloaded) {



loader = new Loader();

loader.load(new URLRequest(bigImageArray[index]));


TransitionManager.start(this.mainWindow,{type:Fade, direction:Transition.IN, duration:2, easing:Regular.easeOut});

//setChildIndex(loader, 0);

hasloaded = true;



function loadText(index:int):void {

Object(this).imageBar.txtdescription.text = descriptionArray[index];


function loadInitialImage(event:Event):void {

if(!firstLoaded) {

loader = new Loader();

loader.load(new URLRequest(bigImageArray[0]));


TransitionManager.start(this.mainWindow,{type:Fade, direction:Transition.IN, duration:2, easing:Regular.easeIn});

//setChildIndex(loader, 0);

hasloaded = true;



firstLoaded = true;


/* This section defines the buttons that control the image bar */

Object(this).imageBar.btnBarOpen.addEventListener(MouseEvent.MOUSE_UP, openImageBar);

function openImageBar(event:MouseEvent):void {



Return to posts index

<< PREVIOUS   •   VIEW ALL   •   PRINT   •   NEXT >>
© 2018 All Rights Reserved