about
history
syntax
visu
arcade
goodies
wrappers
efficiency
examples
experiments
tabageos
tutorials
actiontad logo white
Simple use of the TweenMath class

This example uses the TweenMath class to tween a circle from the top of the screen to the bottom.
An out bounce ease effect is added so that the circle bounces after it reaches the bottom

The heart of any tween is nothing more than a set of points.
It is the pre calculation of movement from one point to another and all points in between.
The calculation can be simply linear, from one point to the next (x+1 for example) or it can calculate an ease or "alteration in the motion" from point a to b.

The TweenMath class is stripped of anything except just what is needed to make such calculations.
The tweenArray method returns an array of points that will make up a tween from start to end.
The how parameter of the TweenMath.tweenArray method takes an ease string, for example "linear"
the TweenMath class includes constants for all the major ease calculation names.

TweenMathExample.as

package
{
	import com.actiontad.gameUtils.TweenMath;
	
	import flash.display.Sprite;
	
	import flash.events.MouseEvent;
	import flash.events.Event;
	
	/**
	 * Simple use of the TweenMath class and a tween Array it makes.
	 */
	[SWF(frameRate = '30', backgroundColor = '0xFFFFFF', width = '650', height = '400')]
	public class  TweenMathExample extends Sprite
	{
		private var tweens:Array = [];
		private var shape:Sprite;
		
		public function TweenMathExample() {
			
			shape = new Sprite();
			shape.graphics.beginFill(0xc8FFc8);
			shape.graphics.drawCircle(0, 0, 25);
			
			addChild(shape);
			shape.x = 325 - 25;
			shape.y = 0;
			
			this.addEventListener(Event.ENTER_FRAME, doTween);
			this.addEventListener(MouseEvent.CLICK, resetTween);
			
			resetTween(null);
		}
		
		private function resetTween(e:MouseEvent):void {
			tweens = TweenMath.tweenArray(0, 400 - 25, 4000, TweenMath.OUT_BOUNCE);
		}
		
		private function doTween(e:Event):void {
			if (tweens.length > 0) { shape.y = tweens.shift(); }
		}
	}
}


The Result - A circle that bounces at the bottom of the screen, click on the circle to reset


See the example in its own window here.










actiontad twitter.com/actiontad terms