dcsimg
A Flash Developer Resource Site

Results 1 to 8 of 8

Thread: loading image for Sprite only once

  1. #1
    Member
    Join Date
    Jan 2008
    Posts
    82

    loading image for Sprite only once

    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:
    Code:
    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:
    Code:
    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++;
    	
    }
    ...
    ...
    Code:
    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.

  2. #2
    Ө_ө sleepy mod
    Join Date
    Mar 2003
    Location
    Oregon, USA
    Posts
    2,441
    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:

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

    // ...

    function newIMINBRD(xcoor:intycoor:inturl: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_DOWNpickup);
            
    bi.addEventListener(MouseEvent.MOUSE_UPdrop);
        }

        
    bi.xcoor 645;
        
    bi.ycoor;
        
    inBoard.addChild(bi);
        
    symCount++;


  3. #3
    Will moderate for beer
    Join Date
    Apr 2007
    Location
    Austin, TX
    Posts
    6,801
    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.

  4. #4
    Member
    Join Date
    Jan 2008
    Posts
    82
    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.

  5. #5
    Junior Member
    Join Date
    Oct 2008
    Posts
    20

    Whiteboard with drag and drop images

    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.

  6. #6
    Member
    Join Date
    Jan 2008
    Posts
    82
    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.

  7. #7
    Junior Member
    Join Date
    Oct 2008
    Posts
    20
    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.

  8. #8
    Member
    Join Date
    Jan 2008
    Posts
    82
    What I did is created a class (BoardImage) that extends Sprite. Then load an image on that Sprite.
    Code:
    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.
    Code:
    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)
    Code:
    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.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  




Click Here to Expand Forum to Full Width

HTML5 Development Center