Metodo curveTo di Actionscript 3.0

[Flep]

Come abbiamo già visto in qualche script ( vedi Disegnare con Actionscript 3.0 ) i metodi del drawing API di Actionscript 2.0 ( lineTo, curveTo, moveTo, ecc ecc ) sono adesso richiamabili con Actionscript 3.0 dalla proprietà ' graphics ' della classe MovieClip ( MovieClip.graphics.lineTo, MovieClip.graphics.curveTo, MovieClip.graphics.moveTo, ecc ecc ) .

In questo articolo vorrei attirare la vostra attenzione sul metodo graphics.curveTo in quanto è fonte di diverse animazioni simpatiche e potrete prendere degli spunti per dar libero spazio alla vostra fantasia.

So, che non è facile per gli ' apprendisti Actionscript ' in quanto sicuramente hanno molte idee ma non riescono a metterle in pratica per mancanza di conoscenza tecnica del linguaggio di Flash.

E' un po come un musicista, con molto estro ma poca tecnica... non riesce a trasportare sullo strumento quello che ha nell' anima.

Scusate l' off topic ma è un paragone che rende bene l'idea :)

Vediamo come usare curveTo...

Ho suddiviso questo tutorial in 3 parti.

Parte prima:
creo un FLA e lo salvo con nome ' curva.fla '
creo la Document Class, un file AS che salvo con nome' Curva.as ' , implementata in questo modo:

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);
		}
	}
}

Risultato:

Analizziamo il codice:

per spiegare bene come funziona il metodo curveTo, ho utilizzato delle variabili che possiamo vedere nel metodo disegnaClip della Document Class.

Partiamo dal moveTo, che è come dire a Flash, alza la matita e spostati alle coordinate X e Y che ti passo e stai pronto per disegnare

clip.graphics.moveTo(punto_partenza_x,punto_parten za_y);

Il metodo curveTo, vuole 4 parametri numerici che mi sento di definire così:

- coordinata X di ancoraggio ( anchor point )

- coordinata Y di ancoraggio ( anchor point )

- coordinata X dove Flash deve finire di disegnare

- coordinata Y dove Flash deve finire di disegnare

Questa è un' immagine che può aiutare a capire il punto di ancoraggio

Detto questo, le variabili che ho utilizzato sono:

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;

che poi passo ai metodi moveTo e curveTo

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);

Parte seconda:

creo un FLA e lo salvo con nome ' curvare.fla '

creo la Document Class, un file AS che salvo con nome' Curvare.as ' , implementata in questo modo:

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);
		}
	}
}

Risultato:

In questo caso, il codice non ha nulla di nuovo rispetto alla prima parte, non creo più le variabili all' interno del metodo disegnaClip ma utilizzo l' effetto spring ( vedi questo articolo ) applicato non ad una MovieClip ma ad un' istanza della classe Point.

ancora=new Point(vel_x,stage.stageHeight/4);

var acc_x:Number=(center-ancora.x)*spring;

vel_x+=acc_x;

ancora.x+=vel_x;

Poi passo la X e la Y della Point al metodo curveTo che utilizzo 2 volte

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);

Parte terza:

creo un FLA e lo salvo con nome ' elastico.fla '

creo la Document Class, un file AS che salvo con nome' Elastico.as ' , implementata in questo modo:

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);
		}
	}
}

Risultato ( clicca la linea e tirala come fosse un elastico ):

Anche in questo caso, il codice non ha nulla di nuovo rispetto alla seconda parte, non creo più le variabili all' interno del metodo disegnaClip ma utilizzo l' effetto spring + frizione ( vedi questo articolo ) applicato non ad una MovieClip ma ad un' istanza della classe Point. In più uso dei listeners in ascolto di intervalli ( 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;

Poi passo la X e la Y della Point al metodo curveTo
clip.graphics.moveTo(0,stage.stageHeight/2);
clip.graphics.curveTo(ancora.x,ancora.y,stage.stag eWidth,stage.stageHeight/2);

Allego i files sorgente