Tweening with bezier curves

What is a bezier curve? well if you’ve used photoshop, illustrator or any other popular graphics package you probable will have already made use of them. A good example of a bezier curve is by using the pen tool click your first point somewhere on the screen and then click the second point somewhere else and hold down the mouse key and drag it around and you can see you can create a curve. The word bezier is the type of curve that is created, i believe there are other types i know for example in 3d modelling tools like blender there are also nurbs curves so i’m assuming this too applies to other 2d graphics programs. There are alot of tweening libraries out there so don’t go shooting me down for using this one, to each his own everyone has a preference. My personal preference is Tweener, simply because i’ve found it easy to use and i haven’t taken the time to try out many of the other libraries. So to create a bezier type curve we can do the following

import caurina.transitions.*;
import caurina.transitions.Tweener;
import caurina.transitions.properties.CurveModifiers;
CurveModifiers.init();
Tweener.addTween(ball, {x:10, y:10, _bezier:{x:20,y:20}, time:1, transition:"linear"});

First of all we import the tweener library then we need to call CurveModifiers.init(); this is very important without this it will not work. Note that there are a number of other modifiers you can use in a similar manor such as the blurfilter, colour filters etc. Lastly we carry out the tween, as usual the first part is the object in this case a ball, then the parameters we have x,y,time and transitions all quite normal properties to tween. The one that makes the difference is _bezier this is again an object which is why its enclosed in the {} we can supply it any 2 properties of the object to do a bezier curve on. I find this particularly cool when using in a 3d flash system such as clicking on something and having the camera zoom to a position by using a bezier curve to make it slightly more dramatic and interesting. Heres a full example of using this, click on the red ball to see it tween to a location using a curve. Use this class as the document class for a fla or download the full example files here. If you just want to see the demo click here

package
{
    	import flash.display.Sprite;
    	import flash.events.MouseEvent;
    	import caurina.transitions.*;
    	import caurina.transitions.Tweener;
    	import caurina.transitions.properties.CurveModifiers;
    	CurveModifiers.init();
    	public class curves extends Sprite
    	{
    		private var ball:Sprite = new Sprite();
    		private var firstclick:Boolean = true;
    		public function curves():void
    		{
    			createBall();
    			ball.addEventListener(MouseEvent.CLICK, onClick);
    		}
    		private function onClick(e:MouseEvent = null):void
    		{
    			if(firstclick)
    			{
    				Tweener.addTween(ball, {x:100, y:50, _bezier:{x:500,y:20}, time:1, transition:"linear"});
    				firstclick = false;
    			} else {
    				Tweener.addTween(ball, {x:200, y:300, _bezier:{x:500,y:20}, time:1, transition:"linear"});
    				firstclick = true;
    			}
    		}
    		private function createBall():void
    		{
    			with(ball)
    			{
    				graphics.clear();
    				graphics.beginFill(0xFF0000,1);
    				graphics.drawCircle(0,0,25);
    				graphics.endFill();
    			}
    			ball.x = 200;
    			ball.y = 300;
    			this.addChild(ball);
    		}
    	}
}