ActionScript 3
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
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.
Il pannello "Azioni"
Figura 2. Il pannello azioni
Premessa sul linguaggio: MovieClip e istanze
Prima di andare avanti con la guida è utile soffermarci su una considerazione: 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
Nella finestra che appare scriviamo il nome del MovieClip, che chiamiamo quadrato.
Figura 4. Assegnare un nome al MovieClip
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
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"
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
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 abbiamo detto, la principale funzione delle azioni 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();
Risultato dell'esempio
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.
Figura 8. Il nuovo MovieClip
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
Clicchiamo col destro sullo spazio grigio tra i due frame e scegliamo: interpolazione classica.
Figura 10. Applicare un'interpolazione
Ora clicchiamo col destro sul frame n.50 e scegliamo converti in fotogramma chiave.
Figura 11. Aggiungere un fotogramma chiave
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:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Figura 12. Scrivere istruzioni nel pannello Azioni
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.
È possibile scaricare il sorgente dell'esempio
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Bottoni, listener ed eventi con ActionScript 3
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:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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:
Eventi collegati al mouse
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:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Possiamo modificare
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
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 (;) che ne delimita la fine.
Creare un link con ActionScript 3: navigateToURL
Quanto abbiamo appreso finora già basterebbe a costruire una semplice interfaccia per le nostre animazioni.Dobbiamo quindi fare i conti con il Web e istruire i nostri bottoni a diventare dei link.
Il compito è molto semplice, dobbiamo sfruttare quanto già visto per la cattura degli eventi e assegnare l'azione NavigateToUrl() all'evento CLICK del mouse.
navigateToURL e URLRequest
A differenza delle versioni precedenti di ActionScript, dove potevamo utilizzare la funzione getURL() per definire un link, in AS3 abbiamo a che fare con l'oggetto URLRequest e l'azione navigateToURL().Con URLRequest possiamo definire la richiesta di una certa pagina, semplicemente indicandone l'indirizzo.
Definizione di una URLRequest
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Una volta stabilita la pagina di destinazione possiamo comunicarla all'azione navigateToURL, che prende come parametri una richiesta e il "target", che serve a stabilire se il browser, una volta cliccato sul link, caricherà la nuova pagina al posto di quella attuale ("_self") oppure in una nuova finestra o tab ("_blank").
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
A questo punto possiamo montare tutto il comando nel gestore dell'evento CLICK.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Una forma più compatta
Possiamo anche scegliere una forma più compatta definendo la richiesta direttamente all'interno di navigateToURL().
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
È possibile scaricare il sorgente (.fla) dell'esempio
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Caricare un MovieClip (swf) esterno
Può capitare di voler importare nei nostri filmati alcuni MovieClip che abbiamo già pubblicato come file .swf.Utilizziamo quella che viene definita una "tecnica asincrona di caricamento".
Vediamo quali sono i passi da seguire e poi discutiamo sull'asincronia
- lanciare una richiesta per il file .swf che ci interessa
- definire un listener che catturi l'evento dell'avvenuto caricamento
- stabilire che l'azione da compiere una volta completo il caricamento è l'aggiunta del filmato, in modo che ne parta la riproduzione
Chiarito questo, iniziamo a vedere quali elementi di AS3 mettere in campo per portare a termine il lavoro. Anzitutto dobbiamo effettuare una richiesta, per cui ci serviremo ancora della classe URLRequest e abbiamo capito che ci serve un listener ed un evento, concetti già noti dalle scorse lezioni.
Manca solo un oggetto che assolve la funzione di caricamento: in ActionScript 3 utilizziamo la classe Loader.
Per prima cosa quindi creiamo un nuovo oggetto loader della classe Loader.
Creare un nuovo Loader
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Poi aggiungiamo il listener alla proprietà contentLoaderInfo. L'evento COMPLETE viene scatenato alla fine del caricamento e lancia la funzione fineCaricamento.
Aggiungere un listener per controllare l'evento COMPLETE
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Infine scriviamo la funzione fineCaricamento che aggiungerà al nostro filmato, quello caricato dall'esterno.
Scrivere il gestore dell'evento
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Una volta predisposto tutto possiamo lanciare il caricamento del filmato esterno, utilizzando il metodo load.
Lanciare il caricamento
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Naturalmente per caricare un filmato diverso, basta cambiare l'URL nella URLRequest, sostituendo il nome play e stop.swf con l'URL del filmato che preferiamo.
Il codice completo risulta:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Ecco l'
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Caricare un video FLV, gestire un NetStream
L'FLV è un formato molto diffuso sul Web, basti pensare che è quello utilizzato da YouTube e molti altri aggregatori video.In questa lezione vediamo come caricare un video FLV all'interno di un filmato Flash.
Come sempre la tecnica non è difficile, ma eviteremo di scendere nei dettagli e ci limiteremo ad osservare il funzionamento di un piccolo frammento di codice. Come al solito iniziamo presentando i nuovi oggetti.
L'oggetto Video
Cominciamo dall'oggetto Video. Si tratta di un contenitore che permette di visualizzare una fonte video, appunto, come ad esempio una webcam o uno stream da internet. Possiamo definire un nuovo video decidendone le dimensioni:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Una volta definito il nostro video possiamo associarlo ad un MovieClip, con addChild. Nel nostro caso abbiamo associato il video mioVideo al MovieClip contenitore (this).
NetStream
Sia che si tratti di un file sul nostro PC, sia che ci venga fornito da Web server, possiamo considreare un file video come uno "stream". Quindi possiamo associare l'idea di un oggetto netStream ad un video esterno (o audio esterno).
Detto questo vediamo come lavorare con netStream. Anzitutto creiamo una connessione sfruttando un oggetto NetConnection, questa connessione può essere stabilita con un Media Server ma non è questo il caso, quindi inseriamo null nel metodo connect().
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Infine creiamo il nostro oggetto NetStream, lo colleghiamo al contenitore mioVideo e facciamo partire la riproduzione del file con l'azione play(), nella quale specifichiamo l'URL del file da visualizzare.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
I Metadati
Se lanciamo l'applicazione vediamo che il Flash Player ci risponde con una eccezione: non abbiamo provveduto a gestire l'evento della lettura dei Metadati. I metadati sono informazioni a contorno del video, come ad esempio la durata e il bitrate. Flash si aspetta la definizione di un client e di una funzione, onMetaData, che gestisca queste informazioni.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Fatto anche questo possiamo lanciare il nostro filmato che include l'FLV.
È possibile scaricare l'esempio completo, con il video e il sorgente (.fla) da
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.Il primo player FLV con Flash CS4 e AS3
Utilizziamo questa ultima lezione della guida per mettere insieme diversi elementi incontrati durante il percorso ed esaminiamo un semplice player di video FLV.
Iniziamo costruendo lo schermo su cui "proiettare" i nostri video: creiamo un rettangolo, lo trasformiamo in MovieClip (F8) e lo chiamiamo quadro. All'istanza di quadro che abbiamo sullo stage diamo invece il nome di proiettore.
Figura 13. Il movieclip su cui "proiettare" il video
Ora creiamo i due controlli fondamentali per la riproduzione: Play e Pause. Per farlo creiamo un MovieClip vuoto (da menu Inserisci > Nuovo simbolo, oppure con CTRL+F8) e lo chiamiamo play. Flash ci porta sullo stage di questo MovieClip ed è qui che creiamo un bottone a due stati.
I due stati saranno realizzati con due fotogrammi chiave, il primo e il secondo della timeline. Creiamo i fotogrammi chiave e a ciascuno applichiamo l'azione stop();. In questo modo blocchiamo l'animazione e saremo sempre noi a decidere quando rendere attivi i fotogrammi.
Figura 14. Creare i fotogrammi chiave
Ora non ci resta che creare i due bottoni:
- nel fotogramma 1, inseriamo una circonferenza color nero per il tasto "play"
- nel fotogramma 2, ne inseriamo una più piccola per il tasto "pause"
trasformiamo le circonferenze in MovieClip e assegnamo a ciascuna una trasparenza (alfa=18 ad esempio)
Figura 15. Assegnare una trasparenza al MovieClip
Infine aggiungiamo sui bottoni i relativi simboli (il triangolino su play e le due barre rettangolari su pause)Lo facciamo aggiungendo un livello sopra a quello dei bottoni e sfruttando gli strumenti di disegno delle forme.
Figura 16. Disegnare i simboli
Non ci resta che tornare sullo stage principale e trascinare il nostro controllo play dalla libreria: chiamiamo l'istanza playstop.
Finalmente abbiamo tutto il necessario per inserire il codice:
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
È possibile
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
,completo di video e sorgente (.fla).
Ultima modifica:
me la leggo tutta :soso:
ma nn ti stanki di scrivere:°°:
