Update: More advanced class based version now available.

A common technique used in photo galleries is to allow a before and after preview of an image. This is achieved by preloading both images and when the user rolls over the affter, the before is displayed.

In this tutorial you will learn how to create this effect very simply using ActionScript, but the overall concept can be adapted to previous versions.

Start off by creating a new Flash file (FLA) and saving that. Then find two images to load, which in this case will be named "before.jpg" and "after.jpg" for simplicity.

Once the new file is created and the images are ready to be loaded, open the Actions panel and begin creating the code for this effect.

Create an array which will hold the image references, this is done so you can expand the example, but if you prefer you can skip the array and enter the image paths directly within the URLRequest.

var images:Array = ["before.jpg", "after.jpg"]

The next step is to create the image loaders for each image. These will simply be Loader instances

// image 1
var image1:Loader = new Loader();
image1.load(new URLRequest(images[0]));
addChild(image1);

// image 2
var image2:Loader = new Loader();
image2.load(new URLRequest(images[1]));
image2.alpha = 0;
addChild(image2);

As you can see, those blocks of code are very similar and could be converted into a function which would be easier to duplicate. Feel free to do that, but its certainly not required.

The next step is to attach the Event handlers for the mouse movements on the stage. In this case, you will assign a roll over and roll out event.

stage.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
stage.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

The final bit of code is the creation of the event handlers. These functions are responsible for changing the alpha property on each of the image boxes, depending on whether the mouse is rolling over or off the image.

function mouseOverHandler(e:MouseEvent):void
{
	image1.alpha = 0;
	image2.alpha = 1.0;
}

function mouseOutHandler(e:MouseEvent):void
{
	image2.alpha = 0;
	image1.alpha = 1.0;	
}

The last step is to save and test the file. You should see the image load in, and when you mouse over, the other image should appear. Mouse off and the original should re-appear. This example was basic, but should explain the overall concept. A good way to expand this would be to using the Tween class and create a subtle fade, rather than a sharp alpha change.

I hope you enjoyed this tutorial, here is the completed code for easy copying/pasting. Enjoy!

var images:Array = ["before.jpg", "after.jpg"]

// image 1
var image1:Loader = new Loader();
image1.load(new URLRequest(images[0]));
addChild(image1);

// image 2
var image2:Loader = new Loader();
image2.load(new URLRequest(images[1]));
image2.alpha = 0;
addChild(image2);

stage.addEventListener(MouseEvent.MOUSE_OVER, mouseOverHandler);
stage.addEventListener(MouseEvent.MOUSE_OUT, mouseOutHandler);

function mouseOverHandler(e:MouseEvent):void
{
	image1.alpha = 0;
	image2.alpha = 1.0;
}

function mouseOutHandler(e:MouseEvent):void
{
	image2.alpha = 0;
	image1.alpha = 1.0;	
}