LoaderMax - building a gallery?

[lddd]

Hello,

 

I am new LoaderMax and would like to know how to build a xml thumbnail gallery with it, are there

any examples for it?

 

thanks in advance

[GreenSock]

Sure, here's a sample slideshow FLA with all the supporting images and code:

 

http://www.greensock.com/as/LoaderMax/slideshow.zip

 

(I'll leave the zip there for about a week)

 

Is this helpful?

[lddd]

Thanks, i allready read about the Slideshow...yes. I think the "gallery" i need is quite more complex and

i allready have problems with howto structure it down logicaly.

 

Basicly i would like to make use of LoaderMax for creating my portfolio where i would need to load thumbnails and corresponding full images through XML.

So i think XMLLoader of LoaderMax is the way to go. But i am struggling with how to manage everything logicaly like the xml it self.

 

i would like to have my XML for the Portfolio Gallery structured in something like that:

 

xml/data.xml

 

 

• Getting LoaderMax to load data.xml, loading thumbnails, loading full images
  Creating a Thumbnail Grid from these loaded thumbnails (pushing thumbnails and full images into seperated arrays)
  Adding Event Handlers to my thumbnails (onClick showing relevated full image)
  Having custom transitionIn/Out tweenings for the grid and full image

 

I would like to come up with something similar to the Portfolio Section like on this website:

 

http://www.yodabaz.com/

[GreenSock]

I wouldn't recommend structuring your XML like that because your tag didn't have the appropriate information so it won't be automatically loaded by XMLLoader - you put "thumb_url" and "full_url" attributes in there whereas XMLLoader will look for a simple "url" attribute.

 

Did you look at the code in the demo I posted? It covered almost EXACTLY what you were asking for. It loads thumbnails, full size images, integrates XML, added rollover/rollout/click handlers to thumbnails, had simple transitions in place, and even included logic for prioritizing an image in the loading queue that wasn't loaded yet (if the user clicks ahead). What am I missing? What did you need that the tutorial doesn't demonstrate? Did you have a specific question?

 

Notice that I used some generic XML in that example and created the ImageLoaders internally according to the names found in the XML. You don't have to use XMLLoader's parsing capabilities to define all your loaders in XML if you don't want to. I chose not to in this case because I had to create 2 loaders for every image name (one for the thumbnail and one for the full size image) and I also wanted to set their sizes based on some ActionScript variables and it would be easier to edit those in ActionScript instead of putting every loader's width/height in the XML.

 

Hope that helps. But again, if you still have a specific question please let me know.

[lddd]

Thanks for your really nice and detailed answer. I will look another time to the slideshow example you mentioned, i think

it´s a different slideshow to what i have looked into so far. I will ask for help if i have more detailed questions again i think

 

The Problem with "url" in the XML i allready noticed

[GreenSock]

I think it´s a different slideshow to what i have looked into so far.

Yep, it is. I JUST put that together yesterday primarily for you although I'll likely use it in a tutorial. Please check it out because I think it covers a lot of what you're asking about.

[lddd]

Wow, that looks completely different to what i´ve found before. That covers alot, thanks so far.

Just now i am trying to add text to the thumbnails and full images. I would like to

have one line of text information above the thumbnail showing the "project date"

and another one underneath the thumbnail showing a relevated "project description".

 

How would i best do so? i guess i would add a attribute to the XML node like:

 

And now? Do i have to create a new array holding my descriptions and link them with my thumbnails array?

 

thanks again for your help so far. Maybe we can work throughout the progress of creating some sweet

reuseable gallery example for LoaderMax, i think it´s a popular topic some people interested in

and i even didn´t find any good example on it, especially not regarding LoaderMax.

[GreenSock]

Yep, that's exactly how you'd need to add the info into your XML. I just uploaded a new version of the SlideshowExample that integrates some simple description data for each image and shows you how you could work with it. Hopefully it'll be easy for you to extend that concept for whatever other data you need. I also made a few other enhancements to the structure of the Slideshow app, so go ahead and snag it at:

 

http://www.greensock.com/as/LoaderMax/slideshow.zip

 

(again, I'll leave it there for at least a week).

 

Does that help?

[lddd]

Nice! I will look at it within the next days and try to customize some things on my own and publish my results.

 

There are a few more questions for me now that are not really a LoaderMax thing and are more

general AS3 but it would be really nice if we could work it out together.

 

As is descriped my goals would be to come up with some portfolio page, using LoaderMax for handling

preloading relevated content (project thumbnails, full images, relevated text information).

But thats just one part of it for sure. I would need some further suggestions

on howto achieve the following (basicly thats all tweening/animating stuff i guess)

 

Now as we have the thumbs to an array, we could add transition to them seperated one by one

with help of TweenMax.allFrom for e.g to "transitionIn" when thumbs are loaded and ready

to get onto the stage.

 

something like:

 

TweenMax.allFrom(thumbArray, 1, {alpha:0, x:"-10"}, .1);

 

is this the correct way of how to do this?

 

Further i would love to have my full images get into place ONLY when a thumbnail is clicked.

So the first thing the visitor would see is the grid of thumbs tweening into place and secondly

if he clicks, the relevated full image is getting loaded "preloading progress bar on the thumb"

like in your "interactive demo 1".

 

This step would be to go away from actually having a slideshow to letting the user choose

what he will see. (slideshow would be a great "optional" thing, as the result of a button

event or so where you can turn on/off slideshow).

 

Its really great that you allready added (previous/next) button functionality cause

that would be my next question

[GreenSock]

Sure, all that's possible although I don't have time to walk you through all the general AS3 code necessary to do it. Hopefully my SlideshowExample helps you see some of the concepts, though. And as far as the TweenMax.allFrom() goes, sure, that'd be a great way to animate your thumbnails into place. You'd just need to loop through your thumbnail loaders and put each of their "content" into an array and pass that array to the TweenMax.allFrom(). Or if you have a LoaderMax that only has the thumbnail ImageLoaders in it, you could get that LoaderMax's "content" property and feed it to the TweenMax.allFrom().

 

If you don't want the slideshow auto-advance thing, it should be as simple as removing the TweenLite.delayedCall() that auto-advances things.

 

Good luck!

[lddd]

Hello again,

 

i´ve mastered the TweenMax.allFrom to transitionIn my thumbnails.

 

I have another question. I would like to setup a "container" clip for my thumbnails

and showing that first instead of the actual thumbnail image. The thumbnails

should be tweened in (alpha from 0 to 1) if transitionIn for the containers

completed and sure the load is completed.

 

Like building the grid of pre-created shapes for every thumbnail

and adding the content/making it visible to it later.

 

Same would be for my full images.

 

Could you help?

 

Thanks again!

[GreenSock]

Sure, just add onComplete listeners for each image and when it completes, do your transition. (If that didn't answer your question, I'm not sure what it was).

 

You did look at http://www.greensock.com/as/LoaderMax/slideshow.zip right? That has the containers in place immediately into which the images are loaded.

[lddd]

right, thanks. So, how would i show preloaders for every content element (image) in my XML instead of having an overall preloader ?

I would like to make the preloading progress for every single asset visible to the user.

 

For the thumbnails: If containers are moved into place adding preloaders (simple progress bar) to them visualizing the loading

progress for each thumbnail image.

 

For the full images. Actually the same as for my thumbnails. If some thumbnail is selected, the container

for holding it is moving into place and a progress bar preloader is added to the container showing

the entire preloading progress of the full image.

[GreenSock]

The first interactive example on the main LoaderMax page does this sort of thing, and you can get the source files at http://www.greensock.com/as/LoaderMax_Demo_Source.zip (that link was in the FAQ section on that page).

 

You can get the progress of any loader with the "progress" property - feel free to hook up preloaders to that property so that you can track them individually. There's lots of flexibility built into the system.