Andy G. Cook

There are a lot of games that use the “click a point and the character moves there” type of control method. Probably one of my favorites was the Diablo’s.

To achieve this effect in Flash is really simple. The main thing to use is the Tween class. The Tween class lets you create dynamic Tweens through code.

Tween Movement 1.0:

package
{
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import fl.transitions.easing.*;
	import fl.transitions.Tween;
	import flash.events.MouseEvent;
 
	public class TweenMovement extends Sprite
	{
		private var Character:RedBall;
 
		public function TweenMovement ( ) : void
		{
			Character = new RedBall ();
			Character.x = 200;
			Character.y = 200;
			stage.addChild(Character);
 
			stage.addEventListener ( MouseEvent.CLICK, moveCharacter );
		}
 
		private function moveCharacter ( ME:MouseEvent ) : void
		{
			var twMoveX:Tween = new Tween ( Character, "x", Regular.easeOut, Character.x, ME.currentTarget.mouseX, 2, true );
			var twMoveY:Tween = new Tween ( Character, "y", Regular.easeOut, Character.y, ME.currentTarget.mouseY, 2, true );
		}
	}
}

Lines 1-9: Declaring the package, importing the classes I am going to use, and declaring the class.

Line 11: Create a private class variable to act as our main character.

Lines 15-19: Adding the Character to the stage through code.

Line 21: Adding an event listener to the stage to tell when the mouse is clicked.

Lines 23-27: The handler function for the mouse click event listener. Created two Tweens. One to act for the X direction and one to act for the Y direction. Look at the Tween documentation for the parameters of the Tween class.

As you can see, the problem with this type of movement is that it always takes 2 seconds for the character to get from point A to point B. What would be a lot better is for the character to have a constant speed no matter how far it is going.

Luckily, this is an easy fix.

Tween Movement 2.0:

To achieve a constant speed, we first need to know the distance the ball will be traveling. You can use the distance formula:

After you have the distance, you can easily find the time because you can set a constant velocity variable in the class. Distance, time, and velocity are all interrelated. If you have two of the three, you can find the third no matter what. What I like to do is look at this pyramid:

Cover up the variable you are trying to find, and you magically have the formula to find the missing link. Just treat it as a fraction and you are good to go.

Here is the updated code:

package
{
	import flash.display.Sprite;
	import flash.display.MovieClip;
	import fl.transitions.easing.*;
	import fl.transitions.Tween;
	import flash.events.MouseEvent;
 
	public class TweenMovement extends Sprite
	{
		private var Character:RedBall;
		private var nVelocity:Number = 100;
 
		public function TweenMovement ( ) : void
		{
			Character = new RedBall ();
			Character.x = 200;
			Character.y = 200;
			stage.addChild(Character);
 
			stage.addEventListener ( MouseEvent.CLICK, moveCharacter );
		}
 
		private function moveCharacter ( ME:MouseEvent ) : void
		{
			if ( ME.currentTarget.mouseX != Character.x || ME.currentTarget.mouseY != Character.y )
			{
				var nDistX:Number = ( Character.x - ME.currentTarget.mouseX );
				var nDistY:Number = ( Character.y - ME.currentTarget.mouseY );
 
				var nDistXSquared:Number = nDistX * nDistX;
				var nDistYSquared:Number = nDistY * nDistY;
 
				var nTotalDist:Number = Math.sqrt ( nDistXSquared + nDistYSquared );
 
				var nTime:Number = nTotalDist/nVelocity;
 
				var twMoveX:Tween = new Tween ( Character, "x", Regular.easeOut, Character.x, ME.currentTarget.mouseX, nTime, true );
				var twMoveY:Tween = new Tween ( Character, "y", Regular.easeOut, Character.y, ME.currentTarget.mouseY, nTime, true );
			}
		}
	}
}

Line 12: Creating a variable to act as the constant velocity.

Line 26: Created an if statement to check to make sure the person actually moved their mouse. If they didn’t move it in at least one direction, then it doesn’t execute the code.

Lines 28-34: Calculating the distance using the distance formula. This could be done in one step, but I broke it up so everyone could follow it easier and see it step by step.

Line 36: Calculating the time using the Time formula from the pyramid. Just divide the distance by the velocity.

Lines 38-39: Creating the Tweens using the calculated time instead of a constant time. Now the ball will move at a constant velocity.

I hope this tutorial helped and serves as a very crude prototype for a Flash game. Take it, expand it, and send me your results. As always, here are the source files. Please feel free to leave comments and ask questions.

Trackback URI | Comments RSS