Can anyone help me with adding a preloader for multiple images please?

programming flash
1

Hi all,

I have a portfolio site I’m working on which loads in images using one class that loads XML files and their data.

I would like to add some sort of functionality so that the page will only load once ALL images are loaded. At the moment it calls the image loading class once for each image meaning the images don’t all load together.

Can anyone please help?

here is my image class…

package {

import flash.events.*;
import flash.net.*;
import flash.display.*;
import flash.utils.*;
import gs.TweenMax;
import gs.easing.*;

// begin class
public class Image extends Sprite {
	
	// create variables
	public var alphaStart:Number;
	public var alphaEnd:Number;
	public var xStart:Number;
	public var yStart:Number;
	public var xEnd:Number;
	public var yEnd:Number;
	public var rotationNumber;
	public var bitMap;
	public var imageLoader:Loader=new Loader;
	public var timer;
	public var imageName;
	var xml:XML;
	
	// begin constructor
	public function Image(image:String) 
	{
		// load in new XML file
		var xmlLoader:URLLoader = new URLLoader();
		xmlLoader.addEventListener(Event.COMPLETE, onLoaded);
		
		// when the xml file is loaded
		function onLoaded(e:Event):void 
		{
			xml = new XML(e.target.data);
			// make variables from the data in the xml file
			imageName = xml.image;
			xStart = xml.xStart;
			yStart = xml.yStart;
			xEnd = xml.xEnd;
			yEnd = xml.yEnd;
			alphaEnd = xml.alphaEnd;
			alphaStart = xml.alphaStart;
			rotationNumber = xml.rotationNumber;
		}
		
		xmlLoader.load(new URLRequest(image+".xml"));

		imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, done);
		imageLoader.load(new URLRequest(image+".png"));
	}
	
	// add the images to the stage once the load is complete
	public function done(e:Event):void 
	{
		bitMap = Bitmap(imageLoader.content);//get the xmlLoaders content as a bitmap
		bitMap.smoothing = true;//turn on smoothing
		addChild(imageLoader);
		
		imageIn();
		imageLoader.x = xStart;
		imageLoader.y = yStart;
		imageLoader.alpha = alphaStart;
		imageLoader.rotation = rotationNumber;
	}
	
	// tween in the images
	public function imageIn() 
	{			
		var myTweenEnd:TweenMax = new TweenMax(imageLoader, 2, {y:yEnd, x:xEnd,ease:Quad.easeOut}); //identical to the previous line - it just looks more object-oriented.
		var myTweenAlpha:TweenMax = new TweenMax(imageLoader,1, {autoAlpha:1, ease:Expo.easeIn});
	}
	
	// tween out the images
	public function imageOut() {
		var myTween:TweenMax = new TweenMax(imageLoader, 2, {autoAlpha:0,ease:Expo.easeIn}); //identical to the previous line - it just looks more object-oriented
		var myTweenEnd:TweenMax = new TweenMax(imageLoader, 1, {y:yStart, x:xStart,ease:Quad.easeOut}); //identical to the previous line - it just looks more object-oriented.

		timer = new Timer(1000, 1);
		timer.start();
		
		timer.addEventListener(TimerEvent.TIMER_COMPLETE, removeMe);
		
		// remove the images
		function removeMe(e:TimerEvent):void 
		{
			removeChild(imageLoader);
			imageLoader = null;
		}
	}
}

}

and here is the main.as which calls the image class…

package {
import flash.display.Sprite;
import flash.text.TextField;
import flash.display.MovieClip;
import flash.events.;
import flash.net.;
import flash.utils.*;

// begin class
public class Main extends Sprite {
	
	//create variables
	public var image;
	public var back;
	public var loader;
	public var cigs;
	public var era1952:Era1952 = new Era1952();
	public var era1967:Era1967 = new Era1967();
	public var eraNav:EraNav = new EraNav();
	public var news;
	public var pencil;
	public var artwork;
	public var badge;
	public var portfolio;
	public var resume;
	public var folder:String;
	
	// begin constructor and load the first era
	public function Main()
	{
		defaultEra();
		era1952.addEventListener(MouseEvent.CLICK, fifties);
		era1967.addEventListener(MouseEvent.CLICK, sixties);
	}
	
	// load the first era (sixties)
	public function defaultEra():void 
	{
		folder = "sixties";
		everythingIn();
	}
		
	// take out the old era and load the sixties era 
	public function sixties(evt:MouseEvent):void 
	{
		folder = "sixties";
		everythingOut();
		everythingIn();
	}
		
	// take out the old era and load the fifites era 
	public function fifties(evt:MouseEvent):void
	{
		folder = "fifties";
			everythingOut();
			everythingIn();
	}
		
	// bring everything in for the new era
	public function everythingIn():void 
	{
		image = folder+"/background";
			back = new Image(image);
			addChild(back);

			image = folder+"/newspaper";
			news = new Image(image);
			addChild(news);

			image = folder+"/artwork";
			artwork = new Image(image);
			addChild(artwork);

			image = folder+"/pencil";
			pencil = new Image(image);
			addChild(pencil);

			image = folder+"/portfolio";
			portfolio = new Image(image);
			addChild(portfolio);
			
			image = folder+"/cigs";
			cigs = new Image(image);
			addChild(cigs);

			image = folder+"/resume";
			resume = new Image(image);
			addChild(resume);
			
			image = folder+"/badge";
			badge = new Image(image);
			addChild(badge);

			addChild(eraNav);
			eraNav.x = 270;
			eraNav.y = 800;
			eraNav.alpha = 0.5;

			eraNav.addChild(era1952);
			era1952.x = 75;

			eraNav.addChild(era1967);
			era1967.x = 150;
	}
		
	// take everything out of the old era
	public function everythingOut():void 
	{
		back.imageOut();
		pencil.imageOut();
		news.imageOut();
		cigs.imageOut();
		portfolio.imageOut();
		badge.imageOut();
		resume.imageOut();artwork.imageOut();
	}
}

}

thanks in advance guys, if you’d like to see what I mean please go to http://www.joegardner.co.uk/newsite/main.html

thanks!