A Flash Developer Resource Site

Results 1 to 10 of 10

Thread: Reusing cached images with Loader?

  1. #1
    Junior Member
    Join Date
    May 2009
    Posts
    4

    Reusing cached images with Loader?

    I need to load a range of images and make them crossfade over time in a never ending loop (rotating gallery).
    Using the Loader I display a preloader everytime I load an image.

    The problem is that the next time I load the image the damn preloader shows up in a split second (because I'm using the Loader to load the image again).

    How do I write the routine of loading an image and reuse it again WITHOUT calling the loader a second time?

    I read online to read a the bitmapData into a variable. Well, that's all fine. But HOW do I reuse that Bitmap in a never ending carrousel???

    Can't seem to get my head around this.

    So I'm basically asking for the right way to use the Loader (for loading and not displaying images).

  2. #2
    Senior Member cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,449
    Are you testing this in a browser?
    - The right of the People to create Flash movies shall not be infringed. -

  3. #3
    Junior Member
    Join Date
    May 2009
    Posts
    4
    No, in Flash CS4. But I know my setup is wrong, as I'm not even supposed to call the Loader ever again for the same image.
    I should somehow be able to add my image to something and then pull that image from there whenever I need it again.

    I'm basically looking for at routine to create a never ending image carrousel, that is triggered immediately after the first image is loaded using a Timer (which then, again, gives me trouble as it doesn't start right away, but only after it has reached the interval. Now why on earth can't I trigger the Timer immediately and THEN have it repeat? Well that's a different story and another thread, but first I'm going to nail the Loader one).

  4. #4
    Untitled-1.fla strille's Avatar
    Join Date
    Mar 2001
    Location
    Sweden
    Posts
    1,626
    One solution would be to create a new loader every time you load an new url for the first time, and every time you create a loader you store a reference to it in a "lookup table" (object, dictionary or associative array) where the key is the image url. Now, before you actually create a new loader you look in the lookup table if a loader for that particular url exists. If it does, then you just add that loader to the display list again, if not, then you create a new loader and load the url.

  5. #5
    Senior Member cancerinform's Avatar
    Join Date
    Mar 2002
    Location
    press the picture...
    Posts
    13,449
    Caching occurs in the browser. If you want a multipreloader for your images there are several. Here are some.
    http://flashscript.biz/flashas3/biz/FS_biz_classes.html
    http://manewc.com/2008/05/16/preload...-actionscript/
    - The right of the People to create Flash movies shall not be infringed. -

  6. #6
    Untitled-1.fla strille's Avatar
    Join Date
    Mar 2001
    Location
    Sweden
    Posts
    1,626
    I think you read the post a bit too quickly cancerinform :-)

    He said he had a preloader, but BECAUSE of browser caching it didn't look good the second time the same image was loaded - the preloader was only shown for a split second.

    svdelle, the easiest solution would be to load the image each time like you do, but modify the preloader so it is hidden the first 0.5 second or so after you have started it using the Timer class or similar.

  7. #7
    Junior Member
    Join Date
    May 2009
    Posts
    4
    strille, that's the direction my head was going.

    cancerinform; thanks for the links. I did stumble upon those in my search, and they seem to do part of what I'm trying, but also a little to complex for my very simple task.

    Funny this isn't easier to find a solution to.

    I guess all coders out there settle with the flashing preloader.

    I think I'll add the image as a property among other properties of an object and store the object in an array. And then pull it from there. I just need to write the carrousel function

  8. #8
    Senior Member
    Join Date
    May 2004
    Posts
    226
    Along the lines of what strille was suggesting, here is a simple class I've used to store bitmapData, it's pretty old and would probably do it a bit different now but it has been working perfectly for the projects I have used it with.
    PHP Code:
    package{
        
    import flash.display.BitmapData;
        
        public class 
    BitmapDataCache {
            public static var 
    items:Array = new Array();
            
            public static function 
    addid:ObjectbitmapData:BitmapData ):Boolean {
                if( 
    existsid ) || bitmapData == null ) return false;

                
    items.push( new ItemidbitmapData ) );
                
                return 
    true;
            }
            public static function 
    getid:Object ):BitmapData {
                for 
    each( var item:Item in items ) if( item.id == id ) return item.bitmapData;

                return 
    null;
            }
            public static function 
    existsid:Object ):Boolean {
                for 
    each( var item:Item in items ) if( item.id == id ) return true;

                return 
    false;
            }
            public static function 
    filterExistingids:Array ):Array {
                for( var 
    i:int ids.length -1> -1i-- ) if( existsids] ) ) ids.splicei);
                
                return 
    ids;
            }
        }
    }
    class 
    Item {
        
    import flash.display.BitmapData;
        
        public var 
    id:Object;
        public var 
    bitmapData:BitmapData;
        
        public function 
    Itemid:ObjectbitmapData:BitmapData ) {
            
    this.id id;
            
    this.bitmapData bitmapData;
        }

    Basically, preload all your images into the cache, a simple example:
    PHP Code:
    var loader:Loader = new Loader();
    loader.contentLoaderInfo.addEventListenerEvent.COMPLETEonLoadComplete );
    loader.load( new URLRequest"myImage.jpg" ) );

    function 
    onLoadCompletee:Event ):void {
        var 
    bitmapData:BitmapData Bitmaploader.contentLoaderInfo.content ).bitmapData;
        
    BitmapDataCache.add"myImage.jpg"bitmapData );

    Then whenever you need the construct a bitmap you retrieve the bitmapData by the url (or whatever unique id you stored it with ) such as:

    new Bitmap( BitmapDataCache.get( "myImage.jpg" ) );

    But keep in mind that the cache is in ram and if you've got a lot of hires images it can chew it up pretty quick. I never did get around to writing a BitmapDataCache.delete() method.

  9. #9
    Junior Member
    Join Date
    May 2009
    Posts
    4
    That's looking very interesting. Thanks a lot.

    And that's to all you guys.

  10. #10
    My current approach is to create a Loader class with a loadImage fxn that accepts a generic image object as a parameter, containing at least an imageSrc property (file locaiton).

    Once it's loaded the image, it stores the bitmapData back in the original object: imageObj.bmpData = bitmapData;

    Within that same loadImage function, before loading, it checks the imageObj to see if .bmpImage exists, if it does it just skips the Loader portion, and creates a new bitmap using the existing bmpData.

    Works pretty good, and it's nice cause you can pass an object from anywhere in your movie, and know that it will contain a permanant copy of the bitmap after it's loaded at least once.

    Basically, you just create an array of these image objects, then you can simply pass them into the loadIamge and know that it will take care of loading them correctly.

    When you want to remove the data from memory, just call bmpData.dispose()
    Last edited by shawnblais; 05-29-2009 at 04:15 PM.

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