Transition between two images

Question

I'm developing an ActionScript 3.0 app for Blackberry Playbook.

I'm using Loader Class to show an image.

I want to show another image, at the same place, when the user clicks on this image.

How can I do that? I would like to make a transition between these two images. The second image will go from 0 alpha to 100 alpha.

Answer 1

It all depends on the transition you want to do. For the simplest alpha, you can go through a Tweener engine like irot suggested, or you can do something simple yourself.

Simple: Basically, when you click on the image, load in the next one (or have it already loaded). Start an enterframe listener to load it up. Something like:

// we're assuming that "image2" is the second image and it has an alpha
// of 0.0 and visible of false. "image1" is the first image and currently 
// on stage

// the on click handler for the image
private function _onImageClick( e:MouseEvent ):void
{
    // add a enter frame to the stage - I'm going to assume you
    // have access through this.stage
    this.stage.addEventListener( Event.ENTER_FRAME, this._onEnterFrame );

    // make our second image visible so we can fade it up
    this.image2.visible = true;
}

// called every frame
private function _onEnterFrame( e:Event ):void
{
    // image2 is the second image
    this.image2.alpha += 0.05; // slow fade

    if( this.image2.alpha >= 1.0 )
    {
        this.image2.alpha = 1.0;

        // hide the first image
        this.image1.alpha = 0.0;
        this.image1.visible = false;

        // remove the enter frame event listener
        this.stage.removeEventListener( Event.ENTER_FRAME, this._onEnterFrame );
    }
}

Bit more complicated: Check out the BitmapData class and it's merge() or pixelDisolve() functions: http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/BitmapData.html