That’s quite a topic. “A customizable gradient circle loader / animation for AS3“. I wrote it then looked at it and couldn’t help giggling. Aaaanyway. You know the one, we’ve all seen it. From the worst sites to the best sites, every now and then you see that circle that spins with an internal gradient. Like a snake trying to eat its own tail.
Most commonly these are bitmaps. Pngs exported from PS that are rotated. The problem with that is that it becomes pretty rigid. If you need to change the width or height or whatnot, you’re quickly faced with re-exporting a new one. Actually more or less the same thing goes for those that took the time to make it with Illustrator. Once you are faced with increasing the inner radius and not the outer, or vice versa - you gotta redo it.
Soooooo, without further adieu, here’s a scripted version that uses the drawing API to construct a circle that is fairly customizable. You can use it as a loading animation or just .. just a spinning circle because how cool aren’t spinning circles? Much much cooler than fireflies, for sure!
Alright so, it’s a class. The class has three public functions. The constructor creates the initial circle with your arguments (inner and outer radius, rotation speed, color) and after that you can call a start() method to make it visible and start spinning. Alternatively, stop() shuts it down and makes it non visible, but it does NOT remove it from memory, you can restart it again. It just clears the listeners. If you want to kill it, you need to remove the instance from the displaylist.
public function SnakeCircle(_radius:int, _circleSize:int, fillColor:uint, speed:Number, direction:String = “CLOCKWISE”):void
The sliders are (top to bottom): Speed, Inner Radius, Outer Radius. Also a little cute colorpicker. Click the circle to change direction
All that remains now is the Download Link (300Kb) (3917 downloads)
(I know, 300k wtf right!?! Friggin components… not to worry though, the swf is 17 kb :P)
July 13th, 2008 at 3:17 pm
Oh this is sweet! thanks man
July 14th, 2008 at 4:14 pm
With this power at our hands, clients are bound to flock. Let’s just hope and pray the world was ready for this…
July 14th, 2008 at 7:39 pm
Haha very cool
July 18th, 2008 at 3:58 pm
For something so commonly seem, there’s a surprising lack of information on how to create it. For the longest time I thought it was impossible to create this loader effect without using a picture.
Thank you for this class!
July 19th, 2008 at 8:55 am
thx brother :] nice working
August 8th, 2008 at 10:19 am
Hello
The loader looks pretty cool. But I am having problems extracting it. It says that the archive is either in unknown format or damage. Any idea? I am using winrar
September 3rd, 2008 at 4:43 am
hi,
thanks!!! great work
September 10th, 2008 at 4:18 am
yqefkwtcm teuxf jgehtrxv dcmuokg gzew gikdqh blikdmxq
October 24th, 2008 at 8:39 pm
Man, I know we’re supposed to be all OOP in AS3 and everything, but that’s quite a bit of code to generate a circular gradient. 17k? It’s a cool concept but considering that it will generally be a smaller component on a preloader screen containing a logo and possible other things… maybe you might be better off with just rotating a png around?
November 29th, 2008 at 8:03 am
Thanks :)
March 26th, 2009 at 11:20 pm
I Liked ever these effects in flash
April 9th, 2009 at 10:15 am
Nice, thanks!
April 11th, 2009 at 7:12 pm
how easy, hard would be to put this into Flex3???…….
any tip from an experienced?…. :)
July 18th, 2009 at 9:28 am
Thanks ! I’ve been looking for some class on dynamically drawing a circle along with preloading some assets, I’ll try and take you class as a base to achieve what I want! thanks again
October 14th, 2009 at 6:32 am
[...] you can find a tutorial on creating a Classic Filling Preloader in Flash, written by LearnFlash, and Erik Hallander’s tutorial on how to create a customizable gradient circle loader/ animation for AS3. [...]
November 25th, 2009 at 2:48 am
Thanks alot. Great class. Was looking for something like that.
And a tip: you should always make numCircles a customizable variable, you can get cool variations by reducing the numCircle variable.
Try for example setting:
private var _numCircles:int = 10;
In the SnakeCIrcle class. You get a totaly new loader ;)
Cheers!
February 5th, 2010 at 10:32 am
Thank you, It is very great stuff.