Disegnare con Actionscript 3.0 - script 1

[Flep]

Utilizzando Actionscript ( in questo caso la versione 3.0 ) si possono compiere dei disegni in runtime.

Accoppiando ad Actionscript, della trigonometria si possono fare delle cose davvero interessanti e spesso utili per aggiugere qualche piccolo dettaglio animato alla nostra applicazione Flash.

Chiaramente più si conosce la fisica e la trigonometria e più si conosce Actionscript, più belle accattivanti e performanti saranno le animazioni disegnate. Nel mio esempio, parto da un livello basilare per dare un input a chi è interessato ad apprendere anche questa tecnica ( definita Drawing API ) e via via scriverò altri articoli sull' argomento.

Vediamo il primo script di esempio...

Creo un FLA e lo salvo con nome ' disegno.fla ' .

Creo la Document Class, un file AS che salvo con nome ' Disegno.as ' .

PS per chi non avesse ben chiaro cosa è la Document Class e come si crea, può dare uno sguardo a questo articolo: il miglior modo di istanziare la Main Class.

Vediamo come è implementata la classe Disegno:

package
{
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.display.SimpleButton;
	
	public class Disegno extends Sprite
	{
		private var clips_array:Array;
		
		private var centerX:Number;
		private const centerY:Number=50;
		private var radius:Number=0;
		private var angle:Number=0;
		private var counter:Number;
		
		public function Disegno()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			centerX=stage.stageWidth/2;
			initDrawingListener();
			initButtonListener();
		}
		
		private function initDrawingListener():void
		{
			clips_array=new Array();
			angle=0;
			radius=0;
			replay_btn.visible=false;
			addEventListener(Event.ENTER_FRAME,drawing);
		}
		
		private function initButtonListener():void
		{
			replay_btn.addEventListener(MouseEvent.MOUSE_DOWN,cliccato);
		}
		
		private function drawing(e:Event):void
		{
			var sprite:Sprite=new Sprite();
			addChild(sprite);
			clips_array.push(sprite);
			
			sprite.graphics.moveTo(centerX,centerY);
			sprite.graphics.lineStyle(.25,0x666666,.2);
			
			var xx:Number=centerX+Math.sin(angle)*radius;
			var yy:Number=centerX+Math.cos(angle)*radius;
			sprite.graphics.lineTo(xx,yy);
			
			angle+=.05;
			radius++;
			if(angle>Math.PI*2)
			{
				removeEventListener(Event.ENTER_FRAME,drawing);
				replay_btn.visible=true;
			}
		}
		
		private function cliccato(m:MouseEvent):void
		{
			callReplay();
		}
		
		private function callReplay():void
		{
			counter=clips_array.length-1;
			replay_btn.visible=false;
			addEventListener(Event.ENTER_FRAME,replay);
		}
		
		private function replay(e:Event):void
		{
			removeChild(clips_array[counter]);
			counter--;
			if(counter<0)
			{
				removeEventListener(Event.ENTER_FRAME,replay);
				initDrawingListener();
			}
		}
	}
}

Risultato:

Analizziamo il codice:
Come ben si nota , in questo script è implementata anche una sezione che riguarda esclusivamente il bottone REPLAY, creato per dare la possibilità di rivedere l' animazione.
Vorrei concentrare l' attenzione sul metodo drawing ( all' interno di classi Actionscript le funzioni vengono chiamate metodi ).
Cosa fa:
sotto un intervallo ( ENTER_FRAME ) si svolge la fase del disegno
addEventListener(Event.ENTER_FRAME,drawing);
creo una sprite
var sprite:Sprite=new Sprite();
la aggiungo al DisplayObject ( altrimenti non sarebbe visibile )
addChild(sprite);
la inserisco in un Array per tenerne traccia in modo da poterla richiamare ( in questo esempio richiamerò ogni sprite dell' array per riprodurre il replay )
clips_array.push(sprite);
inizializzo le grafiche
sprite.graphics.moveTo(centerX,centerY);
sprite.graphics.lineStyle(.25,0x666666,.2);
creo delle variabili con valori trigonometrici, come sappiamo dalla matematica un seno o coseno varia da -1 a 1 ma moltiplicato il suo valore per un dato numero ( radius ) ...
var xx:Number=centerX+Math.sin(angle)*radius;
var yy:Number=centerX+Math.cos(angle)*radius;
dico alla sprite di disegnare
sprite.graphics.lineTo(xx,yy);
incremento angolo e raggio
angle+=.05;
radius++;
fermo l' intervallo ad un certo punto
if(angle>Math.PI*2)
{
removeEventListener(Event.ENTER_FRAME,drawing);
}

Buon Divertimento !

[kaos]

Buona sera.
Qual' è la formula per animare delle semplici linee oblique??
E tonde??
Io uso i metodi lineTo e curveTo ma quando devo animarli mi vengono fuori dei pasticci.
Potresti aiutarmi??

[Flep]

Ciao,
dai un' occhiata a questo articolo:

Metodo curveTo di Actionscript 3.0

[kaos]

Flap ho visto l'articolo da paura!!
GRAZIE