[GUIDA] ActionScript3-Parte1 - Versione stampabile

[GUIDA] ActionScript3-Parte1 - Versione stampabile

+- BorderGame (https://www.bordergame.it)
+-- Forum: Programmazione (/Forum-Programmazione--158)
+--- Forum: Web programming (/Forum-Web-programming)
+--- Discussione: [GUIDA] ActionScript3-Parte1 (/Thread-GUIDA-ActionScript3-Parte1)

[GUIDA] ActionScript3-Parte1 - ¬Bulle† - 18-06-2013 12:25 PM

ActionScript nasce come linguaggio per gestire l’interazione dell’utente con i filmati Flash. Bisognava in qualche maniera fornire degli strumenti per effettuare alcune azioni tipicamente legate alle presentazioni multimediali, ma anche al Web.
I primi set di istruzioni erano molto semplici, ma già efficaci, utili a compiere le operazioni più importanti:
Riprodurre un filmato;
Interrompere la riproduzione;
Saltare da un punto all’altro del filmato;
Creare collegamenti ipertestuali.
Nonostante l’evoluzione ci abbia portato fino ad ActionScript 3, un linguaggio orientato agli oggetti completo, le operazioni di base per chi crea animazioni con Flash non sono poi tanto dissimili dalle origini.
In questa guida ci occuperemo di utilizzare un insieme molto ridotto di AS3, ma di grande utilità pratica.
Iniziamo con il definire gli oggetti ai quali applicare le azioni e con un primo approccio al pannello delle azioni.
Fotogrammi e MovieClip
Quando parliamo di azioni non possiamo prescindere dal soggetto che le compie. Il tipo principale di oggetto cui assegnamo i comportamenti è il MovieClip, torneremo spesso a parlarne, per ora basti sapere che anche un filmato flash (il nostro “contenitore”) è da considerarsi un MovieClip, per questo non c’è da meravigliarsi se praticamente tutte le azioni che incontreremo si riferiscono a questo tipo di oggetti.
Altra entità importante è il Fotogramma. Un fotogramma è inteso come il più piccolo elemento che compone una animazione. In Flash le animazioni si possono costruire definendo le proprietà degli oggetti sulla scena fotogramma dopo fotogramma e tra le proprietà non mancano le azioni.
Inserendo le azioni nei fotogrammi possiamo dare anche una connotazione temporale all’esecuzione degli script, l’azione viene svolta quando viene riprodotto il fotogramma corrispondente. Proprio per questo il primo fotogramma è molto utilizzato per inserire gli script necessari all’inizializzazione del filmato.
Quando un fotogramma contiene azioni viene contrassegnato con una piccola “a“. Cliccandoci su possiamo esaminarne e modificarne il codice all’interno del pannello azioni.
Figura 1. Esempio di fotogramma che contiene azioni

Spoiler:

Il pannello “Azioni”
Per scrivere il codice ActionScript ci serviamo del pannello delle azioni (Action panel) di Flash CS4 (o FLash CS3), possiamo aprirlo premendo F9 sulla tastiera, oppure cercando la tradizionale icona con una freccia diagonale; da menu basta cercare la voce Finestra > Azioni.
Figura 2. Il pannello azioni

Spoiler:

Per chi inizia a studiare Actionscript 3 è molto utile comprendere la differe nza di fondo tra MovieClip e istanze:
quando creaimo un MovieClip e lo mettiamo nella libreria, otteniamo una classe di oggetti, mentre quando ne richiamiamo uno lavoriamo su un’istanza concreta di quella classe.
Per chiarire meglio il concetto facciamo un esempio: creiamo il più semplice dei MovieClip: prima tracciamo un quadratino sullo stage, poi clicchiamo con il tasto destro e selezioniamo converti in simbolo.
Figura 3. Creare un MovieClip dalla forma

Spoiler:

Nella finestra che appare scriviamo il nome del MovieClip, che chiamiamo quadrato.
Figura 4. Assegnare un nome al MovieClip

Spoiler:

Ora quadrato è un tipo di MovieClip e rappresenta la “classe” di MovieClip che ha come caratteristica quella di tracciare un quadratino.
A questo punto possiamo trovare quadrato anche tra gli elementi della libreria, ma è rimasto un quadratino nero anche sullo stage. Ebbene, quel quadratino è un caso particolare di quadrato, quello che si definisce un’istanza.
È la stessa differenza che passa tra avere l’idea di un cane bassotto (classe) ed avere un cane in carne ed ossa che si chiama Pluto (istanza).
Visto che abbiamo già l’istanza sullo stage diamole un nome. Dal pannello delle proprietà scriviamo nella casella di testo nome istanza il nome Pluto.
Figura 5. Assegnare un nome all’istanza

Spoiler:

Per completare l’esempio dalla libreria trasciniamo di nuovo il quadrato nello stage, creando così una nuova istanza che chiamiamo Pippo e riduciamo Pippo fino a farlo diventare la metà di pluto.
Questa trasformazione riguarda soltanto l’istanza Pippo e quindi non avrà nessun effetto su Pluto.
Figura 6. Le istanze: “Pippo” e “Pluto”

Spoiler:

Vediamo invece che succede se modifichiamo le caratteristiche base del MovieClip, le differenze si applicano a tutta le istanze.
Clicchiamo due volte sul MovieClip quadrato nella libreria. Entriamo nella scena principale del MovieClip. Qui troviamo di nuovo la nostra forma, il quadrato che abbiamo disegnato inizialmente. Modifichiamolo facendolo diventare un rettangolo, quindi torniamo alla scena cliccando su Scena 1 e vedremo entrambe le istanze di quadrato modificate: sia Pluto, sia Pippo sono diventati rettangoli, ma ciascuna istanza mantiene le relative proporzioni.
Figura 7. “Pippo” e “Pluto” sono rettangoli

Spoiler:

Questo concetto è molto utile quando si vogliono fare delle generalizzazioni e dei casi particolari e non è da sottovalutare anche per chi si avvicina ad ActionScript per la prima volta.
Come è noto e come abbiamo avuto modo di dire su queste colonne, la principale funzione delle azioni in principio era quella di governare la riproduzione di un filmato.
Proprio come tutti i riproduttori che si rispettino, anche Flash possiede i comandi più importanti: play e stop.
Questi comandi sono propri dei MovieClip e quindi anche del filmato contenitore.
Per iniziare a lavorare immaginiamo di voler fermare un filmato, inserendo l’istruzione stop() in un certo fotogramma, diciamo il numero 100. Per farlo dobbiamo semplicemente:
cliccare sul 100° frame
aprire il pannello Azioni
scrivere l’istruzione stop();
Facciamo tutti i passi con più calma, a partire dalla creazione dell’animazione.
Creiamo un semplice MovieClip: prima tracciamo un quadratino sullo stage, poi clicchiamo con il tasto destro e selezioniamo: converti in simbolo. Diamo l’ok e otteniamo il nostro oggetto da animare.

Spoiler:

Copiamo il primo fotogramma (tasto destro sul fotogramma e click su Copia fotogrammi) e lo incolliamo al frame n.100, cliccando con il destro sul centesimo fotogramma e scegliendo Incolla fotogrammi.
Figura 9. Copiare e incollare fotogrammi

Spoiler:

Clicchiamo col destro sullo spazio grigio tra i due frame e scegliamo: interpolazione classica.

Spoiler:

Ora clicchiamo col destro sul frame n.50 e scegliamo converti in fotogramma chiave.

Spoiler:

Non resta che prendere il nostro quadrato e trascinarlo dalla parte opposta dello stage e il gioco è fatto, possiamo lanciare la nostra animazione con CTRL+Invio. Il filmato viene riprodotto a ciclo continuo, questo a meno che non modifichiamo le impostazioni di pubblicazione.
Se vogliamo che il filmato si fermi, una volta arrivato alla fine assegnamo all’ultimo fotogramma l’azione di stop(). Clicchiamo sul fotogramma n.100 e apriamo il pannello delle azioni (F9). Nell’editor di testi scriviamo semplicemente l’istruzione:
stop();
Per inserire la funzione play() naturalmente utilizzeremmo lo stesso criterio, ma vedremo che questa funzione viene tipicamente richiamata da un bottone, per far partire un certo filmato.
Per dare interattività al filmato abbiamo bisogno di bottoni, l’idea è quella di catturare la pressione di un bottone e far partire una certa azione: pensiamo ad esempio ai classici pulsanti play e stop. Tradotto in ActionScript:
ciò che vogliamo fare è collegare una o più funzioni all’evento scatenato dalla pressione del mouse su un certo MovieClip.
Vediamo quindi come definire un semplice bottone all’interno del nostro filmato, come “registrare” il click del mouse e come assegnare le azioni che desideriamo.
Per la definizione del bottone non dovrebbero esserci problemi in quanto abbiamo già qualche esperienza con la creazione di un MovieClip. Prendiamo quindi il quadratino che abbiamo già creato nelle lezioni scorse e assegnamogli il nome di istanza “quadrato”. Vediamo che fare per catturare il click del mouse.
I listener
Assegnare delle azioni ad un evento è molto semplice.
Dobbiamo avere come complice un listener: una “sentinella” che rimanga in ascolto (listening) di eventuali eventi che dovessero scatenarsi.
Dobbiamo anche indicare alla nostra sentinella l’evento a cui fare attenzione, infine stabiliamo le azioni che dovranno essere eseguite. Esaminiamo un frammento di codice che cattura l’evento CLICK del mouse:

Codice:

this.quadrato.addEventListener(MouseEvent.CLICK, function()

{

  // ... lista delle azioni da compiere

});

Questa definizione aggiunge un listener all’istanza quadrato e stabilisce una serie di azioni da compiere quando clicchiamo sul quadrato stesso. In effetti è la definizione di un bottone! Come sempre la scriviamo nel primo fotogramma della timeline.
Naturalmente possiamo utilizzare anche altri tipi di eventi. Ecco un breve elenco di quelli collegati al mouse:

Codice:

CLICK    DOUBLE_CLICK    MOUSE_DOWN    MOUSE_MOVE    MOUSE_OUT

MOUSE_OVER    MOUSE_UP    MOUSE_WHEEL    ROLL_OUT    ROLL_OVER

gotoAndPlay
Per completare l’esempio, supponiamo di aver creato un filmato e che il nostro bottone serva a farcene visualizzare una parte. Flash ci permette di scegliere una certa posizione all’interno della timeline, dalla quale far partire l’animazione, grazie al comando gotoAndPlay().
Sintassi di gotoAndPlay

Codice:

gotoAndPlay(posizione);

Possiamo specificare la posizione inserendo il numero del fotogramma di partenza oppure un’etichetta (label) con la quale abbiamo contrassegnato un certo fotogramma.
Attivare il bottone
Montando insieme la cattura dell’evento e l’azione che vogliamo associare al CLICK otteniamo:

Codice:

this.quadrato.addEventListener(MouseEvent.CLICK, function()

{

  gotoAndPlay (20); // inseriamo il frame iniziale nell'istruzione gotoAndPlay

});

Ora se clicchiamo sul quadrato lanceremo l’animazione a partire dal ventesimo fotogramma Possiamo modificare questo codice sostituendo il tipo di evento da utilizzare e scrivendo all’interno delle parentesi graffe le azioni da eseguire allo scatenarsi dell’evento.
Infine è utile notare che, all’interno del codice, ogni istruzione è separata dalle altre tramite un punto e virgola ( Wink

che ne delimita la fine.

PARTE 2:
CLICCA QUI!
Fonti: html.it