Animazioni con Flash CS3 - spring su 3 punti

[Flep]

Eccoci ad un altro esempio di come utilizzare l' animazione spring ( vedi articolo: Animazioni con Flash CS3 - spring e frizione
Questa volta utilizzo la spring su una MovieClip che è mossa da 3 punti e ciò significa che il movimento sarà dominato dalla partecipazione di 3 ' forze ' diverse.
Chiaramente, dando spazio alla propria fantasia, si possono creare animazioni che catturano l' interesse dell' utente facendolo interagire un pochettino.
Lascio a voi questo compito.

Vediamo questo tutorial...

Creo un FLA che salvo con nome ' spring_3.fla ' al cui interno:
- creo 3 MovieClip di forma quadrata ale quali assegno nomi istanze punto_0_mc, punto_1_mc, punto_2_mc .
- creo una MovieClip di forma circolare a cui assegno nome istanza ball_mc

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

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.events.Event;
	
	public class Spring3 extends MovieClip
	{
		private var clips_array:Array;
		
		private const spring:Number=.1;
		private const frizione:Number=.9;
		private var vx:Number=0;
		private var vy:Number=0;

		public function Spring3()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			clips_array=new Array(punto_0_mc,punto_1_mc,punto_2_mc);
			
			addListeners();
		}
		
		private function addListeners():void
		{
			for(var i:int=0;i < clips_array.length;i++)
			{
				clips_array[i].buttonMode=true;
				clips_array[i].addEventListener(MouseEvent.MOUSE_DOWN,doDrag);
				clips_array[i].addEventListener(MouseEvent.MOUSE_UP,dropDrag);
			}
			
			this.addEventListener(Event.ENTER_FRAME,muoviDisegna);
		}
		
		private function doDrag(m:MouseEvent):void
		{
			m.target.startDrag();
		}
		
		private function dropDrag(m:MouseEvent):void
		{
			m.target.stopDrag();
		}
		
		private function muoviDisegna(e:Event):void
		{
			this.graphics.clear();
			this.graphics.lineStyle(1,0x333333,1);
			
			for(var i:int=0;i < clips_array.length;i++)
			{
				var ax:Number=(clips_array[i].x-ball_mc.x)*spring;
				var ay:Number=(clips_array[i].y-ball_mc.y)*spring;
				vx+=ax;
				vy+=ay;
				
				this.graphics.moveTo(clips_array[i].x,clips_array[i].y);
				this.graphics.lineTo(ball_mc.x,ball_mc.y);
			}
			vx*=frizione;
			vy*=frizione;
			ball_mc.x+=vx;
			ball_mc.y+=vy;
		}
	}
}

Risultato:

Analizziamo il codice

Proprietà
un array in cui inserisco le 3 movieclip quadrate
private var clips_array:Array;
la ormai nota costante numerica spring
private const spring:Number=.1;
altrettantonota la costante numerica frizione
private const frizione:Number=.9;
altre due variabili numeriche che saranno le velocità di ball_mc
private var vx:Number=0;
private var vy:Number=0;

Metodi
init();
imposto una velocità di frame rate
stage.frameRate=31;
inizializzo l' array, inserendo le movieclip quadrate al suo interno
clips_array=new Array(punto_0_mc,punto_1_mc,punto_2_mc);
chiamo il metodo addListeners in cui aggiungerò in listeners necessari
addListeners();

addListeners();
creo un ciclo con massima iterazione il length dell' array
for(var i:int=0;i < clips_array.length;i++)
{
faccio in modo che per ogni clip si veda la manina del mouse durante gli eventi
clips_array[i].buttonMode=true;
aggiungo un listener in ascolto dell' evento MOUSE_DOWN su ogni clip dell' array che chiamerà il metodo doDrag()
clips_array[i].addEventListener(MouseEvent.MOUSE_DOWN,doDrag);
aggiungo un listener in ascolto dell' evento MOUSE_UP su ogni clip dell' array che chiamerà il metodo dropDrag()
clips_array[i].addEventListener(MouseEvent.MOUSE_UP,dropDrag);
}
aggiungo un listener ( alla ex _root ) in ascolto dell' evento ENTER_FRAME che chiamerà il metodo muoviDisegna() tante volta al secondo pari al numero del frame rate
this.addEventListener(Event.ENTER_FRAME,muoviDiseg na);

doDrag(m:MouseEvent)
dico alla clip di iniziare il trascinamento
m.target.startDrag();

dropDrag(m:MouseEvent);
dico alla clip di fermare il trascinamento
m.target.stopDrag();

muoviDisegna();
ricordiamoci che il this, in questo contesto è riferito alla TimeLine
pulisco le grafiche
this.graphics.clear();
inizializzo le grafiche
this.graphics.lineStyle(1,0x333333,1);
creo un ciclo con massima iterazione il lenght dell' array clips_array
for(var i:int=0;i < clips_array.length;i++)
{
appilco l' inerzia sulla X e sulla Y della clip dell'array ( è in questo momento che l' inerzia delle 3 MovieClip dell' array agiscono insieme su una unica velocità X e Y, appunto le variabili vx e vy )
var ax:Number=(clips_array[i].x-ball_mc.x)*spring;
var ay:Number=(clips_array[i].y-ball_mc.y)*spring;
vx+=ax;
vy+=ay;
disegno le linee tra le clips dell' array e ball_mc
this.graphics.moveTo(clips_array[i].x,clips_array[i].y);
this.graphics.lineTo(ball_mc.x,ball_mc.y);
}
applico la frizione a ball_mc
vx*=frizione;
vy*=frizione;
ball_mc.x+=vx;
ball_mc.y+=vy;


Alla prossima !