ClickPopMedia » Intermediate

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.

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.”

Spring Animation with ActionScript 3

Paul — Fri, 04 Apr 2008 06:00:22 +0000

In celebration of our little vector contest I thought I would unofficially submit my own entry.

I made this animation using our Spring Time vector pack. It’s about 360Kbs, but once it’s loaded click Play to get it started, then you can press the Left or Right arrows to control the little bunny.

I’ll walk you through the process I went through to create this here game/animation.

My first step was to get the vector pack that I wanted to use. Then I imported it into Flash CS3.

You can just go ahead and import everything. Then just delete anything you don’t need. I only unchecked a few groups and paths that I knew weren’t needed.

Once all the groups are imported to the stage you can go into them by double clicking on them and remove or edit them how you like. For example I got rid of the dirt path on the ground.

When everything was more or less how I wanted it, I started making MovieClip symbols out of some of the more important groups and the rest I either deleted or just left as background on the stage.

Before I wrote any code I thought it would be fun to animate the sun a little and work out how the bunny was going to hop.

For the sun I separated the face and the orange halo behind its head and over the span of 6 frames I rotated the halo just a little bit so that it would loop and look like it was always turning.

With a little thinking ahead I setup the bunny’s animation and on the first frame I added a quick 3 lines of code to let me stop it from looping if I wanted.

With all the prep done we are finally able to focus on the code. I started off with my symbol class files (i.e. tree.as, clouds.as, and rabbit.as).

There is very little in the rabbit class. Just a boolean property called “moving” so that the small bit of code on frame one will work.

The clouds class is a different story. I wanted to be able to create a new cloud and not have to worry about what type of cloud it was or how fast it would move. So, I made my clouds class randomly child one of my four types of clouds:

public class clouds extends Sprite {

public var vel:Number;
private var c:Number;

public function clouds() {
c = Math.random();
if(c > .85){ //15%
this.y = 140;
addChild(new cloudMad());
}else if(c > .55){ //30%
this.y = 135;
addChild(new cloudCry());
}else if(c > .3){ //25%
this.y = 80;
addChild(new cloudWhistle());
}else { //30%
this.y = 100;
addChild(new cloudSmile());
}

vel = 1 + Math.random();
addEventListener(Event.ENTER_FRAME, doNext);
}

private function doNext(event:Event):void {
this.x += vel;

if(this.x > 700) {
removeEventListener(Event.ENTER_FRAME, doNext);
removeChildAt(0);
dispatchEvent(new Event(Event.COMPLETE));
}
}
}

Notice the variable vel being randomly set to a number between 1 and 2. Every frame the cloud will move to the right by vel pixels. Since the stage is only 550 pixels long I wanted to delete the cloud once it’s definitely clear of the screen. So I remove the child and the event listener and then dispatch a “complete” event so I can finish cleaning up somewhere else in my code.

The tree class is very similar to the cloud class in the respect that it handles it’s own movement. But, there is an added complexity to the trees because 1.) I want to recycle them instead of delete them (actually it’s easier then deleting them), and 2.) The trees don’t move in a straight line across the screen like the clouds do.

public class tree extends Sprite {

private var posY:Number;

public function tree(posY:Number) {
vel = 0;
this.y = this.posY = posY;
addEventListener(Event.ENTER_FRAME, doNext);
}

private function doNext(event:Event):void {
this.x += vel*(this.scaleX);

if(this.x > 700) {
this.x = -150;
}
if(this.x < -150) {
this.x = 700;
}

this.y = posY + 925 – Math.sqrt(925*925 – Math.pow(this.x-275, 2));
this.rotation = (this.x – 275)/18;
}
}

Multiplying the velocity (vel) by the scale (scaleX) will add to the illusion of depth.

In order to move my trees along the curvature of the land I first needed to find out the equation of that curve. To me the curve looked a lot like a segment of a circle, so I just needed to find the radius of that circle. To do that I zoomed out really far, drew a circle and then played around resizing it till it approximately fit the curve. In the end I got a radius of 925 (which is actually slightly too big, but it’s close enough).
Knowing that the equation of a circle is (X+xOffset)^2 + (Y+yOffset)^2 = R^2. Then the equation breaks down to Y = -yOffset + sqrt(R^2 – (X+xOffset)^2) and that’s pretty much what you see near the bottom of my code. The operator signs (+/-) are different because in flash our coordinate plane is flipped vertically.

OK! Now that I have (what tense/perspective was I writing in again?) my trees, clouds, and bunny that all take care of their own movement, it’s time I write the main code that adds everything to the stage.

Ever since I noticed that it was possible I’ve been writing all my code in external .AS files and then associating them with my document.

So, in my main code’s constructor I want to add my bunny and trees to the stage and maybe a new cloud every 5 seconds or so:

public class main extends MovieClip{
public var bunny:MovieClip;
public var treeLayer1:Sprite;
public var treeLayer2:Sprite;
public var treeLayer3:Sprite;
public var myTree:Sprite;
public var myCloud:Sprite;
public var cloudTimer:Timer;

public function main() {
addTrees();
addBunny();

cloudTimer = new Timer(5000); // Every 5 seconds without an end
cloudTimer.addEventListener(TimerEvent.TIMER, addCloud);
cloudTimer.start();

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyDownHandler);
stage.addEventListener(KeyboardEvent.KEY_UP, keyUpHandler);
}
}

Of course I need to start to watch for keyboard actions too so I added the event listeners for that.

My addTrees() function has to make 3 layers of trees with different amounts of blur (also to give the illusion of depth):

private function addTrees():void {
treeLayer1 = new Sprite();
treeLayer2 = new Sprite();
treeLayer3 = new Sprite();

stage.addChild(treeLayer1);
stage.addChild(treeLayer2);
stage.addChild(treeLayer3);

var filter:BitmapFilter = new BlurFilter(4, 4, BitmapFilterQuality.LOW);
var myFilters:Array = new Array();
myFilters.push(filter);
treeLayer1.filters = myFilters;

filter = new BlurFilter(2.5, 2.5, BitmapFilterQuality.LOW);
myFilters = new Array();
myFilters.push(filter);
treeLayer2.filters = myFilters;

Adding the bunny to the stage is also really easy:

private function addBunny():void {
bunny = new rabbit();
bunny.scaleX = .5;
bunny.scaleY = .5;
bunny.x = 275;
bunny.y = 350;
stage.addChild(bunny);
}

Our clouds… since there aren’t ALWAYS clouds in the sky I figured I would only add a new cloud about 30% of the time every 5 seconds.

private function addCloud(event:TimerEvent):void {
if(Math.random() > .7) {
myCloud = new clouds();
myCloud.x = -100;
myCloud.addEventListener(Event.COMPLETE, handleOffScreen);
stage.addChildAt(myCloud, 1);
}
}

private function handleOffScreen(event:Event):void {
stage.removeChild(Sprite(event.currentTarget));
}

Also remembering to take care of the “complete” event that I dispatch from within my cloud object when it goes off stage.

Finally I just have to add my keyboard handling functions, which are really easy:

private function keyDownHandler(event:KeyboardEvent):void {
if(event.keyCode == 39) { //Right
if(!bunny.moving) {
bunny.scaleX = -.5;
bunny.moving = true;
bunny.play();
tree.vel = -4;
}
}
if(event.keyCode == 37) { //Left
if(!bunny.moving) {
bunny.scaleX = .5;
bunny.moving = true;
bunny.play();
tree.vel = 4;
}
}
}

private function keyUpHandler(event:KeyboardEvent):void {
bunny.moving = false;
tree.vel = 0;
}

There it is! I’ve given you almost all the code right there. And if you want more, then download ALL the code here: Springtime Animation Source Code.

Physics in ActionScript 3: Box2DFlashAS3

Paul — Mon, 17 Mar 2008 21:57:51 +0000

I wanted to try something fun with Flash this week, so I did a quick search for “Flash Physics Engine.” Lo and behold, I struck gold. Box2DFlashAS3 is an open source ActionScript 3.0 conversion of the C++ Physics Engine Box2D. I’m very impressed with its well coded structure and easily implemented nature. I learned a few new things that will change how I code forever just by reading through their example files.

Still, they have limited resources right now as far as help documentation goes (”Please refer to the source code from the examples provided to get an idea of how to use Box2DFlash in your projects.” — that’s the ReadMe.txt that comes with it… not very helpful,huh). I thought I might give you an example of my own and walk through it step by step.

That was the thought, but it has taken me all weekend to understand the engine well enough to explain how it works. The beauty of it though, is you don’t have to understand how it works to use it.Now to get right into it then! First of all, in order to do anything with Box2DFlash you’re going to have to include most (if not all) of the files. If you have the 349KB folder “Box2D” in your project folder, then your includes will work just like this:

// Classes used in this example
import Box2D.Dynamics.*;
import Box2D.Collision.*;
import Box2D.Collision.Shapes.*;
import Box2D.Dynamics.Joints.*;
import Box2D.Dynamics.Contacts.*;
import Box2D.Common.*;
import Box2D.Common.Math.*;

Easy.

Now you have to create a b2World object (source code of the class is in Box2D/Dynamics/b2World.as). The world object is the entire body of the engine. Everything is contained within it once your are done.

NOTE: The brain of the engine is b2BroadPhase.as and the heart is the Step() function withing the world object. Don’t go messing with the brain (b2BroadPhase.as) ever. You will totally mess up the engine.

The world object constructor requires 3 things:
1.) A coordinate system in the form of a b2AABB class object.
2.) A vector that defines gravity. That will be in the form of a b2Vec2 class object.
3.) A boolean variable that defines whether objects “sleep” or not. (I recommend you make it true, that they can sleep)

// Create world AABB
var worldAABB:b2AABB = new b2AABB();
worldAABB.minVertex.Set(-1000.0, -1000.0);
worldAABB.maxVertex.Set(1000.0, 1000.0);

// Define the gravity vector
var gravity:b2Vec2 = new b2Vec2(0.0, 300.0);

// Allow bodies to sleep
var doSleep:Boolean = true;

// Construct a world object
m_world = new b2World(worldAABB, gravity, doSleep);

My examples are not my own here. The code I’m showing is an excerpt from the “Hello World” code they provided with the engine.

After creating a world object you have to bring it to life by setting its heart to beating:

// Add event for main loop
addEventListener(Event.ENTER_FRAME, Update, false, 0, true);

public function Update(e:Event):void{
m_world.Step(m_timeStep, m_iterations);
}

Running the Step() function every frame will update all the Body Definitions you add to your world.
As of right now this world is empty though. In order to add balls and boxes and any strange polygonal shapes you can think of, we need to create Body Definitions for them.

A Body Definition consists of 2, 3, or 4 things.
1.) A Shape Definition.
2.) An (x,y) position.
optional:
3.) Rotation (in radians)
4.) A pre-made Sprite object.

In the example flash movie at the beginning of this post you will notice that all the shapes are simple. That’s because everything is being redrawn every frame with only lines and no fill. That’s right, EVERYTHING is made in code. Nothing was drawn by hand.
If you want your game, or whatever, to have a little more character then that example movie, then you will probably want to associate hand made Sprites with your Body Definitions.

In the “Hello World” example, they use Sprites to display their objects. You could leave them invisible too if you really wanted. Either way they will still be accounted for in the calculations.

On to something very important. What is a Shape Definition!? We have 3 types of shape definition and they all extend the base b2ShapeDef class.

First we have the b2BoxDef class. The b2BoxDef has 4 important properties:
1.) Extents – this is a vector that essentially goes from one corner of the box to the exact center. In other words, half the width and hight. (box is a rectangle)
2.) Density – in the collision equations we use density * area = mass
A density of 0 (zero) or null will make the object static and it will never move in the case of a collision or gravity.
3.) Friction – this is used to calculate the friction between 2 objects… you should keep it between 0.0 and 1.0
4.) Restitution – this is the bounciness of the object. Should probably also stay between 0.0 and 1.0

The b2CircleDef has only one differences in it’s properties. Instead of Extents it has Radius, which is easy to remember.
The b2PolyDef has an array of (max 8) vertices instead of Extents or Radius. These vertices are just b2Vec2 vector objects.

Now Adding a bunch of objects to our world should be easy:

var bodyDef:b2BodyDef;
var boxDef:b2BoxDef;
var circleDef:b2CircleDef;

// Add ground body
bodyDef = new b2BodyDef();
boxDef = new b2BoxDef();
boxDef.extents.Set(1000, 100);
boxDef.friction = 0.3;
/*Notice that the ground object has no density like the later
definitions. That’s because it is static and we don’t want it
effected by any forces.*/
bodyDef.position.Set(320, 400);
bodyDef.AddShape(boxDef);

// Add sprite to body userData
/*We have a Sprite object in the library called PhysGround. Here
we are associating that with our body definition.*/
bodyDef.userData = new PhysGround();
bodyDef.userData.width = boxDef.extents.x * 2;
bodyDef.userData.height = boxDef.extents.y * 2;
addChild(bodyDef.userData);
m_world.CreateBody(bodyDef);

// Add some objects
for (var i:int = 1; i < 20; i++){
/*We are going to re-use the same bodyDef from before.
It doesn’t matter now, because it’s already been copied and stored
in our world object.*/
bodyDef = new b2BodyDef();
// Box
if (Math.random() < 0.5){
boxDef = new b2BoxDef();
boxDef.extents.Set(Math.random() * 15 + 10, Math.random() * 15 + 10);
boxDef.density = 1.0;
boxDef.friction = 0.5;
boxDef.restitution = 0.2;
bodyDef.AddShape(boxDef);
/*We have a Sprite object in the library called PhysBox.*/
bodyDef.userData = new PhysBox();
bodyDef.userData.width = boxDef.extents.x * 2;
bodyDef.userData.height = boxDef.extents.y * 2;
}
// Circle
else {
circleDef = new b2CircleDef();
circleDef.radius = Math.random() * 15 + 10;
circleDef.density = 1.0;
circleDef.friction = 0.5;
circleDef.restitution = 0.2
bodyDef.AddShape(circleDef);
/*We have a Sprite object in the library called PhysCircle.*/
bodyDef.userData = new PhysCircle();
bodyDef.userData.width = circleDef.radius * 2;
bodyDef.userData.height = circleDef.radius * 2;
}
bodyDef.position.x = Math.random() * 400 + 120;
bodyDef.position.y = Math.random() * 100 + 50;
m_world.CreateBody(bodyDef);
addChild(bodyDef.userData);
}

That’s great isn’t it? It’s really not that hard to add a whole bunch of objects to your world. You should know that the Step() function that we added earlier will only take care of moving and rotating our body definitions. If we have sprites to represent those definitions then we need to update them manually… they made the code for that easy and you can copy and paste it almost exactly into every one of your projects.
We just have to rewrite our Update function from before:

public function Update(e:Event):void{

m_world.Step(m_timeStep, m_iterations);

// Go through body list and update sprite positions/rotations
for (var bb:b2Body = m_world.m_bodyList; bb; bb = bb.m_next){
if (bb.m_userData is Sprite){
bb.m_userData.x = bb.m_position.x;
bb.m_userData.y = bb.m_position.y;
bb.m_userData.rotation = bb.m_rotation * (180/Math.PI);
}
}/*This is an extreemly clever way to do this, and I suggest you copy it exactly in your own projects.*/

}

That’s it for now. We have objects in a world that can collide with each other and are affected by gravity. There is still a lot more to talk about, but I am just walking you through the “Hello World” first. We still need to cover Joints, Pulleys, Gears, Compound Shapes, Forced rotation (like cars tires), and a lot more… I doubt I will be able to cover all these topics anytime soon, but I will definitely write more tutorials on this physics engine in the future.

You can download my copy of the “Hello World” example project with all of my comments included (there is almost no commenting in the original).

Download Hello World w/ comments.

You can get all of the library files needed for Box2DFlash at their site. It’s free.

Credits:
Box2D – Erin Catto ( http://gphysics.com/ )
Box2DFlashAS3 – Matthew Bush (Flash ActionScript 3.0 port of Erin Catto’s work)

Putting ’static’ to good use.

Paul — Mon, 03 Mar 2008 23:00:34 +0000

I’m going to talk about how to build a simple 4 function calculator using static variables and meathods in Flash ActionScript 3.0. This is my first tutorial, so if you have questions or comments, I would appreciate them and will do what I can.

First of all we want to think through how this is going to work. I wanted two types of buttons; The digit buttons (1, 2, 3…) and the operator buttons (+, -, =…) and so I created 2 simple MovieClips that are almost the same as my base and then assigned them custom classes which I planned to make later.
The buttons are just a simple gray box with rounded corners (which doesn’t matter… make it whatever you want) and a small textField with instance name “btnKey” (which does matter, at least for my code).
None of that goes on the stage. I want to add everything to the stage with code so that it’s a simple matter of giving them instance names and passing them their initial values.Just to give ourselves something to work with I filled in the basics of our button classes

package classes {
import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.text.TextField;

public class BaseDigitBtn extends MovieClip {
private var num:Number;

public function BaseDigitBtn(numP:Number) {
this.num = numP;
btnKey.text = String(numP);

mouseChildren = false;
buttonMode = true;

stop();
addEventListener(MouseEvent.MOUSE_UP, OnRelease);
}

private function OnRelease(event:MouseEvent):void {
/****I will decide what happens here later****/
}
}
}

I pretty much use the same code for both BaseDigitBtn and BaseFuncBtn, only one receives a string var while the other receives a number.

…

public function BaseFuncBtn(disp:String, strP:String) {

this.str = strP;

btnKey.text = disp; mouseChildren = false;

buttonMode = true;

stop();

addEventListener(MouseEvent.MOUSE_UP, OnRelease);

}

…

Now if we want we can write the code to put these buttons on the stage. It’s only a few lines of code really that are copied and pasted till I’m blue in the face then with little added changes in each:

/**Importing my 3 custom classes**/

import classes.BaseDigitBtn;

import classes.BaseFuncBtn;

import classes.Calc; //I will talk about this class in a second… just hold on.Calc.clearField(); //I needed to initalize some variables

/*************Creating all my button instances*********************/

var Btn1:BaseDigitBtn = new BaseDigitBtn(1);

var Btn2:BaseDigitBtn = new BaseDigitBtn(2);

var Btn3:BaseDigitBtn = new BaseDigitBtn(3);

var Btn4:BaseDigitBtn = new BaseDigitBtn(4);

var Btn5:BaseDigitBtn = new BaseDigitBtn(5);

var Btn6:BaseDigitBtn = new BaseDigitBtn(6);

var Btn7:BaseDigitBtn = new BaseDigitBtn(7);

var Btn8:BaseDigitBtn = new BaseDigitBtn(8);

var Btn9:BaseDigitBtn = new BaseDigitBtn(9);

var Btn0:BaseDigitBtn = new BaseDigitBtn(0);

//The first peram in the following declerations is what is displayed on the

//button. The second peram is the name of the opperator.

var BtnA:BaseFuncBtn = new BaseFuncBtn("+", Calc.ADD);

var BtnS:BaseFuncBtn = new BaseFuncBtn("-", Calc.SUBTRACT);

var BtnM:BaseFuncBtn = new BaseFuncBtn("X", Calc.MULTIPLY);

var BtnD:BaseFuncBtn = new BaseFuncBtn("/", Calc.DIVIDE);

var BtnE:BaseFuncBtn = new BaseFuncBtn("=", Calc.EQUALS);

var BtnC:BaseFuncBtn = new BaseFuncBtn("C", Calc.CLEAR);

var BtnPN:BaseFuncBtn = new BaseFuncBtn("+/-", Calc.POS_NEG);

var BtnDec:BaseFuncBtn = new BaseFuncBtn(".", Calc.DECIMAL);

/*****************Placing those buttons on the stage******************/

for(var i = 1; i < 10; i++) {

addChild(this["Btn" + i]);

this["Btn"+i].x = 10 + ((i-1)%3)*50;

this["Btn"+i].y = 10 + (int((i-1)/3))*34;

}

addChild(BtnA);

BtnA.x = 160;

BtnA.y = 10;

addChild(BtnS);

BtnS.x = 160;

BtnS.y = 44;

addChild(BtnM);

BtnM.x = 160;

BtnM.y = 78;

addChild(BtnD);

BtnD.x = 160;

BtnD.y = 112;

addChild(BtnE);

BtnE.x = 110;

BtnE.y = 112;

addChild(Btn0);

Btn0.x = 60;

Btn0.y = 112;

addChild(BtnC);

BtnC.x = 10;

BtnC.y = 112;

addChild(BtnPN);

BtnPN.x = 110;

BtnPN.y = 146;

addChild(BtnDec);

BtnDec.x = 60;

BtnDec.y = 146;

/**********A cheap (not the best, but good enough for us) easy way to keep the display refreshing******/

addEventListener(Event.ENTER_FRAME, OnEnterFrame);

function OnEnterFrame(event:Event):void {

digitDisplay.text = Calc.getDispNum(); //returns a string

}

So, now that we’ve made all the basic buttons, it’s time to get into the heart of this calculator. Everything happens in one class I called Calc.
First of all I want to explain that I usually like to make public static constants for a lot of my strings that I want to use as a parameter because it makes it easier to debug if you make a typo. You saw them being used when I created the instances of my operator buttons and here they are being declared in my Calc class:

package classes {

public class Calc {

/*****Useing these makes debuging easier and is good practice****/

public static const ADD:String = "add";

public static const SUBTRACT:String = "subtract";

public static const MULTIPLY:String = "multiply";

public static const DIVIDE:String = "divide";

public static const EQUALS:String = "equals";

public static const CLEAR:String = "clear";

public static const DECIMAL:String = "decimal";

public static const POS_NEG:String = "positive/negative";

public static const SQRT:String = "sqrt";

public static const SQUARE:String = "square";

public static const POWER:String = "power";

public static const BACK:String = "back"; public static var isActive:Boolean; //Used to tell me what to display, the total or the number being entered.

public static var activeNum:Number; //The number being entered.

public static var decVal:Number; //Used to place the next decimal at the Nth place.

private static var total:Number;

private static var activeFunc:Function; //Points to the opporator function currently active.

public function Calc() { //This constructor isn’t really used.

clearField();

}

public static function clearField():void { //Resets the calculator.

total = 0;

activeNum = 0;

isActive = false;

decVal = -1;

activeFunc = addition;

}

/*This meathod is called from the BaseFuncBtn class and is passed

the operator name of the key. Value received should be one of the

public constants declared earlier in this class.*/

public static function funcKey(str:String):void {

switch(str) {

case "add":

equals();

activeFunc = addition;

break;

case "subtract":

equals();

activeFunc = subtraction;

break;

case "multiply":

equals();

activeFunc = multiplication;

break;

case "divide":

equals();

activeFunc = division;

break;

case "clear":

if(isActive){ //If you made a mistake while entering a number, this will forgive you a little.

isActive = false;

activeNum = 0;

}else {

clearField();

}

break;

case "equals":

isActive = true; //Set to ‘true’ so you can repeat the last opperation over and over.

equals();

break;

case "decimal":

if(decVal < 0)

decVal = 0;

break;

case "positive/negative":

if(isActive){

activeNum *= -1;

}else {

total *= -1;

}

break;

default:

trace("Something went wrong. String was: " + str);

}

/*Called from the stage and is used to display the current values*/

public static function getDispNum():String {

if(decVal < 0){

if(isActive){

return(String(activeNum));

}

return(String(total));

}else {

/*If decVal is >= 0 then isActive WILL be true, so this code

here isn’t all needed. But, it’s not hurting anything either…

The computer was rounding decimals off weird (i.e. instead of 2.3

it would have something like 2.300000012) so I need .toFixed() for

the active number being entered.*/

if(isActive){

return(String(activeNum.toFixed(decVal)));

}

return(String(total.toFixed(decVal)));

}

private static function equals():void {

if(isActive){

total = activeFunc(total, activeNum);

isActive = false; //Set to ‘false’ so you can change your mind about the next opperation without re-calculating

decVal = -1;

}

private static function addition(num1:Number, num2:Number):Number {

return(num1 + num2);

}

private static function subtraction(num1:Number, num2:Number):Number {

return(num1 – num2);

}

private static function multiplication(num1:Number, num2:Number):Number {

return(num1 * num2);

}

private static function division(num1:Number, num2:Number):Number {

return(num1 / num2);

}

Notice that almost everything in that class is STATIC. This is so we don’t have to create an instance of the class to use them. For example, in my OnEnterFrame function I used digitDisplay.text = Calc.getDispNum(); The digitDisplay is an instance of a textField that I put on the stage, while Calc is just my class.

The last thing that needs to be done is entering a little bit of code that needs to be run when you click a button. That was some fun code to come up with (not really):

/******In the BaseDigitBtn class********/

private function OnRelease(event:MouseEvent):void {

/*This just resets the active number before the next opperation. I don’t

want to erase the old active number till the last second so that I can

repeat the last opperation by pressing equals again.*/

if(!Calc.isActive){

Calc.activeNum = 0;

}

if(Calc.decVal < 0){

if(Calc.activeNum >= 0){

Calc.activeNum = Calc.activeNum * 10 + num;

}else {

Calc.activeNum = Calc.activeNum * 10 – num;

}

}else {

if(Calc.decVal < 20)

Calc.decVal++; //Decimals are annoying.

if(Calc.activeNum >= 0){

Calc.activeNum = Calc.activeNum + (num / Math.pow(10, Calc.decVal));

}else {

Calc.activeNum = Calc.activeNum – (num / Math.pow(10, Calc.decVal));

}

Calc.isActive = true;

}

/************And in the BaseFuncBtn class**********/

private function OnRelease(event:MouseEvent):void {

Calc.funcKey(str);

}

A quick explination of the BaseDigitBtn’s OnRelease function and then we are done:
Entering numbers on a calculator always places the new digit to the far right. That is easy to take care of by multiplying by 10 to shift what you have to the left and then adding your new number… untill you try to enter decimals. With decimals you have to divide by the next highest power of 10 for every spot you move to the right and this can cause some rounding errors. I take care of that in Calc.getDispNum(); with the .toFixed() which will cut it off and not show the 12,000,000th of a unit that it’s off.

You can download the source files for this tutorial here: Calculator Flash Source

It shouldn’t take long at all to add a square root operator key or sin/cos/tan keys. Try it yourself.