Animation Tutorial

You probably wonder about the strange title of this tutorial. Well, I have to admit I did not find another title.

What is this tutorial about? I was working on a game and I wanted to avoid <= and >= in a if statement to stop the animation, because it can become very ugly especially when several objects have to be moved. So I thought about a different solution and that is what I want to show here. Included is also in this tutorial to have different animations coordinated. In this example I show how the _x and _y movement is strictly coordinated. But first test the movie and you will understand what I mean.

Now we will have a look at the script. One of the principals in this script is that we will round up the values for x and y using the Math.round function, since otherwise we have numbers, with which we cannot deal. The first lines have less to do with the core of the tutorial and are just settings so you can play with the movie.

// initial settings
//
mySpeed.text = 6;
x_position.text = 450;
y_position.text = 200;
x_orig = clip._x;
y_orig = clip._y;
//
// restricting the numbers in a textfield
//
mySpeed.restrict("1-9");
// move function

Everything we need is in the button function. First we convert the text into numbers so we can work with Math functions.

moveBut.onPress = function() {
	//
	// setting var for speed, x and y positions
	//
	animSpeed = Number(mySpeed.text);
	finalDist_x = Number(x_position.text);
	finalDist_y = Number(y_position.text);

The next 4 lines are actually the core and secret of the script. Have you heard of the modulo operator? I heard about it but so far never used it. Here now is a way to use it. What we do is we calculate the difference from the intial start of the animation to its end. This can be x and y as here but also width, height, alpha etc. Then we divide this value through the animation speed and record the leftover using the modulo operator. So 102/5 will result in 2 as leftover. Next we just get the value for the difference divided by the animation speed. This is important if we change more than one animation parameter like _x and _y, since naturally the difference will not always be the same and we do not want _x be finished while _y movement is still going on, which will result in uneven animation. Then using Math.abs() we convert any negative values to positive values.

	//
	// calculating the leftover number after dividing orig - final by the speed using modulo operator
	//
	x = Math.round((clip._x)-finalDist_x)%animSpeed;
	y = Math.round((clip._y)-finalDist_y)%animSpeed;
	//
	// calculating the number after dividing orig - final by the speed
	//
	x_diff = (Math.round(clip._x)-finalDist_x)/animSpeed;
	y_diff = (Math.round(clip._y)-finalDist_y)/animSpeed;
	//
	// here we make any negative number positive
	//
	x_diff = Math.abs(x_diff);
	y_diff = Math.abs(y_diff);

We now create an array and immediately empty it Array.shift() in case we play around more than once before closing the movie. Then we add the x_diff and y_diff values from above and sort the values. Sorting is done with the highest value being the first and the lowest being the last. By this way if x movement is higher it will be first or if y movement is higher it will be first. You will see a bit later how we use it. Then we create Booleans for the x and y conditions and set them to false.

	//
	// we now add the x_diff and y_diff in an array...
	//
	myArray = new Array();
	for (var i = 0; i<=myArray.length; i++) {
	   myArray.shift();
	}
	myArray.push(x_diff);
	myArray.push(y_diff);
	//
	// ...and sort the numbers having the largest number first
	//
	myArray.sortOn(18);
	//
	// we set some Booleans false
	//
	xpos = false;
	ypos = false;

Now we have to create the animation itself. We use setInterval here but you can use onEnterFrame as well. It would not make any difference and always works. Then and this is important we round up the x and y positions for our movieclip so we are dealing with straight numbers.

	//
	// we create an interval object to move the clip
	//
	var setAnim:Number = setInterval(anim, 10);
	function anim() {
	   //
	   // important: we create var to round the x and y position values
	   //
	   mr_x = Math.round(clip._x);
	   mr_y = Math.round(clip._y);

Here are crucial lines. In order to stop the animation we have if statements and we not only ask to stop the animation when the final position is reached but also when the final position + the value obtained from the modulo operator equation. This is the way the Flash player works. You can test this by yourself using trace actions. One of these two values will always be reached. If a value is reached we set the Boolean for the animation to true. If all the animation Booleans are true we stop the animation by eliminating the interval or onEnterFrame events.

	   //
	   // we now ask for equality of x and y positions to 2 final positions
	   //
	   if ((mr_x == finalDist_x+x || mr_x == finalDist_x)) {
	       xpos = true;
	       mr_x = finalDist_x;
	   }
	   if ((mr_y == finalDist_y+y || mr_y == finalDist_y)) {
	       ypos = true;
	       mr_y = finalDist_y;
	   }
	   //
	   // if final positions have been reached we clear the interval
	   //
	   if (xpos && ypos) {
	       clearInterval(setAnim);
	   }

Now we come to the point that we actually move the object. This is a simple if statement as you know it and we add the Boolean to it so that moving is only possible when the Boolean is true. However the speed of the movement for x and y is different and as you see we make use of our previous statements. We multiply the animation speed with a value consisting of the animation difference divided by the first value of the array. If the difference in the _x movement was the largest then the value will be 1 for the x movement but less than 1 for the y movement and therefore adjusted to the x movement. And basically that's it. You can now test the script for other animations like width and alpha for example. It should work the same way.

	   //
	   // here we move the clip and moving depends on the x_diff or y_diff and their positions in the array
	   //
	   if (clip._x<finalDist_x && !xpos) {
	       clip._x += animSpeed*(x_diff/myArray[0]);
	   }
	   if (clip._x>finalDist_x && !xpos) {
	       clip._x -= animSpeed*(x_diff/myArray[0]);
	   }
	   if (clip._y<finalDist_y && !ypos) {
	       clip._y += animSpeed*(y_diff/myArray[0]);
	   }
	   if (clip._y>finalDist_y && !ypos) {
	       clip._y -= animSpeed*(y_diff/myArray[0]);
	   }
	}
};
// simply place the clip back to its original position
backBut.onPress = function() {
	setProperty(clip, _x, x_orig);
	setProperty(clip, _y, y_orig);
};

MX 2004 tutorials/files