manewcActionscript Snippets

Tweener Animation to a Point

No comments

So I recently had an inquiry on how to use Tweener to animate an object on an angle, fortunately there is a simple method in which you just animate the x and y parameters of an object simultaneously. I created this little demo to animate a box that will tween from the top left corner to where you click your mouse within the stage.

Document Class:

package {
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.MouseEvent;
	import flash.display.DisplayObject;
    import flash.display.DisplayObjectContainer;
	import caurina.transitions.*;

	public class ClickAnimation extends Sprite
	{
		// objects
		private var obj1:PageOne;

		public function ClickAnimation()
		{
			// set the stage
			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			// key events
            stage.addEventListener ( MouseEvent.MOUSE_DOWN, AnimatePoint );
		}

		public function AnimatePoint (m:MouseEvent):void
		{
			obj1 = new PageOne();
			addChild ( obj1 );

			Animate ( obj1, mouseX, mouseY );
		}

		/*
		THEATER DISPLAY CONTROL
		============================================================
		*/
		private function Animate( obj:DisplayObject,xPos:Number,yPos:Number ):void
		{
			Tweener.addTween(obj, {x:xPos, time:1.0, transition:"easeOutBack"});
			Tweener.addTween(obj, {y:yPos, time:1.0, transition:"easeOutBack"});
		}

	}
}

A class for my object:

package
{
	import flash.display.Sprite;

	public class PageOne extends Sprite
	{
		public function PageOne()
		{
			var p = new RoundRectangle( 0, 0, 20, 20, 10, Math.random() * 0xffffff );
			addChildAt ( p, 0 );
		}
	}
}

A class to create a round rectangle”

package
{
    import flash.display.DisplayObject;
    import flash.display.Graphics;
    import flash.display.Shape;
    import flash.display.Sprite;

    public class RoundRectangle extends Sprite {
        private var rrX:Number;
		private var rrY:Number;
		private var rrRadius:Number;
		private var rrWidth:Number;
		private var rrHeight:Number;
        private var bgColor:uint;
        private var borderColor:uint;
        private var borderSize:Number;
		private var child:Shape = new Shape();

        public function RoundRectangle(rrX:Number=0,rrY:Number=0,rrWidth:Number=10,rrHeight:Number=10,rrRadius:Number=0,bgColor:uint=0x000000)
		{
            child = new Shape();
            child.graphics.beginFill(bgColor);
           	child.graphics.lineStyle(borderSize, borderColor);
            child.graphics.drawRoundRect(rrX, rrY, rrWidth, rrHeight, rrRadius);

            child.graphics.endFill();
            addChild(child);
        }

		public function clearRR(){
			this.graphics.clear();
		}

    }
}

Tuesday, July 22nd, 2008 at 10:13 am and is filed under Actionscript 3, Tweener. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.