This is a tutorial showing how to create a very clean and basic preloader for Flash CS3, using Actionscript 3.

to begin with  we must create our file.

  1. click on File > New or (Ctrl + N)
  2. Select Flash Actionscript3 and click ok
  3. No we must give it a name, so Click File > Save As and give it a name, i called mine preloader
  4. Once this is done we have the ablity to start editing our file

As usual you can set the file size for the document etc from the properties tab, but you can leave the settings as default if you like.

We now must create a new layer and call it actions, now in frame 1 of the actions tab (if you can not see the Actions tab, press F9) and type the following code:

var l:Loader = new Loader();
l.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loop);
l.contentLoaderInfo.addEventListener(Event.COMPLETE, done);
l.load(new URLRequest("YOURSWFfileNAME.swf"));

function loop(e:ProgressEvent):void
	var perc:Number = e.bytesLoaded / e.bytesTotal;
	percent.text = Math.ceil(perc * 100).toString();

function done(e:Event):void
	percent = null;

Where I have written YOURSWFfileNAME.swf make sure you change that for the full name of you SWF file.
what this does, is calculate the percentage loaded of your file, and displays it on the screen.

before this code will work however we must link the code with a location on the screen that will display the text.

Click on the Text Tool (T) and click and drag an area on your screen, in the properties tab at the bottom make sure you select

  1. Dynamic Text from the drop down menu
  2. and call it percent – this will link the box we have just drawn with the variable percent in our code

Feel free to edit the text to your taste etc..

And that is all that is needed.

When testing out the movie, you must Simulate a download speed in order to see the preloader in action, so hit 

ctrl + Enter to test the movie clip, make sure you hit ctrl+ Enter AGAIN in order to see the preloader file, then click view > Download Settings
this is where you can choose which download speed you would like to simulate.

Feel free to leave a comment if you need any help.

If you like this post or this Blog, please click here to join the RSS feed!

Be Sociable, Share!

9 Responses to “Creating a Flash Preloader in Actionscript”

  • ClaireNo Gravatar says:

    hey there nice quick code but I’m not sure how to get it to work when I uplaod or place it into dreamweaver to load my flash file? Can you help?
    Many thanks

  • adminNo Gravatar says:

    What you will need to do once you have finished making your flash file, you will need to export it so that Flash gives you out a HTML and Javascript file in the same directory as your .swf file.

    To do this:

    File > Publish Settings or press (Ctrl + shift + F12)

    Under the Formats tab, make sure that HTML and Flash boxes are ticked.

    In the Flash Tab make sure you select what Flash Version you would like to use, and what AS version you are using – in this case it is Flash 9 and Actionscript 3

    Now click the publish button and look in your directory for the new files.

    then what you can do is take that code from the HTML file and manipulate it in Dreamweaver to fit your needs.
    Dont forget to upload the JS file to your server that is exported also.

    Hope that helps!

  • ClaireNo Gravatar says:

    Thank you works perfectly

  • Hello, I found this blog post while searching for help with JavaScript. I have recently switched browsers from Opera to Internet Explorer 7. Now I seem to have a issue with loading JavaScript. Every time I browse page that needs Javascript, my browser does not load and I get a “runtime error javascript.JSException: Unknown name”. I cannot seem to find out how to fix it. Any help is greatly appreciated! Thanks

  • Syan ZenNo Gravatar says:

    Is there any way to preload more than one object?

    Thanks for reading my question :)

  • adminNo Gravatar says:

    Yes, you can add more filenames you want to load – that should do it.

  • Syan ZenNo Gravatar says:

    Thanks for your reply :)

  • Mason MooreNo Gravatar says:

    I like what you guys are up too. Such clever work and reporting! Keep up the good works guys I’ve added you guys to our blogroll.|

  • Johne913No Gravatar says:

    Hey very nice blog!! Man .. Excellent .. Amazing .. I will bookmark your site and take the feeds alsoI’m satisfied to find a lot of useful info right here within the post, we’d like develop extra strategies in this regard, thanks for sharing. ebbbdddccakf

Leave a Reply

This site is using OpenAvatar based on

Follow me on Twitter
free counters
PayPal Donation
If you like this blog and the help it has given you, why not donate for this good cause? Click on the button below to pay Safely and Securely through PayPal.