ClickPopMedia » Paul

www.NathanRutherford.com

Weese — Fri, 09 Oct 2009 04:54:32 +0000

So www.NathanRutherford.com, ClickPopMedia’s latest work, has gone live! We’re really excited about the site. VQ and I have a real love for the Skateboard/Snowboard/Surf scene. And in our travels we’ve had the privilege to meet some great talents…

Nathan is no exception, he’s a young guy from the UK with a lot of skill, both behind the camera and on a skateboard. He’s also become a good friend over the years. Head on over to his site and have a look at some of his work.

May God bless you today!

Collision Detection and Game Design

Paul — Mon, 07 Jul 2008 23:58:21 +0000

This is the second step in my series of tutorial, the first being Easy Keyboard Controls and Game Design. In this tutorial I will be building on what we already have, adding asteroids and the ability to crash into them.
I’ve made a few minor changes to the original code and graphics since the last tutorial, but nothing big.

So I create a MovieClip with 3 frames and a different asteroid shape on each frame (you could have more or less if you wanted). I give the asteroids their own class since each is going to have to move independently.

public static const LARGE:String = "large";
public static const MEDIUM:String = "medium";
public static const SMALL:String = "small";

public var speedX:Number;
public var speedY:Number;
public var size:String;
…
public function Move():void {
this.x += speedX;
this.y += speedY;
if(this.x > 550 + this.width/2) this.x = -this.width/2;
if(this.x < -this.width/2) this.x = 550 + this.width/2;
if(this.y > 400 + this.height/2) this.y = -this.height/2;
if(this.y < -this.height/2) this.y = 400 + this.height/2;
}

What I’ve done here is give my Asteroid class X and Y speed properties that work with the Move() method for motion. I intend to call the Move() method for each asteroid in the MainLoop() function.

On creation (in the constructor) I want to know if this asteroid is actually a piece of a larger asteroid or not. If it is I’m going to be passing it the base asteroid that this one is breaking off of to use it’s X:Y coordinates and speed, plus to know what size to make the new asteroid.

Now back to the Main class (in the last tutorial I called this the Asteroids class but changed it to Main since I wanted an Asteroid class).

We need to keep track of our asteroids. To do that we will use an Array. We will add this to the Main constructor:

public function Main() {
dCount = 0;
…
refresh_tf.addEventListener(MouseEvent.MOUSE_UP, resetGame);

asteroids = new Array();
for(var i:int = 0; i<6; i++) {
asteroids.push(new Asteroid());
stage.addChild(asteroids[i]);
}
}

This is just adding 6 asteroids to the stage and giving a click event to a reset button I decided to add.
dCount stands for Death Count with an obvious purpose.

The resetGame() function is just resetting all the properties to the default. I still have to make sure to remove all the asteroids before adding all new ones, but that’s it.

I moved the contents of the MainLoop() from the previous tutorial into a function called shipControl() which is now being called from the new MainLoop();

Our revised MainLoop() method is as follows:

protected function MainLoop(e:TimerEvent):void {
for(var i in asteroids) {
asteroids[i].Move();
}

if(dead){
deathTime–;
if(deathTime <=0){
dead = false;
invincibleTime = 150;
invincible = true;
addChild(ship_mc);
}
}else {
shipControl();
if(!invincible) {
collisionCheck();
}else {
if(e.currentTarget.currentCount%10 == 0){
ship_mc.visible = (ship_mc.visible)? false: true;
}

invincibleTime–;
if(invincibleTime <= 0) {
ship_mc.visible = true;
invincible = false;
}
}
}
}

These nested if..else statements are here to handle death and resurrection (RIGHT ON!).

So we have our asteroids flying about the screen, but we have yet to make them destroy your ship. You should notice above the call for to a method call collisionCheck();
Here is that function now:

protected function collisionCheck():void {
var p1:Point = new Point(ship_mc.p1.x, ship_mc.p1.y);
p1 = ship_mc.localToGlobal(p1);
var p2:Point = new Point(ship_mc.p2.x, ship_mc.p2.y);
p2 = ship_mc.localToGlobal(p2);
var p3:Point = new Point(ship_mc.p3.x, ship_mc.p3.y);
p3 = ship_mc.localToGlobal(p3);
var p4:Point = new Point(ship_mc.p4.x, ship_mc.p4.y);
p4 = ship_mc.localToGlobal(p4);
var p5:Point = new Point(ship_mc.p5.x, ship_mc.p5.y);
p5 = ship_mc.localToGlobal(p5);
for(var i in asteroids){
if((asteroids[i].hitTestPoint(p1.x, p1.y, true) ||
asteroids[i].hitTestPoint(p2.x, p2.y, true) ||
asteroids[i].hitTestPoint(p3.x, p3.y, true) ||
asteroids[i].hitTestPoint(p4.x, p4.y, true) ||
asteroids[i].hitTestPoint(p5.x, p5.y, true)) && !dead) {

destroyShip();
remove(i);
}
}
}

Each asteroid does a hitTest with each point on my ship_mc. It’s important that I’m using hitTestPoint() here because it is capable of checking based on the actual shape of the movie clip. A regular hitTest between two MovieClips will only check to see if the bounding boxes are overlapping… in our case that could still be quite 20 pixels or more away from an actual collision. This is exactly what makes realistic 2D physics so difficult in ActionScript.

Anyways, the Hit Test may be a little buggy in some cases, but hitTestPoint works pretty well for us here. After we detect a hit of course we have to destroy the ship and asteroid and set the death timer. the destroyShip() function is trivial enough, but I would like to take a quick look at a line from the remove() method:

stage.addChild(asteroids[asteroids.push(new Asteroid(asteroids[num]))-1]);

I really just need to explain how this slightly complicated jumble works. Reading this from the inner most parenthases out;

We are creating a new Asteroid object (passing it our parent asteroid that has just been destroyed).
new Asteroid(asteroids[num])

We add that Asteroid object to the end of our asteroids Array which is returning the new length of the Array.
asteroids.push(…)

We then use that new length (minus 1) to add our newest asteroid to the stage.
stage.addChild(asteroids[...-1]);

Eh, see now? Collision detection is easy! I think my next installment might be a little more interesting when I add levels, lives, and a scoring system.

… No bullets you ask? Well that’s just an extension of what I’ve already written here right? The only extra thing you have to remember is that the bullets have a limited lifespan.

If you are still confused and can’t do it on your own (if you want to learn you really aught to at least try) then you can always check out the finished source when it’s released.

The source code for the example in this tutorial can be found here: Asteroids – V2 Source

< Lesson 1: Easy Keyboard Controls and Game Design

Easy Keyboard Controls and Game Design

Paul — Thu, 26 Jun 2008 01:21:07 +0000

In this tutorial I will be going over some of the basic elements to making a game in Flash. This being the first in a short series of tutorials on the subject, I will cover the main game loop and keyboard controls.

First off we need to set up some simple graphics. I did some REALLY simple graphics as you can see. The ship_mc being just a triangle and on the 3rd frame of the ship movie clip it get’s a little fire tail. Since I am just imitating Atari Interactive, Inc.’s Asteroids, we don’t really need anything more then that for now.
Now, to get our initial code setup:

package {
import flash.display.*;
import flash.events.*;
import flash.text.*;
import flash.utils.Timer;

public class Asteroids extends MovieClip {
protected var mainTimer:Timer;

public function Asteroids() {
mainTimer = new Timer(20);
mainTimer.addEventListener(TimerEvent.TIMER, MainLoop)
ship_mc.stop();

this.addEventListener(Event.DEACTIVATE, deactive);
this.addEventListener(Event.ACTIVATE, active);
stage.addEventListener(KeyboardEvent.KEY_DOWN, kDown);
stage.addEventListener(KeyboardEvent.KEY_UP, kUp);
}

protected function MainLoop(e:TimerEvent):void {
}

protected function deactive(e:Event):void {
mainTimer.stop();
}
protected function active(e:Event):void {
mainTimer.start();
}
protected function kDown(e:KeyboardEvent):void {
}
protected function kUp(e:KeyboardEvent):void {
}
}
}

So far this is just a skeleton of our game. We have our KEY_DOWN and KEY_UP events which will handle all of our keyboard controls later. But, more importantly, we have our mainTimer. By setting up our game engine to run based on a timer I can later change the frame rate without changing the game dynamics (I left the frame rate at 12/sec for the example above). This is also useful if your game has too many graphical elements and the frame rate drops on some machines, this will preserve the speed of the game itself.
So, please notice that I have the Timer set to “tick” every 20 milliseconds (1000 milliseconds to 1 seconds) which is about 50 ticks per second. Because of that, we are going to have some small values to work with when playing with flight speed and rotation in our ship.
But, first let us think about keyboard controls:

protected var thrust:Boolean;
protected var rpm:Number;
protected function kDown(e:KeyboardEvent):void {
// trace(e.keyCode);
if(e.keyCode == 37 || e.keyCode == 65 || e.keyCode == 100){
rpm = -4;
// trace("LEFT");
}
if(e.keyCode == 38 || e.keyCode == 87 || e.keyCode == 104){
thrust = true;
// trace("UP");
}
if(e.keyCode == 39 || e.keyCode == 68 || e.keyCode == 102){
rpm = 4;
// trace("RIGHT");
}
}
protected function kUp(e:KeyboardEvent):void {
if(e.keyCode == 37 || e.keyCode == 65 || e.keyCode == 100){
rpm = 0;
// trace("LEFT");
}
if(e.keyCode == 38 || e.keyCode == 87 || e.keyCode == 104){
thrust = false;
// trace("UP");
}
if(e.keyCode == 39 || e.keyCode == 68 || e.keyCode == 102){
rpm = 0;
// trace("RIGHT");
}
}

rpm and thrust are going to control our ships flight in the MainLoop later. The keyCode is a number which represents the key being pressed or released on the keyboard. I prefer to set a value on down because the KEY_DOWN event will be fired off numerous times very quickly if the key is held too long. I have the controls set up to work with WASD, the arrow keys, or the num pad.
To find the key values I just traced e.keyCode in the kUp() function and tried pressing the keys in question. This got me the numbers you see in the code above. The commented out traces are there to make sure we have the correct keys, since we don’t have any other indicator yet.

The next step is a simple one (except for some of the math):

protected const TOP_SPEED:Number = 10;
protected const ACCELERATION:Number = .1;
protected const FRICTION:Number = .995;

protected var mainTimer:Timer;
protected var speedX:Number;
protected var speedY:Number;

public function Asteroids() {
rpm = 0;
speedX = 0;
speedY = 0;
…
}

protected function MainLoop(e:TimerEvent):void {
ship_mc.rotation += rpm;

var dx:Number = ACCELERATION * Math.cos((ship_mc.rotation*Math.PI)/180);
var dy:Number = ACCELERATION * Math.sin((ship_mc.rotation*Math.PI)/180);

if(thrust){
speedX += dx;
speedY += dy;
//We want to have a max speed in any direction of the compass
var speed = speedX*speedX + speedY*speedY;
if(speed >= TOP_SPEED*TOP_SPEED) {
speedX *= (TOP_SPEED*TOP_SPEED)/speed;
speedY *= (TOP_SPEED*TOP_SPEED)/speed;
}
ship_mc.gotoAndStop(3);
}else {
ship_mc.gotoAndStop(1);
}
//I know there is no friction in space, but I can’t remember if Asteroids had it or not.
speedX *= FRICTION;
speedY *= FRICTION;

ship_mc.x += speedX;
ship_mc.y += speedY;

if(ship_mc.x > 560) ship_mc.x = -10;
if(ship_mc.x < -10) ship_mc.x = 560;
if(ship_mc.y > 410) ship_mc.y = -10;
if(ship_mc.y < -10) ship_mc.y = 410;
}

Here we have initialized some variables in the constructor first. Then we filled in our MainLoop to give our spaceship some life. I would think the rotation is self evident… it’s the first line of the method. I used some constants in my math (ACCELERATION, TOP_SPEED, and FRICTION) so that I can easily adjust the game settings all in one place, without searching for the parts of the code that I need changed.
The last group of if statements above are checking to see in our ship has flown off the screen and if it has it will be moved to the other side.

That’s all for now. Next time I will probably add some asteroids and talk a little about collision detection.

You can download the source for this example here: AsteroidsSource.rar

Realistic Shadow Effects using Filters

Paul — Wed, 11 Jun 2008 15:37:42 +0000

I have another simple but neat, little tutorial here on Flash CS3 filters. This time I’m not using Tweens at all. Our effect is going to use the MouseEvent.MOUSE_MOVE event to create the illusion of a light source coming from our cursor.

To begin with we are going to make our Shadows class. This class is going to extend MovieClip, have a DropShadowFilter pre-applied to it and a public method to change the drop shadow filters distance and angle.

public class Shadows extends MovieClip {
public static var All:Array;

protected var txtF:TextField;
protected var drop:DropShadowFilter;
protected var distance:Number;
protected var angle:Number;
protected var dropAlpha:Number;
protected var blurX:Number;
protected var blurY:Number;

public function Shadows() {
if(Shadows.All == null) Shadows.All = new Array();

distance = 0;
angle = 0;
dropAlpha = 1;
blurX = 0;
blurX = 0;
drop = new DropShadowFilter(distance, angle, 0, dropAlpha, blurX, blurY);
this.filters = [drop];
Shadows.All.push(this);
}

public function lightSource(X:Number, Y:Number):void {
var dx:Number = (this.x + (this.width/2))-X;
var dy:Number = (this.y + (this.height/2))-Y;

angle = (180 * Math.atan(dy/dx)) / Math.PI;
if(dx < 0){
angle += 180;
}

distance = Math.sqrt(dy*dy + dx*dx)/10;
dropAlpha = 10/distance;
blurX = Math.abs(dx/20);
blurY = Math.abs(dy/20);

drop = new DropShadowFilter(distance, angle, 0, dropAlpha, blurX, blurY);
this.filters = [drop];
}
}

I hope you can see what is going on in the code. I’m simply setting all my variables equal to 0 or 1, depending on what it’s for, and applying my filter in the constructor. Also note that I’m saving all my objects in a static array. This makes it easier to call all the lightSource() methods at once in a for loop later.

In the lightSource() method we have a little bit of math that you might be unfamiliar with.
My variables dy and dx stand for distance y or x and I’m setting them equal to the distance from the point given and the center of my ShadowObject.

angle is going to be the angle of the drop shadow and it needs to be in degrees. Math.atan() is called arc-tangent in the Trigonometry world and it gives your the value of the angle opposite the Y side of a right triangle in radians. If that doesn’t make sense, just know that it’s giving me that angle I need, but in the wrong units. I convert it by multiplying by 180 and dividing by PI. Math.atan() only returns a value between -pi/2 and pi/2 (-90 to 90 degrees) which only covers half a circle, so I have to check if we actually need the other side. And, that’s what my if() statement is for.

distance is calculated using the Pythagorean theorem C^2 = A^2 + B^2 (and then divided by 10 otherwise it’s just too much).

DropAlpha, blurX, and blurY are all set pretty clearly (blur has to be positive, thus the Math.abs() or absolute value).

Finally our function creates a new drop filter with our new values and applies it to our Shadow object.

Except for trying to remember the math involved, this one has been pretty easy so far, huh? Well then, let’s try using it in a project!

var str = new String("ClickPop");
var str2 = new String("Media");
var letter:Shadows;
var newX:Number = 30;
var overLetter:TextField;

for(var i=0; ilength; i++) {
letter = new Shadows();
letter.x = newX;
letter.y = 80;
overLetter = new TextField();
overLetter.text = str.charAt(i);
overLetter.setTextFormat(new TextFormat("Georgia", 100, 0×0000FF, true));
overLetter.autoSize = TextFieldAutoSize.LEFT;
letter.addChild(overLetter);
addChild(letter);
newX += letter.width;
}
newX = 80;
for(i=0; ilength; i++) {
letter = new Shadows();
letter.x = newX;
letter.y = 180;
overLetter = new TextField();
overLetter.text = str2.charAt(i);
overLetter.setTextFormat(new TextFormat("Georgia", 100, 0×0000FF, true));
overLetter.autoSize = TextFieldAutoSize.LEFT;
letter.addChild(overLetter);
addChild(letter);
newX += letter.width;
}

function changeLight(event:MouseEvent):void {
for(var i=0; iAll.length; i++) {
Shadows.All[i].lightSource(stage.mouseX, stage.mouseY);
}
}
stage.addEventListener(MouseEvent.MOUSE_MOVE, changeLight);

So, there it is. I’m adding each letter to a different Shadow object so that their shadows move independently. I then update all the shadow light sources to the mouse’s X and Y coordinates every time the mouse moves. SO EASY!!

I have a few more ideas for cool effects that you can make with filters and I will probably post about them soon.

Download the Source Code for the example used in this post here: ShadowsSource.zip

Cool Rollover Effects with Filters

Paul — Wed, 28 May 2008 05:15:51 +0000

Above is a little example menu I made for a fake game called “Top Secret.” Don’t expect a game to start when you click on the Play button. Instead, when you click a button you will get a little menu to change the rollover effects of said button.

What I’m going to be talking about for the next… however long you read this, is how to recreate these cool effects for your own projects. Hopefully you will come up with some better ideas for using filters then just rollover effects.

Setting Up The Example:
I simply typed all the text you see using whatever font seemed nice. I then selected each TextField and broke them apart by pressing Ctrl+B twice. After making each button into a MovieClip and giving them appropriate instance names (i.e. the Play button has a name of “play_mc” and you can see this in the popup menu) I felt like it was high time to make some cool rollover effects!

Working w/ The Code:
I’m just going to talk about the one filter here, since the others are all pretty much the same.

To make a blur effect we need to create a new AS class file (one for each button). We are going to use Tweens, Filters, Events, and we are extending a MovieClip, so we need to import the apropriate library classes for those:

import flash.display.*;
import flash.events.*;
import flash.filters.*;
import fl.transitions.*;
import fl.transitions.easing.*;

The star in flash.events.*; just means “all of them” and it’s a quick way of importing lots of stuff at once.

Start out with making and applying our filter to get an idea of what we want:

blur = new BlurFilter(8, 4, 1); //blurX, blurY, quality
this.filters = [blur];

This is the default value/filter you see before you change any settings in my example movie above.

The filters property that I’m setting in the above code is an Array property of any DisplayObject (including Sprites, MovieClips, and any other children thereof). That is why I need the square brackets, because it’s an Array.

With the filter in place we need to check for our MOUSE_OVER and MOUSE_OUT events and tween the blur filter.

A Tween object can change any Number property of almost any object over time using easing functions. To read more on Tweens you can check out Intro to ActionScript 3.0 Tweening.

protected var blurX_tw:Tween;
protected var blurY_tw:Tween;

public function /*CONSTRUCTOR*/() {
this.addEventListener(MouseEvent.MOUSE_OVER, Over);
this.addEventListener(MouseEvent.MOUSE_OUT, Out);

blurX_tw = new Tween(blur, "blurX", Regular.easeInOut, 8, 8, 1);
blurX_tw.addEventListener(TweenEvent.MOTION_CHANGE, updateBlurFilter);
blurY_tw = new Tween(blur, "blurY", Regular.easeInOut, 4, 4, 1);
blurY_tw.addEventListener(TweenEvent.MOTION_CHANGE, updateBlurFilter);
}
protected function updateBlurFilter(e:TweenEvent):void {
this.filters = [e.currentTarget.obj];
}
protected function Over(event:MouseEvent):void {
blurX_tw.continueTo(0, 10);
blurY_tw.continueTo(0, 10);
}
protected function Out(event:MouseEvent):void {
blurX_tw.continueTo(8, 15);
blurY_tw.continueTo(4, 15);
}

Ah! Well there we go. We now have a tween that effects our X&Y blur. Notice that we have an event listener on those two tweens for TweenEvent.MOTION_CHANGE. This is because the blur filter that we are tweening is NOT the filter that is on our MovieClip. So for every step that the tween changes the blur values, we need to reapply the filter to our Button.

I’m sure you have noticed that I am making most of my functions and variables protected. This is because protected is just like private, but private will not be inherited by child classes and protected will. I want to keep inheritance because this way I can (and have) make a base class with all my effects and just have my button classes extend that base.

If you download the source for my example movie HERE, you will notice that I have almost all my code within the Rollover class and all my button classes are extending that one.

Once again, you can download the source for this tutorial and example movie here: TopSecret Example Source Code (ZIP – 958 KB)

If you are interested in some of the components I used or want to know more about working with colors, let me know in a comment and maybe I will make a separate tutorial on them.

Creating an XML Gallery with ActionScript 3.0

Paul — Thu, 15 May 2008 02:37:28 +0000

For any dynamic Flash project, XML will be a powerful tool. One of the most common examples (and one of the simplest) is a picture gallery like the one I have here:

Images came from http://www.stockvault.net/

I will be talking about how to use Flash and XML to make a simple, yet superfly, gallery.

So, let us start off by looking at my XML file’s structure:

dir="//url/Photos/">
id=‘0′ file="photo_7030_20070301.jpg" width=‘500′ height=‘375′>
Cute Puppy! Who couldn’t love that face?
>
id=‘1′ file="photo_4095_20070301.jpg" width=‘500′ height=‘375′>
Three Friendly Cats.
>
id=‘2′ file="photo_4281_20070301.jpg" width=‘500′ height=‘375′>
The Terror of the UnderSofa!
>
id=‘3′ file="photo_6257_20070301.jpg" width=‘500′ height=‘375′>
Bored? Let’s play catch!
>
id=‘4′ file="photo_6882_20070301.jpg" width=‘500′ height=‘377′>
It may be natural, but this picture still feels weird to me.
>
id=‘5′ file="photo_7241_20070301.jpg" width=‘500′ height=‘375′>
My cats hate the snow.
>
id=‘6′ file="photo_7538_20070507.jpg" width=‘500′ height=‘622′>
LOOK IT'S HTML!!!]]>
>
id=‘7′ file="photo_7915_20070609.jpg" width=‘500′ height=‘371′>
Skinny cats are OK too.
>
>

XML is very simple to understand if you know anything about HTML’s tag structure. The XML document has a root tag that has an attribute dir=”//url/Photos/”. Every tag has to be closed within it’s own level of the tree. Our gallery tag is closed at the bottom of the document with . This means that all the tags are elements inside the gallery element (both open and close tags combined make up an element).

Our tags have several attributes, such as the images file name and it’s pixel demensions. Inside each element we have a short comment about the image that will be displayed in a TextField in our Flash movie.

One important thing to notice here is that if you want to have HTML in your TextField then you need to tell the code that something is a string containing HTML and not more elements. We do this with a special bracket HTML GOES HERE ]]> Isn’t that GREAT! That right there probably made this whole tutorial worth while (that was a problem that took me a long time to solve).

OK, now that we’ve looked at the XML we need to make it work with ActionScript 3. In Adobe Flash CS3 I created a new AS3 FLA doc and a new AS doc. In the FLA I simply created some very basic MovieClips for my left and right arrows and I placed a TextField at the bottom of my stage (which I set to 600 X 700 with a black background). After naming my instances and setting up the Document Class linkage I was done with the FLA side of thing and the rest is ActionScript.

Our Document Class has to extend MovieClip so we take our first steps thusly:

public class Main extends MovieClip {
public var currentImg:Number;
public var lastImg:Number;
public var xml:XML;
public var loader:Loader;
public var xmlLoader:URLLoader;

public function Main() {
loader = new Loader();
addChild(loader);

xmlLoader = new URLLoader(new URLRequest("//url/gallery.xml"));
xmlLoader.addEventListener(Event.COMPLETE, parseXML);

left_mc.stop(); //Need to stop the arrows from flickering
right_mc.stop();
}
}

In our constructor we are initializing our Loader which will contain the loaded images and we are loading our XML document. When the XML doc is done loading, the function parseXML will handle the content.

protected function parseXML(event:Event):void {
left_mc.addEventListener(MouseEvent.MOUSE_UP, nextImg);
left_mc.addEventListener(MouseEvent.MOUSE_OUT, arrowOut);
left_mc.addEventListener(MouseEvent.MOUSE_OVER, arrowOver);
right_mc.addEventListener(MouseEvent.MOUSE_UP, prevImg);
right_mc.addEventListener(MouseEvent.MOUSE_OUT, arrowOut);
right_mc.addEventListener(MouseEvent.MOUSE_OVER, arrowOver);

xml = new XML(event.currentTarget.data);
lastImg = xml.img.length() – 1;
currentImg = 0;
loadImg();
}

I’ve recently gotten into the habit of using protected functions rather then private functions. There is only one difference between the two and that’s that private anything won’t be inherited by child classes.
In this function I set the MouseEvents for the arrows because if the XML failed to load, there would be no reason for the arrows to work.

Alright, so I saved my XML tree in the var xml for ease of use later. I also saved the number of images in my XML doc using the length() method. Something to know about the length method is it will only tell you how many elements there are of that tag type at that level. For example, if I were to have child elements inside my img elements that would not affect the return value of xml.img.length(); It’s only telling you how many img elements are children of gallery (gallery is accessed with the var xml directly).

protected function loadImg():void {
loader.x = (stage.width – Number(xml.img[currentImg].@width))/2;
loader.y = (stage.height – 50 – Number(xml.img[currentImg].@height))/2;
loader.load(new URLRequest(xml.@dir + xml.img[currentImg].@file));
loader.contentLoaderInfo.addEventListener(Event.COMPLETE, loadFin);
}
protected function loadFin(event:Event):void {
textDisp_TF.htmlText = xml.img[currentImg];
}

In that first function I’m just going to focus on the one line with the URLRequest. In order to traverse an XML tree you need start with the base. Your XML var (in our case it’s called xml) points to that base (in this case the base is gallery). So when we want to access the attribute dir in the tag gallery, we need to type xml.@dir and this will return “//url/Photos/”. The ‘@’ symbol denotes that it’s an attribute and not an element (tag).

Getting the file name is just one step further. currentImg is a Number variable that stores which image we are on. Thinking of our XML var as something similar to a bunch of nested arrays we can see how you might access a specific file name with xml.img[currentImg].@file This says we want the file attribute in the [currentImg] (first second so forth) img element which is in our base element. There are quite a few ways of finding what you need in an XML doc and you can learn more about them here.

In the second function we are displaying the text from within our XML img element. Here we aren’t accessing any attributes or anything, this is where we get the content between the open and close tags.

Finally we have the arrow MouseEvent handlers:

protected function arrowOut(event:MouseEvent):void {
MovieClip(event.currentTarget).gotoAndStop(1);
}

protected function arrowOver(event:MouseEvent):void {
MovieClip(event.currentTarget).gotoAndStop(2);
}

protected function nextImg(event:MouseEvent):void {
loader.unload();
currentImg = (currentImg < lastImg)? currentImg + 1 : 0;
loadImg();
}

protected function prevImg(event:MouseEvent):void {
loader.unload();
currentImg = (currentImg > 0)? currentImg – 1 : lastImg;
loadImg();
}

Once again I’m using the less obvious form of the if..else statement.

if(num>5) {
num = 5;
}else {
num = 0;
}
//OR, THIS NEXT PART DOES THE SAME THING
num = (num>5)? 5 : 0;

Well that’s about it for this level of a gallery. You can make galleries look really nice with fade transitions between images, small loading animations for larger images, scrollable thumbnail selection menu… etc.

Here is a downloadable source of my example file (images not included… get them here): XMLGallery.zip

Changes to Box2DFlash “Hello World” example.

Paul — Wed, 30 Apr 2008 00:28:36 +0000

I’ve talked about the basics of Box2DFlash v1.4.3 in my Introductory tutorial. I showed how to create your world and how to introduce simple bodies into that world. With the release of Box2DFlash v2.0.0 the basics remain mostly the same, there are a few details changed. I need to go over these small changes before I move on to the next step of adding joints and forces to the bodies.

The first and biggest change (although really a small thing) is that we no longer work in pixels! We now work in units that by default equal 30 pixels to 1 unit (think of it as meters; 30px : 1m). With this change our normal gravity is no longer (0, 300) but instead (1, 10). This makes more sense to me at least because gravity in reality is 9.81 m/s/s. This is going to effect almost everything you do, from applying forces to setting the width and height of a box.

The reason for such a change (I believe) is to make it easier for you to dynamically scale a project. Just change the ratio of pixels per unit and everything should scale correctly.

The second change is the way we add objects to the world. The creation of a new shape and object is still very much the same, but we now have the ability to adjust the center of mass. For now, just leaving the center of mass to auto calculate we need to get the body object when adding the new bodyDef to the world.

var body:b2Body;
var bodyDef:b2BodyDef;
var boxDef:b2PolygonDef;

// Add ground body
bodyDef = new b2BodyDef();
bodyDef.position.Set(10, 12); //Small numbers… remember it’s scaled 30:1
boxDef = new b2PolygonDef();
boxDef.SetAsBox(30, 3); //THIS IS NEW!
boxDef.friction = 0.3;

// Add sprite to body userData
bodyDef.userData = new PhysGround();
bodyDef.userData.width = 30 * 2 * 30;
bodyDef.userData.height = 30 * 2 * 3;
addChild(bodyDef.userData);
body = m_world.CreateStaticBody(bodyDef); //THIS IS MOSTLY NEW
body.CreateShape(boxDef); //THIS IS NEW
body.SetMassFromShapes(); //THIS IS NEW

Haha! I guess I forgot to mention that we no longer have a b2BoxDef anymore… we only have b2PolyDef (renamed b2PolygonDef). We can quickly define it as a box though using the method public function SetAsBox(hx:Number, hy:Number):void.

Anyways, let us bring our attention back to adding the object to the world. When you add the object to the world, you are creating it as either a static (unmoving) body or as a dynamic body (body = m_world.CreateDynamicBody(bodyDef);).
It then returns the new body object BY REFRENCE. It is not giving you a copy of that object. This way when we make changes, such as add the shape and set the mass (center of mass really) we don’t have to go send it back again.

The method public function SetMassFromShapes():void is the way to auto calculate and set your center of mass. Otherwise you have to us public function SetMass(massData:b2MassData):void, but this is a whole new complication.

OK! With that, we are pretty much back up to speed after my last tutorial.

Box2DFlash v2.0.0 Released!

Paul — Mon, 21 Apr 2008 18:30:33 +0000

Box2DFlash v2.0.0 was finally released on the 17th of this month (April). Box2DFlash is the Flash AS3 port of Erin Catto’s C++ physics engine Box2D. Erin Catto is a physics programmer at Blizzard Entertainment (WarCraaaft!). I’ve been looking forward to this release since I found out about it while making a tutorial for the previous release (v1.4.3) about a month ago.

Some of the major changes/additions to this version are:

- Continuous physics.
Continuous physics means that the physics is now independent of the frame rate. This prevents bodies from passing through each other at higher speeds. This feature can potentially make this version slower then previous versions, but it also makes it MUCH more accurate.
- Shape create/destroy.

You can destroy a shape on the parent body easily. You may do this to model a breakable object.

In the past you couldn’t add or remove shapes from a body object that was already in the world object.
- Joints defined in local coordinates.

Box2D requires [joint anchor] points to be specified in local coordinates. This way the joint can be specified even when the current body transforms violate the joint constraint — a common ocurrence when a game is saved and reloaded.

- Moveable center of mass.
This is great because you can now have a hammer that’s center of mass is in the head, not the middle of the handle.
- Sensors.

Some times game logic needs to know when two shapes overlap yet there should be no collision response. This is done by using sensors. A sensor is a shape that detects collision but does not produce a response…

- Contact listener callback.
- Contact filter callback.
These callbacks are essentially events. It is now much easier to do something or other on collisions. Say, cause damage to your spaceship when a meteor strikes it.
- Revised manual.
Sure. Having an up to date manual is a good thing. Currently the manual is only for the C++ version, but all the concepts are the same for the flash version and it will help a lot for understanding the example projects.
- Doxygen documents.
- Eliminated deferred destruction.
This was a feature in previous versions of Box2D that was only needed because there was no contact callbacks. It’s gone now so I’m not going to bother explaining what it was.
- Improved testbed with more examples.
Check it out! It’s really just the example project/code that they give you to learn some of the features.

With this release I will be getting back to making some tutorials on how to use this awesome resource. So, keep checking back to see what’s new and I will hopefully not disappoint you.

Making an MP3 player in AS3

Paul — Wed, 16 Apr 2008 00:12:24 +0000

Music Credits:
Title: The Best Day Ever
Artist: SpongBob
Album: The SpongeBob SquarePants Movie: Music From the Movie and More

Creating an MP3 Player in ActionScript 3.0 is fairly straight forward. The complexity varies greatly depending on what kind of features you want your player to have. I don’t plan on getting into ID3 tags here, but otherwise (as you can see) I will be going over the full functionality of a normal MP3 Player.

The first step is setting up the display and graphics. I went into the FLVPlayback skin SkinOverAll.fla file and fetched all the button graphics I needed (I’m not a very good artist). It was only a little trouble to recreate the buttons in a way that satisfied me (The only important thing to note about my buttons is that I gave them frame labels on the keyframes to make it easier to remember while writing the code).

Setting up the framework:

Now for the code! You can approach code like this from a number of different directions. I chose to start with making my button instances look like buttons, even though they don’t do anything yet. It’s really just a matter of setting up a LOT of event listeners (4 for each button):

…
stop_mc.addEventListener(MouseEvent.MOUSE_OVER, StopOver);
stop_mc.addEventListener(MouseEvent.MOUSE_OUT, StopOut);
stop_mc.addEventListener(MouseEvent.MOUSE_DOWN, StopDown);
stop_mc.addEventListener(MouseEvent.MOUSE_UP, StopUp);
…
private function StopOver(event:MouseEvent):void {
var obj:Object = event.currentTarget;
obj.gotoAndStop(’stop_over’);
}
private function StopOut(event:MouseEvent):void {
var obj:Object = event.currentTarget;
obj.gotoAndStop(’stop’);
}
private function StopDown(event:MouseEvent):void {
var obj:Object = event.currentTarget;
obj.gotoAndStop(’stop_down’);
}
private function StopUp(event:MouseEvent):void {
var obj:Object = event.currentTarget;
playPause_mc.playing = false;
playPause_mc.gotoAndStop(‘play’);
obj.gotoAndStop(’stop_over’);
}
…

At this point most of the buttons are the same. The only difference might lay in the MOUSE_UP event or how the play button has to switch between play and pause, so I have the boolean property playing in my PlayPauseBtn class.

Bringing in a PlayList:

Now that we have basic working buttons that don’t do anything, it feels like the framework is in place to start making our MP3 player play music. To do this we will need a few elements:

public var url:URLRequest;
public var xmlLoad:URLLoader;
public var musicXML:XML;
public var song:Sound;
public var channel:SoundChannel;
public var sndTrans:SoundTransform;
public var position:Number;

Our song:Sound will load the song and play it. The play() method in the Sound class returns a sound channel which we need to store in our channel:SoundChannel in order to pause/play/stop, or change the volume of our music.

The SoundTransform class is what is used to change the volume through the channel. It can also change the pan (balance of left and right speakers), but I’m not going to get into that.

What we are going to do is load an external XML file with our playlist in it… something like this:

>
id="/url/TheBestDayEver.mp3" disp="The Best Day Ever"/>
id="/url/come_away.mp3" disp="Come Away"/>
id="/url/nightmares.mp3" disp="Nightmares and Dreams"/>
id="/url/override.mp3" disp="Override"/>
id="/url/rescue.mp3" disp="Rescue"/>
id="/url/stick_em_up.mp3" disp="Stick’em Up"/>
id="/url/trogdor.mp3" disp="TROGDOOOR"/>
id="/url/you_are.mp3" disp="You Are"/>
>

Then we want to add each song on that playlist to a list component on the stage (I’ve called it playList). After we have the URLs of our songs, then we can start to load and play them.

In our xmlComplete(event:Event) event handler (handling the COMPLETE event from loading our XML file with a URLLoader) we need to parse the playlist into our List:

private function xmlComplete(event:Event):void {
var item:Object;
musicXML = new XML(event.currentTarget.data);

for each(var prop:XML in musicXML.song){
item = new Object();
item.label = prop.@disp;
item.data = prop.@id;
playList.addItem(item);
}

song = new Sound();
song.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
song.load(new URLRequest(playList.getItemAt(0).data));
this.addEventListener(Event.ENTER_FRAME, updateSeek);
playList.selectedIndex = 0;
}

The for each..in loop is one that not everyone knows about. It’s very useful for getting all the elements of an XML object when you aren’t sure how many elements there will be. Basically it’s assigning each song tag from the XMLList musicXML.song to prop and then runs the code within the curly brackets {}.

I don’t like it when music or sounds start playing on the internet without my consent. So, whenever I make something like and MP3 Player, I set it up to NOT automatically play.

Still, I want it to be ready to play as soon as the user tells it to. So, I needed to add those lines after my for each..in loop. What is happening might be obvious enough. I’m creating a new Sound object and storing it in song. I always check for load errors so that the end user doesn’t get annoying pop-ups telling them that I’m a bad programmer. Then I’m loading the first song on the playList and making that song highlighted in my List component.

The event listener with a handle of updateSeek is needed for my seekbar. I will get to that later.

Playing the music and traversing out PlayList:

Great! So, now we have everything set up to look like a complete player. We even have our first song loaded. But, there is no way to get it to play yet. Our PLAY button doesn’t work yet.

This is where we have to start giving those buttons some functionality. Most (if not all) of the functionality for each button is going to be in the MOUSE_UP event handlers:

private function PlayUp(event:MouseEvent):void {
var obj:Object = event.currentTarget;
if(obj.playing) {
obj.gotoAndStop(‘play_over’);
position = channel.position;
channel.stop();
obj.playing = false;
} else {
obj.gotoAndStop(‘pause_over’);
channel = song.play(position);
channel.soundTransform = (mute_mc.isMute)? new SoundTransform(0) : sndTrans;
channel.addEventListener(Event.SOUND_COMPLETE, soundComplete);
obj.playing = true;
}
}

…

private function StopUp(event:MouseEvent):void {
var obj:Object = event.currentTarget;
channel.stop();
position = 0;
playPause_mc.playing = false;
playPause_mc.gotoAndStop(‘play’);
obj.gotoAndStop(’stop_over’);
}

…

playList.addEventListener(ListEvent.ITEM_CLICK, SnglClick);

…

private function SnglClick(event:ListEvent):void {
var item:Object = event.item;

try
{song.close();}
catch(error)
{trace(error);}
try
{channel.stop();}
catch(error)
{trace(error);}

song = new Sound();
song.addEventListener(IOErrorEvent.IO_ERROR, ioErrorHandler);
song.load(new URLRequest(item.data));
channel = song.play();
channel.soundTransform = (mute_mc.isMute)? new SoundTransform(0) : sndTrans;
channel.addEventListener(Event.SOUND_COMPLETE, soundComplete);
position = 0;
playPause_mc.playing = true;
playPause_mc.gotoAndStop(‘pause’);
}

…

private function soundComplete(event:Event):void {
if(playList.length > playList.selectedIndex + 1){
playList.selectedIndex++;
playList.scrollToSelected();
} else {
playList.selectedIndex = 0;
playList.scrollToSelected();
}
playList.dispatchEvent(new ListEvent(ListEvent.ITEM_CLICK, false, true, 0, playList.selectedIndex, playList.selectedIndex, playList.selectedItem));
}

…

private function ForwardUp(event:MouseEvent):void {
var obj:Object = event.currentTarget;
obj.gotoAndStop(‘forward_over’);

if(playList.length > playList.selectedIndex + 1){
playList.selectedIndex++;
playList.scrollToSelected();
} else {
playList.selectedIndex = 0;
playList.scrollToSelected();
}
playList.dispatchEvent(new ListEvent(ListEvent.ITEM_CLICK, false, true, 0, playList.selectedIndex, playList.selectedIndex, playList.selectedItem));
}

My Play/Pause button, if playing, will save the current position and then stop the music through the channel. Otherwise, it will play from position and set the volume and add a listener for the end of the song.

The Stop button obviously just stops the song and sets the position back to zero (0). I guess it also resets the Play button.

The ListEvent.ITEM_CLICK is when we click on a list item (a new song in the playlist). The handler closes any open stream that might be there (thus the try..catch) and if not then to simply stop the channel. It then loads the song URL stored in that items data provider and starts it playing.

The forward and back buttons are almost exactly the same. They just change the selection in the List component and then dispatch a fake ITEM_CLICK event.

The soundComplete() method, as you can see, is also very similar to the forward button. This event handler is called when a song played right to the end.

Working with volume:

Since I’ve already mentioned setting the volume, I might as well get into that next. The volume is a property of the SoundTransform class. We already made a SoundTransform variable, we just haven’t stored an ST object in it yet.

My main volume control is sndTrans:SoundTransform; After setting the volume property within it I can assign it to the channel.soundTransform and it will take effect. My volume bar has it’s own class to handle the effect of dragging the handle around:

package controls {
import flash.display.MovieClip;
import flash.events.*;
import flash.geom.Rectangle;

public class VolControl extends MovieClip {
private var bounds:Rectangle;
public var percent:Number;

public function VolControl() {
percent = 1;
bounds = new Rectangle(0, 10, 50, 0);

volBar_mc.hit_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragHandle);
volHandle_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragHandle);
volHandle_mc.addEventListener(MouseEvent.MOUSE_UP, endDrag);
volHandle_mc.addEventListener(MouseEvent.MOUSE_OUT, endDrag);
}

private function dragHandle(event:MouseEvent):void {
volHandle_mc.startDrag(true, bounds);
this.addEventListener(Event.ENTER_FRAME, changeVol);
}
private function endDrag(event:MouseEvent):void {
volHandle_mc.stopDrag();
volBar_mc.fullness_mc.fill_mc.x = volHandle_mc.x – volBar_mc.fullness_mc.fill_mc.width;
percent = volHandle_mc.x/50;
dispatchEvent(new Event("volume_change"));
this.removeEventListener(Event.ENTER_FRAME, changeVol);
}
private function changeVol(event:Event):void {
volBar_mc.fullness_mc.fill_mc.x = volHandle_mc.x – volBar_mc.fullness_mc.fill_mc.width;
percent = volHandle_mc.x/50;
dispatchEvent(new Event("volume_change"));
}
}
}

This is simply letting you drag around the little pointer within its bounds and dispatching an event to let the main class know that the volume has been changed. I needed to repeat some of the code from changeVol() in endDrag() because if you just click quickly then the ENTER_FRAME event never gets handled before it’s removed.

Back in the main class we are handling that “volume_change” event:

vol_mc.addEventListener("volume_change", updateVolume);
…
private function updateVolume(event:Event):void {
sndTrans.volume = vol_mc.percent;
channel.soundTransform = (mute_mc.isMute)? new SoundTransform(0) : sndTrans;
}

Another thing that a lot of new programmers don’t know about is the conditional ? : operator. It’s shorthand for an if..else statement. Basically these two bits of code are the same:

if(num>5) {
num = 5;
}else {
num = 0;
}
//OR THIS NEXT PART DOES THE SAME THING
num = (num>5)? 5 : 0;

Isn’t that great?

Getting back to our MP3 player. We should add our Mute button while we are working with volume. You’ve already seen that I take the mute condition into account when I set that volume. Here is where I set the mute condition:

private function MuteUp(event:MouseEvent):void {
var obj:Object = event.currentTarget;
if(obj.isMute) {
obj.gotoAndStop(‘mute_over’);
obj.isMute = false;
channel.soundTransform = sndTrans;
} else {
obj.gotoAndStop(‘unmute_over’);
obj.isMute = true;
channel.soundTransform = new SoundTransform(0);
}
}

I never want to set sndTrans.volume to zero (0) just because I pressed the mute button. I would rather leave that as it is so that I can unmute back to the original volume again.

*phew* About this time I’m thinking to myself, “It sure takes a lot of code to get a simple MP3 Player to work correctly.” But, there is light on the horizon so we must press on.

Making the seek bar to search a song:

Now for the most complicated part of our player. The seek bar. The seek bar isn’t THAT bad, but it’s definitely worse then what we have done so far.

First of all we will give the seek bar the same drag or click functionality that we gave to volume control bar:

public class SeekControl extends MovieClip {
private var bounds:Rectangle;
public var percent:Number;
public var seeking:Boolean;

public function SeekControl() {
seeking = false;
percent = 0;
bounds = new Rectangle(0, 12, 100, 0); //I made the seek bar 100 wide for convenience

seekHit_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragHandle);
seekHandle_mc.addEventListener(MouseEvent.MOUSE_DOWN, dragHandle);
seekHandle_mc.addEventListener(MouseEvent.MOUSE_UP, endDrag);
}

private function dragHandle(event:MouseEvent):void {
seeking = true;
seekHandle_mc.startDrag(true, bounds);
}
private function endDrag(event:MouseEvent):void {
seeking = false;
seekHandle_mc.stopDrag();
fillBar_mc.x = seekHandle_mc.x – fillBar_mc.width;
percent = seekHandle_mc.x/100;
dispatchEvent(new Event("seek_change"));
}

public function moveSeekPos(perc:Number):void {
fillBar_mc.x = (fillBar_mc.width * perc) – fillBar_mc.width;
if(!seeking)
seekHandle_mc.x = 100 * perc;
}
}

The biggest difference here is that I don’t want a live update while dragging the pointer around. Otherwise, a few values have changed, some var names have changed, but it should look familiar (well it would if you had written this code yourself).

The moveSeekPos() method is going to be updated constantly from our main class. This is here so that we can see the play progress when listening to a song.

Getting back to the main class again, we have to write a thing or two about our seek bar there:

/*Remember that
this.addEventListener(Event.ENTER_FRAME, updateSeek);
is added when we start to load a new song.*/
seek_mc.addEventListener("seek_change", changeSeekBar);
…
private function changeSeekBar(event:Event):void {
position = song.length * seek_mc.percent;
if(playPause_mc.playing){
channel.stop();
channel = song.play(position);
channel.soundTransform = (mute_mc.isMute)? new SoundTransform(0) : sndTrans;
channel.addEventListener(Event.SOUND_COMPLETE, soundComplete);
}
}
…
private function updateSeek(event:Event):void {
if(playPause_mc.playing) {
var perc:Number = channel.position / song.length;
seek_mc.moveSeekPos(perc);
display_mc.timeDisp.text = formatTime(channel.position) + "/" + formatTime(song.length);
}
}
…
public function formatTime(time:Number):String {
var min:String = Math.floor(time/60000).toString();
var sec:String = (Math.floor((time/1000)%60) < 10)? "0" + Math.floor((time/1000)%60).toString() : Math.floor((time/1000)%60).toString();

return(min+":"+sec);
}

I went ahead and added the code here to display the current play time and the total play time in a dynamic text field on the stage. That seemed to be closely related to the seek bar, so I figured showing it here is suitable.

A final note:

Now would be a good time to mention that I didn’t bother fixing a “minor” bug. While a song is still streaming (loading), Flash doesn’t know how long it is. Thus, song.length will be growing over time till it’s done loading. This is only an issue for our seek bar, because it uses the ratio between the current position and the total length to decide how to display itself.

To work around this issue (which is really only an issue for slower internet connections), you will need to pass Flash the songs length along with the file path in the XML doc. It seemed like a lot of trouble to me and since this isn’t for a client, I figured I would just tell you about it instead of do it for you.

Wow. This was so long that I wouldn’t be surprised to find later that I forgot something. If I find anything I will make sure to update this post and make a note of what I changed.

Anyways, that is it! I think…

Let me know what you think about it and also let me know if you even use my Player on your site somewhere. I would love to see my work being used.

You can get the source files for this tutorial and the example at the beginning to the page here: MP3 Player Source Code.rar

UPDATE: I have updated the source file to include changes which will fix a few bugs pointed out to me over time. I also added a few new lines to the disclaimer at the beginning of my code which explains that WE DO NOT PROVIDE TECHNICAL SUPPORT FOR OUR EXAMPLE CODE. It is there for reference only. We would hope that you would use our code in conjunction with the tutorial to learn how to do it yourself.
We understand that most people will just download and use the code without much effort towards learn new skills, but we aren’t going to answer your questions in that case. If you notice something wrong with the code and want to bring it to our attention that would be appreciated, but any questions on how to use the code will be answered with “Read the tutorial.”

Internal PreLoading in ActionScript 3

Paul — Mon, 07 Apr 2008 17:26:42 +0000

I’m going to walk through the steps of making a preloader for your animation, game, or application and provide easily implemented source files that you can copy and change to fit your own project. Making a preloader in ActionScript 3 is more difficult to figure out then it was in ActionScript 2, but the code itself is not any harder.

To start off, you can access the stage’s bytesLoaded and bytesTotal through it’s loaderInfo.
Once you know that, building a preloader becomes very easy:

package {
import flash.display.MovieClip;
import flash.text.TextField;
import flash.events.*;

public class ClickPopPreLoader extends MovieClip {
var initX:Number;

public function ClickPopPreLoader() {
initX = loadProg_MC.x;
addEventListener(Event.ENTER_FRAME, handleProgress);
}

private function handleProgress(event:Event):void {
var loaded:Number = stage.loaderInfo.bytesLoaded
var total:Number = stage.loaderInfo.bytesTotal
var percent:Number = loaded/total;
// trace(Math.floor(percent*100)+"%");

UpdateProgress(percent);

if(loaded >= total){
removeEventListener(Event.ENTER_FRAME, handleProgress);
/*stage.getChildAt(0) can cause an error message that is
really a warning. Turn off Strict mode in "Publish Settings"
and it will compile just fine.*/
stage.getChildAt(0).gotoAndPlay(‘begin’);
}
}
private function UpdateProgress(prog:Number):void {
loadProg_MC.x = initX – (initX * prog);
output_TF.text = String(Math.floor(prog * 100)+"%");
}
}
}

The code is so short I would feel silly cutting it up.

The code above would be a class file for a MovieClip that contains another MovieClip called loadProg_MC that acts as a mask for some kind of load bar (in my example it’s unmasking the glow behind the words “Click Pop Media”). The MovieClip would also have a TextField called output_TF to display the % loaded.

Notice that I’m using the ENTER_FRAME event rather then the PROGRESS event. You really could use the PROGRESS and COMPLETE events, but I’ve heard that it doesn’t work consistently in IE6 on PCs (supposedly that has been fixed in Flash Player 9.0.115). I haven’t really checked this myself because I don’t have Internet Explorer 6, but I just take their word for it because ENTER_FRAME works just as well.

Once you get the stage.loaderInfo what you do with it and how you display the load progress is up to you. That’s actually not the part that raises questions for most people. What usually happens is that they will add all the right code and make a really good preloader animation and then when they test it out… the preloader doesn’t show up until AFTER everything is loaded.

The problem that we run into is that Flash Player loads a movie starting with frame one and then works its way up. Although you may only have your preloader on frame one you need to take a look at the “linkage” of each of your library items.

The checkbox, which by default is selected, called “Export in first frame” needs to be unchecked for as many, if not all, of your library symbols (especially larger items like sounds and music). “Export in first frame” means that until this item is loaded the first frame can’t play. Thus, if everything is exported in the first frame then your preloader won’t have a chance to show anything loading before it’s already done.

This leads to another problem though! If you are creating instances of your library symbols dynamically using ActionScript and that code loads before the symbol does, then you will get runtime errors. This isn’t really a problem if you have a pure animation without any code. For a game though, avoiding this little problem is messy, but it can be done easily enough and without being noticed by the end users.

What you have to do is, in a frame BEFORE any of your main code, create one instance of each library item that is going to be instantiated dynamically… but still after your preloader. A good practice would be to have your preloader on frame 1 and then all your instances on frame 2. When your preloader is done (and maybe the play button is clicked) it will jump PAST frame 2 and go straight to the beginning of your animation/game/app.

————————————————————————————-

For those of you who either don’t want to turn off strict mode or want to avoid OOP (Object Oriented Programming), here is the same code I gave you before, but modified to reside on the stage instead of in a class.

var initX:Number = PreLoader.loadProg_MC.x;
addEventListener(Event.ENTER_FRAME, handleProgress);

function handleProgress(event:Event):void {
var loaded:Number = stage.loaderInfo.bytesLoaded
var total:Number = stage.loaderInfo.bytesTotal
var percent:Number = loaded/total;
// trace(Math.floor(percent*100)+"%");

UpdateProgress(percent);

if(loaded >= total){
removeEventListener(Event.ENTER_FRAME, handleProgress);
gotoAndPlay(‘begin’);
}
}
function UpdateProgress(prog:Number):void {
PreLoader.loadProg_MC.x = initX – (initX * prog);
PreLoader.output_TF.text = String(Math.floor(prog * 100)+"%");
}

You can also make a document class if you wanted (for those who like OOP, but still want to keep Strict mode for some reason), but I’m not going to get into that here.

As promised, here is the source files to a working preloader: ClickPopMedia Preloader
There is instructions all over the place within those files.