Very simple AS question about fade-ins and fade-outs

Question

Hi there,

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

I don't really do much flash development but a colleague of mine loves GTween for simple animation.

http://www.gskinner.com/libraries/gtween/

If you check the demos you will see you can do some advanced stuff but it is suppose to be very simple to do basic fading in and out too. Below is an example of basic animation, set the vars itemToTween, secondsToAnimate and change alpha to be the property you wish to animate the current property to.

new GTween(itemToTween, secondsToAnimate, { alpha: 1 }, { ease:Sine.easeOut } );

Hope that helps you out a little until someone with more knowledge can help.

Answer 2

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