Archive for the ‘Tutorials’ Category

Actionscript 3 External Preloader

Wednesday, December 19th, 2007

A preloader is an important part of any sizeable Flash app as you probably don’t want your users to see nothing while the app’s loading. There are two types of preloaders that you can employ: external and internal. In this tutorial we’ll see how to implement External Preloaders, which load the contents from a separate file. This method is much cleaner and easier than the internal way, so I recommend you use it whenever you can. It also allows you to keep your preloader and main content independent of each other.

The general idea is to set up a Loader object in your preloader SWF, and make it execute 2 functions: an update function, and a finish function. The update function is called every time load progress is made, and the finish function is called when loading is done. You would accomplish this through Event Listeners as follows:

var request:URLRequest = new URLRequest("Content.swf");
var loader:Loader = new Loader();

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

What you do inside those functions is totally up to you. If you have a loading animation that animates relatively to the progress (like a cup filling up), then you would update that animation inside the loadProgress function. But as an example, we’ll be updating a percent counter as the load progresses.

function loadProgress(event:ProgressEvent):void 
    var percentLoaded:Number = event.bytesLoaded / event.bytesTotal;
    percentLoaded = Math.round(percentLoaded * 100);
    this.percentLoaded.text = String(uint(percentLoaded)) + "%";

function loadComplete(event:Event):void 
    trace("Load Complete");

To wrap it all up, we call load on the URL request, and add the Loader object to the preloader’s Display List, so that the content shows up when it’s done loading.


Also, make sure that the preloader’s dimension and frame rate settings are the same as the main content’s.

Here are the source files with the external preloader, and a test content SWF.

External Preloader

Test content SWF

Music Looping in AS3

Monday, December 10th, 2007

According to the AS3 documentation you can loop a sound by passing in a loop number argument when you call play on a sound. Apparently, that never seems to work consistently for me. Sometimes it would not loop after a number of times, or it doesn’t loop immediately. So I usually just manually control the looping of music with Event Listeners.

To do this, I add an Event Listener to the music channel that will call a function to replay the sound whenever it’s done playing once.

public function playMusic():void
    musicChannel =; 
    musicChannel.addEventListener(Event.SOUND_COMPLETE, loopMusic);

public function loopMusic(e:Event):void
    if (musicChannel != null)
        musicChannel.removeEventListener(Event.SOUND_COMPLETE, loopBackgroundMusic);

So the sound will continue to loop forever until I stop it. Whenever I do, I have to remove the Event Listener from the music channel or else it won’t be garbage collected.

public static function stopMusic():void
    if (musicChannel != null)
	musicChannel.removeEventListener(Event.SOUND_COMPLETE, loopMusic);

That’s about it. A pretty simple solution to an annoying problem sometimes.

Simple Score Submission Security

Sunday, December 2nd, 2007


If you’ve made a Flash game with a PHP high score table without any security before, you’ve probably found some unpossible scores sitting on top of your chart when you wake up one morning. Well, in this tutorial, we’ll see how to implement a simple encryption system that is relatively secure for Actionscript 3.0. It’s not perfectly secure, but it will fend off your usual score cheater. This tutorial also assumes that you know the basics of implementing a high score system in Flash and PHP. If you don’t, please check out this tutorial.

The basic concept of this method is to use MD5 to hash the submission data with a key. Then we send the data, along with the MD5 hash to the PHP script. The PHP script takes the data, and hashes it with the same key. If the two hashes match, then we know it’s legit.

First, let’s go over what to do on the Flash side of things. We will need an encryption API capable of MD5 for AS3, such as this encryption package by Geoffrey Williams. There are others which can be found by Googling, but this one is pretty simple to use.

Suppose we want to submit the player’s name and score, we construct a string of those values:

var playerData:String = playerName + playerScore;

Then we use the MD5 package to hash it with a key, which is a secret string that we make up. Assuming we are using the package shown above, the code would look something like this:

var key:String = "HASH_KEY";
var hashData:String = MD5.hex_hmac_md5(key, playerData);

After we have this, we just send both the playerData and hashData to our PHP score submission script using a POST method.

Over on the PHP script, we take the playerData, and run it through MD5 with the same secret key that we used in Flash. If the result matches the hashData that we received from Flash, then it’s a valid score submission. The operative PHP functions here are bin2hex and mhash.

$key = "HASH_KEY";
$result = bin2hex(mhash(MHASH_MD5, $playerData, $key));
if ($result == $hashData)
    //record submission

Thats all there is to this encryption method. You’ve probably noticed, but the one flaw to this method is that if the hacker has access to the Flash source, then he can find out the secret key and beat the system. Fortunately, as far as I know, there are no public AS3 decompilers yet. Should one appear, we’d have to use obfuscation to hide the key or use some sort of SWF encryption program such as Amayeta. Nonetheless this method should keep most casual cheaters off your back.