Getting started with AS3, First Part - Creating a simple circle

Yesss, the final version of AS3 with Flash Player 9 is almost ready, not to mention Flex 2, which is based on the awesome Eclipse IDE. They can be downloaded from Adobe Labs. Those who like reading manuals, can start here.

But we are practical people, so let's start immediately. Let's make an orange circle first :)
Start Flex 2, File - New - Actionscript Project, type in TestBall, enter.

So what have we here? We have a lot folders in the Navigator View at the top left corner. bin folder contains all files needed for running our project, html-template contains stuff for publishing.

But what we need is TestBall.as at the bottom of the view. This is the "controller" script of our Project. ( and the only one temporarily :) ). Double-click on it, and you get this:

//begin
//
//
package
{
	//
	//
	//
	import flash.display.MovieClip;
	//
	//
	//
	public class TestBall extends MovieClip
	{

		//
		//
		//
		private var ballClip:MovieClip;
		//
		//
		//
		public function TestBall( )
		{

			//
			ballClip = new MovieClip( );
			ballClip.graphics.beginFill( 0xff0000 , 1 );
			ballClip.graphics.drawCircle( 20 , 20 , 20 );
			ballClip.graphics.endFill( );
			ballClip.x = 40;
			ballClip.y = 40;
			//
		}

		//
		//
		//
	}
	//
	//
	//
}
//
//
//end

If we debug and run this code, then actually nothing happens :) But why? This is another feature of AS3, DisplayObjects are no longer depth-organized, we have to attach them to a DisplayObjectContainer as a child instead. Because our controller class is inherited from MovieClip, which is a DisplayObjectContainer also, lets put this line at the end of the constructor:

addChild( ballClip );

and we attached our ballClip to TestBall, and it is visible now. But this is boring. Let's move the ball! Define a step function inside ballClip, to move itself. We could start like we did this in AS1/AS2

ballClip.step = function ( ):void { ++x }

but forget it quickly, this is ugly, makes the code dirty, and not a really flexible solution after all. We have to use a new feature: create multiple classes in one package. Let's create BallClip class, it will draw and move itself. Great, we don't have to do anything then :)

//
//
//
import flash.display.MovieClip;
//
//
//
class BallClip extends MovieClip
{
	//
	//
	//
	private var xspeed:Number;
	private var yspeed:Number;
	//
	//
	//
	public function BallClip ( )
	{
		//
		graphics.beginFill( 0xff0000 , 1 );
		graphics.drawCircle( 20 , 20 , 20 );
		graphics.endFill( );
		//
		x = 20;
		y = 20;
		//
		xspeed = Math.random( )*5;
		yspeed = Math.random( )*5;
		//
	}

	//
	//
	//
	public function step ( ):void
	{
		//
		if ( x + xspeed > 200 ) xspeed *= -1;
		if ( x + xspeed < 0 ) xspeed *= -1;
		if ( y + yspeed > 200 ) yspeed *= -1;
		if ( y + yspeed < 0 ) yspeed *= -1;
		//
		x += xspeed;
		y += yspeed;
		//
	}

	//
	//
	//
}
//
//
//end

We inherited the class from MovieClip, because we would like to draw in it, and manipulate its coordinates. In the constructor i draw myself, set my position, speed, and in function step i check my collosion with the 200, 200 sized rectangle.

This is great, but how will it move? We have to do timing somehow. Altought setInterval and clearInterval is still here from AS2, forget them, the future is the Timer class, which knows much much more , and in addition it can bubble up events in the new event handling model, if its necessary.

We have to rewrite our controller class like this:

package
{
	//
	//
	//
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	//
	//
	//
	public class TestBall extends MovieClip
	{

		//
		//
		//
		private var myBall:BallClip;
		//
		//
		//
		public function TestBall( )
		{

			//
			myBall = new BallClip( );
			addChild( myBall );
			//
			var moveTimer:Timer = new Timer( 50 );
			moveTimer.addEventListener( TimerEvent.TIMER , myBall.step );
			moveTimer.start( );
			//
		}

		//
		//
		//
	}
	//
	//
	//
}

First we create an instance from the previously written BallClip class, then attach it to our DisplayObject, and create our Timer. ( which has to be imported first ). Timer constructor receives the time interval in millisecs. Then we have to assign the TIMER static variable of TimerEvent class, which contains constant events related to timing. Altough TIMER variable is just the string "timer", using factory built-in events is the best practice.

So we assigned myBall object's step function to TimerEvent.TIMER event. And there is a tricky issue: myBall's step function will have to receive the event's object, otherwise our applet will freeze.

This is our code now:

//begin
//
//
package
{
	//
	//
	//
	import flash.display.MovieClip;
	import flash.utils.Timer;
	import flash.events.TimerEvent;
	//
	//
	//
	public class TestBall extends MovieClip
	{

		//
		//
		//
		private var myBall:BallClip;
		//
		//
		//
		public function TestBall( )
		{

			//
			myBall = new BallClip( );
			addChild( myBall );
			//
			var moveTimer:Timer = new Timer( 50 );
			moveTimer.addEventListener( TimerEvent.TIMER , myBall.step );
			moveTimer.start( );
			//
		}

		//
		//
		//
	}
	//
	//
	//
}
//
//
//
import flash.display.MovieClip;
import flash.events.TimerEvent;
//
//
//
class BallClip extends MovieClip
{
	//
	//
	//
	private var xspeed:Number;
	private var yspeed:Number;
	//
	//
	//
	public function BallClip ( )

	{
		//
		graphics.beginFill( 0xff0000 , 1 );
		graphics.drawCircle( 20 , 20 , 20 );
		graphics.endFill( );
		//
		x = 20;
		y = 20;
		//
		xspeed = Math.random( )*5;
		yspeed = Math.random( )*5;
		//
	}

	//
	//
	//
	public function step ( timeEvent:TimerEvent ):void
	{
		//
		if ( x + xspeed > 200 ) xspeed *= -1;
		if ( x + xspeed < 0 ) xspeed *= -1;
		if ( y + yspeed > 200 ) yspeed *= -1;
		if ( y + yspeed < 0 ) yspeed *= -1;
		//
		x += xspeed;
		y += yspeed;
		//
	}

	//
	//
	//
}
//
//
//end

Fantastic, our ball is bouncing and doing everything!! :)
See you in the next part.