Loading Multiple Images
February 6, 2009 by: smonteThis tutorial will show you how to load multiple images with ActionScript 3. We will also add a simple preloader to each image. Click the “Start Loading” button to see the images appear! After this tutorial you’ll be able to create your own cool image galleries with ActionScript 3. Start your Flash and let’s get started!
Note: You will need TweenLite to fully complete this tutorial. It is used in the animation part of the Flash movie.
Setting up the environment
1. Create a new Flash document of size 300×200.
2. Get twenty (20) images that are 40×40 pixels. You can also use the one’s that I have below.
3. Draw a star on the stage (use the PolyStar Tool). Make it size 16×16 pixels. I have used white fill and #FF8800 for the stroke color.
4. Convert the star to a movie clip. Name it “Star Preloader” and set the registration point to the center.
5. Linkage the movie clip to a class named “StarPreloader”. If you are unfamiliar with linkage, please see the ActionScript 3 External Classes tutorial.
6. Remove the star movie clip from the stage.
Moving to Actionsctipt 3
7. In the first frame of your Flash movie, type the following code.
//Import TweenLite import gs.*; import gs.easing.*; //Create an array which will contain all image URLs var imageURLs = new Array(); //This array will contain all the image holders var imageHolders = new Array(); //We want to know how many images have been loaded var loadedImages:Number = 0; //Add all of our image URLs into the array imageURLs.push("https://flashmymind.com/images/image1.gif"); imageURLs.push("https://flashmymind.com/images/image2.gif"); imageURLs.push("https://flashmymind.com/images/image3.gif"); imageURLs.push("https://flashmymind.com/images/image4.gif"); imageURLs.push("https://flashmymind.com/images/image5.gif"); imageURLs.push("https://flashmymind.com/images/image6.gif"); imageURLs.push("https://flashmymind.com/images/image7.gif"); imageURLs.push("https://flashmymind.com/images/image8.gif"); imageURLs.push("https://flashmymind.com/images/image9.gif"); imageURLs.push("https://flashmymind.com/images/image10.gif"); imageURLs.push("https://flashmymind.com/images/image11.gif"); imageURLs.push("https://flashmymind.com/images/image12.gif"); imageURLs.push("https://flashmymind.com/images/image13.gif"); imageURLs.push("https://flashmymind.com/images/image14.gif"); imageURLs.push("https://flashmymind.com/images/image15.gif"); imageURLs.push("https://flashmymind.com/images/image16.gif"); imageURLs.push("https://flashmymind.com/images/image17.gif"); imageURLs.push("https://flashmymind.com/images/image18.gif"); imageURLs.push("https://flashmymind.com/images/image19.gif"); imageURLs.push("https://flashmymind.com/images/image20.gif"); //The number of rows and columns we will have var rows:Number = 4; var columns:Number = 5; //Store the image width and height (40x40) var imageWidth:Number = 40; var imageHeight:Number = 40; //Padding between the images var padding:Number = 1.3; //Left edge space var left:Number = 20; //Create the image holders (= empty movie clips) and position them on the stage for (var i = 0; i < rows; i++) { for (var j = 0; j < columns; j++) { //Create a new holder var imageHolder:MovieClip = new MovieClip(); //Position the holder imageHolder.x = left + j * imageWidth * padding; imageHolder.y = i * imageHeight * padding; //Add a StarPreloader to the center of the holder var preloader:StarPreloader = new StarPreloader(); preloader.x = imageWidth / 2; preloader.y = imageHeight / 2; imageHolder.addChild(preloader); //We need to know which preloader belongs to which image holder, //so we set the preloader to be a property of the holder. imageHolder.preloader = preloader; //Add ENTER_FRAME so we can rotate the preloader preloader.addEventListener(Event.ENTER_FRAME, rotatePreloader); //Add the holder to the stage addChild(imageHolder); //Add the holder to the imageHolders array imageHolders.push(imageHolder); } } //Call the function that loads an image that is first in the imageURLs array loadImage(); //This function loads the first image in the imageURLs array function loadImage():void { //Create the loader var loader:Loader = new Loader(); //Get the URL to load var urlRequest:URLRequest = new URLRequest(imageURLs[0]); //Load the image loader.load(urlRequest); //Listen when the loading is complete loader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded); //Remove the first URL in the imageURLs array since we //started to load that image. imageURLs.splice(0,1); } //This function is called when an image is loaded function imageLoaded(e:Event):void { //Save the loaded bitmap to a local variable var image:Bitmap = (Bitmap)(e.target.content); //Save the image's holder to a local variable var holder:MovieClip = imageHolders[loadedImages]; //Add the image to the holder holder.addChild(image); //Tween the image holder TweenLite.from(holder, 3, {alpha: 0}); //Tween the preloader. //We call the function "tweenFinished" when the animation is done. //We pass the preloader and the image holder as parameters to the function. TweenLite.to(holder.preloader, 1, {scaleX: 2, scaleY: 2, alpha: 0, onComplete:tweenFinished, onCompleteParams:[holder.preloader, holder]}); //Update the loaded images count loadedImages++; //We load the next image if there are still more URLs in the array if (imageURLs.length > 0) { loadImage(); } } //This function rotates a preloader function rotatePreloader(e:Event):void { //Rotate the preloader e.target.rotation += 5; } //This function is called when a preloader is finished tweening function tweenFinished(preloader:MovieClip, holder:MovieClip):void { //Remove the preloader from the holder holder.removeChild(preloader); }
Test your movie, we are done! The code may seem long, but that’s only because there are many comments & explanations! If you have any questions, feel free to visit the forum.
Related tutorials:
Comments
22 Responses to “Loading Multiple Images”Leave a Reply
You must be logged in to post a comment.
why loadImage(); is not inside the for-loop so that the request go parallel ?
is that a bad practice ?
i like the coding style , i mean the splice method for array
how can you remove bitmaps loaded if this code is used in a menu? for instance inside the function imageLoaded, you have
holder.addChild(image);
a1.push(image);
how can these be removed if the function gets called again from a nav button?
How would you make these images appear randomly in different places?
Thanks.
Hi! Great tutorial, but I have one question.
Can someone explain me, how image:Bitma is located in imageHolder:MC from our loop. How it’s work, that our holder:MovieClip from imageLoaded(); kwons where is imageHolder:MovieClip.
Thanks !
Many thanks, beautiful tutorial =) it helped me creating my first flash dynamic photo gallery
Thanks for this tutorial, the \e.target.content\ was a key thing for me.
You’ve solved two days worth of problems on two projects I’ve been working on. Thanks!
Personally, I like this idea for image loading:
http://kreni.ba/2009/09/10/esminloader-v1/
personally, I thing this is also very cool for image loading:
http://kreni.ba/2009/09/10/esminloader-v1/
Hi!!
i can’t to get the preload class cuz the link was death !!
can u post it?!!
thank you
Hi!!
i can’t to get the preload class cuz the link was death !!
can u post it?!!
what would I need to do if I want to add text (caption) to the images?
Thank you for such efficient code! Most examples I found of multi-jpeg loaders were MUCH longer and more convoluted. It was easy to adapt your code to my needs! Beautiful!
Great Tut…How do you add multiple music using as3.
Thanks
Great tutorial. Thanks ALOT!!!
Thank you so much for this code!
I’m new to AS3 and fairly new to AS in general. Seems like so many of the tutorials (and even some books) assume too high level of knowledge, despite being targetted at new users…
Your example is very easy to follow (and works!) which is more than I can say for several others that I found earlier.
You rock!
Love this script. I’m new to AS3, so please bare with me. To unload the image should you target the loader?
caçapava
Hey,
It doesn’t really matter since we are actually not calling the loadImage() recursively. The counter get’s updated right after the loadImage() function. The code gets executed much faster than the image is loaded.
But I think you are correct. It would be the best practice to put it before the function call. I have edited that piece of code. Thanks for the input!
Hi,
thanks for this tutorial!!
what if i want to add NEXT and PREVIOUS buttons to load again other images?
//Update the loaded images count
loadedImages++;
shouldn’t that line be before the recursive call to loadimage() ?