Well, its not that simple.
Basically what you have is a function which sets the position of your myObject. Since you’re setting the position once - at the point the mouse is clicked - it happens once and at that exact moment. If you want something to happen over time, you have to set up a process that repeatedly changes the value of myObject little by little over time until it reaches your desired destination. This is generally done in an enterFrame event - an event that calls a listener function once every frame where a frame indicates the time where Flash redraws the screen.
So, the basic idea is you have a point in time where you want to start an animation, that being Click in your case, you have a destination state (position) for the animation (250,250) and then you’d have a time or speed from which that animation is to be based. Basic animation generally revolves around time, so we can work with that in an example.
Lets say we want myObject to reach the point 250,250 in the time span of 20 frames - or around a second depending on your frame rate. You’ll want to take the distance found between the initial position and the destination of 250,250 and find out how much of that is needed to progress for the current frame of any part in the animation. For example, half way through the animation, or 10 frames in, you’ll want to have covered half the distance to the destination, or the distance * 10/20 (which reduces to 1/2). At the end of the animation 20 frames in, you’ll want to have covered the whole distance or distance * 1 (20/20).
In the end, you find you get a bunch of extra variables need to retain the values needed for these calculations which makes having isolated Tween classes so useful. Here is some sample code that works for your example using the sample above:
// start the animation when myObject is clicked
myObject.addEventListener(MouseEvent.CLICK, moveTo);
// a counter that counts the current
// frame of the animation
var currentFrameCount:int;
// the total frames in the animation
var totalFrameCount:int = 20;
// the destination location
var destinationX:Number = 250;
var destinationY:Number = 250;
// the location when the animation starts
var initialX:Number;
var initialY:Number;
// the distance between the initial
// location and the destination
var distanceX:Number;
var distanceY:Number;
// when animation starts
function moveTo (evt:MouseEvent):void
{
// reset frame count to 0
currentFrameCount = 0;
// set initial locations to the
// current location of myObject
initialX = myObject.x;
initialY = myObject.y;
// find the distance values by finding
// the difference between initial and destination
distanceX = destinationX - initialX;
distanceY = destinationY - initialY;
// set up the enterFrame loop to
// animate the animation
myObject.addEventListener(Event.ENTER_FRAME, animateMoveTo);
}
// handling the animation over time
function animateMoveTo (evt:Event):void
{
// each frame, increment the frame count
// to move the animation forward
currentFrameCount++;
// if the frame count has not yet reached the
// final frame of the animation, myObject
// needs to be moved to the next location
if (currentFrameCount < totalFrameCount){
// find the progress by comparing current frame
// with the total frames of the animation
var progress:Number = currentFrameCount/totalFrameCount;
// set myObject's position to include the new
// distance from the original location as
// defined by the distance to the destination
// times the progress of the animation
myObject.x = initialX + distanceX*progress;
myObject.y = initialY + distanceY*progress;
}else{
// when the animation is complete, set the
// position of myObject to the destination
myObject.x = destinationX;
myObject.y = destinationY;
// remove the enterFrame event handler so the
// animation ceases to run
myObject.removeEventListener(Event.ENTER_FRAME, animateMoveTo);
}
}
Now, it is a lot easier to set up a different enterFrame event and just use x++ or y++ to constantly move the object until it reaches the destination, but this approach automatically determines the shortest route with the correct changes of x and y (which could be + or -) and allows you to easily change how long it takes to complete.
