The forums have permanently moved to forum.kirupa.com. This forum will be kept around in read-only mode for archival purposes. To learn how to continue using your existing account on the new forums, check out this thread.


Results 1 to 6 of 6

Thread: Moving an object with actionscript 3.0

  1. #1

    Moving an object with actionscript 3.0

    Hi I got a question,

    Without using the Tween class, how can I move an object and be able to physically see it when it is moving? Not just disappear and appear on a different location like it would be using the following code.

    myObject.addEventListener(MouseEvent.CLICK, moveTo);

    function moveTo (evt:MouseEvent):void
    {
    myObject.x = 250;
    myObject.y = 250;
    }

    This is going to move myObject to any location specified, but again I want to be able to see it when moving.

    I know I could probably use .x ++; and y.++; but how do I stop it where I want?
    I know this is probably very simple but I am new to actionscript 3.0

    Thanks,
    fs_tigre
    Last edited by fs_tigre; June 5th, 2008 at 10:51 AM.
    fs_tigre

  2. #2
    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:

    Code:
    // 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.

  3. #3
    Thank you for the quick response and well explained sample.

    Thank you very much,
    fs_tigre
    Last edited by fs_tigre; June 5th, 2008 at 12:50 PM.
    fs_tigre

  4. #4
    great explanation Senocular. I have a situation where I want the object to travel the same duration no matter how far the object is from the target location. How would I go about that? Thanks

  5. #5
    Hi,

    I was wondering if anyone could help me achieve an outcome for a soccer game penalty shoot out. I have to put the two defenders and the goalie in an Array. they need to move at a set speed automatically to the left and right side of the goal. Thanks

  6. #6
    Quote Originally Posted by senocular View Post
    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:

    Code:
    // 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.
    Senocular,

    Thank you for this code. It's working inside a small flash gamelet I'm making. I'll be sure to credit you.

    Cheers,

    mmkstarr

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Home About kirupa.com Meet the Moderators Advertise

 Link to Us

 Credits

Copyright 1999 - 2012