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).

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:

Poiché l’attivazione del trascinamento è data dai click dei pulsanti del mouse, colleghiamo gli eventi click sinistro rilascio

// 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 rilascia

// 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() stopDrag() event.target event.target

Arrivati a questo punto, con tutti gli elementi al proprio posto, facciamo un primo test del filmato tramite la scorciatoia da tastiera CTRL + INVIO

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 T Testo Pannello delle Proprietà Testo Classico Testo Dinamico output_txt

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

subito dopo la stringa relativa allo startDrag

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

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.