AS3 preloader tutorial

Preloader Tutorial

Hello and welcome to..

THE ULTIMATE AS3 PRELOADER TUTORIAL

sorry, I couldn't help myself, but now without further delay, here it is!!

1. The .FLA
First we create a new Actionscript 3 flash file. Then change the dimensions to the dimensions of your game/movie.
Then we'll have to link an actionscript file to our .fla so either type "Preloader" in the class textbox on your current screen
or goto "File->Publish Settings->Flash" and then look for a Settings button next to the dropdown box where you choose your script version.
and then set te Document class to "Preloader".
OK, our .fla is done and set up for the job.

2. The .as
This is the most important step in the creation of our preloader now we will make the actionscript to go with our .fla.
First I'll post all the code and then I'll explain it step by step.

package{
import flash.display.Sprite;
import flash.display.Loader;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;

public class Preloader extends Sprite{
var request:URLRequest = new URLRequest("site.swf");
var loadbar:Sprite = new Sprite();
var rect:Sprite = new Sprite();
var loader:Loader = new Loader();

public function Preloader():void{
loadbar.x = 175;
loadbar.y = 190;
addChild(loadbar);
rect.x = 1;
rect.y = 1;
loadbar.addChild(rect);
loadbar.graphics.lineStyle(2,0xffffff);
loadbar.graphics.drawRect(0,0,200,20);
rect.graphics.beginFill(0xffffff);
rect.graphics.drawRect(0,0,198,18);
rect.graphics.endFill();
loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);
loader.load(request);
addChild(loader);
}

private function loadProgress(event:ProgressEvent):void{
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
rect.scaleX = percentLoaded;
}

private function loadComplete(event:Event):void{
removeChild(loadbar);
}
}
}

This might be a bit overwhelming at the time but don't worry, when you're done with the tutorial you're going to laugh in the face of AS3, Mwahaha!

package{

Every .as file starts with "package{ " wich contains the code of our .as file.

import flash.display.Sprite;
import flash.display.Loader;
import flash.events.Event;
import flash.events.ProgressEvent;
import flash.net.URLRequest;

then comes a declaration of all the files we have to include.

public class Preloader extends Sprite{

This is the declaration of our class it will hold all the functions and variables, as you can see it extends a Sprite since our loadbar is going to be a sprite.

var request:URLRequest = new URLRequest("main.swf");
var loadbar:Sprite = new Sprite();
var rect:Sprite = new Sprite();
var loader:Loader = new Loader();

here we declare some variables. a new URLRequest wich will hold the request to our main game/movie, two Sprites one for the entire loadbar and one that will hold the filling of our loadbar, and last but certainly not least a Loader that will load the requested game/movie from the urlrequest.

public function Preloader():void{

This is the initialize function wich will be executed on the loading of our .fla file.

loadbar.x = 175;
loadbar.y = 190;
addChild(loadbar);

Here we set the location of our loadbar Sprite to the center of the stage minus the half of it's width so that is will be perfectly centered in the middle of our screen. The last line add the Sprite to the stage.

loadbar.addChild(rect);

here we add the Sprite to the stage but this time inside the loadbar Sprite.

loadbar.graphics.lineStyle(2,0xffffff);
loadbar.graphics.drawRect(0,0,200,20);

Here we draw the outline of our loadbar using actionscript. the first line set the style of the line to a thickness of 2 and the color black.
the second line draws a rectangle with no filling from the point (0,0) to the point (200,20) inside the loadbar Sprite.

rect.graphics.beginFill(0xffffff);
rect.graphics.drawRect(0,0,200,20);
rect.graphics.endFill();

This is where we draw the filling of our loadbar. The first line sets the color of our filling to black. the second line draws a rectangle inside our rect Sprite wich is located inside our loadbar Sprite, so the location of our rectangle is loadbar.rect. the last line ends our fill.

loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, loadProgress);
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadComplete);

This adds some eventlisteners to our loading progress. the first is to track how many bytes have been loaded and the second is to track when the loading is complete.

loader.load(request);
addChild(loader);

These lines will load the main game/movie and add it to the stage.

private function loadProgress(event:ProgressEvent):void{
var percentLoaded:Number = event.bytesLoaded/event.bytesTotal;
rect.scaleX = percentLoaded;
}

here we declare the function that is used to track the loading progress and handle accordingly.
it calculates a percentage based on the amount of bytes loaded and the total bytes being loaded, the percentage will be a number between 0 and 1.
then it sets the width of our filling to the right percentage.

private function loadComplete(event:Event):void{
removeChild(loadbar);
}

this function will be called by our eventlistener when the loading of our game/movie is done, it will remove the loading bar so the only thing visible will be our main game/movie. you can also add additional code to accompany the completion here like a trace telling that the loading is done.

This is all! Now go test your movie using a nice big main game/movie and if you run into any trouble, just post the problem here and I'll be happy to help you sort things out.

here are the source files (use them wisely):

preloader

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Ask backflip blinklist BlogBookmark Bloglines BlogMarks Blogsvine BuddyMarks BUMPzee! CiteULike co.mments Connotea del.icio.us

Digg diigo DotNetKicks DropJack dzone Facebook Fark Faves Feed Me Links Friendsite folkd.com Furl Google

Hugg Jamespot Jeqq Kaboodle kirtsy linkaGoGo LinkedIn LinksMarker Ma.gnolia Mister Wong Mixx MySpace MyWeb

Netvouz Newsvine oneview OnlyWire PlugIM Propeller Reddit Rojo Segnalo Shoutwire Simpy Slashdot Sphere

Sphinn Spurl Squidoo StumbleUpon Technorati ThisNext Twitter Webride Windows Live Worlds Movies Yahoo!

Email This to a Friend

Copy HTML: 

 If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »

Powered by Bookmarkify™

AS3: Basic button and variable intro

Here it is....

My first ever actionscript 3.0 tutorial!

Now it's not going to be a simple: trace("Hello world");

.....Cause that's the same in actionscript 2.

We are going to make a button, which makes a text box display hello world in it, that way the user can see it in the actual finnished file, rather then in our output box only.

This is a very basic tutorial, and even though expirienced AS2 programmers would find this insultingly easy this IS the starting point you have to take. This tutorial is not intended for anybody allready fluent in actionscript 3.0, for more advanced tutorials, go see brarts actionscript tutorials, particually his RTS game.

So a few things you should know when making the jump from actionscript 2:

• Actions only permitted on frames
• Actions must be imported (flash.events.MouseEvent)
• If a script contains no errors from the checking tool, compiler errors can still occur when testing, disabling all script, until it has been fixed.

Now you are aware of what's in store for you we can now start.

So open up flash CS3, CS4, or whatever it is you are using (if you are in the future and as3 hasn't become obselte like as2 has).

Not that we need to, let's put a stop(); function on the frame, just in case we want to add to it later. This is the same as AS2. Now let's import the mouse event functions. The code for this is:

import flash.events.MouseEvent;

Now add a Dynamic text box and give it an instance name of txtvar.

Now with buttons, we only had to worry about instance names IF we wanted to reference them from a frame/as file or move them. But now it is important, so create 2 buttons, and give them instance names of txtbutton and txtbutton2.

Now let's code it all:

Right, we can't use a simple on(release/click/rolover){ or any of that. We need to add an Event Listener, this basicly looks for a specific event the runs a function when the events happens.

So for our first button we will write:

txtbutton.addEventListener(MouseEvent.CLICK,showhelloworld);

So this code is waiting for the mouse to be clicked on the button txtbutton, then when it run the functio we are going to define as showhelloworld.

Now quickly add the other one:

txtbutton2.addEventListener(MouseEvent.CLICK,hidehelloworld);

Now we have listeners to run our 2 functions, and if we checked for errors there wouldn't be any script errors. However your movie would produce compile errors as your script is being told to run a funtion which is undefined. Now lets define them.

With AS3 variables aren't as straight-forward as they are in AS2. Each variable has to be assigned a variable type as you will see here:

function showhelloworld(event:MouseEvent):void {
txtvar.text =("Hello world!");
}

I don't understand what the :void actually does, but I'm sure someone will comment and help us all out :P

So moving on:

function hidehelloworld(event:MouseEvent):void {
txtvar.text =("");
}

And we're done, I think.

DOWNLOAD SOURCE FILE FOR THIS TUTORIAL

Tutorial by Dazza_13

Bookmark and Share

Close Bookmark and Share This Page

Save to Browser Favorites / Bookmarks

Ask backflip blinklist BlogBookmark Bloglines BlogMarks Blogsvine BuddyMarks BUMPzee! CiteULike co.mments Connotea del.icio.us

Digg diigo DotNetKicks DropJack dzone Facebook Fark Faves Feed Me Links Friendsite folkd.com Furl Google

Hugg Jamespot Jeqq Kaboodle kirtsy linkaGoGo LinkedIn LinksMarker Ma.gnolia Mister Wong Mixx MySpace MyWeb

Netvouz Newsvine oneview OnlyWire PlugIM Propeller Reddit Rojo Segnalo Shoutwire Simpy Slashdot Sphere

Sphinn Spurl Squidoo StumbleUpon Technorati ThisNext Twitter Webride Windows Live Worlds Movies Yahoo!

Email This to a Friend

Copy HTML: 

 If you like this then please subscribe to the RSS Feed.

Powered by Bookmarkify™

More »

Powered by Bookmarkify™