Tenere traccia delle moveClip tramite gli Arrays

[Flep]

Avrete spesso notato che sono abituato a creare degli Arrays in cui inserisco delle MovieClip anche se effettivamente non servirebbe.

E' propio vero, è questione di abitudine ma spesso questa tecnica mi ha risolto un mare di problemi.

Nel seguente esempio, disegnerò in runtime ( niente effetti spettacolari, solo il minimo indispensabile per poter didatticamente applicare quello che voglio dimostrare ) utilizzando un intervallo ENTER_FRAME in cui creo una MovieClip per ogni iterazione di intervallo e vorrei poi tenerne traccia di questa MovieClip per poter successivamente applicarle un fade/out e rimuoverla.
Inoltre vedremo una variante dell' articolo di ieri, in cui utilizzerò la tecnica che ha messo a punto un utente di FlepStudio ( Ignazio ) per sopperire a quei problemi dati durante l' utilizzo del metodo removeChildAt. Per saperne di più su questa tecnica vi invito a leggere la discussione nel forum di FepStudio
Ora entriamo nel vivo dell' esempio...*

Creo un FLA che salvo con nome ' disegno4.fla ' .
Creo la sua Document Class, un file AS che salvo con nome ' Disegno4.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.geom.Point;
	import flash.utils.Timer;
	import flash.events.Event;
	import flash.events.TimerEvent;
	
	public class Disegno4 extends MovieClip
	{
		private var point:Point;
		
		private var clips_array:Array;
		
		private var timer:Timer;
		
		private var arrX:int;
		private var arrY:int;
		private var counter:int=-1;
		
		private var isFirst:Boolean=true;
		
		public function Disegno4()
		{
			init();
			movePoint();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			point=new Point(getRandomX(),getRandomY());
			
			clips_array=new Array();
		}
		
		private function getRandomX():int
		{
			var xx:int=Math.round(Math.random()*stage.stageWidth);
			return xx;
		}
		
		private function getRandomY():int
		{
			var yy:int=Math.round(Math.random()*stage.stageHeight);
			return yy;
		}
		
		private function movePoint():void
		{
			arrX=getRandomX();
			arrY=getRandomY();
			
			addEventListener(Event.ENTER_FRAME,goPoint);
		}
		
		private function goPoint(e:Event):void
		{
			var dx:Number=arrX-point.x;
			var ax:Number=dx*.3;
			point.x+=ax;
			
			var dy:Number=arrY-point.y;
			var ay:Number=dy*.3;
			point.y+=ay;
			
			var clip_mc:MovieClip=new MovieClip();
			clip_mc.graphics.lineStyle(1,0x0,1);
			clip_mc.graphics.moveTo(stage.stageWidth/2,0);
			clip_mc.graphics.lineTo(point.x,point.y);
			addChild(clip_mc);
			clips_array.push(clip_mc);
			
			if(Math.abs(dx)<=.2)
			{
				removeEventListener(Event.ENTER_FRAME,goPoint);
				movePoint();
				if(isFirst)
					initTimer();
				isFirst=false;
			}
		}
		
		private function initTimer():void
		{
			timer=new Timer(stage.frameRate,0);
			timer.addEventListener(TimerEvent.TIMER,fadeOut);
			timer.start();
		}
		
		private function fadeOut(t:TimerEvent):void
		{
			counter++;
			clips_array[counter].addEventListener(Event.ENTER_FRAME,fading);
		}
		
		private function fading(e:Event):void
		{
			var da:Number=0-e.currentTarget.alpha;
			var aa:Number=da*.2;
			e.currentTarget.alpha+=aa;
			
			if(Math.abs(da)<=.1)
			{
				e.currentTarget.alpha=0;
				e.currentTarget.removeEventListener(Event.ENTER_FRAME,fading);
				removeChildAt(0);
			}
		}
	}
}

Il risultato è il seguente:

Analizziamo il codice

Proprietà
una istanza della classe Point
private var point:Point;
un Array
private var clips_array:Array;
un timer
private var timer:Timer;
tre variabili numeriche intere
private var arrX:int;
private var arrY:int;
private var counter:int=-1;
una variabile di tipo Boolean
private var isFirst:Boolean=true;

Metodi
init();
imposto una velocità di frame rate
stage.frameRate=31;
creo una nuova istanza Point e gli assegno come coordinate i valori restituiti da due funzioni
point=new Point(getRandomX(),getRandomY());
inizializzo l' Array
clips_array=new Array();

getRandomX():int
questa funzione restituisce una valore random da zero a larghezza massima dello Stage
var xx:int=Math.round(Math.random()*stage.stageWidth);
return xx;

etRandomY():int
questa funzione restituisce una valore random da zero ad altezza massima dello Stage
var yy:int=Math.round(Math.random()*stage.stageHeight) ;
return yy;

movePoint();
asegno ad arrX e arrY due valori random
arrX=getRandomX();
arrY=getRandomY();
aggiungo un listenere in ascolto dell' evento ENTER_FRAME che chiamerà il metodo gopoint tante volte al secondo pari al numero del frame rate
addEventListener(Event.ENTER_FRAME,goPoint);

goPoint();
applico l' effetto inerzia alle X e Y di point
var dx:Number=arrX-point.x;
var ax:Number=dx*.3;
point.x+=ax;
var dy:Number=arrY-point.y;
var ay:Number=dy*.3;
point.y+=ay;
creo una MovieClip ogni volta e la faccio disegnare da un punto fisso alle coordinate di point
var clip_mc:MovieClip=new MovieClip();
clip_mc.graphics.lineStyle(.25,0x333333,1);
clip_mc.graphics.moveTo(stage.stageWidth/2,0);
clip_mc.graphics.lineTo(point.x,point.y);
inserisco la MovieClip nell' Array clips_array
addChild(clip_mc);
clips_array.push(clip_mc);
ad un dato momento fermo l' intervallo rimuovendo il listener in ascolto di ENTER_FRAME
if(Math.abs(dx)<=.2)
{
removeEventListener(Event.ENTER_FRAME,goPoint);
chiamo il metodo movePoint per spostare nuovamente il punto ( istanza Point )
movePoint();
e chiamo una sola volta ( date le logiche condizionali applicate ) il metodo initTimer
if(isFirst)
initTimer();
isFirst=false;
}


initTimer();
istanzio il Timer dandogli una velocità pari al frame rate e pasandogli uno zero come secondo argomento in modo che esso non si fermi mai
timer=new Timer(stage.frameRate,0);
aggiungo un listener in ascolto dell' evento TIMER che chiamerà il metodo fadeOut
timer.addEventListener(TimerEvent.TIMER,fadeOut);
faccio partire il timer
timer.start();

fadeOut();
questo metodo aumenta il valore della variabile counter di una unità e aggiunge un ENTER_FRAME, alla MovieClip contenuta in clips_array con indice pari al valore della variabile counter, che chiama il metodo fading
counter++;
clips_array[counter].addEventListener(Event.ENTER_FRAME,fading);

fading();
applico l' effetto inerzia all' alpha della MovieClip
var da:Number=0-e.currentTarget.alpha;
var aa:Number=da*.2;
e.currentTarget.alpha+=aa;
ad un certo momento fermo ENTER_FRAME rimuovendo il listener della MovieClip
if(Math.abs(da)<=.1)
{
e.currentTarget.alpha=0;
e.currentTarget.removeEventListener(Event.ENTER_FR AME,fading);
rimuovo la MovieClip che si trova a depth 0. Perchè ? Leggere questi articoli: Trucco del giorno - DisplayObjectContainer.removeChildAt e articolo di Ignazio nel forum
removeChildAt(0);
}

Alla prossima !

[Zolmandacuba]

ma flep sono un po' sconcertato: per ottenre risultati cosi semplici, servono codici estremamente lunghi. di conseguenza il tempo che si impiega a scriverli non è porprio ridotto....
quello che mi chiedo è: per fare un sito intero (e intendo un bel sito, al top) quanti giorni dovrò stare dietro ad un codice? (domanda retorica):....

[Zolmandacuba]

hai notato che alla lunga le righe cominciano ad accumularsi?

forse il timer settato come (stage.frameRate,0) è troppo lento???!!!

però impostato (30,0) invece è troppo veloce, prima o poi la sua velocità supera quella della creazione delle line e genera un errore.....