Jump to content


how to manage memory of slide show

Recommended Posts

I have a slide show which greensock helped me with he pretty much rewrote it it's very cool the way he did it . It slices and splices in arrays (please excuse my ignorant explanation I haven't gotten around to examining how it works in detail. My only issue with it is I don't think it scales well. I feed in 182 images with a combined total of 10.4 meg when the swf loads it uses 124 meg then it adds about 1.25 meg memory as each image is displayed until it reaches 293 meg at which point gc kicks in and keeps it there.


import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.loading.*;
import flash.display.*;
import flash.geom.*;
import com.greensock.events.LoaderEvent;
import com.greensock.loading.display.ContentDisplay;

var duration:Number = .5;
var timeline:TimelineMax;
var bars:Bars = new Bars();
bars.cacheAsBitmap = true;


function createTimeline():void {
timeline = new TimelineMax({repeat:1, repeatDelay:5, yoyo:true, onComplete:showRandom, paused:true});
for (var count:int = 1; count <= 10; count++) {
	var mc:MovieClip = bars["bar" + count];
	timeline.insert(TweenMax.from(mc, duration, {x:"64", alpha:0, ease:Cubic.easeOut}), (count - 1) * 0.1);

var xmlLoader:XMLLoader = new XMLLoader("bioPics-data.xml", {onComplete:onXMLLoadComplete, autoDispose:true});;
var images:Array;
var displayQueue:Array; //same as "images" array initially, but each time we show a random image, we remove it from this array so that we can make sure the same image never shows twice in a row. We repopulate the array by slicing the images array once displayQueue is empty.
var curSlide:ContentDisplay;

function onXMLLoadComplete(e:Event):void {
var queue:LoaderMax = new LoaderMax({maxConnections:1});
var nativeHolderSize:Rectangle = holderBG.getBounds(holderBG);
for each (var image:XML in xmlLoader.content.image) {
	queue.append( new ImageLoader(image.@src, {centerRegistration:true, width:nativeHolderSize.width, height:nativeHolderSize.height, scaleMode:"proportionalInside"}) );
images = queue.content; //a LoaderMax's "content" is an array of all of its child loaders' content. In this case, a bunch of ContentDisplay objects.
displayQueue = images.slice();

//choose a random image to load first...
var randomIndex:int = int(Math.random() * displayQueue.length);
displayQueue[randomIndex].loader.prioritize(false); //ensures that it is first in the loading queue
displayQueue[randomIndex].loader.addEventListener(LoaderEvent.COMPLETE, startSlideshow, false, 0, true); //we just want to wait for the first one to load before beginning. The rest can load in the background.
displayQueue.splice(randomIndex, 1);


function startSlideshow(event:LoaderEvent):void {

function showRandom():void {
if (displayQueue.length == 0) {
	displayQueue = images.slice();
var randomIndex:int = int(Math.random() * displayQueue.length);
displaySlide( displayQueue[randomIndex] );
displayQueue.splice(randomIndex, 1);

function displaySlide(slide:ContentDisplay):void {
if (curSlide != null) {
curSlide = slide;
slide.cacheAsBitmap = true;
slide.mask = bars;
bars.width = slide.rawContent.width;
bars.height = slide.rawContent.height;

any ideas?

I was hoping to use this on a larger slide show I support it presents about 1000 images that average about 150k.

Link to comment
Share on other sites

When you originally posted that slide show, there were only about 3-5 images (something like that) and I mentioned that in that case it didn't make sense to keep reloading images because it would be easy to fit those few images into memory and reuse them. I mentioned that the way it was structured was NOT intended for situations where you're loading hundreds or thousands of images.


I also want to make it clear that what I wrote was intended to use your basic underlying code as much as possible - if I were to rewrite a slideshow from scratch, it would be structured much differently. In fact, I did write a slide show and posted the source files months ago at http://www.greensock.com/as/LoaderMax/slideshow.zip


I went ahead and edited the FLA with a solution that is much better engineered for this type of situation (tons of images). See attached. Oh, and I commented out a few lines that referenced TransformAroundCenter because that's a Club GreenSock members-only class.


To anyone else reading: I cannot make a habit of re-engineering other people's files like this and creating a customized slideshow (I just don't have the time). Hopefully the concepts demonstrated in this file, however, will be useful to others.


Hope that helps!

Link to comment
Share on other sites

Sorry I have a bad habit of skimming through things and assuming I know what was written. I put the new version online and it's working great. I owe you at least a keg of beer.

Link to comment
Share on other sites

  • 2 weeks later...

i've try to execute the fla but gimme 3 error in slideshowexample.as, on row 35-36-37 with a conflict with the definition of progress_mc, arrowleft_mc, arrowright_mc. why? :?

Link to comment
Share on other sites

You must be on a Mac, right? For some reason, there's a conflict with public variables declared that away on the Mac (works great on the PC). Anyway, I just uploaded a new version that should resolve that issue by using differently named private variables.



Link to comment
Share on other sites

tnx 4 u r answer :) no, i'm on pc. now i try u r changed fla and let u know...

Link to comment
Share on other sites

Yep, same address. Are you sure you have the latest files? Sounds like you might have a corrupt Flash install or something. I just double-checked and it compiles perfectly for me. Anyone else having this problem? (so far you're the only one who has ever mentioned having this problem, so I suspect it might be an issue on your end)

Link to comment
Share on other sites

just downloaded latest. compiles and runs fine : Flash CS4 : Mac

Link to comment
Share on other sites

  • 4 months later...

hey there, maybe I can get a quick tip...


I can't find the original post for this thread, but I have utilized the code above from the original post

to create a simple slideshow. When I upload to view live on the web it seems as though the xml

is not loading images quick enough because I get an error saying I cannot tween a null object.

Which is what leads to my assumption.


TypeError: Error #1009: Cannot access a property or method of a null object reference.

at com.slideshow::SlideShow/displaySlide()

at com.slideshow::SlideShow/showRandom()


I am still very new to AS and web development in general, please excuse me for my ignorance.

I am using the abstract factory pattern for this, with a preloader swf, not sure if that has any impact.


I have also built another slideshow using the slideshow.zip example that you have posted and I'm not

sure how or if I could incorporate the two to get the desired effect or if it's just a simple tweak.


I guess my question is how do I get my xml to load all images first... it's only 15 images,

and very small in size.


here is a link to a test page if it helps clarkesque.com/OA/index.html


any help is apprecaited


Link to comment
Share on other sites

define an onComplete handler for your LoaderMax that is handling the load of all your images.

that function can then trigger what ever needs to be done once all images are loaded.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.