Drag & drop con ActionScript 3.0

In questo tutorial, basato su Flash CS5, impareremo ad utilizzare il codice ActionScript 3.0 per consentire ai nostri utenti di trascinare oggetti secondo la modalità del drag & drop. L’articolo è diviso in due parti. Nella prima vedremo come disegnare e abilitare il trascinamento/drag del nostro movieclip; nella seconda creeremo un gioco interattivo stile puzzle dove, aggiungendo ulteriore codice ActionScript a quello base, impareremo a bloccare i clip filmato in determinati punti dello stage, fornendo anche un messaggio ‘di stato’ interattivo all’utente.

Iniziamo impostando la scena con i colori e le dimensioni a nostra scelta e disegniamo il nostro primo elemento grafico. Andiamo sul menu Inserisci > Nuovo Simbolo (scorciatoia da tastiera CTRL + F8) ed una volta all’interno del simbolo stesso disegniamo una qualsiasi forma con colori e dimensioni a nostro piacimento. Se desiderate utilizzare le stesse forme del tutorial, prendiamo lo strumento Rettangolo (R) e tracciamone un’istanza sullo stage. Allegati a questa guida troverete anche i file .fla da poter utilizzare o semplicemente visionare.

Una volta creato il nostro Clip Filmato, torniamo sulla scena principale e dalla libreria (CTRL + L), trasciniamone un’istanza nell’area di lavoro. Con il simbolo ancora selezionato, portiamoci nel pannello delle proprietà e digitiamo un nome di istanza. Io ho utilizzato quad_mc (figura 1).

Figura 1

Senza dilungarci troppo sugli elementi grafici, passiamo subito ad inserire il codice ActionScript che ci permetta di trascinare il nostro oggetto. Dalla Linea Temporale inseriamo un nuovo livello e posizionandoci sul primo fotogramma vuoto, facciamo un doppio click tenendo premuto il tasto ALT in modo da lanciare il pannello ActionScript ed una volta all’interno iniziamo a scrivere.

Cominciamo importando gli eventi necessari:

import flash.events.MouseEvent;

Poiché l’attivazione del trascinamento è data dai click dei pulsanti del mouse, colleghiamo gli eventi click sinistro e rilascio del pulsante del mouse, al nostro Clip Filmato:

// click sinistro
quad_mc.addEventListener(MouseEvent.MOUSE_DOWN, aggancia);

// rilascio del pulsante
quad_mc.addEventListener(MouseEvent.MOUSE_UP, rilascia);

Come notiamo, abbiamo collegato l’evento al nome istanza dato al nostro movieclip e richiamiamo le due diverse funzioni aggancia e rilascia; funzioni che impostiamo subito di seguito:

// trascinamento.....
function aggancia(event:MouseEvent):void {	
    event.target.startDrag(true);
}

// stop trascinamento....
function rilascia(event:MouseEvent):void {	
    event.target.stopDrag();
}

Arriviamo dunque all’attivazione del trascinamento tramite startDrag() e alla disattivazione dello stesso con stopDrag(); la particolarità della stringa di codice inserita è data dall’utilizzo generico di event.target e non il richiamo specifico del nome istanza del clip filmato. Il codice event.target viene attivato da qualsiasi oggetto che inizializzi l’evento, quindi è un codice riutilizzabile da tutti gli oggetti presenti nel filmato. Utilità che vedremo più chiaramente nella seconda parte del tutorial.

Arrivati a questo punto, con tutti gli elementi al proprio posto, facciamo un primo test del filmato tramite la scorciatoia da tastiera CTRL + INVIO. Se tutto è stato impostato correttamente, dovremmo poter spostare il nostro oggetto trascinando col tasto sinistro del mouse, con la possibilità quindi di posizionarlo in un nuovo punto del filmato.

Ecco la demo.

Miglioriamo adesso l’interazione e la presentazione grafica del nostro filmato, aggiungendo un messaggio di stato che viene richiamato dalle azioni dell’utente ed impostiamo il comportamento del nostro Clip Filmato come se fosse un pulsante, in modo da avere la tipica manina che indichi all’utente la possibilità di interazione.

Creiamo un nuovo livello sulla Linea Temporale, digitiamo la lettera T sulla tastiera per attivare lo strumento Testo e, dal Pannello delle Proprietà, settiamo il tipo su Testo Classico e Testo Dinamico dai due menu a discesa disponibili in modo da poterlo impostare tramite ActionScript. Disegniamo quindi una casella di testo nella posizione desiderata; una volta fatto assegniamo il nome istanza output_txt (figura 2).

Figura 2

Con il nuovo elemento creato, andiamo ad inserire il relativo codice ActionScript. Entriamo nuovamente nell’editor ed inseriamo le seguenti righe:

output_txt.text = "agganciato";

subito dopo la stringa relativa allo startDrag, e

output_txt.text = "rilasciato";

subito dopo la stringa relativa allo stopDrag.

Facciamo in modo adesso che il Clip Filmato si comporti come un pulsante e che al passaggio del mouse, venga visualizzata la tipica manina che indichi più chiaramente la possibilità di interazione. Per farlo, inseriamo la seguente linea di codice alla fine dello script:

quad_mc.buttonMode = true;

Ecco tutto il codice presente sul primo fotogramma vuoto del filmato:

import flash.events.MouseEvent;

quad_mc.addEventListener(MouseEvent.MOUSE_DOWN, aggancia);
quad_mc.addEventListener(MouseEvent.MOUSE_UP, rilascia);

function aggancia(event:MouseEvent):void {	
    event.target.startDrag(true);
	output_txt.text = "agganciato";
}
function rilascia(event:MouseEvent):void {	
    event.target.stopDrag();
	output_txt.text = "rilasciato";
}
quad_mc.buttonMode = true;

Provando il filmato (CTRL + INVIO) dovremmo poter trascinare il nostro Clip visualizzando la tipica manina dei pulsanti, inoltre vedremo i messaggi interattivi a seconda dell’azione dell’utente.

Diamo uno sguardo a quanto abbiamo finora prodotto nella demo.

Creazione di un puzzle

Procediamo adesso con la seconda parte del nostro tutorial e proviamo a ricreare un gioco stile puzzle dove trascineremo i nostri oggetti verso le forme a loro simili; appena arrivati in posizione verranno ‘agganciati’ perfettamente al centro e non sarà più possibile spostarli.

Nell’esempio ho creato altre 2 forme semplici con la stessa tecnica usata in precedenza. L’unica differenza è che adesso dobbiamo avere due clip filmato uguali per ogni forma, in modo da utilizzare il primo come oggetto da trascinare e il secondo come target verso cui dirigere il nostro clip. Una volta create le due forme, può essere utile rendere leggermente trasparente l’oggetto target in modo da diversificarlo dal clip principale.