Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Personalizzare il componente FLVPlayback

Personalizzare il componente FLVPlayback messo a disposizione da Adobe flash, pensato per la riproduzione dei file in formato FLV
Personalizzare il componente FLVPlayback messo a disposizione da Adobe flash, pensato per la riproduzione dei file in formato FLV
Link copiato negli appunti

Dalla versione Mx2004, con Flash è possibile creare video nel formato FLV; tale formato è particolarmente adatto al web, grazie al suo ottimo rapporto qualità/peso, in particolare con il codec Vp6 adottato all'inteno di Flash 8.

Oltre a un efficace strumento di compressione (Flash Video Encoder), Flash 8 mette a disposizione l'FLVPlayback (disponibile nel pannello Componenti, all'interno di una categoria dedicata), pensato per la riproduzione dei file in formato FLV.

Figura 1. Categorie relative all'FLVPlayback nel pannello Componenti
Pannello dei componenti

Nello stesso pannello sono disponibili anche dei controlli per personalizzare l'aspetto del riproduttore video.

Vediamo come sfruttare il componente e come personalizzarlo. Analizzeremo tre soluzioni:

  • utilizzo delle skin di default
  • personalizzazione degli elementi contenuti nella categoria FLV Playback Custom UI.
  • Creazione di una nuova skin

Utilizzo delle skin predefinite

Diversamente da Flash MX 2004, dove era disponibile solo un componente MediaPlayback con una grafica predefinita, il nuovo FLVPlayback offre già quattro "temi" (Arctic, Clear, Steel, Mojave) che prevedono, ognuno, diverse possibilità per quanto riguarda il numero di controlli da mostrare.

Inserire il componente sullo stage

Per prima cosa apriamo il pannello Componenti (Finestra -> Componenti, oppure Ctrl+F7), quindi selezioniamo FLVPlayback e trasciniamo un'istanza sullo stage.

Figura 2. FLVPlayback inserito sullo stage
Componente FLVPlayback

In questo caso vi è un controllo play/pausa, una barra di avanzamento e un controllo per disattivare l'audio, il tutto posto sopra al video.

Solitamente, per questo tipo di controlli, si imposta la proprietà skinAutoHide su true, in modo che se il cursore del mouse non è sul video, i controlli vengono nascosti. Tale opzione, come molte altre, è accessibile dal pannello Parametri ed è modificabile tramite Actionscript.

Selezionare una nuova skin

Per associare una skin al componente, apriamo il pannello Parametri e ci portiamo sulla voce skin.

Figura 3. Parametri del componente
Parametri del componente FLVPlayback

Con un doppio click sul valore associato alla voce skin, apriamo un nuovo pannello contenente tutte le skin disponibili di default.

Figura 4. Cambio di skin
Anteprima skin

Da questo pannello possiamo selezionare una nuova skin e vedere l'anteprima.

Anche la skin è associabile tramite Actionscript, con la sintassi:

nomeistanza.skin = "url_della_skin"

Dove url_della_skin indica il percorso del file SWF; per esempio, la skin vista in Figura 4 si applica usando il codice:

nomeistanza.skin = "MojaveOverAll.swf"

Se non si vuole associare nessuna skin (e quindi nessun controllo) al player, utilizziamo il valore None.

Se vogliamo avere i controlli fuori dell'area del filmato, possiamo usare le skin con dicitura Externa (es. MojaveExternalAll.swf)

Personalizzazione tramite Custom UI

Le skin predefinite consentono di avere un player funzionante in pochi minuti, ma hanno due svantaggi:

  • Poca varietà di scelta
  • Stessa posizione per tutte le skin

Il primo punto è negativo per l'originalità, in quanto, sebbene vari il numero di comandi, i temi sono solo 4, quindi sfruttando le skin di default avremo probabilità fin troppo alte di creare qualcosa di "già visto" che non stupirebbe l'utente.

Il secondo punto può essere più o meno importante, a seconda, per esempio, del layout dove inseriamo il video; in ogni caso poter inserire controlli solo nella parte inferiore del video, senza poter scegliere l'ordine, non offre grandi libertà.

Per ovviare a questi problemi, possiamo sfruttare i componenti FLV Playback Custom UI, dedicati alla costruzione di un'interfaccia (UI sta appunto per User Interface) personalizzata e meno "rigida" di quelle di default.

Inserire i controlli sullo stage

Per prima cosa inseriamo sullo stage i controlli che ci interessano, nella posizione che preferiamo:

Figura 5. Disposizione dei Custom UI
Custom UI

Notiamo come la scelta della posizione dei controlli sia totalmente libera, trattandosi di elementi separati dall'FLVPlayback possiamo aggiungere degli oggetti e delle illustrazioni grafiche in maniera maggiore rispetto a quanto si può fare con le skin di default, inoltre, è possibile variare la posizione dei comandi, durante l'esecuzione del filmato, sfruttando Actionscript.

Associare i comandi al componente

Dopo aver posizionato i controlli desiderati è necessario associarli al componente FLVPlayback.

Per prima cosa dobbiamo assegnare un nome istanza a ogni elemento (incluso il componente FLVPlayback).

Supponendo di chiamare play, pausa, stop e barra i controlli e video il componente, inseriamo sul fotogramma il seguente codice:

video.seekBar = barra
video.stopButton = stop
video.playButton = play
video.pauseButton = pausa

Testando il filmato possiamo vedere come il componente risponde perfettamente ai comandi dati dai pulsanti.

Se vogliamo personalizzare l'aspetto grafico dei controlli, basta modificare i movieclip (disponibili anche nella libreria) applicando la grafica che preferiamo. L'importante è non modificare il nome dei livelli o delle clip.

Creazione di una skin

Per certi versi la creazione di una skin è riconducibile alla personalizzazione dei Custom UI.

Questo perché realizzare una skin da zero può risultare molto complesso, quindi solitamente si preferisce partire da una skin predefinita e modificarla in base alle proprie esigenze.

La differenza riguardo l'utilizzo dei Custom UI è principalmente nel fatto che la skin, una volta creata, potrebbe essere utilizzata in altri progetti con pochi click, senza necessità di associare nomi istanza o eseguire altre operazioni.

Aprire una skin predefinita

Il percorso in cui troviamo i FLA delle skin predefinite è di questo tipo:

c:/Programmi/Macromedia/Flash 8/{lingua}/Configuration/SkinFLA

Dove {lingua} è una sigla di due lettere che varia in base alla versione del software (it per l'italiano, en per l'inglese, etc.).

All'interno di questa cartella, scegliamo un FLA: una volta aperto avremo:

Figura 6. FLA di una skin predefinita
Oggetti sullo stage

Come nel caso delle Custom UI, possiamo modificare gli oggetti selezionando l'apposita voce dal menu della libreria, o effettuando doppio click su di essi all'interno dello stage.

Concluse le modifiche, salviamo una copia del FLA, nella cartella del nostro progetto, ed esportiamo il filmato, quindi torniamo al file contenente il componente FLVPlayback, selezioniamo il componente e come Skin impostiamo Custom Skin (l'ultima voce presente).

Alla voce "URL" inseriamo il nome del file SWF creato poco fa (compresa l'estensione).

Esportando il filmato noteremo la nostra skin applicata al componente.

Conclusioni

Abbiamo visto i tre metodi principali per personalizzare l'aspetto del component FLVPlayback, passando da una soluzione rapida ma poco personalizzabile (l'utilizzo delle skin di default) a una più versatile, ma che richiede più tempo per essere sfruttata a fondo (la creazione di una nuova skin).

Probabilmente nel caso in cui si voglia variare l'aspetto del componente e in particolare la disposizione dei controlli, la soluzione migliore si rivela l'utilizzo dei Custom UI, che permettono un posizionamento totalmente libero e una modifica comunque molto rapida della grafica.

Se però abbiamo a che fare molto spesso con questo componente, non scartiamo l'eventualità di crearci un set di skin personalizzate da utilizzare in base alle esigenze: i tempi di modifica iniziale saranno leggermente più lunghi, ma avremo delle skin pronte che potremo applicare in pochi istanti e senza la necessità di codice aggiuntivo.

Ti consigliamo anche