Gestione dei livelli con i metodi swapChildren e getChildAt

[Flep]

Salve a tutti !

Con questo tutorial di Flash CS3 vedremo come gestire i livelli delle MovieClip utilizzando Actionscript 3.0 .

Avevo già accennato a come utilizzare il metodo swapChildern nel tutorial swapDepth è stato rimosso.

Questa volta utilizzo gli eventi del mouse per gestire i livelli di alcune MovieClip che ho sullo stage.

In sostanza, creo delle MovieClip tipo finestre e le rendo trascinabili.

Per fare ciò devo anche mettere al livello più alto la MovieClip che cliccherò in modo che sia interamente visibile e non sovrapposta da un altra MovieClip.

Ecco allora che intervengono i metodi swapChildren e getChildAt.

Creo un FLA che salvo con nome ' main.fla '.
Al suo interno creo una MovieClip in libreria di forma rettangolare tipo una finestra, gli assegno il nome mc_tab e come identificatore classe gli assegno Tab.
Non creo fisicamente la classe Tab in quanto non mi serve agire direttamente dal suo interno per cui la lascio creare a Flash.
Creo invece la Document Class di main.fla, un file AS che salvo con nome ' main.as ', implementata in questo modo:

package
{
	import flash.display.MovieClip;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	
	public class Main extends MovieClip
	{
		private var num_windows:int=10;
		
		private var tabs_array:Array;
		
		public function Main()
		{
			init();
			createWindows();
			positionWindows();
			addListeners();
		}
		
		private function init():void
		{
			stage.frameRate=31;
			
			tabs_array=new Array();
		}
		
		private function createWindows():void
		{
			for(var i:int=0;i < num_windows;i++)
			{
				var tab:Tab=new Tab();
				addChild(tab);
				tabs_array.push(tab);
			}
		}
		
		private function positionWindows():void
		{
			for(var i:int=0;i < tabs_array.length;i++)
			{
				tabs_array[i].x=20+20*i;
				tabs_array[i].y=50;
			}
		}
		
		private function addListeners():void
		{
			for(var i:int=0;i < tabs_array.length;i++)
			{
				tabs_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
				tabs_array[i].addEventListener(MouseEvent.MOUSE_UP,setUp);
			}
		}
		
		private function setDown(evt:MouseEvent):void
		{
			var tab:MovieClip=evt.target as MovieClip;
			swapChildren(tab,getChildAt(tabs_array.length-1));
			var rect:Rectangle=new Rectangle(0,0,stage.stageWidth-evt.target.width,stage.stageHeight-evt.target.height);
			tab.startDrag(false,rect);
		}
		
		private function setUp(evt:MouseEvent):void
		{
			evt.target.stopDrag();
		}
	}
}

Ed ecco il risultato:

Analizziamo il codice

Proprietà
una variabile numerica che contiene il valore del numero di MovieClip che voglio utilizzare
private var num_windows:int=10;
un array in cui inserirò ogni MovieClip ( mc_tab con classe Tab ) che attaccherò allo stage
private var tabs_array:Array;

Funzione Costruttrice Main()
chiamo il metodo init
init();
chiamo il metodo createWindows che crea tante MovieClip per quanto è il valore della variabile num_windows
createWindows();
chiamo il metodo positionWindows che posiziona le MovieClip a mio piacere
positionWindows();
chiamo il metodo addListeners che aggiunge i listeners in ascolto degli eventi del mouse necessari ad ogni MovieClip
addListeners();

Metodi
init();
imposto una velocità di frame rate
stage.frameRate=31;
inizializzo l' array tabs_array
tabs_array=new Array();

createWindows();
creo un ciclo for ed istanzio tante mc_tab pari al valore della variabile num_windows, le aggiungo allo stage e le inserisco nell' array tabs_array per tenerne traccia
for(var i:int=0;i < num_windows;i++)
{
var tab:Tab=new Tab();
addChild(tab);
tabs_array.push(tab);
}

positionWindows();
con questo metodo posiziono tutte le MovieClip all' interno di tabs_array in posizione orizzontale distaccate di 10 pixels l' una dall' altra
for(var i:int=0;i < tabs_array.length;i++)
{
tabs_array[i].x=20+20*i;
tabs_array[i].y=50;
}

addListeners();
assegno un listener ad ogni MovieClip che all' evento MOUSE_DOWN sulla MovieClip chiamerà la funzione setDown e all' evento MOUSE_UP chiamerà invece la funzione setUp
for(var i:int=0;i < tabs_array.length;i++)
{
tabs_array[i].addEventListener(MouseEvent.MOUSE_DOWN,setDown);
tabs_array[i].addEventListener(MouseEvent.MOUSE_UP,setUp);
}

setDown();
creo una variabile locale di tipo MovieClip che chiamo clip e gli assegno il valore di evt.target che non è altro che la MovieClip che è stata selezionata col mouse
var tab:MovieClip=evt.target as MovieClip;
dico di scambiare i livelli di 2 MovieClip utilizzando il metodo swapChildren. Quali sono le 2 MovieClip ? Semplice, una è quella che è stata selezionata dal mouse ( quindi clip ) e l' altra è quella che si trova al livello pari al numero della lunghezza di tabs_array meno 1 e la recupero con getChildAt che vuole come parametro appunto un livello dal quale recuperare la MovieClip alla quale cambiare il livello.
swapChildren(tab,getChildAt(tabs_array.length-1));
creo un Rectangle da passare al metodo startDrag che mi delimita lo spazio di spostamento della MovieClip in fase di trascinamento
var rect:Rectangle=new Rectangle(0,0,stage.stageWidth-evt.target.width,stage.stageHeight-evt.target.height);
rendo trascinabile la MovieClip selezionata assegnandole il metodo startDrag
tab.startDrag(false,rect);

setUp();
fermo lo trascinamento della MovieClip selezionata
evt.target.stopDrag();

Alla prossima & stay tuned !