curveTo Method with Actionscript 3.0

[Flep]

As we have already seen in some scripts (see Drawing with Actionscript 3.0 ) the Drawing API methods with Actionscript 2.0 (lineTo, curveTo, moveTo, ect ect) can now be called with Actionscript 3.0 using the graphics property of the MovieClip Class (MovieClip.graphics.lineTo, MovieClip.graphics.curveTo, MovieClip.graphics.moveTo, ect ect).
In this article, I would like to point your attention on the graphics.CurveTo method as it is font of lots of friendly animations and could be the sprout for giving free space to your imagination.

I know that it is not easy for the 'Actionscript apprentice' as surely lots have the ideas but do not manage to put them in practise for lack of technical knowledge of the language of Flash.
It is like a musician, which has a lot of fancy but little technique...it cannot succeed to bring to the instrument what he has in his soul.
Sorry for the off topic but it is a comparison which gives well the idea :)
Let's see how to use the curveTo...
I subdivised this tutorial in3 parts.

First part:
I create a FLA and save it as 'curva.fla'
I create a Document Class, an AS file saved as 'Curva.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	
	public class Curva extends MovieClip
	{
		private var clip:MovieClip;
		
		public function Curva()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			creaClip();
			disegnaClip();
		}
		
		private function creaClip():void
		{
			clip=new MovieClip();
			addChild(clip);
		}
		
		private function disegnaClip():void
		{
			var punto_partenza_x:int=50;
			var punto_partenza_y:int=100;
			var punto_ancora_x:int=100;
			var punto_ancora_y:int=50;
			var punto_fine_x:int=200;
			var punto_fine_y:int=punto_partenza_y;
			
			clip.graphics.lineStyle(5,0x999999,1);
			
			clip.graphics.moveTo(punto_partenza_x,punto_partenza_y);
			clip.graphics.curveTo(punto_ancora_x,punto_ancora_y,punto_fine_x,punto_fine_y);
		}
	}
}

The result:

Let's analise the code:
to explain well how the curveTo method works, I used variables which can be seen in the disegnaClip method of the Document Class.
Starting from the moveTo, we tell flash to lift the pencil, to move to the given X and Y coordinates and to be ready to draw
clip.graphics.moveTo(punto_partenza_x,punto_parten za_y);
The curveTo method wants 4 parameters that I would define as follow:
- X coordinate of anchor point
- Y coordinate of anchor point
- X coordinate of finishing point
- Y coordinate of finishing point
The following image could help you understand the anchor point: ( punto di ancoraggio = anchor point ) ;)



Said that, the variables used are:
var punto_partenza_x:int=50;
var punto_partenza_y:int=100;
var punto_ancora_x:int=100;
var punto_ancora_y:int=50;
var punto_fine_x:int=200;
var punto_fine_y:int=punto_partenza_y;
then passed to the moveTo and curveTo method
clip.graphics.moveTo(punto_partenza_x,punto_parten za_y);
clip.graphics.curveTo(punto_ancora_x,punto_ancora_ y,punto_fine_x,punto_fine_y);

Second part:
I create a FLA and save it as 'curvare.fla'
I create a Document Class, an AS file saved as 'Curvare.as', implemented as follow:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.geom.Point;
	
	public class Curvare extends MovieClip
	{
		private var clip:MovieClip;
		private var ancora:Point;
		private var spring:Number=.1;
		private var center:Number;
		private var vel_x:Number=0;
		
		public function Curvare()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=21;
			
			ancora=new Point(vel_x,stage.stageHeight/4);
			center=stage.stageWidth/2;
			
			creaClip();
			disegnaClip();
		}
		
		private function creaClip():void
		{
			clip=new MovieClip();
			addChild(clip);
		}
		
		private function disegnaClip():void
		{
			clip.addEventListener(Event.ENTER_FRAME,disegna);
		}
		
		private function disegna(e:Event):void
		{
			var acc_x:Number=(center-ancora.x)*spring;
			vel_x+=acc_x;
			ancora.x+=vel_x;
			
			clip.graphics.clear();
			clip.graphics.lineStyle(5,0x999999,1);
			
			clip.graphics.moveTo(0,stage.stageHeight/2);
			clip.graphics.curveTo(ancora.x,ancora.y,stage.stageWidth,stage.stageHeight/2);
			
			clip.graphics.moveTo(0,stage.stageHeight/2);
			clip.graphics.curveTo(ancora.x,ancora.y+stage.stageHeight/2,stage.stageWidth,stage.stageHeight/2);
		}
	}
}

The result:

In this case, the code has nothing new in comparison to the first part. I do not create the variable inside the disegnaClip method but use the spring effect ( see the article ) not applied to a Movie Clip but to an instanze of the Point Class.
ancora=new Point(vel_x,stage.stageHeight/4);
var acc_x:Number=(center-ancora.x)*spring;
vel_x+=acc_x;
ancora.x+=vel_x;
I then pass the Point's X and Y to the curveTo method, used twice to duplicate the effect clip.graphics.moveTo(0,stage.stageHeight/2);
clip.graphics.curveTo(ancora.x,ancora.y,stage.stag eWidth,stage.stageHeight/2);
clip.graphics.moveTo(0,stage.stageHeight/2);
clip.graphics.curveTo(ancora.x,ancora.y+stage.stag eHeight/2,stage.stageWidth,stage.stageHeight/2;

Third part:
I create a FLA and save it as 'elastico.fla'
I create a Document Class, an AS file saved as 'Elastico.as', implemented the following way:

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	public class Elastico extends MovieClip
	{
		private var clip:MovieClip;
		private var ancora:Point;
		private var spring:Number=.1;
		private var frizione:Number=.9;
		private var centerX:Number;
		private var centerY:Number;
		private var vel_x:Number=0;
		private var vel_y:Number=0;
		
		public function Elastico()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			centerX=stage.stageWidth/2;
			centerY=stage.stageHeight/2;
			
			creaClip();
			disegnaClip();
			aggiungiListener();
		}
		
		private function creaClip():void
		{
			clip=new MovieClip();
			addChild(clip);
		}
		
		private function disegnaClip():void
		{
			clip.graphics.lineStyle(5,0x999999,1);
			clip.graphics.moveTo(0,stage.stageHeight/2);
			clip.graphics.lineTo(stage.stageWidth,stage.stageHeight/2);
		}
		
		private function aggiungiListener():void
		{
			clip.addEventListener(MouseEvent.MOUSE_DOWN,cliccato);
			stage.addEventListener(MouseEvent.MOUSE_UP,lasciato);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,cliccato);
		}
		
		private function cliccato(m:MouseEvent):void
		{
			clip.removeEventListener(Event.ENTER_FRAME,molla);
			clip.addEventListener(Event.ENTER_FRAME,tira);
		}
		
		private function lasciato(m:MouseEvent):void
		{
			clip.removeEventListener(Event.ENTER_FRAME,tira);
			ancora=new Point(mouseX,mouseY);
			clip.addEventListener(Event.ENTER_FRAME,molla);
		}
		
		private function tira(e:Event):void
		{
			clip.graphics.clear();
			clip.graphics.lineStyle(5,0x999999,1);
			clip.graphics.moveTo(0,stage.stageHeight/2);
			clip.graphics.curveTo(mouseX,mouseY,stage.stageWidth,stage.stageHeight/2);
		}
		
		private function molla(e:Event):void
		{
			var acc_x:Number=(centerX-ancora.x)*spring;
			vel_x+=acc_x;
			vel_x*=frizione;
			ancora.x+=vel_x;
			
			var acc_y:Number=(centerY-ancora.y)*spring;
			vel_y+=acc_y;
			vel_y*=frizione;
			ancora.y+=vel_y;
			
			clip.graphics.clear();
			clip.graphics.lineStyle(5,0x999999,1);
			clip.graphics.moveTo(0,stage.stageHeight/2);
			clip.graphics.curveTo(ancora.x,ancora.y,stage.stageWidth,stage.stageHeight/2);
		}
	}
}

The result (click and drag the line to stretch it as an elastic)

Again in this case, the code has nothing new in comparison to the second part. I do not create the variable in the disegnaClip method but use the spring+friction effect (see the article) applied not to a Movie Clip but to an instance of the Point Class. Futher more, I add listeners to the interval (ENTER_FRAME)
var acc_x:Number=(centerX-ancora.x)*spring;
vel_x+=acc_x;
vel_x*=frizione;
ancora.x+=vel_x;
var acc_y:Number=(centerY-ancora.y)*spring;
vel_y+=acc_y;
vel_y*=frizione;
ancora.y+=vel_y;
I then pass the Point's X and Y to the curveTo method
clip.graphics.moveTo(0,stage.stageHeight/2);
clip.graphics.curveTo(ancora.x,ancora.y,stage.stag eWidth,stage.stageHeight/2);
Have fun!

[analaura]

The best tutorials are in this site