Jump to content


Flex - Loading Multiple Images

Recommended Posts

I am developing a Flex application which will allow a user to drag an HSlider left and right to display a series of images (like a flicker book).


I am new to LoaderMax but it appears to be just what I need for efficiently loading the images ready for the user to interact with.


If I am correct in my understanding I create a new LoaderMax object, define eventListeners to monitor the cycle of events and then I can append an ImageLoader for each image I want to load. I can then call the .load method to load the images.


What I can't seem to grasp is how I can display the resulting loaded images and change them as the HSlider is moved. Can I define a Spark Image in my mxml View and bind its source to a variable in my presenter which changes as the HSlider is moved?


I see there is a FlexContentDisplay class but I can't figure out how to place this in my View.



Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,


Your understanding of what LoaderMax can do is accurate.

Before you get into the specifics of controlling content with HSlider and using Spark Images and such, I would suggest you try to start with a very basic implementation of getting a few images to load and display on screen.


Although, this is not a flex example, I would strongly suggest reading and watching the video here: 



The basic concepts of loading and displaying image content will be the same in Flex except that Flex will use a special FlexContentDisplay object (as you noted):



To display your images once they are loaded you have a few options:


1: set a container property in your ImageLoader

var img:ImageLoader = new ImageLoader("image.jpg", {container:myContainer});

2: use an onComplete callback to place it somewhere once it is loaded (see tutorial above)


3: reference the content of loader at any time and place it anywhere in the display list


Unfortunately I can't really recommend how you program your HSlider to determine which image is displayed. I don't use Flex at all. 

Hopefully once you get your images to display that won't be too hard.

  • Like 1
Link to comment
Share on other sites

correction: to see how to use an onComplete callback to place the image in the display list you would do something like

function imageCompleteHandler(event:LoaderEvent):void {  
Link to comment
Share on other sites

Thanks Carl for the prompt reply.


I found the same tutorials, which you suggest above, last night and continued to develop my concept. The video is a great help and LoaderMax works brilliantly. I have still got a lot to solve but I'm getting there. Your advise on displaying the content is very helpful.


Is there anything I should consider to ensure that once downloaded the images will persist in my user's cache should they return to view them again? I understand that the user's browser cache settings are beyond my control but if I organise all of the downloaded media into say an arrayCollection or dictionary of some type should I add the imageLoader objects into it or their respective content?

Link to comment
Share on other sites

There really isn't anything you can do to make content stay in the cache, you can however force a loader to get a fresh un-cached version by using noCache:true. 


  • noCache : Boolean - If true, a "gsCacheBusterID" parameter will be appended to the url with a random set of numbers to prevent caching (don't worry, this info is ignored when you LoaderMax.getLoader() orLoaderMax.getContent() by url or when you're running locally)


if I organise all of the downloaded media into say an arrayCollection or dictionary of some type should I add the imageLoader objects into it or their respective content?


I guess it depends on what you need to do. I don't really see a big difference either way. I usually hang onto the ImageLoaders and LoaderMax as I've never had a problem with doing that.


Loadermax has plenty of conveniences for finding content / loader children:





its already a storage mechanism for loaded content so I rarely find a need to take the content and put it somewhere else (dicationary, array).


I guess if you want to be super tidy you could hang onto the content and dispose() the ImageLoaders. 


Again, I don't think there is a clear right or wrong way,

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.