Get Adobe Flash player

SlideShow Class

What the SlideShow Class does is very simple. You provide an array of images and it displays them one at a time with an Interval that you set. The transition between images is a simple fade provided by another Class called Tweener. How you provide the array of images is immaterial; they can be hard coded, taken from an XML document or pulled in from a database, but the images need to be on your server, or locally, in a separate folder. They are not part of your main movie.

What you need

You will need the Tweener Class. Download it Here.

You will need the SlideShow Class. Download it Here.


To use the Class you add this line of code in your flash movie's Main Class:

import ca.xty.myUtils.SlideShow;
var slideShow:Slideshow = new Slideshow(picArray, 30000, 170, 10);
addChildAt(slideShow, 0);

First you import the class. Then you create a variable to represent the slideshow. You pass the following parameters to the Class: The array of images; The Interval between images, in milliseconds; The x position; The y position.

As explained above, the images array can be made up from any of several methods.

The Interval you set can be any time limit you want, but take into consideration the size of the images you will be displaying. If your images are 40 or 50 kb they will download quickly and you can set a relatively short interval. But, if your images are 1 Mb, then you will run into problems if the interval is too short. It could call the next image in line before the last image called has fully downloaded.

The x and y positions are where you want the slideshow to appear in your main movie.

When you add the slideshow to the display list, it is most often handy to use the addChildAt() function, with the second parameter set to zero so that the images will appear underneath any frame you might be using. If they simply appear on the stage with nothing over them, you can use the addChild() function instead.

The SlideShow Class

    	package ca.xty.myUtils {
	import flash.display.*;
	import flash.geom.Matrix;
	import flash.utils.*;
	import flash.filters.BitmapFilterQuality;
	import caurina.transitions.Tweener;
	public class Slideshow extends Sprite {
		private var _loader:Loader = new Loader();
		private var picArray:Array;
		private var myInt:int;
		private var picNum:int = -1;
		private var image:Bitmap;
		private var firstLoad:Boolean = true;
		private var myClip1:MovieClip = new MovieClip();
		private var myClip2:MovieClip = new MovieClip();
		private var clipX:int;
		private var clipY:int;
		private var startClip:Timer;
		private var picTimer:Timer;
		public function Slideshow(pArray:Array, interval:int, myClipX:int, myClipY:int){
			picArray = new Array();
			picArray = pArray;
			myInt = interval;
			clipX = myClipX;
			clipY = myClipY;
			myClip1.x = clipX;
			myClip1.y = clipY;
			myClip2.x = clipX;
			myClip2.y = clipY;
			myClip2.alpha = 0;
			_loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onComplete);
		private function startNow():void{
			startClip = new Timer(250, 1);
			startClip.addEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
		private function onTimerComplete(event:TimerEvent):void{
			_loader.load(new URLRequest(picArray[picNum]));
			startClip.removeEventListener(TimerEvent.TIMER_COMPLETE, onTimerComplete);
		private function startShow():void{
			picTimer = new Timer(myInt, 1);
			picTimer.addEventListener(TimerEvent.TIMER_COMPLETE, showTime);

		private function showTime(event:TimerEvent):void{
			if(picNum >= picArray.length){
				picNum = 0;
			_loader.load(new URLRequest(picArray[picNum]));
		private function onComplete(event:Event):void{
			myClip2.alpha = 0;
			var loadedImage:Bitmap = Bitmap(_loader.content);
			var bitmap:BitmapData = new BitmapData(loadedImage.width, loadedImage.height, false, 0xffffffff);
			bitmap.draw(loadedImage, new Matrix());
			image = new Bitmap(bitmap);
			Tweener.addTween(myClip2, {alpha:1, time:1.7, transition:"easeOutExpo", onComplete:botLoad});
		private function botLoad():void{


The great thing about Classes is that you don't need to know what they do. You only need to know what parameters to pass them and they do all the heavy lifting. However, if you are going to write your own classes, or alter them to suit your purposes, it's handy to have some idea of what is going on.

In the SlideShow class, you are bringing an array of images that you want to display one after the other in a continuous loop. First of all we import all the features the class will require.

Next, we set up the variables the class will use. Notice that we have two MovieClips - myClip1 and myClip2. Rather than leave a blank when we change images, what these two MovieClips do is sit one on top of the other. Once the image is loaded into myClip2, we call the function botLoad() and put the same image in myClip1. On the next cycle when we change the image, the first image loaded is removed from myClip2 and replaced by the second image, whose initial alpha is set to 0. But, because we have the first image still in myClip1, there is no blank space and it appears that the second image fades in, in place of the first image. I just think it looks nicer than an abrupt change.

The first function we call after setting the variables, is the startNow() function, which is used to get the ball rolling and load the first image immediately. It's timer uses a value of 250 milliseconds (1/4 second). After the first image has loaded, and we have put a duplicate of it in myClip2, the botLoad function starts the main timer with the startShow() function. This function has a second timer which makes use of the Interval parameter you set when you called the function. The subsequent images will now load at intervals of 30 seconds, or whatever you chose, indefinitely. And that's all there is to it.

Get Adobe Flash player


No Comments