Random Movement in AS3 - Page 3

by kirupa  |  24 December 2010

  Have questions? Discuss this Flash / ActionScript tutorial with others on the forums.

In the previous page, we covered the all important Main class that has the distinctiction of being responsible for getting your circles to display on the stage. In this page, let's look at the BlueCircle class that is responsible for actually getting the displayed circles to move around.

Welcoming the BlueCircle Overlords
While the Main class is responsible for getting the blue colored circles to appear, it is the blue circle itself that handles moving from one random location to another. All of the code for the blue circles resides in the aptly named BlueCircle.as file:

package
{
import flash.display.MovieClip;
import flash.events.Event;
 
public class BlueCircle extends MovieClip
{
private var newX:Number = 0;
private var newY:Number = 0;
 
private var speed:Number;
 
private var speedX:Number;
private var speedY:Number;
 
private var totalDistance:Number;
private var previousDistance:Number = 0;
private var currentDistance:Number = 0;
 
public function BlueCircle()
{
this.addEventListener(Event.ADDED_TO_STAGE, Setup);
}
 
private function SetNewPosition()
{
this.newX = this.GetRandomXPosition();
this.newY = this.GetRandomYPosition();
 
this.totalDistance = GetDistance();
 
var time:Number = this.totalDistance / this.speed;
 
speedX = (this.newX - this.x)/time;
speedY = (this.newY - this.y)/time;
}
 
private function Setup(e:Event)
{
this.x = this.GetRandomXPosition();
this.y = this.GetRandomYPosition();
 
this.alpha = .1 + Math.random() * .5;
this.scaleX = this.scaleY = .1 + Math.random() * 5;
 
speed = Math.round(.5 + Math.random() * 5);
 
this.addEventListener(Event.ENTER_FRAME, MoveCircle);
}
 
private function GetRandomXPosition():Number
{
//
//basic formula: Math.floor(Math.random()*(1+High-Low))+Low;
//
return Math.floor(Math.random() * (1+ (stage.stageWidth + this.width) + this.width) - this.width);
}
 
private function GetRandomYPosition():Number
{
//
//basic formula: Math.floor(Math.random()*(1+High-Low))+Low;
//
return Math.floor(Math.random() * (1+ (stage.stageHeight + this.height) + this.height) - this.height);
}
 
private function GetDistance():Number
{
return Math.sqrt(Math.pow(this.x - this.newX,2) + Math.pow(this.y - this.newY,2));
}
 
private function MoveCircle(e:Event)
{
this.previousDistance = this.currentDistance;
this.currentDistance = this.GetDistance();
 
if (this.currentDistance < this.previousDistance)
{
this.x += this.speedX;
this.y += this.speedY;
}
else
{
this.SetNewPosition();
}
}
}
}

Don't let the size of the code scare you. We'll break it up piece by piece and explain how exactly it does what it does. First, let's just look at some basic things in the code that can be explained easily without you having to understand how our algorithm for moving you randomly works.

Declaring Variables
At the very top of this file are the various variables that store the information that makes your circles come alive:

private var newX:Number = 0;
private var newY:Number = 0;
 
private var speed:Number;
 
private var speedX:Number;
private var speedY:Number;
 
private var totalDistance:Number;
private var previousDistance:Number = 0;
private var currentDistance:Number = 0;

I will not describe them here, but instead, I will call them out as appropriate when they are actually being used in our code.

Setting up the Magic
The first piece of code that runs, obviously, is the constructor:

public function BlueCircle()
{
this.addEventListener(Event.ADDED_TO_STAGE, Loaded);
}

The only thing that I do here is associate the Added to Stage event with an event handler called Setup. As the name implies, this event gets fired when this BlueCircle object gets added to the stage via the addChild method you saw earlier. This is important because we want to defer doing any work involving the rest of the application until this object is actually added to the visual tree. Otherwise, your code may be calling for properties that are simply not accessible or storing anything useful besides null.

The code that gets called once your BlueCircle object gets added to the stage is the Setup event handler:

private function Setup(e:Event)
{
this.x = this.GetRandomXPosition();
this.y = this.GetRandomYPosition();
 
this.alpha = .1 + Math.random() * .5;
this.scaleX = this.scaleY = .1 + Math.random() * 5;
 
speed = Math.round(.5 + Math.random() * 5);
 
this.addEventListener(Event.ENTER_FRAME, MoveCircle);
}

The first thing we do is position our object in a random location. That is handled by the following lines of code:

this.x = this.GetRandomXPosition();
this.y = this.GetRandomYPosition();

The GetRandomXPosition and GetRandomYPosition functions return a random number that is used to position our BlueCircle appropriately. The Random Numbers in Flash tutorial describes how a random number is generated, so I will not cover that in great detail here.

Related to the position, we also specify the alpha (transparencey), scale, and speed with some random values as well:

this.alpha = .1 + Math.random() * .5;
this.scaleX = this.scaleY = .1 + Math.random() * 5;
 
speed = Math.round(.5 + Math.random() * 5);

There is nothing too scary or complicated going on so for. All of the lines you have seen so far in the Setup function (event handler actually) have just been about initializing some of the variables you saw earlier. Don't worry - you'll start to see some more action shortly.

The last thing that happens inside the Setup function is that we associate the Enter Frame event with an event handler called MoveCircle:

this.addEventListener(Event.ENTER_FRAME, MoveCircle);

The ENTER_FRAME event gets fired at each frame tick, so as you will see on the next page, it is what is responsible for smoothly animating our BlueCircle object.

Ok, we've pretty much gone as far as we can without explaining the algorithm for randomly moving circles. Let's take a break from deconstructing code and take a better look at what exactly we are doing.

Onwards to the next page!

1 | 2 | 3 | 4 | 5 | 6




SUPPORTERS:
kirupa.com's fast and reliable hosting provided by Media Temple.