Actionscript 3.0 per i grafici (pulsanti)

Il peggio che poteva capitare ad un web designer di tipo “grafico” e non “sviluppatore” è l’avvento dell’actionscript 3.0 che proprio per la sua potenza,rapidità di esecuzione e flessibilità fa gola a molti.

La brutta notizia è che AS 3.0 è un linguaggio completamente diverso dalla versione 2.0 e i web designer meno esperti nella programmazione che conoscono il giusto necessario per sopravvivere nella giunga degli actionscript e dell’interazione con le actions lo vedranno come un’incubo.

Se fate parte del ramo “ugh che incubo la programmazione” allora questo articolo è per voi altrimenti passate oltre perchè potreste annoiarvi. La mia intenzione è quella di usare un linguaggio comprensibile ai designers e non ai programmatori, quindi i maestri dello sviluppo mi dovranno perdonare orrori di linguaggio non proprio tipicamente tecnico e corretto.

La domanda più comune chi ci poniamo noi creativi è come si può fare a meno degli eventi applicati ai pulsanti come on(release) ed in generale come si a voler sostituire intere righe di codice al posto di questo meraviglioso e semplicissimo comando, lo soè sembra una follia ma vi assicuro che passare ad As 3.0 ha innumerevoli vantaggi (velocità di esecuzione, flessibilità e poter realizzare interazione sempre più avanzate e complesse senza compromettere la fuidità del filmato).

Dopo tante chiacchiere ecco finalmente come si realizza con Actionscript 3.0 un pulsante al posto del vecchio On(release).

Molti di noi sono abituati ad applicare le azioni direttamente al pulsante o al movieClip, nella nostra testa creativa questo aveva sicuramente un senso (voglio la mela, prendo la mela), ma chi ha detto che per poter assegnare un evento al pulsante devo per forza inserire l’azione su di esso?

• Create sullo stage un movieClip e assegnategli un nome istanza come fareste al solito, ad esempio “quadro”.
• Create anche un oggetto bottone e assegnate il nome di istanza “vaiBtn”.

All’interno del movieClip create una semplice animazione che va ad esempio dal fotogramma 1 al fotogramma 25.
Fin qui nulla di nuovo. Ora se ragionaste in As 2.0 dovreste assegnare al pulsante un azione e l’evento on(release) ad esempio, ma non sarà così!

Da ora in poi meglio dedicare al primo fotogramma nella linea temporale lo spazio per le azioni.

Inserite nel primo fotogramma quindi la seguente azione:

quadro.stop();

vaiBtn.addEventListener (MouseEvent.CLICK, attivaAnimazione);

Ok, anche io la prima volta che l’ho visto ho chiuso subito la pagina e se farete lo stesso non mi meraviglierò ma non ve lo consiglio perchè ora vi spiegherò, con le parole di uno come voi, quello che succede qui sopra e infondo, non è così complesso!

All’inizio dell’codice ho messo un’azione che ferma il movieClip chiamato “quadro” il che equivale ad entrare nel movieClip quadro e mettere un bel stop(); al primo fotogramma.

Ora creiamo una funzione (niente paura, è semplice). Basta scrivere function e accanto il nome della funzione (inventate gente, inventate). La mia funzione attiverà un’animazione e quindi la chiamo “attivaAnimazione”.

Prima di tutto fate caso al fatto che ho messo in grassetto alcune parole ed altre dello stesso colore, bene, questi gruppi sono gli stessi oggetti o meglio, lo stesso nome viene richiamato più volte nell’azione (grassetto con grassetto e verde con verde).
Questo vuol dire che la parola attivaAnimazione all’inizio è la stessa che si trova alla fine, è una sorta di richiamo ma questo lo vedremo più avanti…

Definisco quindi una funzione chiamata “attivaAnimazione” e gli attribuisco un evento di tipo MouseEvent.
In mezzo alle parentesi graffe definisco l’azione che si dovrà compiere quando  premerò il pulsante e qui nulla di nuovo.

Fuori dalle parentesi graffe associo un Listener all’oggetto pulsante presente sulla scena; un Listener non fa altro che capire se un dato evento è stato attivato e dare quindi il via all’esecuzione dell’evento vero e proprio (immaginatelo come un orecchio che sta li pronto a captare tutto e attivare il segnale solo quando sente la giusta nota), quello contenuto tra le parente graffe. Nel nostro caso l’azione è un evento del mouse ed in particolare l’evento CLICK, quindi, specifico di nuovo il nome della funzione.

Riassumendo:

• creo una funzione
• metto in ascolto il Listener
• quando il listener “sente”, attiva quello che c’è scritto tra le parentesi graffe

All’apparenza è più complesso rispetto a prima ma pensato solo al fatto che da ora non dovrete mai più preoccuparvi di sapere dove si trova una data azione all’interno dell’alberazione del sito web che state creando. Si trova tutto semplicemente nel primo fotogramma della vostra timeLine!

Spero che il mio tentativo di spiegare questa piccola base degli Actionscript 3.0 vi sia stata utile.