00:00
00:00

As3: Simple Preloader, Step By Step

62,851 Views | 41 Replies
New Topic Respond to this Topic

AS3: Main

AS3: Simple Preloader, Step By Step

Step 1

Create your movieclip and textfield. For this recipe, you'll need a simple rectangle, and a dynamic textfield

a) Draw your rectangle, to the width you wish it to be when fully loaded. Remove the outline by double-clicking on it and pressing delete.
b) Select the rectangle, and right-click>Convert to Symbol. Select Movie Clip, and give it a name like loadBar. Click OK.
c) With your new MC still selected, use the property bar (CTRL+F3) to give it an Instance Name. My example uses lbar
d) If you wish your bar to load from left to right, as opposed to outwards in both directions from the middle, follow steps e - g
e) Double-click your new MC to enter Edit mode
f) Select the rectangle, and drag it so that the left-hand end is on the little cross (MC registration point, 0,0).
g) Exit Edit mode by double-clicking anywhere except the rectangle

Now for the textfield. Back on the main Stage

a) Select the Text tool (T), and in the Properties bar, select 'Dynamic Text' from the dropdown.
b) Drag yourself a textbox at the desired position above or below the loadbar
c) Select it, and in the Properties Bar, give it a name for reference. My example uses lpc
d) If you want it to look professional, click the 'Embed' button on the Properties bar, select 'Numerals' from the list, and type % in the 'include these characters' box below. Click OK to close the embed window

OK. On to the Actionscript. Select frame 1 on the main timeline, and add this code:

//Import the required assets
import flash.display.*;
//Stop the playhead while loading occurs
this.stop();

//Create a listener to call the loading function as the movie loads
this.loaderInfo.addEventListener (ProgressEvent.PROGRESS, PL_LOADING);

/*This is the main function, basically it grabs the total and loaded bytes,
calculates a percentage, and displays it by stretching the bar and adjusting
the textfield display. If your bar/textbox instancenames are NOT lbar/lpc,
you'll need to adjust this code to match your instance names*/

function PL_LOADING(event:ProgressEvent):void {
var pcent:Number=event.bytesLoaded/event.bytesTot al*100;

//Stretch the bar
lbar.scaleX=pcent/100;
//Display the % loaded in textfield
lpc.text=int(pcent)+"%";
//If the movie is fully loaded, kick to the next frame on the main timeline
//You may wish to change the gotoAndStop(2) to a gotoAndPlay(2)

if(pcent==100){
this.gotoAndStop(2);
}
}

That's it. Just start your movie on frame 1, rather than frame 2, on the main timeline. If you've already made your movie, you can shift all frames by selecting the first frame, SHIFT-Clicking the last frame, and dragging them all to the right by one frame (yeah, I'm sure most of you know this already, but there's no harm in mentioning it)

You can test your preloader offline, by pressing CTRL+ENTER twice. While in that mode, you can use the View>Download Settings to simulate download speeds ranging from 14.4 kbps modem, up to a T1 line.

If you don't want to spend the time learning this or creating the necessary assets, there are two versions of the source. Version as of this tut is here, and there's also a version with a Play button on the second frame over there.

If you're interested in expanding further, or adding more glitz to your preloader, consider using the pcent/100 to manipulate the playhead in a 100-frame MC. It's also worth checking out the other triggers for ProgressEvent in the Flash Help files, for more information on the subject.

Feel free to add your own approach to preloader to this thread


- - Flash - Music - Images - -

BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-05-10 19:20:25


Very good tutorial. Everything explained well and easy to understand.


========|| WWWWWWWW>[-[Blog] - [Audio] - [Userpage] - [Flash] - [Last.fm]-]<WWWWWWWW ||========

BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-05-10 19:34:30


Awesome, Thanks :D


iamcoreyg.com // campnorth

Need a website? music? graphics? CONTACT ME.

BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-05-10 20:06:18


Nice job, Denvish. Will look into this tutorial and a few of the AS3 tutorials in the AS3: Main when I get my copy of Flash 9.

Response to As3: Simple Preloader, Step By Step 2007-05-11 12:02:49


Thanks so much m8!

have you got any advice to someone (me) who has no knowledge of AS and wants to learn AS3? or any tuts to get me started?


Why not send me a PM, or visit my User Page

BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-05-11 12:06:08


ahh, forgot to mention, is tehre anyway for it to auto play after it loads?


Why not send me a PM, or visit my User Page

BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-05-11 12:08:19


At 5/11/07 12:02 PM, Battered-Prawn wrote: have you got any advice to someone (me) who has no knowledge of AS and wants to learn AS3? or any tuts to get me started?

I assume you don't know other languages too?
Do lots of experiments to develop an ability to think for yourself. People who don't take off from using stepbystep tutorials only always complain about how stuff is insufficiently covered for them.
But anyway, there aren't many stepbystep tutorials for AS3 so you might be lucky. :P
Most AS2 stuff applies to AS3 as it is not that diffirent though, you just gotta know what becomes what.


BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-05-11 12:15:44


At 5/11/07 12:06 PM, Battered-Prawn wrote: ahh, forgot to mention, is tehre anyway for it to auto play after it loads?

Well if you have a full preloader MovieClip,you could add _root.play(); to the last frame of your MC.You could also have it play from the AS(I think)

Try:
if(pcent==100){
_root.play();
}


wat

Response to As3: Simple Preloader, Step By Step 2007-05-11 12:15:44


ok, so basically analyse the code and see what i can come up with. thanks.

*ignore my second post*


Why not send me a PM, or visit my User Page

BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-05-11 15:12:48


Thanks for this. AS3 is actually a hell of a lot easier than i thought, i am starting to get the hang of it now :).


BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-05-11 15:22:54


mmmm, that's a nice tutorial. any brainless slug should be able to figure that out... which reminds me, i've been using weebl's preloader (i stole it when he gave me a .fla to work on one of his weebl and bob episodes, i'm a whore :( ) for ages, i think it's time i made my own :P

thanks denvish <3


- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - : : fart : : bikes: : - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-05-11 17:28:50


Thanks alot i really needed it.

Response to As3: Simple Preloader, Step By Step 2007-07-07 12:41:40


I get the preloader to work correctly in AS3. When I publish it to the web it works correctly and goes to frame two. However if I hit refresh on the web browser it refreshes and stays on frame one the preloader and does not goto frame two. Any suggestions?

Response to As3: Simple Preloader, Step By Step 2007-07-07 12:43:47


nice tutorial. i would prob lern that. i just have the newgrounds preloader but just moddifed to the max so its nolonger the newgrounds preloader (as seen in my post 'syndacite the flash seriers)

but great work. you should send this into www.tutorialized.com

Response to As3: Simple Preloader, Step By Step 2007-07-07 16:29:43


that's awesome!

my only question is this ... doesn't the html page have to load up the entire swf file before you see the preloader anyway? i have a huge flash website that i'm making a preloader for, and i was thinking maybe i should make a separate preloader swf file, and have that swf load and call in the bigger swf. ya know what i'm saying?

i guess i could just put the code into the action for when it's loaded, to load the new swf... but i'm curious why that wasn't mentioned in the tutorial... would love to hear anyone's ideas cause i am no expert :)

thanks!!!

Response to As3: Simple Preloader, Step By Step 2007-07-07 16:37:04


OK, so will this be going in As Main or anew thread, AS3: Main?


Steam: imuffin101

BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-07-07 16:39:37


At 7/7/07 04:29 PM, silverbirch wrote: that's awesome!

my only question is this ... doesn't the html page have to load up the entire swf file before you see the preloader anyway? i have a huge flash website that i'm making a preloader for, and i was thinking maybe i should make a separate preloader swf file, and have that swf load and call in the bigger swf. ya know what i'm saying?

The file is always loaded progressively, so it'll load the frame with the preloader in then that'll show the rest of your movie loading. I think that in some methods of attaching files in IExplore that may not work, but if you use a compatible method of embedding your .swf then you should be A OK.


BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-07-07 16:53:37


oh well would you look at that.

i just did this according to your isntructions, and it totally worked! lo and behold.

i guess that means that actually flash apps only really download one frame at a time, and then while they're sitting on one frame, they work on downloading the rest.

it's just weird because i saw that my friend had a preloader that was a separate file, and it was preloading and calling in an external swf, and i actually got to see the file with and without the other preloader connected to it, and it did play a lot slower without the preloader. so i don't quite get how that works.

whatever!

:)

Response to As3: Simple Preloader, Step By Step 2007-07-08 01:37:58


whoa!!!

i just realized something crazy...

this preloader works wonderfully, but if your refresh the page, it simply goes to the preloader frame and doesn't laod at all.... do you know what could be going on with that, or how to fix it? i would really appreciate your help :)

here's my page :

http://www.heartgardens.com/sitemap.html

many thanks!

silverbirch

Response to As3: Simple Preloader, Step By Step 2007-07-08 02:19:13


oh ok... i've moved the site, just so that other people can still see the working version.

here it is :

http://www.heartgardens.com/sitemap_preloader .html

thanks again!

Response to As3: Simple Preloader, Step By Step 2007-07-08 03:39:39


is action script 3 and easier or better or needed in any way


i am not egocentric......i just self centered

me roar moar money!!!!

BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-07-08 04:43:58


At 7/8/07 03:39 AM, toxic-waster wrote: is action script 3 and easier or better or needed in any way

you can do a helll of a lot more in actionscript. so for coders, its quite a bit leap, but for animators it would probably be easier to stick with the simple AS2


Why not send me a PM, or visit my User Page

BBS Signature

Response to As3: Simple Preloader, Step By Step 2007-07-09 17:07:56


there are a lot more valuable resources out there at the moment for actionscript 2 users. for that reason alone i'm going to switch over from as3 for a little while... learn as2 and build my own website in it.

Response to As3: Simple Preloader, Step By Step 2007-07-09 17:10:02


oh by the way

it looks like my server is down... i'm wondering if that might be the reason for the preloader wackiness for that time... things were acting buggy in the file for a little bit right before the server went down.

so i'll let you know if it turns out not to be the server. if it is the server i'll be relieved.

Response to As3: Simple Preloader, Step By Step 2007-10-22 14:43:33


At 5/10/07 06:04 PM, Denvish wrote: You can test your preloader offline, by pressing CTRL+ENTER twice. While in that mode, you can use the View>Download Settings to simulate download speeds ranging from 14.4 kbps modem, up to a T1 line.

Whenever I try this, the whole screen is white, no matter what, until it finishes downloading. The text box does not appear until the Download Simulation is 100% complete. I can't get trace events to fire, either.

This seems consistant with a number of SWFs I used to see with white backgrounds during loading, followed by a 100% loading bar suddenly appearing. You used to see a lot of these right after Flash 9 came out, but not so much anymore.

Is this thread maybe describing how it used to work in an early beta or something, and not how it works now?


Blast Pulser Check out my Twin Stick Shooter with procedural bosses!

Response to As3: Simple Preloader, Step By Step 2007-10-28 21:58:30


At 10/22/07 02:43 PM, WarpZone wrote:
Whenever I try this, the whole screen is white, no matter what, until it finishes downloading. The text box does not appear until the Download Simulation is 100% complete. I can't get trace events to fire, either.

This seems consistant with a number of SWFs I used to see with white backgrounds during loading, followed by a 100% loading bar suddenly appearing. You used to see a lot of these right after Flash 9 came out, but not so much anymore.

Is this thread maybe describing how it used to work in an early beta or something, and not how it works now?

Is that something to do with when you "export for actionscript" it automatically ticks the box "export in 1st frame". You then need to untick that box on everything that you export.
I'm sure there's an easier method but then I would normally place all the symbols I was exporting in the 1st frame into an object in the 2ndframe and make sure that the user doesn't see it!

Response to As3: Simple Preloader, Step By Step 2007-10-28 22:15:09


At 7/7/07 12:41 PM, Cluelessdolphin wrote: I get the preloader to work correctly in AS3. When I publish it to the web it works correctly and goes to frame two. However if I hit refresh on the web browser it refreshes and stays on frame one the preloader and does not goto frame two. Any suggestions?

Yup, I get that too. It understand it might be something to do with IE6 - that what you're using?
Anyway, after some fiddling, I came up with something that seems to work... take the above tutorial and replace the code with the following...

stop();
addEventListener(Event.ENTER_FRAME,check Load);
function checkLoad(e:Event):void {
var pcent:Number=this.loaderInfo.bytesLoaded /this.loaderInfo.bytesTotal*100;
lbar.scaleX=pcent/100;
lpc.text=int(pcent)+"%";
if (pcent==100) {
removeEventListener(Event.ENTER_FRAME,ch eckLoad);
this.gotoAndPlay(2);
}
}

Response to As3: Simple Preloader, Step By Step 2008-01-12 09:39:48


nicce, it was easy to unserstand and u dont miss anythin

Response to As3: Simple Preloader, Step By Step 2008-01-12 09:43:51


At 1/12/08 09:39 AM, crimsonhalo wrote: nicce, it was easy to unserstand and u dont miss anythin

What was the point in posting in a 5+ month old topic? Read the rules, pal :)

Bumping any old topic without a good reason and new information.

Response to As3: Simple Preloader, Step By Step 2008-04-23 03:48:15


ay if u want, dowload Adobe Flash CS3 Professional from adobe the link:

https://www.adobe.com/cfusion/tdrc/index .cfm?product=flash

and if u like it, and u want the full version give me ur email and ill send u the serail!!

At 5/10/07 08:06 PM, UnknownFear wrote: Nice job, Denvish. Will look into this tutorial and a few of the AS3 tutorials in the AS3: Main when I get my copy of Flash 9.