Loading images into cache with as2

[Julian500]

I just posted something into the flash cs3 forum and can't figure out how to delete it so please forgive me for sort of double posting

I currently have my photography website load all the images with javascript once the user arrives at the flash page (www.julianwalter.com/flash.html), that way they can click around within galleries and all the photos appear with a smooth transition and there is no wait time. however, if all the images are still being loaded and the user clicks one that hasn't loaded yet, then the image won't appear on screen until the javascript arrives at that file.

so I realized the best thing to do would be try to load all the images in a gallery when the user clicks on that gallery name.

I've tried searching for 'preloading' but all that shows up are the preloader bars that I don't care about. I just want to find a way to bring these images from a specific gallery in so that they are ready to go when the user clicks on a thumbnail. I'm sure it's just a loadMovie("") type thing into a non-visible movie clip, but I can't seem to make anything work.

can anybody help me?

thank you so much!

[Swooter]

use MovieClipLoader:

var $imageLoader:MovieClipLoader = new MovieClipLoader();
var $imageListener:Object = new Object();

$imageListener.onLoadInit = function($target:MovieClip):Void {
  trace($target + " has loaded");
}

$imageLoader.addListener($imageListener);

$imageLoader.loadClip("some.jpg", myMovieClip);

Or a bit more advanced:

var $imageLoader:MovieClipLoader = new MovieClipLoader();
$imageLoader.addListener({onLoadInit:function($target:MovieClip):Void {
  if ($target.onLoad) $target.onLoad();
}});

MovieClip.prototype.loadMovie2 = function($src:String):Void {
  $imageLoader.loadClip($src, this);
}

myMovieClip.loadMovie2("some.jpg");
 
myMovieClip.onLoad = function() {
  // image has loaded
}

[Julian500]

hey swooter thank you so much for the help. unfortunately I'm real basic with flash and can't really figure out what's going on with your code. I have a portraitBtn button that loads portraitMC (the movieclip that contains the gallery). where do I put the script? and how do I load all fifteen images? (looking at the first/simpler code)

thanks a lot for your time I really appreciate it

[Swooter]

The MovieClipLoader loads an image into a MovieClip and triggers the onLoadInit event (using the listener) when the image is loaded.

The onLoadInit handler function has an argument ($target in my example) which contains a reference to the MovieClip that the image was loaded into.

So when loading multiple images, you can use the same MovieClipLoader for all images.

For example:

var myImages:Array = ["pic1.jpg", "pic2.jpg", "pic3.jpg"];
var loadCount:Number = 0;
var $imageLoader:MovieClipLoader = new MovieClipLoader();
$imageLoader.addListener({onLoadInit:function($target:MovieClip):Void {
  loadCount++;
  if ( loadCount == myImages.length ) {
    trace("All images were loaded");
  }
}});
for ( var i = 0; i < myImages.length; i++ ) {
  // Load an image and put it in a new MovieClip inside 'imageContainer'
  $imageLoader.loadClip(myImages[i], imageContainer.createEmptyMovieClip("pic"+i, i));
}