Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
fakeartist

Individual photo smooth loading with horizontal bar

Recommended Posts

Hello to all! I want to load a 50KB photo. Say that progressBar is a horizontal line with width 800 px.

 

private var loaderMax:LoaderMax = new LoaderMax( { name:"photo"} );

progressBar.scaleX = 0;

loaderMax.append( new ImageLoader(path, {onProgress:onLoadingProgressHandler}) );

private function onLoadingProgressHandler(event:LoaderEvent):void {
progressBar.scaleX = event.target.progress;
}

 

But my horizontal loading bar moves in a jerky way (jumps). Is it possible to smooth it (eg. ease in and ease out)?

 

In the greesock tutorials you say that

 

Ever seen a progress bar that appears to suddenly jerk forwards or backwards unexpectedly?

It doesn’t happen on individual loaders, but it can happen on a LoaderMax instance that is reporting the overall progress of multiple loaders (its children) in very particular scenarios.

 

Seems that I'm missing something here. Do I have to use tweening in progressBar? Please help. Thanx in advance.

Link to comment
Share on other sites

The "jerky" progress bar I was talking about is when things jump much further forward or backwards than normal which is caused by...well...I explain it on that web page so I won't repeat it here.

 

Anyway, it is normal for the progress bar to be a little jerky because Flash doesn't report every single byte that it receives as it receives it. If it did, performance would significantly degrade because many thousands of ProgressEvents would get dispatched for each file. Instead, Flash basically reports progress at certain intervals. So it might go from 100 bytes to 800 bytes to 1650 bytes, etc.

 

If you want to smooth things out, you can definitely use TweenLite or TweenMax or TweenNano. Kinda like this:

 

private function onLoadingProgressHandler(event:LoaderEvent):void {
   TweenLite.to(progressBar, 0.25, {scaleX:event.target.progress});
}

Link to comment
Share on other sites

For once more, thank you very much. Now I got it right. Cheers!

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.
×