Using an array to load in multiple images in Actionscript

Question

I have a class assignment where I have to create a photo gallery and one of the stipulations is that the images need to be loaded from an external source. The reference code from our assignment was:

var myRequest:URLRequest = new URLRequest("bw1.jpg");
myLoader.load(myRequest); 
addChild(myLoader);

My specific needs requires me to have up to 2 copies of the images on the screen at once, one as a thumbnail and a second as a fullsized image. I want it so that when a user clicks a thumbnail a new instance of the picture is created scaled to fullsize with 0 alpha and the current selected picture decreases in alpha as the new pic increases in alpha. Once the old pic is no longer visible it is removed from the stage.

I am having trouble figuring out how to create a copy of the image in actionscript and also my for loop seems to not be executing properly as it only ever goes through one iteration even when I have no error messages.

Here is a link to my code via pastebin: http://pastebin.com/iadgKgsk but to save you from having to switch back and forth between I will also past it here

import flash.display.Bitmap;

//creates a loader for each picture to be loaded, I know I could have an empty array  
that I add to but created a full array to test.

var loaders:Array = [new Loader(),new Loader(), new Loader(), new Loader(), new
Loader(), new Loader(), new Loader(), new Loader(), new Loader(), new Loader()];
 //stores the url request for each image to be loaded

var Requests:Array =[new URLRequest("pic1.jpg"),new URLRequest("pic2.jpg"),new 
URLRequest("pic3.jpg"),
new URLRequest("pic4.jpg"),new URLRequest("pic5.jpg"),new URLRequest("pic6.jpg"), new  
URLRequest("pic7.jpg"),
new URLRequest("pic8.jpg"), new URLRequest("pic9.jpg"),new URLRequest("pic10.jpg")];



//creates 2 empty arrays one to store the thumbnail sized pics the other fullsized.    
Ideally I want one Array holding the bitmap data and the other holding the thumbnail 
 instances since I only need 2
// fullsized images at a time I can just create a new one and erase the old one in a 
single function.

var pics:Array = new Array();
var pics2:Array = new Array();

//defines an empty bitMap variable as a placeholder for which to copy from redefined in
 every iteration of the loop

var test:Bitmap;

//loops through every loader
for (var i in loaders);
{
        // loads the loader and url request and creates a picture
        loaders[i].load(Requests[i]);

        //waits for the pic to load 
        loaders[i].contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

        //after loader is loaded create pic from the data
        function loadComplete(evt:Event):void
       {
            var i = "Test";
            trace(i);
            test= evt.target.content as Bitmap;
            pics2[i] = test;
            pics[i] =new Bitmap(test.bitmapData);
            pics2[i] =new Bitmap(test.bitmapData);

    //creates an image on the stage at runtime to help debug

    var pic1 = new Bitmap(test.bitmapData);
            addChild(pics[i])
            pic1.scaleX = 0.138427734375;
            pic1.scaleY = 0.1384114583333333;
            pic1.x = 204;
            pic1.y = 20.6;
            pic1.alpha = .25;

            var pic2:Bitmap = new Bitmap(test.bitmapData);
            pic2.x =100;
            pic2.y =100;
            pic2.scaleX =.33;
            pic2.scaleY=.33;
            addChild(pic2);            
            loaders[i].contentLoaderInfo.removeEventListener(Event.COMPLETE,     
            loadComplete)
        }
}

score 0 · Answer 1 · answered Jul 19 '13 at 03:17

Your for loop is setup in a way that it would attempt to iterate for each property of the loaders instance which isn't what you want. You may want to investigate other AS3 bulk loader options too there are already some scripts out there to help take care of this.

Your loop should look like

for(var i=0; i<loaders.length; i++)
{
    var curLoader = loaders[i].load(Requests[i]);

You can also see an example I put together that loads a bunch of images flipbook style animation (images generated with blender):

http://www.shaunhusain.com/DrawTextRandomly/

http://www.shaunhusain.com/DrawTextRandomly/srcview/

look in the utils.imageLoader package, I made two classes there that deal with loading the images, since they were output from Blender with sequential file names I just used some loops to load the images based on a numeric counter, in your case you could switch it to use a source array of images to load.

In the BatchImageLoader class I have a variable for how many loaders to allow it to make, I wanted to see the difference in performance in terms of memory vs load time (will depend on runtime environment too but I wanted to get a general idea, ended with leaving it at using 90 loaders at most).

Using an array to load in multiple images in Actionscript

1 Answers1