Preloaders are a big part of flash sites, just look around the internet today at some flash sites and you'll see some really creative ideas. Although I am surprised some of these creative preloaders don't need a preloader to load themselves as their is so much animation going on! Not that I am complaining, I think they are excellent and really enhance the flash experience.
Not so creative In this Preloader unfortunately but good enough to get the job done I think. So in this tutorial I'll show you how to create a very basic preloader using Flash CS3 and Actionscript 3. So lets open up flash and get started!
Step 1
Start by creating 3 new layers on your timeline and call them Actions, Loader and Stage. Insert a Keyframe on the second frame of the Actions and Stage layers. Now select the Loader Layer and insert a Frame, your timeline should now look like this;
Step 2
Select the First Frame of the loader layer and select the Rectangle Tool. Set the Fill Color to #FFFFFF and the Stroke Color to #CCCCCC. Now hold down shift and draw a small rectangle on the stage.
Step 3
Highlight the Rectangle you have just created, Select the Selection Tool (V) and Right Click the center of the rectangle and select Copy. Now right click away from the rectangle and select Paste, repeat this another 3 times. You now should have 5 rectangles on the stage, align them on your stage so that they look like this;
Step 4
Now Highlight all of the rectangles and Right Click and select Convert To Symbol, give it the name Loader_mc and make sure Movie Clip is selected and press Ok.
Step 5
Your rectangles should now have a Blue Border around it, indicating that its now a Movie Clip. Scroll down to the Properties Panel at the bottom and give it the instance name loaderAnimation.
Step 6
Now we are going to create the pre-loader animation, to do this first Double Click on the movie clip you have just created. We now should be inside the loader_mc Movie Clip with a brand new timeline. Go to Frame 25 Right Click and select Insert Keyframe. Now go onto the Stage and click off the Stage on the Grey Area then click the Center of the First Rectangle and change the Color Fill to #0099FF. Select the First Frame of the layer and hold down Shift and select Frame 25, highlighting all the layers. Right Click and select Create Motion Tween, finally Press Enter to test that and the Rectangle should fade from white to blue.
Step 7
Go to Frame 50 and Insert a Keyframe, now click off the stage in the Grey Area and select the Second Rectangle and change the Color Fill to #0099FF. Repeat this step for all the Rectangles Inserting a Keyframe every 25 Frames. Press Enter to test it and all the rectangles should fade in one after the other.
Step 8
Click the Light Blue Arrow below the Layers Panel to go back to our main timeline. Now click on the First Frame of the Actions layer and Press F9 to open up the Actions Panel. Copy and paste this code below.
function loading(event:Event) {
trace("loader Working");
var bytestotal = stage.loaderInfo.bytesTotal;
var bytesloaded = stage.loaderInfo.bytesLoaded;
var rectangle = Math.round(bytesloaded*100/bytestotal);
loaderAnimation.gotoAndPlay(rectangle);
if (bytesloaded >= bytestotal) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, loading);
removeChild(loaderAnimation);
}
}
Step 9
Go to the Second Frame of the Actions Layer Press F9 and add this line of code;
Step 10
Now go to the Stage Layer and select the Second Frame and add your content, in this case I've added a picture.
Conclusion
This is a very basic preloader but hopefully it's given you a platform to go on and create more complex. I'll be adding more complex preloaders in future posts but I thought id start with a very basic one.
Download the completed file.
This post is tagged Actionscript, Actionscript 3, Flash CS3, preloader, tutorial
Share This Post
Jobs
16 Comments
The class or interface 'Event' could not be loaded.
so simple that - but i cant do it
I am already using some code very similar to this.
My question for you is this:
Preloader in this fashion will not actually display until all items in the library for the file have been loading. This can often mean your preloader does not appear until 30% or more has been loaded of your actual file.
How do you get the pre-loader to appear before anything else?
I thought about having a graphic copy of the preloader on frame1 then shifting everything forward 1 frame?
there's a mistake…
Step 6
instead of create motion twean, it should be create shape twean, as those are shapes.. tsk tsk, this will throw people off.
I'm confused where's the actionscript?
I have a more complex animation as preloader and I want it to run it's full animation even if everything is preloaded.
Any help on how I can make it play through the preloader, then go to frame 2 even if all bytes are loaded?
where is addChild() ???
This script is removing child but what child?
first tutorial that worked, thanks!
special thanks to pnguyen for the correction to the tut.
Hi guys,
Here's a solution to the preloader problem that I found that works.
Adjust your code to the following on the first frame:
stop();
this.addEventListener(Event.ENTER_FRAME, loading);
function loading(evt:Event){
trace("loader Working");
var bytestotal = stage.loaderInfo.bytesTotal;
var bytesloaded = stage.loaderInfo.bytesLoaded;
var rectangle = Math.round(bytesloaded*100/bytestotal);
loaderAnimation.gotoAndPlay(rectangle);
if (bytesloaded >= bytestotal) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, loading);
}
}
Found another way. If you want to use the add/remove child method, what you need to do is right click onto the loader_mc movieclip and go to >Linkage. Once there export for Actionscript. Then you can delete the loaderAnimation instance off the stage and add the following script to frame 1 instead of the script provided in this tutorial:
stop();
var preloader:MovieClip = new loader_mc();
addChild(preloader);
this.addEventListener(Event.ENTER_FRAME, loading);
function loading(evt:Event){
var bytestotal = stage.loaderInfo.bytesTotal;
var bytesloaded = stage.loaderInfo.bytesLoaded;
var rectangle = Math.round(bytesloaded*100/bytestotal);
preloader.gotoAndPlay(rectangle);
if (bytesloaded >= bytestotal) {
gotoAndStop(2);
removeEventListener(Event.ENTER_FRAME, loading);
removeChild(preloader);
}
}
If you want to position your loader_mc so that it is aligned to the middle of the stage, add this underneath your addChild(preloader); :
preloader.x = preloader.stage.stageWidth / 2 - preloader.width / 2;
preloader.y = preloader.stage.stageHeight / 2 - preloader.height / 2;
Incoming Links
Leave a Reply