[GUIDA]ActionScript3-Parte 2 - Versione stampabile

[GUIDA]ActionScript3-Parte 2 - Versione stampabile

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

[GUIDA]ActionScript3-Parte 2 - ¬Bulle† - 18-06-2013 12:35 PM

PARTE 2
Quanto abbiamo descritto negli articoli precedenti di questa guida, 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:

var richiesta:URLRequest = new URLRequest("http://flash.html.it");

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:

navigateToURL(richiesta di tipo URLRequest, target);

A questo punto possiamo montare tutto il comando nel gestore dell’evento CLICK.

Codice:

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

{

  var richiesta:URLRequest = new URLRequest("http://flash.html.it");

  navigateToURL(richiesta, "_blank");

});

Una forma più compatta
Possiamo anche scegliere una forma più compatta definendo la richiesta direttamente all’interno di navigateToURL().

Codice:

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

{

  navigateToURL(new URLRequest("http://flash.html.it"),"_blank");

});

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
La tecnica è asincrona per un semplice motivo: non si fanno ipotesi sul tempo necessario al caricamento del filmato, quindi non stabiliamo un momento con il quale sincronizzare 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:

var loader:Loader = new Loader();

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:

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fineCaricamento)

Infine scriviamo la funzione fineCaricamento che aggiungerà al nostro filmato, quello caricato dall’esterno.
Scrivere il gestore dell’evento

Codice:

function fineCaricamento(loadEvent:Event)

{

  addChild(loadEvent.currentTarget.content);

}

Una volta predisposto tutto possiamo lanciare il caricamento del filmato esterno, utilizzando il metodo load.
Lanciare il caricamento

Codice:

loader.load(new URLRequest("bottoni_eventi.swf"))

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:

var loader:Loader = new Loader();

loader.contentLoaderInfo.addEventListener(Event.COMPLETE, fineCaricamento)

function fineCaricamento(loadEvent:Event)

{

  addChild(loadEvent.currentTarget.content);

}

loader.load(new URLRequest("bottoni_eventi.swf"))

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:

var mioVideo:Video = new Video(320, 240);

this.addChild(mioVideo);

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:

var nc:NetConnection = new NetConnection();

nc.connect(null);

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:

// definiamo lo stream

var mioStream:NetStream = new NetStream(nc);

// colleghiamo lo stream al contenitore Video

mioVideo.attachNetStream(mioStream);

// diamo il vie alla riproduzione

mioStream.play("sample.flv");

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:

var mioClient:Object = new Object();

netClient.onMetaData = function(meta:Object)

{

    trace(meta.duration);

};

ns.client = netClient;

Fatto anche questo possiamo lanciare il nostro filmato che include l’FLV.
In questo articolo, l’ultimo del filone dedicato alle basi di Actionscript 3, cerchiamo di 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

Spoiler:

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

Spoiler:

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

Spoiler:

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.

Spoiler:

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:

// Assegna il video al proiettore

var vid:Video = new Video(320, 240);

proiettore.addChild(vid);

// Inizializza la connessione al NetStream

var nc:NetConnection = new NetConnection();

nc.connect(null);

var ns:NetStream = new NetStream(nc);

vid.attachNetStream(ns);

// Gestisce i metadati

var netClient:Object = new Object();

netClient.onMetaData = function(meta:Object)

{

    trace(meta.duration);

};

ns.client = netClient;

// La riproduzione all'inizio è in pausa 

ns.play("img/sample.flv");

ns.pause();

// Assegna le funzioni ai bottoni di controllo

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

{

    if (playstop.currentFrame == 1) // se è in pausa

    {

        ns.resume(); // riprende la riproduzione

        playstop.gotoAndStop("stop");

    }

    else // se è in play

    {

        ns.pause(); // mette in pausa 

        playstop.gotoAndStop("play");

    }

});

Et voilà!!!

PARTE 1:
CLICCA QUI!
Spero che la guida vi sia servita Big Grin

:bye: a tutti
Fonti: HTML.IT