Making your own Easing for a Tween

In Theory

Take a look at the method TestEasing.easeTest. Here is a brief explanation of what is going on:

TestEasing.easeTest is a simple method for placing a value within a range. In this example, the function is a sine, and its domain is (0,2*pi), or one sine cycle.

Since b is the start value, the results have to be added to b. What are the results?

c is the total change range (obtained from end-[b]egining=[c]hange, so starts at 0), so you multiply this by some percentage (values (0,1)) to obtain the current change value. How do you get the percentage?

The function’s range is the percentage. How does the function yield this range?

t/d gives the current time (or frame) that the tween is at. So multiply this by the domain of the function to get the current percentage results. In this case, the function is Math.sin(), which gives the result in the range (-1,1) (and that’s ok by me, but you will have to convert this into a range (0,1) to have a true percentage); and the function’s domain is (0,2*pi), so this is the final piece to the puzzle.

The result?
return b + (c * Math.sin(t / d * (2 * Math.PI)));

In Practice

Here is the basic class to test a Tween:

package
{
	import fl.transitions.Tween;
	import fl.transitions.TweenEvent;
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;

	// Delfeld, copyright 2008.

	public class TweenTestClass extends Sprite
	{
		private var moveBall:Sprite;
		private var moveBallRad:uint;
		private var twX:Tween;
		private var twY:Tween;
		public function TweenTestClass()
		{
			addEventListener(Event.ADDED_TO_STAGE, initHnd, false, 0, true);
		}

		private function initHnd(e:Event):void
		{
			e.target.removeEventListener(e.type, initHnd);

			doTraceLine();
			//showMatrixGradient();
		}

		private function doTraceLine():void
		{
			moveBall = new Sprite();
			moveBallRad = 20;
			moveBall.addEventListener(Event.ADDED_TO_STAGE, initBallHnd, false, 0, true);
			moveBall.graphics.beginFill(0xddddff);
			moveBall.graphics.lineStyle(2, 0x0000ff);
			moveBall.graphics.drawCircle(0, 0, moveBallRad);
			addChild(moveBall);
		}

		private function initBallHnd(e:Event):void
		{
			e.target.removeEventListener(e.type, initBallHnd);

			//MovieClip(traceLine1).graphics.moveTo();
			twX = new Tween(moveBall, "x", null, moveBallRad * 2, this.width - moveBallRad * 2, 3, true);
			twY = new Tween(moveBall, "y", TestEasing.easeTest, this.height * .5, moveBallRad * 2, 3, true);

			twX.addEventListener(TweenEvent.MOTION_CHANGE, motionChangeHnd, false, 0, true);
			twX.addEventListener(TweenEvent.MOTION_STOP, endMotionHnd, false, 0, true);
			twX.addEventListener(TweenEvent.MOTION_FINISH, endMotionHnd, false, 0, true);
		}

		private function motionChangeHnd(e:TweenEvent):void
		{
			twX.removeEventListener(TweenEvent.MOTION_CHANGE, motionChangeHnd);
			trace("TweenTestClass.frameHnd: x: " + moveBall.x + ", y: " + moveBall.y);
		}

		private function endMotionHnd(e:TweenEvent):void
		{
			twX.stop();
			twY.stop();
			twX.removeEventListener(TweenEvent.MOTION_CHANGE, motionChangeHnd);
			twX.removeEventListener(TweenEvent.MOTION_STOP, endMotionHnd);
			twX.removeEventListener(TweenEvent.MOTION_FINISH, endMotionHnd);

			trace("TweenTestClass.endMotionHnd: done.");
		}
	}
}

And here is the brand new Easing class:

package
{
	/**
	*  The TestEasing class defines one easing function to test
	 *  motion with ActionScript animation.  (This is hacked-up code
	 *  from Adobe's Bounce easing.)
	 *
	 * @playerversion Flash 9.0.28.0
	 * @langversion 3.0
	 * @keyword Ease, Copy Motion as ActionScript
	 * @see ../../../motionXSD.html Motion XML Elements
	 * @see fl.motion.FunctionEase
	 *
	 * Delfeld, copyright 2008.
	*/
	public class TestEasing
	{
		/**
		 *  @param t Specifies the current time, between 0 and duration inclusive.
		 *
		 *  @param b Specifies the initial value of the animation property.
		 *
		 *  @param c Specifies the total change in the animation property.
		 *
		 *  @param d Specifies the duration of the motion.
		 *
		 *  @return The value of the interpolated property at the specified time.
		 * @playerversion Flash 9.0.28.0
		 * @langversion 3.0
		 * @keyword Ease, Copy Motion as ActionScript
		 * @see fl.motion.FunctionEase
		*/
		public static function easeTest (t:Number, b:Number, c:Number, d:Number) : Number
		{
			return b + (c * Math.sin(t / d * (2 * Math.PI)));
		}
	}
}