Inerzia multipla con Flash CS3

[Flep]

Vi ricordate dell' effetto inerzia che abbiamo visto nell' articolo: Inerzia con Flash CS3 ?
Molti scripts creati da FlepStudio, sono sicuramente didatticamente validi, ma se non vengono applicati alla fantasia di ognuno di noi rimangono fini a se stessi.
Ragion per cui, con questo articolo vorrei dimostrare cosa si può fare con l' effetto inerzia applicato a più MovieClip.

Seguitemi...


Creo un FLA, che salvo con nome ' inerzia_multipla.fla ' , al cui interno creo una MovieClip che chiamo ' mc_clip '.
Click destro su mc_clip in libreria e gli assegno come identificatore ( linkage per chi ha versione Flash inglese ) la classe Clip che sto per ndare a creare.

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

package
{
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class Multi extends MovieClip
	{
		private var clips_array:Array;
		
		private var numClips:int=50;
		
		public function Multi()
		{
			init();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			clips_array=new Array();
			
			attachClips();
			go();
		}
		
		private function attachClips():void
		{
			for(var i:int=0;i < numClips;i++)
			{
				var clip_mc:Clip=new Clip();
				addChild(clip_mc);
				clips_array.push(clip_mc);
				clip_mc.x=stage.stageWidth/2;
				clip_mc.y=stage.stageHeight/2;
			}
			clips_array.reverse();
		}
		
		private function go():void
		{
			clips_array[0].buttonMode=true;
			clips_array[0].addEventListener(MouseEvent.MOUSE_DOWN,moveMe);
			clips_array[0].addEventListener(MouseEvent.MOUSE_UP,dropMe);
			addEventListener(Event.ENTER_FRAME,gogo);
		}
		
		private function moveMe(m:MouseEvent):void
		{
			m.target.startDrag();
		}
		
		private function dropMe(m:MouseEvent):void
		{
			m.target.stopDrag();
		}
		
		private function gogo(e:Event):void
		{
			for(var i:int=1;i < clips_array.length;i++)
			{
				clips_array[i].x+=(clips_array[i-1].x-clips_array[i].x)*.3;
				clips_array[i].y+=(clips_array[i-1].y-clips_array[i].y)*.3;
			}
		}
	}
}

Adesso creo la classe Clip, unfile AS che salvo con nome ' Clip.as ' :

package
{
	import flash.display.MovieClip;
	
	public class Clip extends MovieClip
	{
		public function Clip()
		{
			
		}
	}
}

Ecco il risultato: ( trascinare la pallina arancione per vedere l' effetto )

Analizziamo il codice

Proprietà
un array in cui inserirò ogni clip che istanzierò ( classe Clip )
private var clips_array:Array;
una variabile che contiene il numero di MovieClip che voglio utilizzare
private var numClips:int=50;

Metodi
init();
imposto una velocità di framerate
stage.frameRate=31;
inizializzo l' array
clips_array=new Array();
chiamo il metodo attachClips()
attachClips();
chiamo il metodo go()
go();

attachClips();
creo un ciclo con massima iterazione pari al valore della variabile numClips
for(var i:int=0;i < numClips;i++)
{
creo una nuova istanza della classe Clip ( che non è altro che la MovieClip che ho in libreria: mc_clip )
var clip_mc:Clip=new Clip();
la aggiungo al DisplayObject
addChild(clip_mc);
la inserisco nell' array per tenerne traccia e poterla richiamare ogni volta che mi serve
clips_array.push(clip_mc);
posiziono la clip
clip_mc.x=stage.stageWidth/2;
clip_mc.y=stage.stageHeight/2;
}
faccio un reverse dell' array, cioè la prima clip che ho istanziato si trova ultima di modo che sia l' ultima clip ( quella col depth più alto ) ad essere la prima
clips_array.reverse();

go();
faccio in modo che sulla prima clip dell'array ( quella con depth più alto ) si veda la manina del mouse
clips_array[0].buttonMode=true;
aggiungo due listeners alla clip ( in ascolto degli eventi MOUSE_DOWN e MOUSE_UP ) che chiamano i metodi moveMe() e dropMe()
clips_array[0].addEventListener(MouseEvent.MOUSE_DOWN,moveMe);
clips_array[0].addEventListener(MouseEvent.MOUSE_UP,dropMe);
aggiungo un listener in ascolto dell' intervallo ENTER_FRAME che chiamerà il metodo gogo() tante volte al secondo pari al valore della velocità del frame rate
addEventListener(Event.ENTER_FRAME,gogo);

moveMe();
permetto il trascinamento della clip
m.target.startDrag();

moveMe();
fermo il trascinamento della clip
m.target.stopDrag();

gogo();
creo un ciclo con minima iterazione 1 ( di modo che la prima clip, quella che è trascinabile, non venga compresa ) e con massima iterazione la lunghezza dell' array ( clips_array )
for(var i:int=1;i < clips_array.length;i++)
{
applico l' inerzia a tutte le clip tranne la prima ( quella trascinata dal mouse ). Come punto di arrivo indico la X della clip dentro l' array con indice minore di uno dell' iterazione del momento meno la X della clip dentro l' array con indice dell' iterazione del momento.
clips_array[i].x+=(clips_array[i-1].x-clips_array[i].x)*.3;
stessa cosa con la Y delle clips
clips_array[i].y+=(clips_array[i-1].y-clips_array[i].y)*.3;
}

Have fun !