This is a tutorial on how to make a very simple AS3 (CS4) preloader for your Flash movies. This tutorial assumes you are a beginner at Flash.

1) Create a new flash document and a draw rectangle on the stage. This will be our preloader bar.

2) Select it, then click Modify in the top menu and then Convert to symbol

3) Give it any name you like and make sure that the Type is selected to Movie Clip. Also make sure you select the middle left box on the registration point as we want it to expand from left to right. Click OK to save.

click to enlarge

4) Underneath the preloader bar you just drew, insert a dynamic text field.

5) Give the preloader bar an instance name of “loaderBar” and give the text field an instance name of “loaderText”

6) Make a new layer above the current one and label it “actionscript”. You can also give the bottom layer a name such as “bar” if you want.

Click on the first frame of the actionscript layer and open the actions window. (Click Window and then Actions in the top menu)

7) Insert the following code:

stop();
import flash.display.*;
this.stop();
this.loaderInfo.addEventListener (ProgressEvent.PROGRESS, PRELOADER);
function PRELOADER(event:ProgressEvent):void {
var percent:Number=event.bytesLoaded/event.bytesTotal*100;
loaderBar.scaleX=pcent/100;
loaderText.text=int(percent)+”%”;
if(percent==100){
this.gotoAndStop(2);
}
}

Make a new blank frame at frame two of the layer with the preloader bar you drew and import a picture so we have something to load.

9) Click Control and then Test Movie and… it won’t work properly. As you are loading this file from your computer, it will load instantaneously. We need to slow down the load rate for us to check it works.

10) Click on View in the top menu and then Simulate download. You should now see your preloader bar slowly expand with the progress in a percentage underneath. If you are still having problems you can adjust the download simulation rate in View and then Download settings

Download the example file here

NOTES

If you have an animation that plays from frame 2 onwards you can change the line “this.gotoAndStop(2);” to “this.gotoAndPlay(2);”

Please leave your questions, comments and responses to this article. Please let me know of any mistakes, inaccuracies or problems with this tutorial and I’ll try to fix it. Enjoy!

What:

To make a button with a link to an external webpage using Actionscript 3

Example:

Click on the “alexbrooke.com” button in the top left corner to navigate away from this page

To find out how to do this go to the next page:

How:

1) Draw your button

2) Select your button and click on MODIFY then Convert to Symbol

3) Choose button from the menu and click OK

4) Select the button if it isn’t selected. Now give it an instance name of “urlButton” in the small dialog box in the bottom left hand corner

5) Create a new layer and insert the following actionscript into it:

function gotoHomePage(event:MouseEvent):void
{
var targetURL:URLRequest = new URLRequest(“http://yourhomepage.com/“);
navigateToURL(targetURL);
}
urlButton.addEventListener(MouseEvent.CLICK, gotoHomePage);

6) Change the red url to whatever website you want to navigate to.

7) Publish the movie and see if it works

Extra stuff

The video player I used for this example was made by Rafael Nuenlist. You can view the tutorial here.

Please leave your comments, ideas and questions here.

This is the first of some very elementary Flash tutorials I will be posting here. This is an exercise in keeping all the cool flash code I have learned in one easy place for me and hopefully to help others. So here is some code I use to embed flash files in HTML pages:

<object width=”275″ height=”200″>
<param name=”movie” value=”yourfile.swf”>
<embed src=”yourfile.swf” width=”275″ height=”200″>
</embed>
</object>

And that’s pretty much it.