Skip to main content
Inspiring
December 23, 2009
Answered

Image Gallery Issue in As3

  • December 23, 2009
  • 1 reply
  • 2659 views

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..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

This topic has been closed for replies.
Correct answer Andrei1-bKoviI

Here is a code that should work for you. Note that it is a stripped version of a class code, so while removing class related items, some bugs may be introduced. When in class code worked perfectly.



import flash.display.DisplayObject;
import flash.display.Loader;
import flash.events.Event;
import flash.events.TimerEvent;
import flash.net.*;
import flash.utils.Timer;
import gs.TweenLite;
    
var xmlURL:String = "http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test/images.xml";
// array of loaded images
// you don't have to reload them every time
// unless you want to free memory
// which will involve additional coding
// and more complex logic
var loadedImages:Array = [];
// array of images urls
var imageURLs:Array = [];
// image loader
var imageLoader:Loader;
// previously displayed image
var prevImage:DisplayObject;
// current image
var currentImage:DisplayObject;
// slide show timer
var showTimer:Timer;
// timer duration
var timerDuration:int = 3000;
// tween duration
var tweenDuration:int = 2;
// index of the current slide
var currentIndex:int = 0;

var myXMLURL:URLRequest = new URLRequest(xmlURL);
var xmlLoader:URLLoader = new URLLoader(myXMLURL);
xmlLoader.addEventListener(Event.COMPLETE, xmlLoaded);
xmlLoader.load(myXMLURL);

function xmlLoaded(e:Event):void
{
     // allow for GC
     e.target.removeEventListener(Event.COMPLETE, xmlLoaded);
     processXML(XML(e.target.data));
}

function processXML(xml:XML):void {
     var len:int = xml.children().length();
     // declare variable once
     var tempVar:String;
     for (var i:int = 0; i < len; i++) {
          tempVar = "http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test/" + xml..item..image;
          imageURLs.push(tempVar);
     }
     preload();
}

function preload():void
{
     // preload the rest of the images
     // in this case the logic is that
     // because slide show is automatic
     // it may make sense to have all of them
     // in memory - they are going to be there
     // eventually anyway
     var len:int = imageURLs.length;
     for (var i:int = 0; i < len; i++) {
          imageLoader = new Loader();
          imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPreloadComplete);

          // hold loader in the array - it will be reused
          loadedImages.push(imageLoader);
          imageLoader.load(new URLRequest(imageURLs));
     }    
}

function onPreloadComplete(e:Event):void
{
     // prepare for GC
     e.target.removeEventListener(Event.COMPLETE, onPreloadComplete);
     // if timer is not instantiated - show is not started
     // AND first two were preloaded - meaning they have content
     if (!showTimer && loadedImages[0].content &&   loadedImages[1].content ) startShow();
}

function startShow():void
{
     // place first image on display list
     currentImage = loadedImages[0];
     currentImage.alpha = 0;
     addChild(currentImage);
     TweenLite.to(currentImage, 1, { alpha: 1 } );
     // start show timer
     showTimer = new Timer(timerDuration);
     showTimer.addEventListener(TimerEvent.TIMER, slideTransition);
     showTimer.start();
}

function slideTransition(e:TimerEvent):void
{
     // in case sequence is important - don't change
     // current index yet but check against
     // separate variable
     var nextImage:int = currentIndex < loadedImages.length - 1 ? currentIndex + 1 : 0;
     // check if image was loaded

     // if it is not loaded - will wait until next timer event round
     if (loadedImages[nextImage].content) {
          // now we can change current index
          currentIndex = nextImage;
          // place it behind current image
          addChildAt(loadedImages[currentIndex], getChildIndex(currentImage));
          // swap them
          prevImage = currentImage;
          currentImage = loadedImages[currentIndex];
          // show transition
          showCurrent();
     }
}

function showCurrent():void
{
     // make sure they have proper alphas
     prevImage.alpha = 1;
     currentImage.alpha = 0;
     TweenLite.to(prevImage, tweenDuration, { alpha: 0 } );
     TweenLite.to(currentImage, tweenDuration, { alpha: 1, onComplete: removePrevious } );
}

function removePrevious():void {
     if (this.contains(prevImage)) removeChild(prevImage);
}

1 reply

Inspiring
December 23, 2009

Are you saying that when all the transitions are complete, the last image must visible? In this case, following how you do it, you may want to implements a counter of transitions. If the counter hits the length of the array of images - don't do transitions. For instance (there bugs - you will need to fix them):

// somewhere in the beginning

var transitionCounter:int = 0;

// later

function switchClip(){

     transitionCounter++;

     // the rest of the code

}

function fadeInImg(e:Event){

     // if there is mor to fade - call onComplete

     // otherwise - don't

     if(transitionCounter < imgArray.length){

          TweenLite.to(currentContainer,3,{alpha:1,delay:2,onComplete:switchClip});

     }

     else{

          TweenLite.to(currentContainer,3,{alpha:1,delay:2});

     }

  
}

SreelashAuthor
Inspiring
December 24, 2009

Hi,

     The problem is occuring not after all the transitions are completed. It's occuring between each transition of image. You can find the image gallery on the following url.

http://www.creative-showcase.co.uk/BirdStudiosOld/Videos/test/imgGall_23-12-09.html

Please help me if u can.

Thanks and regards,

               Sreelash

Participant
December 24, 2009

Hii,

This might be because everytime you do an url request for each image it takes time to load an image and fire the complete event and this may be because of the size of the image that is being loaded.

Happy Coding.

Thanks

rich2sonu