manewcActionscript Snippets

[AS 3] Tween Transitions with fl.transitions Actionscript Package

No comments

I decided to play around with the methods of animation to create a simple animation. If you click anywhere inside the flash movie below, a new ball will generate in the center of the stage and then will tween to the mouse position on the onClick event handler. There are various easing types of animation, for this one I chose the Elastic easing class.

Here is the ball code

package {
	import flash.display.Sprite;

	public class Ball extends Sprite {
		public var radius:Number;
		private var color:uint;

		public var vx:Number = 0;
		public var vy:Number = 0;
		public var NewXPos:Number = 0;
		public var NewYPos:Number = 0;

		public function Ball(radius:Number=20, color:uint=0xb3d830) {
			this.radius = radius;
			this.color = color;
			init();
		}

		public function init():void {
			graphics.beginFill(color);
			graphics.drawCircle(0, 0, radius);
			graphics.endFill();
		}
	}
}

Here is the document class.

package
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import fl.transitions.Tween;
	import fl.transitions.easing.*;
	import flash.events.MouseEvent;
	import flash.text.TextField;
	import flash.text.TextFieldAutoSize;
	import flash.text.TextFieldType;
	import flash.text.TextFormat;

	public class TweenTransition extends Sprite
	{
		private var ball:Ball;
		private var output:TextField;

		public function TweenTransition()
		{
			showInstructions();
			setStage();
		}

		private function setStage():void
		{
			output.text = "Click the stage to have the balls animate to your mouse position";

			stage.align = StageAlign.TOP_LEFT;
			stage.scaleMode = StageScaleMode.NO_SCALE;

			stage.addEventListener(MouseEvent.MOUSE_DOWN, animateToMouse);
		}

		private function animateToMouse(event:MouseEvent):void
		{
			var ball:Ball = new Ball(20, Math.random() * 0xffffff);

			ball.x = stage.stageWidth / 2;
			ball.y = stage.stageHeight / 2;

			addChild(ball);

			/*
			Parameters:
			object, property, function, begin number, final number, duration, useSeconds (boolean)
			*/

			var x_animation:Tween = new Tween(ball, "x", Elastic.easeOut, ball.x, mouseX, 2, true);
			var y_animation:Tween = new Tween(ball, "y", Elastic.easeOut, ball.y, mouseY, 2, true);
		}

		private function showInstructions():void
		{
			// Small Black Text Formatting
			var insText:TextFormat = new TextFormat();
			insText.font = "Arial";
			insText.color = 0xcccccc;
            insText.size = 16;
            insText.underline = false;

			// output TextField
        	output = new TextField();
			output.defaultTextFormat = insText;
        	addChild(output);
        	output.x = 10;
        	output.y = 35;
            output.width = stage.stageWidth;
            output.height = 22;
		}
	}

}

Monday, February 4th, 2008 at 11:19 am and is filed under Actionscript 3, Animation Transitions. 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.