loading image for Sprite only once

[Uberalles]

I have this whiteboard where you can drag and drop images (math symbols) from one box onto the whiteboard.
I want to make it so that I only have to load the math images the one time.
The code for Sprite image:

package
{
	import flash.display.Sprite;
	import flash.display.Loader;
	import flash.net.URLRequest;

	public class BoardImage extends Sprite
	{
		public var down:Boolean = true;
		//public function LoadImage(im_url:String)
		public function LoadImage(im_url:String)
		{
			var loader:Loader = new Loader();
			var url:URLRequest = new URLRequest(im_url); 
			this.addChild(loader);
			loader.load(url);
		}
	}
}

and the code to drop the image on the board:

function newIMINBRD(xcoor:int,ycoor:int):void
{
	var bi:BoardImage = new BoardImage();
	bi.x = xcoor + 645;
	bi.y = ycoor;
	bi.LoadImage("url/to/image");
	bi.addEventListener(MouseEvent.MOUSE_DOWN, pickup);
	bi.addEventListener(MouseEvent.MOUSE_UP, drop);
	inBoard.addChild(bi);
	symCount++;
	
}

...
...

function drop(evt:MouseEvent):void
{
	if (!evt.currentTarget.down)
	{
		if(!evt.currentTarget.hitTestObject(inBoard))
		{
			evt.currentTarget.x = startingLocation.x;
			evt.currentTarget.y = startingLocation.y;
			evt.currentTarget.down = true;
			evt.currentTarget.stopDrag();
		}
		else
		{
			evt.currentTarget.down = true;
			evt.currentTarget.stopDrag();
			newIMINBRD(evt.currentTarget.x,evt.currentTarget.y)
		}
		
	}
}

My question is how can I have copy each of these BoardImage objects everytime I drop it instead of creating a new one in the "newIMINBRD" function?
I tried creating one BoardImage at the start and just referencing it everytime I called the function (ie - newIMINBRD(x,y,copy_of_BoardImage) ) but that didn't do anything.
Anyone out there know how I can load these images once yet create multiple copies of the Sprite?
Huge thanks in advance.

[neznein9]

Every time you create an image, stuff it into an Array or Dictionary, indexed by the url. Then the next time you can check to see if that object already exists in the Dictionary and instead of making a new version, just re-use the old one. Something like this:

import flash.utils.Dictionary();
const IMG_BY_URL:Dictionary = new Dictionary();

// ...

function newIMINBRD(xcoor:int, ycoor:int, url:String):void{
    var bi:BoardImage;

    if(IMG_BY_URL[url]){
        bi = IMG_BY_URL[url];
    } else {
        bi = new BoardImage();
        bi.LoadImage(url);
        bi.addEventListener(MouseEvent.MOUSE_DOWN, pickup);
        bi.addEventListener(MouseEvent.MOUSE_UP, drop);
    }

    bi.x = xcoor + 645;
    bi.y = ycoor;
    inBoard.addChild(bi);
    symCount++;
} 

[5TonsOfFlax]

That is the right way to go about re-using resources. Unfortunately, I think he really does want a copy of the image and not the same image instance. When you add a DisplayObject to the DisplayList, it is automatically removed from any other parent it already had. Therefore, to display more than one identical image he needs a copy of some sort.

What he could do is keep one authoritative image from the loader, and draw that image into a new Bitmap/BitmapData each time he needs a new image. But, I'd actually just let the browser caching handle the issue. Leaving the loaders there isn't that much overhead, and there really shouldn't be any network overhead after the first load.

[Uberalles]

yeah I should have added browser caching to my question....forgot. As long as it's not grabbing the same image from the server then I'm cool.
Thanks for the replies there fellas.

[peem83]

Where can I find whiteboard with drag and drop images from one box onto the whiteboard or where can I find some information how to do that.

[Uberalles]

Here are a couple of sites that should get you started.
Whiteboard drawing:
http://www.flashandmath.com/basic/mousedraw/index.html

dragging and dropping images:
http://www.flashandmath.com/basic/dr.../dd_tour6.html

hope this helps.

[peem83]

I already have whiteboard application but what I need is box with list of images from folder with images and I'm looking for solution how to drag and drop those images from box to whiteboard. Thank You for Your post.

[Uberalles]

What I did is created a class (BoardImage) that extends Sprite. Then load an image on that Sprite.

var loader:Loader = new Loader();
try
{
       var url:URLRequest = new URLRequest(im_url); 
       loader.load(url);
       this.addChild(loader);
}
catch(e)
{
       trace(e.toString());
}

Then add the pickup and drop down mouse events for each BoardImage object that you create. Have a Shape object to hold all the images.

function newIM(xcoor:int,ycoor:int,type:int):void
{
	var bi:BoardImage = new BoardImage();
	bi.LoadImage(getType(type),type);
	bi.x = xcoor;
	bi.y = ycoor;
	bi.addEventListener(MouseEvent.MOUSE_DOWN, pickup);
	bi.addEventListener(MouseEvent.MOUSE_UP, drop);
	symBoard.addChildAt(bi,type - 1);//symBoard is the Shape holding
all BoardImage objects.
}

The tricky part was after the image is dropped on top of the whiteboard (you have to do a hit test to make sure the image is in fact overtop of the whiteboard)

if(!evt.currentTarget.hitTestObject(inBoard))

then I basically add that image object to the whiteboard at those exact coordinates. If you have a clear all button you have to keep a list of all objects added to the whiteboard.
Hope this helps.