ActiveDen

AS3 Circle Preloader / Circular Progress Bar

  • Has been a member for 3-4 years
  • Won a Competition
  • Interviewed on the Envato Notes blog
  • Exclusive Author
  • Sold between 50 000 and 100 000 dollars
  • Bought between 10 and 49 items
  • Netherlands
  • Referred between 50 and 99 users
Webmarbles says

Common idea, superb execution! Probably the neatest circular preloader file on ActiveDen. Why wasn’t I following you before ;-)!?

2 years ago
  • Has been a member for 3-4 years
  • Exclusive Author
  • Sold between 10 000 and 50 000 dollars
  • Bought between 1 and 9 items
  • Referred between 10 and 49 users
baklach says

nice preloader :)

2 years ago
  • Has been a member for 3-4 years
  • Bought between 50 and 99 items
  • United States
bplynch77 says
Purchased

Is there a way to customize this idea so it is just a pure animation instead of a preloader? I am building a custom animation that incorporates a circle animation that starts with a small circle and grows into a larger circle that has an inner radius of 86 and an outer radius of 100. Is it possible to incorporate 5 or more colors into the circle_color as it animates? I would like the colors to start at a specific position and transition in a certain way. If you have any ideas, let me know the best way to contact you.

This is great preloader and I definitely follow you on ActiveDen because of your superb work!!

Thanks again.

2 years ago
Author
marcfolio marcfolio replied

The preloader is all code driven. There’s actually no “physical” circles. SO technically you could pretty easily just duplicate the code to accomplish something more like you’re talking. It’s tough to get a vision of what you’re looking for exactly, but I can send you the preview file if you’d like and can see how the file is animated without actually loading anything.

2 years ago
  • Has been a member for 3-4 years
  • Bought between 50 and 99 items
  • United States
bplynch77 says
Purchased

That would be great if you could send that file. I am working on a style that utilizes the oval primitive tool and shape tween the effect I am looking for, but I am getting very weird transitions where it looks as if flash doesn’t know how to render the shape correctly while the tween occurs. It becomes distorted on the tween and looks very weird on the result. I figured if the tween was code driven, it would have accurate results and your style of preloader is the type of animation I am looking for in the animation. An example website of what I am ultimately going for is at:

www.aymuray.com

If you click on the logo in the middle you will see how the circle animates and opens to be a navigation wheel for the site. This is what I am ultimately trying to achieve, but with many more categories and an additional wheel to handle the subnavigation of the site. It’s a somewhat complicated process because there aren’t many tutorials on how to make this happen. If you could help me through this process or point me in the right direction on how to develop this idea, it would be greatly appreciated.

2 years ago
Author
marcfolio marcfolio replied

That’s a crazy difficult navigation. Not for the faint of heart to attempt. I would guess that it’s 100% code driven. Send me a message and I’ll send you the preview.fla file. It should be able to help you.

Breaking it down for every circle (or color) there’s actually 2 circles each with their own mask (left and right). The more colors you add the more difficult you’d get.

It’d be a really cool navigation though.

2 years ago
  • Has been a member for 3-4 years
  • Bought between 50 and 99 items
  • United States
bplynch77 says
Purchased

Sent you a message on ActiveDen. You can send the preview.fla to eyeseethree@gmail.com or bplynch77@gmail.com. Thanks for your help.

2 years ago
  • Has been a member for 1-2 years
  • Bought between 1 and 9 items
edwon says
Purchased

this isn’t working for me, just installed into my fla using the copy/paste method. plz help! correction it is showing up and working correctly when I publish preview, once I put it online though, it appears and functions but the spinning/loading animation is not happening

2 years ago
Author
marcfolio marcfolio replied

can you send me a link?

2 years ago
  • Has been a member for 1-2 years
  • Bought between 1 and 9 items
edwon says
Purchased

http://edwon.tv/staging/

only the top 3 buttons work right now (fallen timbers, family force5, and drop dead gorgeous)

I’ve modified the code of the “family force 5” preloader to make it look more like my logo

The other preloaders are unmodified (except for the standard variable changes used to customize the preloader)

The architecture of my site is based on swf loaders for each subpage, I have the preloader placed on the first frame of each of those swf’s

The only preloader not on a loaded swf is the one right at the beginning

as you can see none of them show the actual loading animation

2 years ago
Author
marcfolio marcfolio replied

That’s strange. Do you have anything else on the first frame? or are you exporting anything one frame one?

If you want you can send me one of your file flas and I can take a look.

2 years ago
  • Has been a member for 1-2 years
  • Bought between 1 and 9 items
edwon says
Purchased

how do I send you the file?

2 years ago
  • Has been a member for 1-2 years
  • Bought between 1 and 9 items
creativegs says
Purchased

Hello,

When I go to use the Copy and Paste version of your preloader; I cannot make any text in my movie in the TFL format; I have to convert all texts to CLASSIC .

Your loader does not work and it converts over to Flash’s default loader ( the little dots ).

The error I get in the output is this:

TypeError: Error #1009: Cannot access a property or method of a null object reference. at index5_fla::preloader_mc_2/playMain() at Function/ () at Function/ () at flash.utils::Timer/_timerDispatch() at flash.utils::Timer/tick()

The only way I have found to stop this is to break all text, or convert to classic.

Regards, Chris

1 year ago
Author
marcfolio marcfolio replied

Sorry. That’s actually a flash player problem. When you use tfl text the swf no longer streams and has to load the whole swf before displaying frame one. Any preloader onthe first frame will not display with the new text format Using the external version of the preloader would work though.

Let me know if I can help in any other way.

1 year ago
  • Has been a member for 1-2 years
  • Bought between 1 and 9 items
hy09 says
Purchased

Hello,

I am making it as animation. I’ve read previous article, I would be helpful if I can have the preview.fla file as well.

Thanks for this wonderful work!

1 year ago
Author
marcfolio marcfolio replied

Sure thing. Can you send me a message through my profile page so I can have your email?

1 year ago
  • Has been a member for 3-4 years
  • Bought between 10 and 49 items
  • United States
earlyms2 says
Purchased

Hi, Marc I love you theme this is my seond time. I have question adding your loading. I have another theme. I bought here the other seller. I want add your preloader instead of his preloader. So I open his one like this – > gallery.fla CS4 +, open library (ctrl + L ) find space assets/loader There is one movieclip which is he used. and then I draged your movie clip to there.

But it didn’t work. so I followed your instructions again and again.. But it didn’t work also. I know this is easy. and it is same version. Could you tell me what do I have to do?

thanks.

1 year ago
Author
marcfolio marcfolio replied

Hmm. it should be as easy as copy and pasting to the first frame of the timeline. Without seeing his code I can’t help much other than what I said. Maybe email me the source and I can help better.

1 year ago
  • Has been a member for 2-3 years
  • Bought between 1 and 9 items
jcr33 says
Purchased

It appears that the center of the circle is not transparent, though the demo makes it appear that way. It would be good to either make the center of the circles transparent, or change the demo.

11 months ago
  • Has been a member for 0-1 years
  • Bought between 1 and 9 items
flaviocarmo says
Purchased

Hi.

I want to put this circular progress bar on may Flex app. How do i make this?

Can i add the swf into my app using the swfloader?

By the way, nice work. its beautiful!

11 months ago
Author
marcfolio marcfolio replied

Unfortunately I know nothing about flex. You can use the preloader with the stand alone version and just pass you flex swf as a flash var.

11 months ago

by
by
by
by
by