Create an Apple Inspired Flash Preloader
Tutorial Details
- Platform: Flash
- Difficulty: Beginner
- Language: AS3
Twice a month, we revisit some of our readers’ favorite posts from throughout the history of Activetuts+. This tutorial was first published in July, 2009.
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.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Carlos Yanez
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
It looks very good, and by the way, most tutorials for preloaders are videos, so nice with a written tutorial for once
It is a good one, useally i need a video to help me with stuff but this was made well, i can tell that time was put into it.
really good tut :)
God sent!
Thanx from Russia, man;)
wow its cool man
Cool…….
Woww DankeShön Lan :D
i am using flash cs3 proffesinal this souce say unexpeted file format
try to do it from beginning, it is already simple
Hi, Awesome tutorial man…
Is there anyway that I can create this preloader in Flash 8… as m having Flash 8… :(
Plz Help ASAP I wanna make a flash intro for a company where they want a good preloader… n I think this preloader is the perfect one which I was looking for.
Something went wrong ! Does anybody met this error:
1046: Type was not found or was not a compile-time constant: TextField.
how to put it in a flash website?
to utilize in a website you go to the 2nd line in the timeline on the main layer, and hit f9 , enter the following code inthe actionscript pane without the quotes …. “stop()”
then simply start making new layers and make your website . the layers that hold your site info will need to start on frame 3 in your timeline . *Note* the preloader as it stands here will NOT update the percent loaded or the kilobytes of kilobytes remaining bit as the guy who designed this cut and pasted a scripts and didnt edit them to work here, so the loading info will be static.
what is second line in the time line in the main???
Error #1056: Cannot create property __id0_ on classes.Main.
When called from another swf..
Any ideas?
This script is the highest.
However, how should I do for the script that calls other swf movies?
Wow ! thats nice , i just used it in my project. Thanks dude
I think it’s very cool, but for the percentage counter to work, I suggest it is (e.target.bytesLoaded / e.target.bytesTotal) * 100. This way we can have a decimal which can then be multiplied by 100.
This preloader may be great but it really annoys me and all of us intermediate level users of Flash, when it’s not explained just how it intergrates into our Flash application. Please redo and get it right.
Hey Dennis,
Check out this tutorial, The Comprehensive Guide to Preloading a Single SWF File. It’ll help you learn how to create a preloader, and you’ll be able to use that with this tutorial.
Where is open file of this tutorials?
Where is open file of this tutorials?
ok thanks i got the file
Yeah I am trying to fully learn how to use and implement a preloader with a flash site. I Understand what is going on in this tutorial and what not, but I’m very new to coding, so how would I implement this to a flash website.
Also I read in an earlier comment that the Kb loaded and the percent just stay to whatever you put in your textbox, how do I fix all of that
Thank you
Hey Mike,
Check out this tutorial: The Comprehensive Guide to Preloading a Single SWF File.
Hope that helps :)
Hi there, great tutorial. Do you know what I might put or do to simply make the preloader fade out before loading my main site?
Awsome post and straight to the point. I am not sure if this is actually the best place to ask but do you people have any ideea where to hire some professional writers? Thanks in advance :)
i hate when people inspired from Apple, flash is far far too far, where apple cant even see it on its devices. this is really aggly and time wast post. People, what a world. good machice, good software but There is not even cut and paste on mac, but there are people who loves and defend this. i dont get this.
thank for this tutorial sir but this preloader are not working properly , preloader not display online.
please sir solve my problem i shall be thankful to you
This is good tutorial, but…it could use info about the tutorial difficulty :)
I’m a newbie and I don’t understand steps starting from ‘Step 9′ to ‘Step 15′. Where to put those action scripts? Which layer? Which object?
As I said I’m new to flash. So, help me plix :)
i love this tut is very powerful and creative. keep it up
I have a problem and the problem is
How can i design this type of flash in the site view it pls and give respond
http://www.clicknreach.com i love the concept of this site
so how can i design it with flash i know it is not action script.
am a newbie
Thanks. Joseph
i need help
the place where it says
8. //Here you can add a function to do something specific, I just used a trace */
9.
10. trace(“Loaded!”);
i want mine to start playing frame 2 how would i do it
I love this info
Error #2044: İşlenmemiş IOErrorEvent:. text=Error #2036: Yükleme Tamamlanamadı. (orig.)
Error #2044: Unhandled IOErrorEvent:. text=Error #2036: Installing uncompleted.
WHY????
hats off! thak you very much. it’s really cool & complete.
your way of creating preloader is pathetic
Hi,
This tutorial is great.
But, can you tell me how you loaded the movieclip?
i can’t understand it.
Can you explain in detail?
Bharath.
Hi, thanks for your awesome tutorial. :)
However, i met a problem when
TypeError: Error #1006: start is not a function.
at com.classes::Main()
any idea why is it so? Thanks!
Hi
I am a newbie..
I was trying to make this preloader..
And i completed step 6..the fading effect works fine but all the shapes are moving..
I am not sure if i have explained it well..Can i get a email address where i could send you the file?
how do I use it?
How can I assign this preloader to image which I want to load on stage?
Dear Carlos and other!
Im beginner in Flash. This is nice code, but how i can join the code with external swf file.I read this and other forum but cant find any helpful information how i can do it. Can You or any this forum reader provide here on by email (loric@inbox.lv) any full preloader code for external swf file loading?
Thank you for help!Best regards, Robert.
It s agreat preloader but i think have a lot of problems a and issues, in my case:
At the begining it show me a white screen an empty screen and the n im see the preloader in the half loading the movie… why i cant see from the begining the preloader, the other think is that i only see the kylobites downloaded but not the percentage.. it show me from the beginng Loaded.
Would using this preloader in any commercial application violate any copyrights? Does anyone have any links that can claim/disclaim this? Thanks.
Great tutorial. I’m new to this and missing one part. I reviewed the tutorial on preloading a single SWF, this looks like a great method but would prefer to use this preloader to call an external file. I believe I found the command to do it but not sure if I should add it to the main or preloader AS files.
Thank you very much spending time to teach us and it very nice. sadly, I not really understand how to achieve the step from step 5
PLEASE HELP
Thanks a lot