AS3 Apple Style Preloader
October 1st, 2008 by Steven Sacks
If you want an easy way to get an Apple style preloader for AS3, as seen below, it's as simple as this class, which uses the Flash Drawing API, so it's extremely light.
Download CircleSlicePreloader.as
package net.stevensacks.preloaders
{
import flash.events.TimerEvent;
import flash.events.Event;
import flash.display.Sprite;
import flash.display.Shape;
import flash.utils.Timer;
public class CircleSlicePreloader extends Sprite
{
private var timer:Timer;
private var slices:int;
private var radius:int;
public function CircleSlicePreloader(slices:int = 12, radius:int = 6)
{
super();
this.slices = slices;
this.radius = radius;
draw();
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
}
private function onAddedToStage(event:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
addEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
timer = new Timer(65);
timer.addEventListener(TimerEvent.TIMER, onTimer, false, 0, true);
timer.start();
}
private function onRemovedFromStage(event:Event):void
{
removeEventListener(Event.REMOVED_FROM_STAGE, onRemovedFromStage);
addEventListener(Event.ADDED_TO_STAGE, onAddedToStage);
timer.reset();
timer.removeEventListener(TimerEvent.TIMER, onTimer);
timer = null;
}
private function onTimer(event:TimerEvent):void
{
rotation = (rotation + (360 / slices)) % 360;
}
private function draw():void
{
var i:int = slices;
var degrees:int = 360 / slices;
while (i--)
{
var slice:Shape = getSlice();
slice.alpha = Math.max(0.2, 1 - (0.1 * i));
var radianAngle:Number = (degrees * i) * Math.PI / 180;
slice.rotation = -degrees * i;
slice.x = Math.sin(radianAngle) * radius;
slice.y = Math.cos(radianAngle) * radius;
addChild(slice);
}
}
private function getSlice():Shape
{
var slice:Shape = new Shape();
slice.graphics.beginFill(0x666666);
slice.graphics.drawRoundRect(-1, 0, 2, 6, 12, 12);
slice.graphics.endFill();
return slice;
}
}
}Posted in Actionscript, Flash, Tips/Tricks
October 1st, 2008 at 11:33 am
Nice piece of work! Thanks for giving the source to it!
October 1st, 2008 at 12:04 pm
I would change alphas of each bar in the circle instead of rotating whole circle.
only not sure which way would be lighter?
thx
October 1st, 2008 at 12:08 pm
thanks for sharing the code .
October 1st, 2008 at 2:35 pm
@armen There's no way that setting the alpha of 12 Shapes every tick is quicker than rotating a single Sprite. It's 12 actions vs 1.
October 2nd, 2008 at 9:57 am
[...] ??????????????AS3 Apple Style Preloader?? ?????????????????? import?????????????????????? ???????????????????????????? [...]
October 3rd, 2008 at 12:18 am
Thanks a lot Steven.
October 6th, 2008 at 1:03 pm
Looks good, but there should be either a deconstruct or a removed from stage listener in there to stop and de-reference the Timer. Otherwise the preloader will remain in memory indefinitely because Flash won't garbage collect the Timer.
October 9th, 2008 at 1:57 am
[...] Steven Sacks's original post [...]
October 9th, 2008 at 11:02 am
Thanks for pointing that out, Nick. I've updated the class.
October 18th, 2008 at 4:38 pm
Hi Steven. About 6 mo's into AS3 and just getting into studying how to reference external classes. How could I utilize this as a pre-loader for any events that are triggered in my movie globally? Say, every time an image is loaded, or external swf is pulled in?
Would I reference the class somehow everytime I run each function?
Thanks, Ahhhh
October 29th, 2008 at 12:56 pm
What does it look like? The example hangs on load.
October 29th, 2008 at 1:28 pm
You're hilarious.
October 31st, 2008 at 10:28 am
I know. I know.
haha
October 31st, 2008 at 1:00 pm
The best list of Flash tutorial information is at http://www.flashbasics.com
November 3rd, 2008 at 12:44 pm
You are my hero!!! thanks to you i didn´t have to write the code!!!
November 10th, 2008 at 10:30 am
Hey, I am a designer…how do I implement the .as you provided?? Please let know, thx!
November 19th, 2008 at 1:55 am
[...] ?preloader?????????? AS3 Apple Style Preloader [...]
November 21st, 2008 at 4:16 pm
isn't that copyrighted by steve jobs?
November 29th, 2008 at 9:56 am
How would you implement this? I'm new to action script, but what line launches the file or files that were loaded? Would you put this on a keyframe in the swf that is loading? or call it externally?
December 2nd, 2008 at 9:02 am
thats great, now we can all make websites that look like osx… as if shiney buttons were not enough…?
December 6th, 2008 at 11:46 pm
i don't get it do i just open up a new file and paste all of that into a frame is that it coz it's not working for me
i'm new to actionscript can u plzz help me
December 7th, 2008 at 10:41 am
Right-click and save the .as file link and put it in the package folder path net/stevensacks/preloaders. If you don't know what that is, you should do some googling.
Then all you need to do to add it is
import net.stevensacks.preloaders.CircleSlicePreloader;
var preloader:CircleSlicePreloader = new CircleSlicePreloader();
addChild(preloader);
December 11th, 2008 at 8:59 am
Thanks, Steve! Looks great and so easy! I couldn't figure out how to make it work, looks so easy with the Drawing API:)
December 16th, 2008 at 4:52 am
It's great, do you have it in AS2,
thanks
hania
December 23rd, 2008 at 7:47 pm
Yeah, that's nice. But you don't explain it. You throw code at the wall it's bound to slide and land on the floor. Maybe a good old fashion step by step tutorial could help the people.
or include a .fla file.
January 1st, 2009 at 4:49 pm
@Steven: some performance-related questions (I'm using it as a cursor replacement during data loading operations and need to keep things as smooth as possible) -
1) Wouldn't setting cacheAsBitmap to true after the draw method has been called be better for performance?
2) Is there a need to add and remove the listeners to the ADDED_TO_ / REMOVED_FROM_STAGE events on every call? Surely adding them once in the constructor would suffice?
3) Is there a reason you generate a new Timer instance every time the spinner is added to the stage? Again surely you could simply declare it in the constructor and adding/removing listeners, resetting, etc. it once removed?
4) Not a question at all: thanks for sharing!
@Jill: the fact that Steven has chosen to share the code is enough that you might consider saying thank you.
Simply as a matter of basic etiquette you shouldn't be demanding a tutorial in any case, but frankly he's made the class so simple to implement that if you know what you are doing getting it up and running is a matter of moments, and if you don't you *really* need to get to grips with the basics of classpaths and how the display list works first: doing so will be a far better way of learning than having your hand held all the way.
That said this will work (assuming you have the classpath set correctly):
1) Create a new movie and a document class called Spinner.as
2) Spinner.as should contain
package
{
import net.stevensacks.preloaders.CircleSlicePreloader;
import flash.display.Sprite;
public class Spinner extends Sprite
{
private var __preloader:CircleSlicePreloader;
public function Spinner()
{
__preloader = new CircleSlicePreloader();
addChild(__preloader);
}
}
}
3) Publish.