Ciao a tutti !
Durante i tutorials di Actionscript 3.0, Abbiamo visto cosa sono gli Array e quanto possono essere importanti utilizzando Flash CS3.
Inoltre, si è anche visto cosa fa di preciso il metodo splice della classe Array.
Perchè ricordo tutto questo ?
Mi serve per presentare il tutorial che spiegherà come creare una griglia di quadrati in Flash ed ogni quadrato sarà selezionabile o deselezionabile.
In sostanza, al click del mouse su uno dei quadrati della griglia il quadrato stesso, se non era già stato selezionato, sarà aggiunto ad un Array altrimenti se fosse stato già selezionato sarà rimosso dall' array.
Detto questo, per fare tutto ciò ci serve il metodo indexOf della classe Array di Actionscript 3.0 .
Vediamo un esempio concreto...
Creo un FLA che salvo con nome ' main.fla '. Al suo interno ho solo un campo di testo dinamico che visualizzerà le espansioni o collassi dell' Array. Creo la Document Class, un file AS che salvo con nome ' Main.as ', implementata in questo modo:
Code:
package
{
import flash.display.MovieClip;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextField;
import caurina.transitions.Tweener;
public class Main extends MovieClip
{
private const TOTAL_SQUARES:int=100;
private const ROW_COUNT:int=10;
private const SIDE:int=40;
private var clips_array:Array=new Array();
private var temp_array:Array=new Array();
public function Main()
{
addEventListener(Event.ADDED_TO_STAGE,init);
}
private function init(evt:Event):void
{
removeEventListener(Event.ADDED_TO_STAGE,init);
stage.frameRate=31;
createSquares();
addListeners();
}
private function createSquares():void
{
for(var i:int=0;i < TOTAL_SQUARES;i++)
{
var fill_mc:MovieClip=new MovieClip();
fill_mc.name='fill_'+i+'_mc';
fill_mc.graphics.beginFill(0x666666,1);
fill_mc.graphics.drawRect(0,0,SIDE,SIDE);
fill_mc.graphics.endFill();
fill_mc.x=10+Math.floor(i/ROW_COUNT)*SIDE;
fill_mc.y=10+(i%ROW_COUNT)*SIDE;
var stroke_mc:MovieClip=new MovieClip;
stroke_mc.graphics.lineStyle(1,0x333333,1);
stroke_mc.graphics.drawRect(0,0,SIDE,SIDE);
stroke_mc.graphics.endFill();
stroke_mc.x=fill_mc.x;
stroke_mc.y=fill_mc.y;
var field:TextField=new TextField();
field.selectable=false;
field.text=i.toString();
field.width=field.textWidth+5;
field.height=field.textHeight+5;
field.x=fill_mc.x;
field.y=fill_mc.y;
var clip:MovieClip=new MovieClip();
clip.id=i;
clip.selected=false;
clip.addChild(fill_mc);
clip.addChild(stroke_mc);
clip.addChild(field);
addChild(clip);
clip.mouseChildren=false;
clip.buttonMode=true;
clips_array.push(clip);
}
}
private function addListeners():void
{
for(var i:int=0;i < clips_array.length;i++)
{
clips_array[i].addEventListener(MouseEvent.MOUSE_OVER,setOver);
clips_array[i].addEventListener(MouseEvent.MOUSE_OUT,setOut);
clips_array[i].addEventListener(MouseEvent.CLICK,setClick);
}
}
private function setOver(evt:MouseEvent):void
{
var clip:MovieClip=evt.target as MovieClip;
var clip_child:MovieClip=clip.getChildByName('fill_'+clip.id+'_mc') as MovieClip;
if(!clip.selected)
Tweener.addTween(clip_child,{_color:0x999999,time:.6,transition:"easeOutQuad"});
}
private function setOut(evt:MouseEvent):void
{
var clip:MovieClip=evt.target as MovieClip;
var clip_child:MovieClip=clip.getChildByName('fill_'+clip.id+'_mc') as MovieClip;
if(!clip.selected)
Tweener.addTween(clip_child,{_color:0x666666,time:.6,transition:"easeOutQuad"});
}
private function setClick(evt:MouseEvent):void
{
var clip:MovieClip=evt.target as MovieClip;
var clip_child:MovieClip=clip.getChildByName('fill_'+clip.id+'_mc') as MovieClip;
if(!clip.selected)
{
temp_array.push(clip.id);
Tweener.addTween(clip_child,{_color:0xCC9900,time:.6,transition:"easeOutQuad"});
}
else
{
temp_array.splice(temp_array.indexOf(clip.id),1);
Tweener.addTween(clip_child,{_color:0x666666,time:.6,transition:"easeOutQuad"});
}
clip.selected=!clip.selected;
info_txt.text=temp_array.toString();
}
}
}
Risultato ( selezionare/deselezionare i numeri della griglia ):
Analizziamo il codice.
In questo script non c'è niente che non sia stato visto e spiegato su FlepStudio tranne appunto la riga nella quale utilizo il metodo indexOf della classe Array.
Per cui, velocemente:
- nel metodo createSquares, creo una serie di MovieClip quadrate ( una per lo sfondo, una per il bordo ed una che contiene sia lo sfondo che il bordo ) con relativo campo di testo e le attacco allo stage.
- nel metodo addListeners, aggiungo i listeners nevessari in ascolto degli eventi del mouse
- nei metodi setOver, setOut e setClick gestisco gli eventi assegnando appunto delle azioni ad ogni evento del mouse intercettato
- le Tween sono fatte con il Tweener di Zeh Fernando, per chi non la conoscesse, può guardare questo tutorial: Caurina Tweener
- ecco le righe sulle quali voglio focalizzare la vostra attenzione ( si trovano dentro alla funzione setClick ):
if(!clip.selected)
{
temp_array.push(clip.id);
Tweener.addTween(clip_child,{_color:0xCC9900,time: .6,transition:"easeOutQuad"});
}
else
{
temp_array.splice(temp_array.indexOf(clip.id),1);
Tweener.addTween(clip_child,{_color:0x666666,time: .6,transition:"easeOutQuad"});
}
Se la clip che è stata cliccata ha la proprietà selected che è false, allora significa che in quel momento non è stata selezionata, quindi inserisco in temp_array l' id della clip ( che gli ho assegnato in fase di creazione ) ed eseguo una Tween di colore.
Se invece la proprietà selected della clip è true, allora significa che la stessa clip era già stata selezionata e quindi devo rimuovere il suo id da temp_array.
Per fare questo, il metodo splice non basta perchè non mi da la garanzia che l' id della clip corrisponde allo stesso numero indice in cui si trova appunto il suo id.
La garanzia assoluta me la ottengo invece utilizzando il metodo indexOf perchè passandogli un valore mi restituisce il numero di indice nel quale si trova appunto quel valore.
Quindi dico di fare un splice a temp_array dell' indice datomi da indexOf(id della clip cliccata).
Alla prossima & stay tuned !
20-12-07, 06:34
Linear Mode
