how to manage memory of slide show

[attaboy 0 Likes (Newbie)]

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;
holderBG.addChild(bars);

createTimeline();

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});;
xmlLoader.load();
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);

queue.load();
}

function startSlideshow(event:LoaderEvent):void {
displaySlide(event.target.content);
}

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) {
	holderBG.removeChild(curSlide);
}
curSlide = slide;
holderBG.addChild(slide);
slide.cacheAsBitmap = true;
slide.mask = bars;
bars.width = slide.rawContent.width;
bars.height = slide.rawContent.height;
timeline.restart();
}

any ideas?

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

[GreenSock 16,229 Likes (Superhero)]

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!

[attaboy 0 Likes (Newbie)]

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.

[ziociro 0 Likes (Newbie)]

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?

[GreenSock 16,229 Likes (Superhero)]

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.

 

Enjoy.

[ziociro 0 Likes (Newbie)]

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

[ziociro 0 Likes (Newbie)]

the link it's always the same? http://www.greensock.com/as/LoaderMax/slideshow.zip ?

it give me the same error... 1151...

[GreenSock 16,229 Likes (Superhero)]

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)

[Carl 10,739 Likes (Superhero)]

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

[orangemix 0 Likes (Newbie)]

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

Thanks!!!

[Carl 10,739 Likes (Superhero)]

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.