Make Your Own Cross-Fading Slideshow

Posted at July 13, 2007

UPDATE: This post demonstrates how to build a cross-fading slide show with embedded images. Since it was written I’ve posted another cross-fade sample that utilizes XML. If you’d rather see that one, click here.

Ever wonder how to get that way-cool cross fading effect in your slide shows? Me too! So I sat down the other day and started toying around with the Tween class and a short time later I arrived at the solution below.

Download the source here

I start off by importing the Tween and easing classes. The first line imports the Tween class and the second imports all of the easing classes:

import mx.transitions.Tween;
import mx.transitions.easing.*;

Next I define a few required variables:

var currClip:MovieClip = pic1;
var arrPosition:Number = -1;
var picArray:Array = new Array("pic1","pic2","pic3","pic4","pic5");
var showpicTime:Number = 5;
var tweenTime:Number = 3;

In this example, cross fading was achieved by alternating two movie clips named pic1 and pic2. When one fades in, the other fades out and vice versa. I use currClip to define the active clip (the clip that last faded in) currClip. More about that later. The cross-fade is actually one clip tweening from an _alpha of 100 to an _alpha of 0 while the other tweens from 0 to 100.

For simplicity, I’m using embedded images with defined Identifiers and placing those identifiers in a hard-coded array named picArray. The arrPosition variable will keep track of which image should be displayed next. The code can be easily modified to use external images and XML.

showPicTime defines the number of seconds that each image will be display at 100% alpha before fading out and tweenTime is the number of seconds it will take for the tween to complete.

My next step is to attach the initial images and fade the first in:

pic1.attachMovie(picArray[++arrPosition],"pic",_root.getNextHighestDepth());
pic2.attachMovie(picArray[++arrPosition],"pic",_root.getNextHighestDepth());
pic1._alpha = pic2._alpha = 0;
new Tween(pic1, "_alpha", Regular.easeIn, 0, 100 , 3, true);
var picInt:Number = setInterval(crossfade,showpicTime*1000);

++arrPosition is a quick way to increase the value of arrPosition by one while using it. Since I initially set arrPosition to -1, the first statement is actually attaching the image defined in the first (0) element of picArray and the second statement is attaching image in the the second (1) element.

Next I set the _alpha of both clips to 0 and begin the initial Tween on the pic1. The “new Tween” line tweens the _alpha property of pic1 from 0 to 100 over the course of 3 seconds. The ‘true’ at the end makes the tween happen over seconds. Changing that value to false would result in the tween taking place over a number of frames instead of seconds.

The variable picInt causes the function named crossfade to fire every 5000 milliseconds (5 seconds). This interval can be changed by changing the value of showpicTime.

The final piece of the puzzle is to define the crossfade function:

function crossfade() {
	if (currClip == pic1) {
		var tween1:Tween = new Tween(pic2, "_alpha", Regular.easeIn, 0, 100 , tweenTime, true);
		var tween2:Tween = new Tween(pic1, "_alpha", Regular.easeIn, 100, 0 , tweenTime, true);
		if(++arrPosition >= picArray.length) {arrPosition = 0;}
		tween2.onMotionFinished = function() {
			pic1.pic.removeMovieClip();
			pic1.attachMovie(picArray[arrPosition],"pic",pic1.getNextHighestDepth());
		}
		currClip = pic2;
	} else {
		var tween1 = new Tween(pic1, "_alpha", Regular.easeIn, 0, 100 , tweenTime, true);
		var tween2 = new Tween(pic2, "_alpha", Regular.easeIn, 100, 0 , tweenTime, true);
		if(++arrPosition >= picArray.length) {arrPosition = 0;}
		tween2.onMotionFinished = function() {
			pic2.pic.removeMovieClip();
			pic2.attachMovie(picArray[arrPosition],"pic",pic1.getNextHighestDepth());
		}
		currClip = pic1;
	};
};

The first thing the function does is check which clip is the active clip so it knows which clip to fade in and which clip to fade out. It then starts the tween for both pic1 and pic2. The clip that is fading out is monitored by an onMotionFinished event which removes the existing image and attaches the next image in the array as soon as the fade out is complete. That way, the new image is ready to fade in once the active image begins to fade out.

The final line of code sets the value of currClip to the active clip so the appropriate tweens run the next time crossfade is fired.

-rG

flash

If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.

Comments

49 Responses to “Make Your Own Cross-Fading Slideshow”

Leave Comment

(required)

(required)