Preloading Images

[dannc]

I am very new to flash/actionscript. I am currently trying to work on a photo gallery that can have can have image urls passed to it as variables. That part I figured out by adding extra params in the html.

What I would like to do is this. When someon clicks on the 'next image' button, the swf looks at an array on loads the next image.
Does anyone know of a way to display a looping-Movie clip while the image is loading?

Here is the specific opensource gallery that I am using. So whatever I do needs to be able to integrate with this.
http://www.kirupa.com/developer/mx/photogallery.htm

THANK YOU!

[Webforumz Staff]

The method you are using, passing the variables to flash in the HTML, so you I assume that you have to reload the page each time to want to display a different image?

You can use loadMovie in flash to load an external SWF movie into the current movie. You can also target movieclips within your file so that the external SWF movie loads inside that movieclip. In this way, you can display a loading screen while the image is loading.

I don't see how you could do that when you're reloading the whole page each time.

[dannc]

no, it is no reloading each time.
i am using an array to store the names of the images. like this

Code: Select all

// fill this array with your pics
this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg", "image9.jpg];

well, here is the entire actionscript:

Code: Select all

//Code written by sbeener (suprabeener)
/*
   i wrote this code, but you can use and abuse it however you like.
   the methods are defined in the order which they occur to make it
   easier to understand.
*/
// variables ------------------------------------------
// put the path to your pics here, include the slashes (ie. "pics/")
// leave it blank if they're in the same directory
this.pathToPics = "animation/";
// fill this array with your pics
this.pArray = ["image0.jpg", "image1.jpg", "image2.jpg", "image3.jpg", "image4.jpg", "image5.jpg", "image6.jpg", "image7.jpg", "image8.jpg", "image9.jpg];
this.fadeSpeed = 20;
this.pIndex = 0;
// MovieClip methods ----------------------------------
// d=direction; should 1 or -1 but can be any number
//loads an image automatically when you run animation
loadMovie(this.pathToPics+this.pArray[0], _root.photo);
MovieClip.prototype.changePhoto = function(d) {
	// make sure pIndex falls within pArray.length
	this.pIndex = (this.pIndex+d)%this.pArray.length;
	if (this.pIndex<0) {
		this.pIndex += this.pArray.length;
	}
	this.onEnterFrame = fadeOut;
};
MovieClip.prototype.fadeOut = function() {
	if (this.photo._alpha>this.fadeSpeed) {
		this.photo._alpha -= this.fadeSpeed;
	} else {
		this.loadPhoto();
	}
};
MovieClip.prototype.loadPhoto = function() {
	// specify the movieclip to load images into
	var p = _root.photo;
	//------------------------------------------
	p._alpha = 0;
	p.loadMovie(this.pathToPics+this.pArray[this.pIndex]);
	this.onEnterFrame = loadMeter;
};
MovieClip.prototype.loadMeter = function() {
	var i, l, t;
	l = this.photo.getBytesLoaded();
	t = this.photo.getBytesTotal();
	if (t>0 && t == l) {
		this.onEnterFrame = fadeIn;
	} else {
		trace(l/t);
	}
};
MovieClip.prototype.fadeIn = function() {
	if (this.photo._alpha<100-this.fadeSpeed) {
		this.photo._alpha += this.fadeSpeed;
	} else {
		this.photo._alpha = 100;
		this.onEnterFrame = null;
	}
};
// Actions -----------------------------------------
// these aren't necessary, just an example implementation
this.onKeyDown = function() {
	if (Key.getCode() == Key.LEFT) {
		this.changePhoto(-1);
	} else if (Key.getCode() == Key.RIGHT) {
		this.changePhoto(1);
	}
};
Key.addListener(this);

[Webforumz Staff]

You will notice that in the functions loadPhoto and loadMeter there are references to this.onEnterFrame.

You can make a similiar reference to call a function or do whatever you want. In this case it would be a good idea to create a movieclip that starts off empty and then has your animation afterwards. Then you can use tellTarget in the functions I mentioned above to tell that movieclip to goToAndPlay() the relevant part (the loading screen) and then when it has loaded it can fade out.