TweenLite AS3 isse with moving object

Question

package {
import com.greensock.*;
import flash.display.*;
import flash.events.*;
import flash.geom.*;

public class shieet extends Sprite
{
    public function shieet()
    {
        var PosY:Number = Math.floor(Math.random()*(stage.stageHeight-30));
        var PosX:Number = 0;
        var PosX2:Number = 500;

        var CircleBlue:MovieClip = new MovieClip();
        CircleBlue.graphics.lineStyle(2, 0);
        CircleBlue.graphics.beginFill(0x0000FF); 
        CircleBlue.graphics.drawCircle(PosX,PosY,30);
        graphics.endFill();
        addChild(CircleBlue);

        PosY = Math.floor(Math.random()*(stage.stageHeight-30));
        var CircleRed:MovieClip = new MovieClip();
        CircleRed.graphics.lineStyle(2, 0);
        CircleRed.graphics.beginFill(0xFF0000); 
        CircleRed.graphics.drawCircle(PosX2,100,30);
        graphics.endFill();
        addChild(CircleRed);
        stage.addEventListener(MouseEvent.CLICK,move_circle);

        function move_circle(event:MouseEvent):void {

                TweenLite.to(CircleBlue,4, {x:PosX2, y:100});

                                                    }
    }
}}

That's my code for moving blue circle to the red circle.

Before mouse event: https://api.monosnap.com/image/download?id=nLQQXmInSsSCqhRxjF2XaneWUpnVWm

After mouse event: https://api.monosnap.com/image/download?id=KhiUFE97lNbVkkSoVlxfsfyUeJM2v1

Like you can see, red circle's x axis is set to 500, y axis is set to 100. Tweenlite destination point is set to red circle's x axis and 100. But it moves only to X axis like intented, y axis's behavior strange as hell. Looks like it moves to +100 point from current location of blue circle, not to 100 from 0. I don't even know what to do already, tried so many things.

Atriace Atriace · Accepted Answer · 2014-12-22T20:01:34

The problem is that the origin points are still at 0,0 for Red and Blue circles. Try this instead...

package {
    import com.greensock.*;
    import flash.display.*;
    import flash.events.*;
    import flash.geom.*;

    public class shieet extends Sprite {
        public function shieet() {
            var PosY:Number = Math.floor(Math.random()*(stage.stageHeight-30));
            var PosX:Number = 0;
            var PosX2:Number = 500;

            var CircleBlue:MovieClip = new MovieClip();
            CircleBlue.graphics.lineStyle(2, 0);
            CircleBlue.graphics.beginFill(0x0000FF); 
            CircleBlue.graphics.drawCircle(0,0,30);
            graphics.endFill();
            addChild(CircleBlue);
            // Now that the graphic is on the center of the MC, move the MC, not the drawing.
            CircleBlue.x = PosX;
            CircleBlue.y = Math.floor(Math.random()*(stage.stageHeight-30));

            PosY = Math.floor(Math.random()*(stage.stageHeight-30));
            var CircleRed:MovieClip = new MovieClip();
            CircleRed.graphics.lineStyle(2, 0);
            CircleRed.graphics.beginFill(0xFF0000); 
            CircleRed.graphics.drawCircle(0,0,30);
            graphics.endFill();
            addChild(CircleRed);
            CircleRed.x = PosX2;
            CircleRed.y = 100;

            stage.addEventListener(MouseEvent.CLICK,move_circle);

            function move_circle(event:MouseEvent):void {
                TweenLite.to(CircleBlue,4, {x:PosX2, y:100});
            }
        }
    }
}

TweenLite AS3 isse with moving object

1 Answers