Preloaders are a must have in your Flash applications. They tell the user that the program is running but can't show any contents until they're sufficiently loaded. In this tutorial I'll help you create an Apple inspired preloader MovieClip and teach you how to display some loading information. All this using Flash and ActionScript 3.0.
Final Result Preview
Let's take a look at the final result we'll be working towards:
Step 1 - Brief Overview
We're going to create a preloader MovieClip using Flash tools such as the Rectangle Primitive Tool and something very important to get the correct alignment: the Snap To Objects option. The clip will have its movement in the timeline and we'll build the code in two classes. The first class will take care of the preloader and the other will be the Document Class, where we'll start the preloader.
Step 2 - Starting
Open Flash and create a new Flash File (ActionScript 3).
Set the stage size to your desired dimensions and add a background color. I've used 600 x 300px in size and added a gray radial gradient (#666666, #333333).
Step 3 - Creating the Basic Shape
This preloader is composed of one simple shape which is repeated 12 times.
Select the Rectangle Primitive Tool and set the corner radius to 15, make sure to lock the corner radius control so every corner is equally rounded.
Set the color to white and and draw a 25 x 85px rectangle, don't use a stroke.
That's it, this is the basic shape that will be the main part of our preloader.
Step 4 - Positioning the Shapes
Use the Align panel to set the previously created shape in the top-center of the stage.
Duplicate the shape (Cmd + D) and align it to bottom-center.
Duplicate both shapes and then go to Modify > Transform > Rotate 90º.
Here comes the tricky part, select the Free Transform Tool and make sure you've selected the Snap To Objects option (this is the magnet icon in the toolbar or you can go to View > Snapping > Snap to Objects). Start rotating the top and bottom shapes, you'll notice that the rotation stops at every determined angle, we'll use two stops to separate the shapes from each other, ending into something like this:
Step 5 - Changing the Alpha
We'll change the shapes' alpha property to get the "follow" effect we're after. There are 12 shapes, that's a little more than 8 but to avoid the use of decimals we'll set 9 in 8 multiples and the for last 3 we'll add 10. This gives us alpha values of 8, 16, 24...72, 80, 90, 100. Take a look at the image to get the idea.
Step 6 - Animating
Convert all the shapes into a single MovieClip and name it "Preloader". Check the Export for Actionscript checkbox and write "classes.Preloader" in the class textfield. Double-click the clip to get access to its Timeline. The animation process is very simple; add a new Keyframe and rotate the shapes until the 100% alpha shape is in position where the 8% alpha shape was. Repeat this until you get the full animation. The frames should be in this order:
Since the animation is timeline based, the speed will depend on the Frames per Second of your movie, mine is 25fps and I've used 2 frames per state.
Step 7 - Choosing the Size
Our preloader is 300 x 300px in size, normally it wouldn't be so large, but it's good to have the option. Choose an appropiate size for your preloader and center it on the stage. I chose 48 x 48px.
Step 8 - Loading Information
Create a Dynamic Textfield and give it the instance name "info". This will display the total KB to load, the amount currently loaded and the percent that it represents. Write some text to get an idea of the size it will use and center it.
Step 9 - Creating the Preloader Class
Create a new ActionScript file and start importing the required classes:
package classes
{
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.Event;
import flash.events.ProgressEvent;
Step 10 - Extending the Class
public class Preloader extends MovieClip
{
Since our preloader is a MovieClip and it's using a timeline, we're going to extend this class using the MovieClip class.
Step 11 - Variables
We only need to use one variable in this class. This variable will store the instance name of the textfield we're using to show the loading information.
private var dataTextField:TextField;
Step 12 - Start Function
public function start(dataTextField:TextField):void
{
this.dataTextField = dataTextField; //Sets the dataTextField var to the parameter value
/* The loaderInfo Object is in charge of the loading process, in this code we add
listeners to check the progress and when the movie is fully loaded */
this.loaderInfo.addEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.addEventListener(Event.COMPLETE, onComplete);
}
Step 13 - The Progress Function
private function onProgress(e:ProgressEvent):void
{
/* Here we use some local variables to make better-reading code */
var loadedBytes:int = Math.round(e.target.bytesLoaded / 1024);
var totalBytes:int = Math.round(e.target.bytesTotal / 1024);
var percent:int = (e.target.bytesTotal / e.target.bytesLoaded) * 100;
/* Sets the loading data to the textfield */
dataTextField.text = String(loadedBytes + " of " + totalBytes + "KB Loaded\n" + percent + "% Complete");
}
Step 14 - The Complete Function
private function onComplete(e:Event):void
{
/* Remove listeners */
this.loaderInfo.removeEventListener(ProgressEvent.PROGRESS, onProgress);
this.loaderInfo.removeEventListener(Event.COMPLETE, onComplete);
//Here you can add a function to do something specific, I just used a trace */
trace("Loaded!");
}
Step 15 - Document Class
Create a new ActionScript file and start writing:
package classes
{
import flash.display.MovieClip;
public class Main extends MovieClip
{
public function Main():void
{
/* Starts the preloader, "preloader" is the instance name of the clip */
preloader.start(info);
}
}
}
This code will be the document class, so go back to the .Fla file and add "classes.Main" to the class textfield in the properties panel.
Conclusion
You can always change the color of the preloader to use it with differents backgrounds, an easy way to do that is to change the Tint value in the properties of the clip, try it!
Thanks for reading, feel free to leave comments and questions.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
User Comments
( ADD YOURS )Has_n June 19th
Coooooool, Im the first hehe…
( )chand June 21st
coooooooooooooool, I’m the first hehe… to reply your hehe… lolz
( )Uday September 6th
He he
Murilo June 19th
Very cool guy, but in the sample, I didn’t see the content after loaded. I think this is needed.
( )David June 19th
see step 14. replace the trace(”Loaded!”) with whatever you want to happen.
( )Dario Gutierrez June 19th
Carlos is great tut and very nice. Apple is one of my trademarks of inspiration.
( )yellowagent June 23rd
the design is cool. but step 9 and 15? supposed to create two additional flash files?
and before the conclusion was added – “This code will be the document class, so go back to the .Fla file and add “classes.Main” to the class textfield in the properties panel.” clueless…
cmon, be gracious to the less adept ones. could help with a little more details? wld really appreciate it. if not, it will be such a waste.
( )Danke Willis June 19th
Come on!! These tutorials are getting worse and worse all around the tuts plus network. I appreciate more tutorials regularly but the quality is declining. Still this website is free, but i don’t know, just my 2 cents.
( )André June 19th
I disagree with you. I think here we can get very well explained tuts and a lot of different tutorials that you won’t find in another places. Maybe they should be separated by beginner/intermediate/advanced tuts, but i am still loving these tutorials and I will help whenever I can.
( )Diego SA June 19th
I disagree too, they explain everything very well.
( )apolo June 19th
Very Nice tutorial tks
( )System.gc() June 19th
i am sorry, but i have to say: very weak.. this tutorial might have some sense if everything is done in code, then it might teach something.. now it is just another animated preloader as thousands other..
( )Paul June 20th
I disagree completely the fact that classes are used is a big bonus for people new to OOP. And even the animation stuff is useful for beginners. Tutorials take time to produce and it is very good that these are available for free, even better that the source is available for you to play around with.
I’m sorry to hear that you think the quality of completely free tutorials is not good enough!
( )Rob July 2nd
yeah, but whoever made this tutorial missed the point of using tutorials in the first place, ok so it animates, but how do I preload something??? now give me back my 15 minutes
alsabaso October 25th
owz? you people are losserz.. can you do a tutorial? do you know how to create a preloader? if not, just shut up and never come back in this site. if you know how to create a preloader, and why are you here?!
( )Diego SA June 19th
Nice, I really love Apple stuff!
( )Sveatoslav June 19th
Super
( )eberhardt June 20th
Could the file be provided as cs3 as well?
( )Sameer June 27th
very good
( )John June 20th
Why didn’t you just use a simple 360 degree rotation instead of manually doing each step
( )_equ June 20th
Why you are not using new Motion Tween?
After Step 5 you should go to timeline, right click on first frame, and then select CreateMotion Tween. In the next step go to “motion editor” pane, and change ‘rotation Z’ property to 360. Additionaly you can change the easing function and modify animation speed by expanding tween on the timeline.
Less people are familiar with new CS4 features than creating preloader (beacause this subject is quite common on the flash sites) so covering it in this tut would be nice.
Anyway thanks for this tutorial, many of new-comers might find it handy
( )CSS Websites June 20th
That is a cool tutorial!
( )Ben June 20th
You can actually achieve this Apple style pre-loader just by using a single class file. http://www.stevensacks.net/2008/10/01/as3-apple-style-preloader/
( )b00m June 20th
Nice nice…Tnx for the tuts!
( )elinix June 20th
allways wanted to know how to make these preloaders cheers
( )Tomas Sinkunas June 21st
Outcome is nice, but tutorial on it’s own is very week. Lack of code explanations, no additional info on what is happening on the scene. As I am a beginner in Flash, I couldn’t understand what’s going on. Sorry. As tutorials should teach something, this one did actually nothing.
At least it could be expanded to show how to put this preloaded in the scene and where to put actual content. For now it just worth copy/paste practice.
That’s just my 2 cents.
( )Mark June 22nd
Disappointed in the lack of explanation. If I know Flash well enough to follow this Tut, then I could probably create a pre-loader without it.
( )Chris Spence June 23rd
This might render a little weird in this small space, but I created a pure actionscript version of the loader with customizable parameters (color, radius, segment number, and rotation speed).
You’ll need to instantiate it as follows:
var loader:AppleLoader = new AppleLoader(); loader.x = 200; loader.y = 200; addChild(loader); and create a new AppleLoader.as class file for the following code in your source directory. package { import flash.display.Bitmap; import flash.display.Sprite; import flash.display.Shape; import flash.utils.setInterval; [SWF(width="1024",height="700",backgroundColor="0x555555",frameRate="30")] public class AppleLoader extends Sprite { private var _color :uint; private var _radius :Number; private var _segments :Number; private var _rotationSpeed :Number; private var _illustration :Sprite = new Sprite(); public function AppleLoader(pColor:uint=0xffffff,pRadius:Number=50,pSegments:Number=12,pRotationSpeed:Number = 50) { super(); _color = pColor; _radius = pRadius; _segments = pSegments; _rotationSpeed = pRotationSpeed; buildDisplay(); } private function buildDisplay():void { var angle:Number = 360/_segments; var radians:Number = angle * Math.PI/180; var rot:Number = 0; for(var i:int = 0; i < _segments; i++) { var shape:Shape = new Shape(); shape.graphics.beginFill(_color,1.1-(0.9*i/(_segments-1))); shape.graphics.drawRoundRect(-1*_radius/20,-1*_radius/6,_radius/10,_radius/3,_radius/10); shape.graphics.endFill(); shape.x = _radius/2 * Math.sin(radians*i); shape.y = _radius/2 * Math.cos(radians*i); shape.rotation = -1 *angle * i; _illustration.addChild(shape); } addChild(_illustration); setInterval(rotate,_rotationSpeed); } private function rotate():void { rotation += 360/_segments; } } }( )strony internetowe June 23rd
good job!
( )daniel July 2nd
sweet,
( )thx dude
uiman July 2nd
Thanks for share it, but this isn’t educational, there’s lots of step without explanation. You’re showing HOW to do it, but you should say WHY you do that.
( )Abid Famasya July 2nd
Yeah,, great tutorial.. I can find most of my mind here
( )matt July 6th
Can somone please help me load this onto my web site ill wire you 50 bucks i need it finished today lol
( )Danny July 12th
Very nice preloader. Is good when you learn quality things. Many thanks.
( )timo July 13th
Nice job, only i build my website is AS2… Does anywone knows the code for using this as a preloader is as2? I work with CS4 but i just don’t have the know-how of as3
thanks a lot!
( )matt July 14th
The Alpha Steps should be something more like:
100, 92, 83, 75, 67, 58, 50, 42, 33, 25, 17, 8
for those of us who are more anal about silly things like that.
( )ryan July 15th
amen brother
haha
( )Bicudo July 17th
Ok, I’m new to this whole website making business and I have to say I cheated with mine by using photoshop. I then got sitegrinder to do all the hard work for me. Sorry to all those talented web savy people out there but I just don’t get code.
Anyway, I have video on my site that takes a while to load and would love to use this preloader to let visitors know that although they don’t see anything something is actually going on. I have flash, can follow the tutorial, copy the code to the action script files and make the wonderful spinning wheel but how do I get from here to having it working on my site?
Any help or a follow up tutorial would be very much appreciated.
Only found the tuts network a few weeks ago and have to say I’m loving the tutorials.
( )sko September 25th
The thing about code is that it’s a language – like French, Spanish, German, etc.
You have to think is those terms. Learning “phrases” first, and then putting those phrases into “sentences”, then add some “explanations” is one approach to help wrap your head around it.
Being a beginner myself, and fortunate to speak 3 languages, I’m finding that code (html, flash, etc.) is very much like any language – and indeed it IS a language, as any coder will tell you.
( )Your Name July 17th
wow, this is definitely for advanced flash actionscripters.. it’s really hard to follow..
( )Pontus Madsen July 19th
If I put a gotoAndStop(2); at the end where you put “//Do something”, and then just put the text “loaded!” in frame 2, it goes on a berserker loop between the two.. any suggestion on how to solve that?
( )Freelance TasarımcI July 19th
Thank you for sharing
( )Mike July 19th
dude i followed your tut till the end, i can read some code because i know some java but i can’t understand how you use these 2 scripts.
1. I have to store them in the same folder with the fla file?
( )2. I have to store them with a specific name?
Katie July 21st
Wish this was available in ActionScript 2.0. For some reason I can’t get the text (numbers to work).
( )The wheel goes round, but the numbers don’t count.
Kowtow July 22nd
How do you end it so it can load?
( )Andy July 26th
Tried to open the and got “unexpected file format” error. I’m guessing that’s because I’m using CS3? If so, can you make the CS3 versions available
( )JLMad July 28th
Thanks Carlos:)
( )Now where can I sign up for the ActionScript for Dummies tutorial?
Cheroka July 29th
GRAN TUTORIAL PERO YO ESTOY RECIEN EMPEZANDO A USAR FLASH CS3
( )Popthetrunk August 3rd
Hi how do i put this preloader into the my webpage? ive made the homepage from your “Build a Fluid Website Layout”
( )Amar kumar August 16th
very very nice from Amar Bangalore(India)
( )aliefrahman August 18th
cool…
very nice…finally
( )niall August 19th
source file does not work. I cant open it. The pure action script version looks great but how do i get it to work….
( )ALEX August 21st
Hi. I followed the tutorial step by step, but in the end, it isn’t working as a loader it just loops the animation. When I test it with the Simulate Download option it will load the page without showing anything and then it shows the preloader looping once the page is loaded. It doesn’t work. What am I missing? Can’t really tell.
( )Leo August 24th
ARg so simple! I ended up drawing all the rectangles and alpha tweens in AS… 100 lines of code for a simple preloader component that spins..
( )John August 27th
I need help when i try test movie the two things flash between each other. Like the preloader and my content will just keep swaping if u know what i mean?
( )designer September 8th
its kool
but anyone can try for the follow link
http://flashden.net/item/balls-of-light-preloader/10855?ref=FlashSpeaks
I mean can we make this if yes so what is the coding for it.
( )George September 14th
Hi,
Can anyone please tell me how do i link this file to an external swf please ?
Im having issues with making it work, nothing has worked so far can anyone please help?
( )Vero September 21st
Esta buenisimo el tutorial!!!!!
Saludos =)
( )Jordana Chaves September 24th
I did not use flash to do my site, I only used fireworks and dreamweaver, it is possibel to have a preloader in a site like mine? Thank you very much!
( )vijendra October 13th
wow guys great job … its really nice to have this kind of work…
( )Boris October 14th
Hi there,
Nice tutorial. Just 1 question: How can i go back to the main class when the loading is done.
@ the ”
//Do something”
i would want a link to a function on the main class.
thanks
( )Nimche October 20th
In Step 13 – Progress
code should be like this in line 7:
var percent:int = (e.target.bytesLoaded / e.target.bytesTotal * 100);
Basically Loaded should be devided by Total x 100 to get the right percentage, unless you want your percent to goes backward.
For people to see the Simulate Download Progress,
You should creat the second frame with your stuff and then make a new layer with actionscript command stop();
then in the preloader where it says put your stuff there, write this code to
gotoAndStop(2);
Goodluck
( )B.Sloan October 25th
It looks very good, and by the way, most tutorials for preloaders are videos, so nice with a written tutorial for once
( )grafik freelancer October 28th
really good tut
( )kagui November 6th
God sent!
( )