Oct 23, 2006

Image Cache

Big Spaceship has another fun toy for you to play with. Our very own ImageCache class.

The idea behind the ImageCache is to load an image one time and then never again. Once loaded, store its BitmapData in an invisible movieclip, where it can be retrieved forever (memory permitting, of course). The BitmapData for said image is availible and accessible via its file path.

Play with it here.
Download it here.


In the example I posted above, I load each image one time. then I manipulate the bitmap data to create a mini-photogallery w/ dynamically resized bitmapdata thumbnails (using a simple Matrix to draw the thumbnails smaller).

The end result? Smoother photo galleries and downloads pages - we don't need to wait until some load animation finishes every time a new image is called. We don't even need to have a movieclip to load the image into. The asset we need is independant of timeline, scope and the browser cache. Oh yeah, and its much less code to deal with.

The best practical example of this is on the Underworld: Evolution web site's photo gallery. The cache loads in the thumbnails first. When a thumbnail is clicked, if the image hasn't been loaded it displays the preloader. If it has been loaded (or once the preloader finishes), the bar on the bottom slides up and as it reaches the top, we call one simple function and viola! Image appears. No need to even set visibility on the movieclip - just something as simple as this:
ImageCache.getInstance().retrieve( "path/to/image.jpg", myClipToDrawTo, "someID");

Share this Post


                           

Comments


Stick     May 03, 2008
as harsh as it seem i agree with Eeor. All we want is a function like cacheImage("yourfilename.jpg")

we know how to do the rest. whats with all this slideshow array stuff. nobody is doubting yoru skill but why show off. im looking for a simple way to cache my images, how the heck will i apply this to my own loops? this is just impossible to dissect to get what we need.

pezz     Nov 14, 2007
Need some help. I was trying to add an xml load function to load external images. I set up the function and used the push method to populate the "a" array with the external images. If I do a trace from within the xml loading function, I see the images pulled in and populating the array correctly. Once it leaves the function, it remove the items from the array. Is there any reason why I wouldn't be able to push new items into the array?

Eeor     Nov 12, 2007
Fuck you with your complicated code, its stupid and unneccessary, you should just show how to cache images not how to make slideshow you moron, go fuck yourself

`Flash Image Cache » ideaography`     Sep 24, 2007
[...] http://labs.bigspaceship.com/blog/?p=8 [...]

amy stoddard     Sep 06, 2007
is there a way to automate the load of the first image so its full size when its published. the only way to trigger the fullsize is w/ the onRelease event from the thumb. i'm creating a timer so that this can be viewed as a slideshow w/ play/pause buttons. can anyone help w/ this? pleeeze?

load and draw bitmaps dynamically from an xml file at RANDOM MUSINGS of BEN CLINE     Mar 11, 2007
[...] I realize there are quite a few ways of doing this including Big Spaceship's cache bitmap class. However, I decided to build my own to get a little more practice with OOP and writing classes. Essentially, this class loads the images once from an xml file, then dynamically resizes them, and when the image is rolled over the bitmap is duplicated to its original size. Maybe you will find some use for it maybe you won't. Regardless, I'm throwing it out there for you to check out. It requires the Moses Suppose's Fuse Kit, once you download the Fuse Kit, throw it into the com directory after you download the class. [...]

will     Feb 14, 2007
I really want to use your ImageCache class in my project, however, I am having a difficult time trying create and instance of the Image Cache from any class that is not part of the maintime line. In other words, the only code I have on the root of my timeline ia an attachMovie clip . This clip is linked to a AS 2 class, which links into a MVC design pattern. Not that the pattern is important, but the fact that I cannot get an instance of the ImageClass from intantiation of a constructor. I am only able to get an Instance of image from the main timeline and then pass it to the class trhough a function from the time line. Is there any why the ImageCache class as you have written can only be instantiated from the root timeline?

Thank you,

Jason     Jan 30, 2007
Awesome class and so helpful - thanks Jamie. Looking forward to the updated version.
When I was using it in my own custom projects I found the initial load sometimes had some problems. By checking whether $m had width/height > 0 before stopping the enterframe loop (within _checkLoad) I found the problem was solved. Just in case anyone is using the original version. :)

Hakan     Dec 14, 2006
@Gabriel
Is this happening when you're using a loop to draw out the images from the Image Cache class? I'm working on an updated version of this with enhanced loading and queue functionality, I'll post it when I'm done...

Gabriel     Dec 11, 2006
Hey, it's a great idea, one that I never gor around to doing.

I've been trying to use your class today, and it's working fine loading a png in, but I actually have 50 objects using the same image, and only the first one is displaying. Any particular reason for this?

eRez     Nov 20, 2006
don't want to sound bragging, but isn't this simply taking a step forward from what i wrote about almost a year ago - http://groups.google.com/group/macromedia.flash. actionscript/browse_thread/thread/9c4cb5546e4e7f52/ c1f0dab5000df354?lnk=gst&q=eRez&rnum=15& ;hl=en#c1f0dab5000df354

Kevin Sweeney     Nov 10, 2006
I've been desperately trying to create thumbnails on the fly from loaded images and this saved me hours. If you're lucky, maybe I'll show you ;)

Thanks a million guys!

Jamie     Oct 31, 2006
Yah. Minor Load bug. Will be fixed in the next version. Sorry 'bout that. :)

Mike     Oct 31, 2006
I was having trouble testing the file using Flash's simulate download feature. I contributed it to some sort of use of the Singleton pattern that was causing issues. I decided instead I'd just go to your link ("play with it here") using Sloppy (http://www.dallaway.com/sloppy/index.html)
set on 56k just to see how the loading was handled. The result was the load bars don't move at all and when you click one of them and another large photo is loaded already it loads a blank space instead of an image.

Just thought I'd point these things out. I'm not sure if they're bugs or what, but I figured it was a good idea to let you know.

Thanks for the cool files though. Don't get me wrong, they're awesome.

Ryan     Oct 27, 2006
Instead of doing that convertID method, you're better off just using escape and unescape; that way you never have to worrry about special cases.

Jamie     Oct 26, 2006
Michael -- I actually never tried using the ImageCache w/ absolute paths. String replacing the colon is exactly what I'd do.

Juan -- Great suggestions. I had thought before about building routines in that counted how many bitmaps were stored and gradually released the earliest ones as newer ones came in. I thought that might be a little less intensive than an interval (although if the interval is set for 5 minutes, I'd hardly consider it that taxing). But considering it further, it might actually be nicer to have unlimited clips that only last x number of minutes. I'll probably go that direction.

Certainly coming up with some sort of setRoot functionality should be implemented. As soon as I get the chance I'll add it.

Juan     Oct 25, 2006
This is very useful, and thanks for posting. It should work well with a Flash drag/drop photo gallery manager that I've recently built. I'll play with this over the next few days and let you know how I extend it. One direction that comes to mind is to pass arguments of what depth and instance name you want to hold on to the bitmapData. This way, that information is variable from project to project. Also, another extension I'd love to implement on this is a timer that releases stores data in chunks like cookies. Thus if you are using an application for more than 5 mins, the first five mins get dumped out. Nonetheless, this is simple enough to extend all that upon. Thanks, and keep up the good work!

Michael     Oct 25, 2006
I found out that I can't cache external jpgs with http:// in them so I tried string replacing the colon in the url string and it worked fine. Should that be the right fix?

reintroducing.com Blogging Receptacle » Blog Archive » ImageCache Class     Oct 24, 2006
[...] Big Spaceship release a class in their labs called ImageCache that allows you to load an image one time and use it throughout without having to reload it if it’s called again. Nice stuff as usual. [...]


Speak






Submit »