Workflow for thumbnail gallery?

[svendelle]

I'm having a hard time understanding how to use LoaderMax for this scenario:

 

1. I want to load an array of thumbnails - each thumbnail representing a larger image, a video or a swf (when clicked). (All thumbnails have the same fixed size, but could change for each gallery, so I have to have this in a dynamic way)

2. I want to add them to the display list prior to loading start, to show the load progress of each thumbnail (by displaying a progressbar, and fade in the thumbnail when it's loaded)

2a. I want to lay them out next to each other based on their width (or below each other based on their height) prior to load start. So they'll all show their progress bar clearly (and not on top of each other).

3. I also want to add some custom rollover behavior to each thumbnail (a highlighted border), with a label and other stuff.

4. I want the larger load (represented by each thumbnail) to start only when a thumbnail is clicked.

 

How do I loop an array of thumbs and lay them out prior to load start? I've tried using the parse(), but it only uses ONE onComplete function. I think I need one onComplete handler for EACH finished loader, or am I wrong here?

 

I simply can't get my head around this workflow, as the 'system' itself seems simply enough. It simply tweaks my brain.

 

Any help on achieving the above would be nice.

 

I've already tried this (in constructor):

 

LoaderMax.activate([imageLoader]); // ONLY LOADING IMAGES IN THE FIRST PLACE

var queue:LoaderMax = LoaderMax.parse(_caseThumbs, {onComplete: onCompleteHandler}); // _caseThumbs IS AN ARRAY OF URLS

queue.prependURLs("http://somedomain.com/media/"); //saves us from having to include this in every URL in the array, and makes switching servers very easy.

queue.load();

 

private function onCompleteHandler(event:Event):void

{

trace("Load complete");

var _thumb:ImageLoader = LoaderMax.getLoader("http://somedomain.com/media/image/thumbnail_1.jpg");

// I CAN GET EACH LOADER MANUALLY BY URL, BUT I WANT TO GET IT AUTOMATICALLY IN A LOOP - USING SOME SORT OF COUNTER

_thumb.content.y = _yOffset * _yOffsetCounter++; // CUSTOM VARIABLES USED FOR OFFSETTING EACH THUMBNAIL IN THE Y DIRECTION

addChild(_thumb.content);

}

 

As you can probably see my head is spinning around simply to understand using the LoaderMax ...

[GreenSock]

Good news: I created a relatively simple gallery example that does almost EXACTLY what you're asking. You can get the source at http://www.greensock.com/as/LoaderMax/slideshow.zip

 

As far as getting notified when each child loader is finished, you can use an onChildComplete listener on the LoaderMax or use an onComplete on each child loader...

 

var queue:LoaderMax = LoaderMax.parse(_caseThumbs, {onComplete: onQueueCompleteHandler, onChildComplete: onImageCompleteHandler});

--or--

 

var queue:LoaderMax = LoaderMax.parse(_caseThumbs, {onComplete: onQueueCompleteHandler}, {onComplete: onImageCompleteHandler});

 

Also keep in mind that you can use any ImageLoader's content Sprite before it even begins loading. That's the great thing about the fact that it creates those ContentDisplay Sprites immediately. Place 'em wherever you want and the content will be loaded into them.

 

Have fun!

[legali]

I'm am also trying to work through a project similar to this at the moment. I am really new to AS3 but am trying to get to grips with it all asap.

 

I would like to have a gallery (capable of holding many images) where the main container holds all content, with various main pic loaders loading into it on the click of corresponding thumbnail. There will also be image labels / descriptions loading simultaneous to the new main pic loading in.

 

I would like a crossfade transition between the old main pic and new main pic. Once new main pic has loaded fully and the tween is finished, I would like to clear old main pic from holder.

 

Is all of that possible? And if so, can anyone offer some help with how I can started with this as it has me really stumped.

 

I hope to have more of an understanding about all this soon!

 

Many thanks in advance.

 

Regards

 

Ali

[GreenSock]

Sure. Did you read the above post? There's a sample zip file that does all of what you're asking about. It's literally completely built for you so that you can pull it apart and see how it works. http://www.greensock.com/as/LoaderMax/slideshow.zip

[legali]

That's great - thank you. The AS files are clear to follow, although I do need to think about them.

 

Can you tell me, are the .as files imported into the fla file as I cannot understand how the files are linking with each other. I cannot see any actions in the .fla; are they hidden in sub-layers?

 

Sorry if this is very obvious.

 

Thanks again!

 

Ali

[GreenSock]

No worries. If you look at the properties palette when you open the FLA, you'll see that the document class is defined as SlideshowExample. That corresponds with the SlideshowExample.as file. When the FLA is published, it looks for that class and makes the swf itself an instance of that class.

 

Does that clear things up?

[legali]

Yes, that helps a lot. Thank you very much - things are starting to become clearer (slowly). I've a long, long way to go with all of this.

 

Thank you for your time and for all your work on the website. It is very much appreciated.

 

Ali

[GreenSock]

By the way, you should check out the

[Jerry]

Good news: I created a relatively simple gallery example that does almost EXACTLY what you're asking. You can get the source at http://www.greensock...x/slideshow.zip

 

As far as getting notified when each child loader is finished, you can use an onChildComplete listener on the LoaderMax or use an onComplete on each child loader...

 

var queue:LoaderMax = LoaderMax.parse(_caseThumbs, {onComplete: onQueueCompleteHandler, onChildComplete: onImageCompleteHandler});

--or--

 

var queue:LoaderMax = LoaderMax.parse(_caseThumbs, {onComplete: onQueueCompleteHandler}, {onComplete: onImageCompleteHandler});

 

Also keep in mind that you can use any ImageLoader's content Sprite before it even begins loading. That's the great thing about the fact that it creates those ContentDisplay Sprites immediately. Place 'em wherever you want and the content will be loaded into them.

 

Have fun!

 

I cannot get this download to work.

[GreenSock]

What download? The sample gallery? I just tried the link and it worked fine.