Question

Very simple question. Take a look at the code below. It’s a very simple loader with a progress bar. The progress bar is a symbol on the stage called “bar”.

All I want is to fade out the bar when it finishes loading, and fade in the image that loads. I’ve tried a number of approaches without much luck.

    var loader: Loader = new Loader();
addChild(loader);

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, completeHandler);
function completeHandler(evt:Event):void {
};

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progressHandler);

function progressHandler(evt:ProgressEvent):void {
    var percent: int = Math.round(evt.bytesLoaded/ evt.bytesTotal * 100);
    bar.width = percent;
};

var req:URLRequest = new URLRequest("encs1.jpg");

loader.load(req);

Thanks in advance to anyone who can give me any pointers!

Answer 1

GTween

Tweener

TweenLite

Try one of these libraries. Flash has a built in library for Tweening, fl.transitions.Tween, but it not nearly as nice as these. All three mentioned have a very similar API as well.

For your example, you would do this (with Tweener):

function completeHandler(evt:Event):void {
    Tweener.addTween(bar, {alpha:0, transtion:"easeOutQuad", time:.5});
    addChild(loader.content);
    loader.content.alpha = 0;
    Tweener.addTween(loader.content, {alpha:1, transition:"easeInOutQunit", time:.5, delay:.5});  
};

This will tween the bar to alpha 0 taking .5 seconds, tween the loader’s content (the image) to alpha 1 taking .5 seconds, after a delay of .5 seconds, so the bar fades out and immediately the image fades in.

Cheat Sheet for Tweener easing functions