Jump to content


Best way to animating a list of loading thumbnails?

Moderator Tag

Recommended Posts

I'm trying to figure out the best way to animate a list of thumbnail images that are loading.

This is for mobile/tablet. I'd like to allow the user to be able to scroll thru a list of thumbnail images. I thought I may want to use the blitmask class, but some of the thumbnails may not be loaded yet so I need to show a revolving loading indicator in the middle of the thumbnail image.


What is the best way to animate a list of items where some of the items have animated loading indicators?




Link to comment
Share on other sites

What you describe as "list of thumbnails with animated progress indicators" seems a lot like what is happening in Interactive Demo 1 on this page:



the source for the LoaderMax demos are available here:

http://www.greensock.com/as/LoaderMax_Demo_Source.zip (from LoaderMax FAQ # 9)


There are a few ways to do what you need to do, but the code in LoaderMaxDemoItem.as will show you how you can have multiple thumbnail containers that display a unique image and progress bar

Link to comment
Share on other sites

That's not exactly what I am talking about.

Yes there are a bunch of images loading at the same time. But the question is not how to present a progress bar over each of the images. My question is that I want to display a loading/busy indicator over each of the images - something that infinitely loops in a circle - no 0% to 100% progress bars.


But the problem is how do I ensure the frame rate stays at around 30fps but still allow the user to scroll the list of images vertically (up and down). With a Blitmask, I could ensure that the framerate is still around 30fps; however, that takes a static snapshot of the loaded and loading images. That would mean the busy indicators would stop moving while the user is scrolling the blitmask.


Then I was thinking I might convert each of the frames of the busy indicator into a bitmap and animate the bitmap sequence. I can have it so that each of the busy indicators associated with each of the loading images are using the same bitmapdatas. That way the bitmapdata associated with each frame is not adding too much to the app. Then I was thinking of creating a class that animates each of these bitmaps. Each instance of this class would be using the CPU to animate each busy indicator instance. But perhaps I can create an EnterFrame event listener that checks when the busy indicator instances are on stage. When they aren't on stage,then I stop animating the indicator.


How does this sound? Is what I describe clear?

Is there a better way?

Link to comment
Share on other sites

Thanks, that is much more clear. It seems you have a very firm handle on how BlitMask works. If the progress indicators are inside the BlitMask target, yes you will have to constantly update() the BlitMask (for new bitmap captures) which will most likely nullify the main benefits of using a BlitMask (which is super fast scrolling of mostly static content).


I think for your idease about using bitmap sequences for the progress indicators and such to minimize processor load sound fine, but quite honestly I am having a hard time accurately imagining the impact. In a case like this, I would have to say give it a shot and see how it works. With Flash there are always lots of factors in play that can impact performance. Unfortunately I can't say definitively that option A is going to work better than option B, but it sounds like you are on the right path.

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.