• Web Design » Flash » Tutorial Flash

Pagina 2 di 2

Obiettivo sfruttare il plugin di Flash per visualizzare correttamente il video e gestire il suono. La lista delle operazioni da svolgere al fine di realizzare un visualizzatore di video in flash è:

Acquisire i video (carateristiche e formati) e trasformare i filmati in FLV (FLash Video format) sono stati spiegati nella prima parte di questa lezione.
Abbiamo visto come ottimizzare un filmato mov, avi o wma da utilizzare poi in un sito internet.
Le operazioni descritte sono state quelle legate all’importazione ed ai parametri di ottimizzazione quindi all’operazione di conversione del filmato nel formato FLV (Flash Video).

Obiettivo di questo tutorial e' apprendere i meccanismi per

1. Impostare i comandi per la gestione del video
2. Aggiungere il filmato conclusivo al sito Web

Ricordiamo che questa operazione ci permette di ottenere un filmato accessibile via Web senza che sia necessario per l’utente scaricare nuovi plugin, e fare in modo che il Flash Player si incarichi dello streaming e della riproduzione del filmato.

Il file Flash utilizzato per importare e trasformare il filmato ora non serve più. Partiamo con un progetto totalmente nuovo, come quello illustrato nell’immagine seguente. Si tratta di un filmato 640x480 pixel in cui è stata importata l’immagine PNG di un televisore.

Utilizzare il componente Media Display

Per gestire il video al suo interno facciamo uso dei Componenti messi a disposizione dal programma Flash. Se il pannello non è già aperto e disponibile alla destra del vostro ambiente di lavoro, lo potete accendere con il menu Finestra > Pannelli di Sviluppo > Componenti (Window > Development Panel > Components).

Fra le opzioni disponibili al suo interno abbiamo i Media Component ed in particolare il Media Display e il Media Playback.

Il primo adatto per la riproduzione continua dei video, il secondo nel caso si voglia facilmente accompagnare il video a strumenti per il suo controllo (play, stop, rewind etc).

Procediamo con l’inserimento di un Componente Media Display all’interno di un nuovo livello “filmato”. Per effettuare l’operazione è sufficiente trascinare in scena il componente.

Per gestire le caratteristiche di riproduzione il programma ci mette a disposizione il suo Component Inspector.
Questo pannello di controllo permette di indicare:

• il percorso del filmato che si intende visualizzare all’interno della finestra ad esempio: filmati/pippo.flv
• se il filmato parte in automatico appena disponibile (autoplay)
• se si preferisce utilizzare le dimensioni originali del filmato rispetto alle dimensioni del media display trascinato sul palcoscenico;
• se le dimensioni da utilizzare sono quelle del media display ma si intende comunque rispettare le proporzioni (altezza/larghezza) del video orginale.

Per questo esempio abbiamo scelto di far partire automaticamente il filmato, e di utilizzare le dimensioni originali del filmato per la sua riproduzione.
Una volta gestite queste informazioni ed il percorso corretto al filmato, è possibile vedere il filmato in anteprima.

Aggiungere controlli personalizzati

Per poter bloccare o cambiare il filmato durante la sua riproduzione l’actionscript ci permette di aggiungere maggiore interattività. È sufficiente dare un nome all’istanza del Media Display presente sul palcoscenico. Dalla barra delle proprietà in basso a sinistra è possibile scegliere il nome con le solite indicazioni di evitare sia gli spazi che le lettere accentate.

Prima di tutto ci permette di aggiungere comandi come:
_root.nome_istanza.stop();
_root.nome_istanza.pause();
_root.nome_istanza.play();
Obiettivo quello di fermare la riproduzione, metterla in pausa o di procedere alla riproduzione normale del filmato.

Ad elementi per la gestione del volume:
_root.nome_istanza.volume=0;
_root.nome_istanza.volume=50;

o ancora elementi che gestiscono il momento della riproduzione del filmato:
_root. nome_istanza.playheadTime=120;
per impostare la posizione della testina di riproduzione

Con Actionscript inoltre è possibile gestire il filmato da riprodurre:
_root. nome_istanza.contentPath="ikrea.flv";

Attenzione: al comando _root. nome_istanza.contentPath, si consiglia di associarlo sempre al comando _root.nome_istanza.play();
In quanto la riproduzione del nuovo filmato non è automatica.

Se il filmato precedentemente caricato era attivo, anche il nuovo filmato mantiene inalterata questa caratteristica e viene riprodotto altrimenti se il filmato precedente era bloccato anche il nuovo filmato mantiene il blocco della riproduzione.

Utilizzare lo strumento Media Playback

Si tratta di uno strumento molto semplice che contiene già al suo interno tutti gli elementi utili alla riproduzione del filmato ed alla gestione del suono.

Prendiamo un nuovo documento Flash 400x300 pixel e trasciniamo al suo interno il componente Media Playback. Per gestire le caratteristiche di riproduzione il programma ci mette a disposizione un nuovo Component Inspector.

Questo pannello di controllo permette di indicare oltre agli elementi descritti per il Media Display anche di una nuova serie di opzioni: la posizione del pannello dei controlli associata al filmato (in basso o in alto, a destra o a sinistra del filmato) la visibilità del pannello: automatica (appare al passaggio del mouse) sempre visibile, oppure nascosta (appare solo la barra che mostra lo streaming e la riproduzione del filmato)

Importante: se utilizzate il Media Playback fate attenzione a impostare la lunghezza del filmato in ore, minuti e secondi. Il programma così sarà in grado di spostare la testina, indicando il punto esatto della riproduzione nei confronti della sua durata totale.

Unico neo nell’utilizzo di questo strumento è il colore bianco che non è possibile modificare. Per personalizzarlo vi consigliamo di creare i pulsanti con il sistema dei controlli personalizzati.