Waiting for a function/process to finish.

Report · Jan 10, 2011

I've written code for a simple image gallery where you click a button and it loads an image into a UILoader component.

Problem is I want to add fading to it without any glitches.

I want it to fade out. load the image into UILoader componet, then upon completion fade back in. I'm using a dynamic tween for this. I also want to fade back out when an image is occupying the UILoader and then load a new image.

PROBLEM is that I have a separate function that creates a dynamic tween for the fade. When it fades out, I want to load new images and then have it fade back in using the same fade function that creates a tween.

How would I got about accomplishing this?

Also I would like my next button to be disabled while it's loading the images, so the person cant hammer on the button constantly and glitch out the fading and break it.

Report · Jan 10, 2011

Listen to UILoader and on Event.COMPLETE start the fade-in tween. If you're using the built-in fl.transitions.Tween you listen to TweenEvent.MOTION_FINISH for stat loading. TweenLite has onComplete property that you can specify the function to invoke.

Report · Jan 10, 2011

Look into the loading and tweening events already identified as far as configuring the sequencial fade-load-fade processing goes. For the button you can set the mouseEnabled property of that button to false at the beginning of that process (when it gets clicked), and then set it to true again when the fade in completes.

Report · Jan 10, 2011

Which object to I listen to for a TweenEvent if I made it dynamically? (There's the UILoader and the Tween and I think I have problems with one of them)

Also my problem is my Event Listeners are stepping on each other and at some point some images fade out, and some fade in at the same time. Or I load a new set of images and they all fade out. (also I've looked ino both of your suggestions, for the fading, before making my first post and I'm still having a bit of problems it seems)

It's really confusing me as to the execution process because I have some stuff stepping on each other and I'm wondering how do I make it work without stepping on one another.

here's some unfinished source code I'm working on. There's lots of commented out sections I'm looking back upon to see what's wrong with them so it's of course not done yet.

http://tinyurl.com/4txlfn4

Report · Jan 10, 2011

You would attach the listener to the Tween, eg:

myTween.addEventListener(TweenEvent.MOTION_FINISH, fedeInComplete);

I suggest you to start with one UILoader and the navigation buttons. Once that's done, it's easy to add any number of UILoaders as it would make no difference.

Report · Jan 10, 2011

You have to think sequencially as far as how you implement the code... first you trigger the fade out tween, assigning the MOTION_FINISH listener to the tween,

var fadeOut:Tween = ....

fadeOut.addEventListener(TweenEvent.MOTION_FINISH,.....

and when that completes you use the tween event handler function to trigger the loading of the next image, with its listener for loading COMPLETE, which in turn triggers the fade in tween.

I won't download the files mainly because they are probably in a version I cannot open, but also because they are of fairly significant size. It is best to show your code in your postings.

Report · Jan 10, 2011

okay here's my code. (I posted my FLA because that's what we did it all the time in the Macromedia days, I'm not asking anyone to do it for me, only point out what I'm doing wrong. I also posted it so you can have some context to the following code.)

I'm playing around with the tween event listeners and I'm still not geting the results I want. The images fade out.. and stay faded out when I hit the next button.

var path:String = "l4d_published";
var currentPage:int = 1; //number of current page in the gallery

/*instance names to loop through
you can use this array to loop through
the instance names instead of referring to each 1 directly.*/
var insArray:Array = [tn1,tn2,tn3,tn4,tn5,tn6,tn7,tn8,tn9,tn10,tn11,tn12,tn13,tn14,tn15];
//quantity of images per page [created from amount of elements in array]
var pageLimit:int = insArray.length;


var fileData:Number; //integer for amount of files
var imgData:String; //string of raw data
var imgArray:Array; //array for parsed string


var myTextLoader:URLLoader = new URLLoader();
myTextLoader.dataFormat=URLLoaderDataFormat.VARIABLES;
myTextLoader.addEventListener(Event.COMPLETE,onLoaded);


trace(describeType(tn2));

//sets up everything
function Init():void {
     pagebwd.visible = false;
     
     for (var i:Number = 0; i < pageLimit; i++) {
          insArray.alpha = 0;
          insArray.addEventListener(Event.COMPLETE, fadeImgs);
          insArray.addEventListener(TweenEvent.MOTION_FINISH, transitionIn);
     }
}
Init();


function onLoaded(e:Event):void {
     trace(e.target.data.Files);
     trace(e.target.data.images);

     //assigns the loaded data to variables
     fileData = e.target.data.Files;
     imgData = e.target.data.images;
     
     //array of images made from the one imgData string
     imgArray = imgData.split(".jpg,");

     trace(fileData);
     trace(imgArray);

     //first population of thumbnails
     popImages();
     createListeners();
//     trace(describeType(insArray[7]));
     popfullImage(String(tn2.source));
//     pagefwd.addEventListener(MouseEvent.CLICK, Navigation);
//     trace(fadeImgs("fadein",tn2));
     pagefwd.addEventListener(MouseEvent.CLICK, Navigation);
     pagebwd.addEventListener(MouseEvent.CLICK, Navigation);
}

myTextLoader.load(new URLRequest("l4d.txt"));

function popImages():void { //populates image thumbnails
     var j:Number;
     for (var i:Number = 0; i < pageLimit; i++) {
//          if (insArray.alpha == 1 && (insArray !== null || undefined)) {
//               insArray.dispatchEvent(new Event(Event.COMPLETE));
//               continue;
//          }/* else if (insArray.alpha == 0 && (insArray !== null || undefined)) {
//               insArray.dispatchEvent(new Event(Event.COMPLETE));
//               continue;
//          }*/
          j = i + ((currentPage - 1) * pageLimit);
          if (imgArray == undefined || null) {
               insArray.visible = false;
          } else {
               insArray.visible = true;
               insArray.source = path + "/" + imgArray + "_tn.jpg";
               trace(insArray.source);
          }
     }
}

function createListeners():void { //appends listeners to all inst.
     for (var i:Number = 0; i < pageLimit; i++){
          insArray.addEventListener(MouseEvent.CLICK, displayImage);
     }
}

function Navigation(e:Event):void { //adjusts current page
     if (e.currentTarget == pagefwd) {
          currentPage++
          popImages();
     } else if (e.currentTarget == pagebwd) {
          currentPage--
          popImages();
     }
     
     if (currentPage == 1) {
          pagebwd.visible = false;
     } else {
          pagebwd.visible = true;
     }
     if (currentPage >= (fileData / pageLimit)) {
          pagefwd.visible = false;
     } else {
          pagefwd.visible = true;
     }
}

function popfullImage(str_input:String):String { //converts thumbnail
     /*replace does not alter original string.    //to full address
     access this function with popfullImage(String(input));*/
     trace(str_input.replace("_tn.jpg", ".jpg"));
     return (str_input.replace("_tn.jpg", ".jpg"));
}

//classes require to create a dynamic tween
import fl.transitions.Tween;
import fl.transitions.easing.*;
import fl.transitions.TweenEvent;

//myTween declared outside of function to avoid freezing issues.
var myTween:Object;
function fadeImgs(o:Event):void {
     //fades in if target is transparent
     if (o.currentTarget.alpha < 1) {
          myTween = new Tween(o.currentTarget, "alpha", None.easeOut, 0, 1, 1, true);
     //fades out if target isnt transparent
     } else if (o.currentTarget.alpha == 1) {
          myTween = new Tween(o.currentTarget, "alpha", None.easeOut, 1, 0, 1, true);
     }
}

function transitionIn(e:Event):void {
     if (e.currentTarget.alpha == 0) {
          popImages();
     }
}

function displayImage(src:Event):void {
     trace("Click!");
     }

Report · Jan 10, 2011

Here's an example of how I'd do:

import fl.transitions.Tween;
import fl.transitions.easing.None;

var path:String="l4d_published";
var currentPage:uint;
var insArray:Array=[tn1,tn2,tn3,tn4,tn5,tn6,tn7,tn8,tn9,tn10,tn11,tn12,tn13,tn14,tn15];
var imgArray:Array;
var tweenArray:Array=[];

for (var i:uint = 0, len:uint = insArray.length; i < len; i++) {
    insArray.visible=false;
    insArray.addEventListener(Event.COMPLETE, imageLoadComplete);
}

pagefwd.visible=pagebwd.visible=false;

pagefwd.addEventListener(MouseEvent.CLICK, fwdClick);
pagebwd.addEventListener(MouseEvent.CLICK, bwdClick);

function fwdClick(e:MouseEvent):void {
    setPage(++currentPage);
}

function bwdClick(e:MouseEvent):void {
    setPage(--currentPage);
}

var myTextLoader:URLLoader = new URLLoader();
myTextLoader.dataFormat=URLLoaderDataFormat.VARIABLES;
myTextLoader.addEventListener(Event.COMPLETE, textLoadComplete);
myTextLoader.load(new URLRequest("l4d.txt"));

function textLoadComplete(e:Event):void {
    imgArray=e.target.data.images.split(".jpg,");
    setPage(1);
}

function setPage(page:uint):void {
    currentPage=page;

    pagebwd.visible=(currentPage!=1);
    pagefwd.visible = (currentPage<Math.ceil(imgArray.length/insArray.length));

    for (var j:uint = 0, tc:uint = tweenArray.length; j < tc; j++) {
        tweenArray.fforward();
    }
    tweenArray=[];

    for (var i:uint = 0, len:uint = insArray.length; i < len; i++) {
        var imgID:uint = (currentPage - 1)*len + i;
        if (imgID>=imgArray.length-1) {
            insArray.visible=false;
        } else {
            insArray.visible=true;
            insArray.alpha=0;
            insArray.source=path+"/"+imgArray[imgID]+"_tn.jpg";
        }
    }
}

function imageLoadComplete(e:Event):void {
    tweenArray.push(new Tween(e.currentTarget,"alpha",None.easeOut,0,1,1,true));
}

Report · Jan 10, 2011

thanks. I guess I'll have to get rid of the fade out then. Thanks for the help I appreciate it. I'll be looking over your code to implement it into mine.. I notice you know a couple of ways to say essentially the same thing, but shorter. Also, do 1s and 0s still = true or false in ActionScript 3? Thanks, I really appreciate the help as I've been toying around with the code a lot.

Report · Jan 11, 2011

> I guess I'll have to get rid of the fade out then

Not necessary - if you want it you can put that in, although it won't add much to the overall experience. You need to be careful with the Tween though - I don't think Adobe Tween has cancel/override fasility so it can get really messy. That's why us professionals use Jack Doyle's http://www.greensock.com/tweenlite/ which is just simply better in every department. If you want post your original FLA again I'll add the fade out for you (time permitting).

> say essentially the same thing, but shorter

I don't like typing so I write shorter code

> 1s and 0s still = true or false in ActionScript 3?

Ask Flash:

trace("0: " + Boolean(0), "1: " + Boolean(1));
// traces
// 0: false 1: true

Waiting for a function/process to finish.

1 Correct answer