Image Gallery Issue in As3

Question

Hi,
     I am trying to implement a simple image gallery with alpha transition using as3.  But an issue is occuring with this. After each image alpha transition, the stage becomes blank. The code i have used for image Gallery is following.CAn anybody help me. I am trying this for a week. but still i have a hope for make this working. So please help me.
import flash.display.Loader;
import flash.display.*;
import gs.TweenLite;
const TIMER_DELAY = 2000;
var totImages:Number;
var index:Number = 0;
var imgArr:Array = new Array();
var currentContainer:MovieClip = holder0;
currentContainer.alpha = 0;
var transTimer:Timer = new Timer(TIMER_DELAY);
//transTimer.addEventListener(TimerEvent.TIMER, startTransition);
var imgLoader:Loader = new Loader();
var myXML:XML = new XML();
var XML_URL:String = "images.xml";
var myXMLURL:URLRequest = new URLRequest(XML_URL);
var myLoader:URLLoader = new URLLoader(myXMLURL);
myLoader.addEventListener("complete", xmlLoaded);
function xmlLoaded(event:Event):void{
    myXML = XML(myLoader.data);
    processXML(myXML);
function processXML(xml){   
    totImages = xml.children().length();
    for(var i=0;i<totImages;i++){
        var tempVar = xml..item[i]..image;
        imgArr.push(tempVar);
    //transTimer.start();
    currentContainer = holder0;
    loadImage();
function loadImage(){
    var url = imgArr[index];
    //ImgLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgressStatus);
    imgLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, fadeInImg);   
    var fileRequest:URLRequest = new URLRequest(url);
    imgLoader.load(fileRequest);
    currentContainer.addChild(imgLoader);
function fadeInImg(e:Event){
    TweenLite.to(currentContainer,3,{alpha:1,delay:2,onComplete:switchClip});
function switchClip(){
    if(index < totImages){
        index++;
    } else {
        index = 0;
    if(currentContainer == holder0){
        currentContainer = holder1;
    } else {
        currentContainer = holder0;
    currentContainer.alpha = 0;
    MovieClip(this.root).swapChildren(holder0, holder1);   
    loadImage();
Thanks and Regards,
                     Sreelash

Answer 1

Hi Adrei, I have implemented the thumbnail button also. Its working but the problem is that thumbnail buttons and controls are placing behind the image container. How can i place the thumbnail buttons and control buttons over the image. You can view the result in the following url:
http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test/scrllGallAnd.html
The working swf is with the following url:
http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test/scrllGall.html
The code that i used for creating thumbnail is following
import flash.display.DisplayObject;
import flash.display.*;
import flash.display.Loader;
import flash.events.MouseEvent;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.text.*;
import flash.net.*;
import flash.utils.Timer;
import gs.TweenLite;
import gs.easing.*;
var xmlURL:String = "http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test1/images.xml";
var loadedImages:Array = [];
var imageURLs:Array = [];
var thumbArr:Array = [];
var imageLoader:Loader;
var prevImage:DisplayObject;
var currentImage:DisplayObject;
var thumbContainer:MovieClip;
var currThumb:MovieClip;
var prevThumb:MovieClip = null;
var showTimer:Timer;
var timerDuration:int = 5000;
var tweenDuration:int = 2;
var currentIndex:int = 0;
var activIndx:Number = 0;
var slidesHolder:Sprite;
var prvFlag:Boolean = false;
var nxtFlag:Boolean = false;
var twnFlag:Boolean = false;
var rt_lt_Flag:Boolean = true;
var myXMLURL:URLRequest = new URLRequest(xmlURL);
var xmlLoader:URLLoader = new URLLoader(myXMLURL);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
xmlLoader.load(myXMLURL);
var a:int = 90;
ctrlBox.btnPlay.buttonMode = true;
ctrlBox.nextImg.buttonMode = true;
ctrlBox.prevBtn.buttonMode = true;
ctrlBox.btnPause.buttonMode = true;
ctrlBox.btnPlay.visible = false;
ctrlBox.btnPause.addEventListener(MouseEvent.CLICK,stopScroll);
ctrlBox.btnPlay.addEventListener(MouseEvent.CLICK,startScroll);
ctrlBox.nextImg.addEventListener(MouseEvent.CLICK,shwNext);
ctrlBox.prevBtn.addEventListener(MouseEvent.CLICK,shwPrev);
function xmlLoaded(e:Event):void {
     var a:int = 45;
     e.target.removeEventListener(Event.COMPLETE, xmlLoaded);
     processXML(XML(e.target.data));
function processXML(xml:XML):void {
     var len:int = xml.children().length();
     var tempVar:String;
     for (var i:int = 0; i < len; i++) {
          tempVar = "http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test1/" + xml..item[i]..image;
          //trace(tempVar)
          imageURLs.push(tempVar);
     preload();
     createThumbs();
function createThumbs():void{
    thumbContainer = new MovieClip();
    addChild(thumbContainer);
    for(var i:int=0;i<9;i++){
        var thmbHolder:MovieClip = new MovieClip();
        thumbContainer.addChild(thmbHolder);
        //MovieClip(this.root).swapChildren(currentImage, ctrlBox);
        thmbHolder.buttonMode = true;       
        var thmb:thumbClass = new thumbClass();           
        thmbHolder.addChild(thmb);
        thumbArr.push(thmbHolder);
        thmbHolder.name = i.toString();       
        thmb.imgNum.text = (i+1).toString();       
        thmbHolder.addEventListener(MouseEvent.CLICK,showImage)
        //trace(thmb.imgNum.text)
        thmbHolder.x = i*(thmbHolder.width+5)+5;
    thumbContainer.y = stage.stageHeight - thumbContainer.height;
function showImage(e:MouseEvent):void{   
    var imgIndx:Number = e.target.parent.parent.name;
    prevThumb = currThumb;
    currThumb = e.target.parent.parent;
    currThumb.buttonMode = false;
    if(activIndx != imgIndx){
        prevThumb.buttonMode = true;
        currentIndex = imgIndx-1;
        shwNext(null);   
        activIndx = imgIndx;
    } else {
        stopScroll(null);
function preload():void{
     var len:int = imageURLs.length;
     for (var i:int = 0; i < len; i++) {
          imageLoader = new Loader();
          imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPreloadComplete);
          loadedImages.push(imageLoader);
          imageLoader.load(new URLRequest(imageURLs[i]));
function onPreloadComplete(e:Event):void {
     e.target.removeEventListener(Event.COMPLETE, onPreloadComplete);
     if (!showTimer && loadedImages[0].content &&   loadedImages[1].content ) startShow();
function startShow():void{
     currentImage = loadedImages[0];
     currentImage.alpha = 0;
     slidesHolder = new Sprite();
     var slideMask:Sprite = new Sprite();
     var gr:Graphics = slideMask.graphics;
     gr.beginFill(0xff0000);
     gr.drawRect(0, 0, currentImage.width, currentImage.height);
     gr.endFill();
     addChild(slidesHolder);
     addChild(slideMask);
     slidesHolder.x = slideMask.x = 0;
     slidesHolder.y = slideMask.y = 0;
     slidesHolder.mask = slideMask;
     slidesHolder.addChild(currentImage);
     TweenLite.to(currentImage, 10, { alpha: 1 } );
     showTimer = new Timer(timerDuration);
     showTimer.addEventListener(TimerEvent.TIMER, slideTransition);
     showTimer.start();
function slideTransition(e:TimerEvent):void{
     var nextImage:int;
     if(rt_lt_Flag == true){
         if(nxtFlag == true){
             showTimer.stop();
             nxtFlag = false;
         nextImage = currentIndex < loadedImages.length - 1 ? currentIndex + 1 : 0;
         if (loadedImages[nextImage].content) {
              currentIndex = nextImage;
              loadedImages[currentIndex].x = slidesHolder.width;
              slidesHolder.addChildAt(loadedImages[currentIndex], slidesHolder.getChildIndex(currentImage));
              prevImage = currentImage;
              currentImage = loadedImages[currentIndex];
              showCurrent();
     } else {
         if(prvFlag == true){
             showTimer.stop();
             prvFlag = false;
         nextImage = currentIndex > 0 ? currentIndex - 1 : loadedImages.length - 1;
         if (loadedImages[nextImage].content) {
             currentIndex = nextImage;
             loadedImages[currentIndex].x = -(stage.stageWidth);
             slidesHolder.addChildAt(loadedImages[currentIndex], slidesHolder.getChildIndex(currentImage));
             prevImage = currentImage;
             currentImage = loadedImages[currentIndex];
             showCurrent();
     activIndx = currentIndex;
     //trace(currentIndex)
function showCurrent():void{
     // make sure they have proper alphas
     //prevImage.alpha = 1;
     //currentImage.alpha = 0;
     //TweenLite.to(prevImage, tweenDuration, { x: -slidesHolder.width } );
     twnFlag = true;
     if(rt_lt_Flag == true){
         TweenLite.to(currentImage, tweenDuration, { x: 0, onUpdate:onTweenProgress, onComplete: removePrevious } );
     } else {
         TweenLite.to(currentImage, tweenDuration, { x: 0, onUpdate:onTweenProgress, onComplete: removePrevious } );
function onTweenProgress():void{       
    if(rt_lt_Flag == true){
         prevImage.x = currentImage.x - prevImage.width;   
    } else {
        prevImage.x = currentImage.x + prevImage.width;
function removePrevious():void {
     if (slidesHolder.contains(prevImage)) slidesHolder.removeChild(prevImage);
     twnFlag = false;
function stopScroll(e:MouseEvent):void{
    ctrlBox.btnPlay.visible = true;
    ctrlBox.btnPause.visible = false;
    showTimer.stop();
function startScroll(e:MouseEvent):void{
    rt_lt_Flag = true;
    ctrlBox.btnPlay.visible = false;
    ctrlBox.btnPause.visible = true;
    resetListener(timerDuration=5000,tweenDuration=2)
function shwNext(e:MouseEvent):void{
    if(twnFlag == false){
        rt_lt_Flag = true;
        stopScroll(null);
        nxtFlag = true;
        resetListener(timerDuration=0,tweenDuration=1)
function shwPrev(e:MouseEvent):void{
    if(twnFlag == false){
        rt_lt_Flag = false;
        stopScroll(null);
        prvFlag = true;
        resetListener(timerDuration=0,tweenDuration=1)
function resetListener(timerDuration,tweenDuration){
        showTimer.removeEventListener(TimerEvent.TIMER, slideTransition);
        showTimer = new Timer(timerDuration);
        showTimer.addEventListener(TimerEvent.TIMER, slideTransition);   
        showTimer.start();
Can you help me on how can i swap the depth of images and control buttons.
Thanks and regards,
Sreelash