|
I componenti UI FLV di riproduzione personalizzati consentono di personalizzare l'aspetto dei controlli FLVPlayback all'interno del file FLV e permettono di visualizzare i risultati nell'anteprima della pagina Web. Tuttavia, questi componenti non sono concepiti per essere modificati in scala. Dovete modificare il clip filmato e il suo contenuto secondo una dimensione specifica. Per questo motivo, in genere è preferibile che il componente FLVPlayback sullo stage sia delle dimensioni desiderate, con la proprietà
scaleMode
impostata su
exactFit
.
Per iniziare, trascinate i componenti UI FLV di riproduzione personalizzati dal pannello Componenti, posizionateli dove preferite sullo stage e assegnate a ciascuno un nome di istanza.
Questi componenti possono funzionare senza ActionScript. Se sono posizionati sulla stessa linea temporale e sullo stesso fotogramma del componente FLVPlayback e per il componente non è impostato uno skin, il componente FLVPlayback si connette automaticamente a tali componenti. Se sullo stage sono presenti più componenti FLVPlayback o se il controllo personalizzato e l'istanza FLVPlayback non sono sulla stessa linea temporale, sono necessarie ulteriori operazioni.
Una volta che i componenti si trovano sullo stage, possono essere modificati come qualunque altro simbolo. Quando aprite i componenti, noterete che hanno impostazioni leggermente diverse l'uno dall'altro.
Componenti Button
I componenti Button hanno una struttura simile. Questi pulsanti includono i componenti BackButton, ForwardButton, MuteButton, PauseButton, PlayButton, PlayPauseButton e StopButton. La maggior parte di essi presenta un unico clip filmato nel fotogramma 1 con il nome di istanza placeholder_mc. Generalmente si tratta di un'istanza dello stato normale del pulsante, ma non è necessariamente così. Nel fotogramma 2 ci sono quattro clip filmato sullo stage per ogni visualizzazione: normale, sopra, giù e disabilitato. (In fase di runtime, il componente non passa mai al fotogramma 2; questi clip filmato si trovano in questa posizione per rendere più comode le operazioni di modifica e per forzarne il caricamento nel file SWF senza selezionare la casella di controllo Esporta nel primo fotogramma della finestra di dialogo Proprietà simbolo. È comunque necessario selezionare l'opzione Esporta per ActionScript.)
Per assegnare uno skin al pulsante, è sufficiente modificare ciascun clip filmato. Potete cambiare la dimensione e l'aspetto di ciascun clip.
Di solito appare un'istruzione ActionScript sul fotogramma 1. Non dovrebbe essere necessario modificare questo script. Questo script semplicemente arresta l'indicatore di riproduzione sul fotogramma 1 e specifica quale clip filmato utilizzare per un determinato stato.
Pulsanti PlayPauseButton, MuteButton, FullScreenButton e CaptionButton
I pulsanti PlayPauseButton, MuteButton, FullScreenButton e CaptionButton hanno delle impostazioni diverse dagli altri pulsanti; infatti dispongono soltanto di un fotogramma con due livelli e nessuno script. Su questo fotogramma si trovano due pulsanti, uno sopra l'altro: nel caso di PlayPauseButton, si tratta del pulsante per riprodurre e sospendere la riproduzione; nel caso di MuteButton del pulsante per attivare e disattivare il volume; nel caso di FullScreenButton del pulsante per attivare e disattivare la modalità schermo intero; nel caso di CaptionButton del pulsante per attivare e disattivare le didascalie. Potete associare degli skin a ognuno di questi due pulsanti interni come descritto in
Associare skin ai singoli componenti UI FLV di riproduzione personalizzati
; non sono richieste altre operazioni.
CaptionButton è destinato al componente FLVPlaybackCaptioning e deve essere associato a quel componente, non al componente FLVPlayback.
Pulsanti BackButton e ForwardButton
Anche i pulsanti BackButton e ForwardButton hanno delle impostazioni diverse dagli altri pulsanti. Sul fotogramma 2 sono presenti dei clip filmato aggiuntivi da utilizzare come un fotogramma intorno a uno o a entrambi i pulsanti. Questi clip filmato non sono obbligatori e non dispongono di alcuna funzione specifica; vengono forniti solo per comodità. Per utilizzarli è sufficiente trascinarli nello stage dal pannello Libreria e posizionarli in un punto qualsiasi dello stage. Se non li ritenete importanti, non utilizzateli o cancellateli dal pannello Libreria.
La maggior parte dei pulsanti, così come vengono forniti, si basa su un insieme comune di clip filmato: in tal modo potete modificare contemporaneamente l'aspetto di tutti i pulsanti. Potete decidere di utilizzare questa funzione oppure potete sostituire i clip comuni e scegliere un aspetto diverso per ciascun pulsante.
Componente BufferingBar
BufferingBar è un componente piuttosto semplice: è costituito da un'animazione resa visibile quando il componente attiva lo stato di bufferizzazione e non necessita di alcuna speciale azione ActionScript per essere configurato. Per impostazione predefinita, è una barra a strisce che si sposta da sinistra a destra con una maschera rettangolare, ma senza alcuna altra configurazione particolare.
Sebbene le barre di bufferizzazione nei file SWF dello skin utilizzino la modifica in scala a 9 porzioni, poiché devono essere modificate in scala in fase di runtime, il componente UI personalizzato FLV BufferingBar non utilizza e
non
può utilizzare la modifica in scala a 9 porzioni perché include dei clip filmato nidificati. Se desiderate che il componente BufferingBar sia più largo o più alto, può essere utile cambiare il contenuto piuttosto che modificarlo in scala.
Componenti SeekBar e VolumeBar
I componenti SeekBar e VolumeBar sono simili, ma hanno funzioni diverse. Entrambi dispongono di determinate maniglie, adottano lo stesso meccanismo di gestione di traccia e hanno un supporto per i clip nidificati per tenere traccia dello stato di avanzamento (progress) e di completamento (fullness).
Spesso il codice ActionScript del componente FLVPlayback presuppone che il punto di registrazione (detto anche
punto di origine
o
punto zero
) del componente SeekBar o VolumeBar si trovi nell'angolo in alto a sinistra del contenuto, pertanto è importante mantenere questa convenzione. In caso contrario, potrebbero verificarsi problemi con le maniglie e con i clip filmato progress e fullness.
Sebbene le barre di ricerca nei file SWF dello skin utilizzino la modifica in scala a 9 porzioni, poiché devono essere modificate in scala in fase di runtime, il componente UI personalizzato FLV SeekBar non utilizza e
non può
utilizzare la modifica in scala a 9 porzioni perché include dei clip filmato nidificati. Se desiderate che il componente SeekBar sia più largo o più alto, può essere utile cambiare il contenuto piuttosto che modificarlo in scala.
Maniglia
Un'istanza della maniglia clip filmato si trova sul fotogramma 2. Così come accade per i componenti BackButton e ForwardButton, il componente non passa mai al fotogramma 2; questi clip filmato si trovano in questa posizione per rendere più comode le operazioni di modifica e per forzarne il caricamento nel file SWF senza dover selezionare la casella di controllo Esporta nel primo fotogramma nella finestra di dialogo Proprietà simbolo. È comunque necessario selezionare l'opzione Esporta per ActionScript.
Come potete notare, la maniglia clip filmato presenta un rettangolo di sfondo con il valore alfa impostato su 0. Questo rettangolo aumenta le dimensioni dell'area attiva della maniglia, rendendo più semplice l'acquisizione senza dover modificare l'aspetto, come accade per lo stato area attiva di un pulsante. Poiché la maniglia viene creata in modo dinamico in fase di runtime, è necessario che essa sia un clip filmato e non un pulsante. Il rettangolo con il valore alfa impostato su 0 non è strettamente indispensabile e, in generale, si può sostituire l'interno della maniglia con qualsiasi altra immagine. Tuttavia, è consigliabile lasciare il punto di registrazione in posizione centrale orizzontale, al centro della maniglia clip filmato.
Il seguente codice ActionScript si trova nel fotogramma 1 del componente SeekBar per gestire le operazioni della maniglia:
stop();
handleLinkageID = "SeekBarHandle";
handleLeftMargin = 2;
handleRightMargin = 2;
handleY = 11;
La chiamata alla funzione
stop()
è necessaria per il contenuto del fotogramma 2.
La seconda riga specifica quale simbolo usare come maniglia; non occorre cambiarlo se modificate solo l'istanza della maniglia clip filmato sul fotogramma 2. In fase di runtime, il componente FLVPlayback crea sullo stage un'istanza del clip filmato specificato di pari livello dell'istanza del componente Bar, il che significa che i due componenti hanno lo stesso clip filmato principale. Così se ad esempio la barra si trova al livello principale, anche la maniglia dovrà essere collocata allo stesso livello.
La variabile
handleLeftMargin
determina la posizione originale della maniglia (0%), mentre la variabile
handleRightMargin
determina la posizione finale (100%). I numeri forniscono l'offset dall'estremità sinistra a quella destra del controllo della barra, dove i numeri positivi indicano i limiti all'interno della barra, mentre quelli negativi indicano i limiti al di fuori di essa. L'offset specifica dove può spostarsi la maniglia, in base al suo punto di registrazione. Se posizionate il punto di registrazione al centro della maniglia, le estremità destra e sinistra della maniglia supereranno i margini. Per funzionare correttamente, il punto di registrazione di un clip filmato della barra di ricerca deve trovarsi nell'angolo in alto a sinistra del contenuto.
La variabile
handleY
determina la posizione
y
della maniglia, relativa all'istanza della barra. Questa si basa sui punti di registrazione di ciascun clip filmato. Il punto di registrazione della maniglia sample si trova sul vertice del triangolo, nella posizione relativa nella parte visibile, senza considerare lo stato area attiva invisibile del rettangolo. Anche il punto di registrazione di un clip filmato della barra deve trovarsi nell'angolo in alto a sinistra del contenuto per funzionare correttamente.
Così considerando questi limiti, se ad esempio il controllo della barra è impostato su (100, 100) e ha una larghezza di 100 pixel, i valori possibili della maniglia saranno compresi tra 102 e 198 in direzione orizzontale e 111 in direzione verticale. Se cambiate i valori delle variabili
handleLeftMargin
e
handleRightMargin
su -2 e quello della variabile
handleY
su -11, i valori possibili della maniglia saranno compresi tra 98 e 202 in direzione orizzontale e 89 in direzione verticale.
Clip filmato progress e fullness
I componenti SeekBar e VolumeBar dispongono, rispettivamente, di un clip filmato
progress
e
fullness
, anche se nella pratica possono avere entrambi, nessuno o uno solo di questi clip filmato. Da un punto di vista strutturale e comportamentale sono uguali, ma tengono traccia di valori diversi. Un clip filmato di tipo progress si riempie durante la fase di scaricamento del file FLV (utile solo in caso di scaricamento via HTTP, perché risulta già pieno in caso di streaming da FMS), mentre un clip filmato di tipo fullness si riempie mentre la maniglia si sposta da sinistra a destra.
Il componente FLVPlayback rileva le istanze dei clip filmato cercando un nome di istanza specifico, pertanto è necessario che l'istanza del clip filmato di tipo progress abbia come istanza principale il clip filmato della barra e come nome di istanza progress_mc. Il nome del clip filmato di tipo fullness deve essere fullness_mc.
Potete impostare i clip filmato di tipo progress e fullness con o senza l'istanza di clip filmato fill_mc nidificata all'interno. Il clip filmato fullness_mc di VolumeBar mostra il metodo
con
il clip filmato fill_mc, mentre il clip filmato progress_mc di SeekBar mostra il metodo
senza
il clip filmato fill_mc.
Il metodo con il clip filmato fill_mc nidificato all'interno è utile quando desiderate un riempimento che non possa essere adattato in scala senza distorcerne l'aspetto.
Nel clip filmato fullness_mc di VolumeBar l'istanza del clip filmato nidificato fill_mc è mascherata. Potete mascherarla quando create il clip filmato oppure creando una maschera in modo dinamico in fase di runtime. Se scegliete di creare un clip filmato da usare come maschera, denominate l'istanza
mask_mc
e impostatela in modo che fill_mc venga visualizzato come quando la percentuale è pari al 100%. Se non mascherate fill_mc, la maschera creata in maniera dinamica sarà di forma rettangolare e con le stesse dimensioni di fill_mc pari a una percentuale del 100%.
Il clip filmato fill_mc viene rivelato tramite la maschera in uno dei due modi possibili, a seconda che fill_mc.slideReveal sia
true
o
false
.
Se fill_mc.slideReveal è
true
, fill_mc viene spostato da sinistra a destra per mostrarlo attraverso la maschera. Con la percentuale del 0%, il clip filmato si trova completamente a sinistra, in modo che nessuna parte venga mostrata attraverso la maschera. Con l'aumentare della percentuale il clip filmato si sposta verso destra, finché con il 100% torna nella stessa posizione in cui si trovava quando è stato creato sullo stage.
Se fill_mc.slideReveal è
false
o undefined (comportamento predefinito), la maschera viene ridimensionata da sinistra a destra per rivelare una parte maggiore del clip filmato fill_mc. Con il valore 0%, la maschera viene modificata in scala su 05 in direzione orizzontale e, con l'aumentare della percentuale, la proprietà
scaleX
aumenta finché al 100% il clip filmato fill_mc viene rivelato del tutto. Questo non significa necessariamente che
scaleX
= 100, perché mask_mc potrebbe essere stato modificato in scala nel momento in cui è stato creato.
Il metodo senza fill_mc è più semplice del metodo con fill_mc, ma il file viene distorto in senso orizzontale. Se non desiderate tale distorsione, dovete utilizzare fill_mc. Il clip filmato progress_mc di SeekBar illustra come usare questo metodo.
Il clip filmato di tipo progress o fullness viene modificato in scala in direzione orizzontale in base alla percentuale. Allo 0%, la proprietà
scaleX
dell'istanza è impostata su 0, perciò l'istanza risulta invisibile. Con l'aumentare della percentuale viene regolata anche la proprietà
scaleX
finché, con una percentuale del 100%, il clip presenta le stesse dimensioni di quando è stato creato sullo stage. Dunque, anche in questo caso non significa necessariamente che
scaleX
= 100, perché l'istanza del clip potrebbe essere stata modificata in scala nel momento in cui è stata creata.
Connettere i componenti UI FLV di riproduzione personalizzati
Se posizionate i componenti UI personalizzati sulla stessa linea temporale e sullo stesso fotogramma del componente FLVPlayback e per il componente non è impostata la proprietà
skin
, il componente FLVPlayback si connette automaticamente a tali componenti senza richiedere ActionScript.
Se sullo stage sono presenti più componenti FLVPlayback o se il controllo personalizzato e l'istanza FLVPlayback non sono sulla stessa linea temporale, dovete scrivere del codice ActionScript per connettere i componenti UI personalizzati all'istanza del componente FLVPlayback. Innanzitutto, dovete assegnare un nome all'istanza FLVPlayback e, mediante ActionScript, assegnare le istanze dei componenti UI FLV di riproduzione personalizzati alle proprietà FLVPlayback corrispondenti. Nell'esempio seguente l'istanza FLVPlayback è my_FLVPlybk, i nomi di proprietà FLVPlayback seguono il punto (.) e le istanze dei controlli UI FLV di riproduzione personalizzati si trovano a destra del segno uguale (=):
//FLVPlayback instance = my_FLVPlybk
my_FLVPlybk.playButton = playbtn; // set playButton prop. to playbtn, etc.
my_FLVPlybk.pauseButton = pausebtn;
my_FLVPlybk.playPauseButton = playpausebtn;
my_FLVPlybk.stopButton = stopbtn;
my_FLVPlybk.muteButton = mutebtn;
my_FLVPlybk.backButton = backbtn;
my_FLVPlybk.forwardButton = forbtn;
my_FLVPlybk.volumeBar = volbar;
my_FLVPlybk.seekBar = seekbar;
my_FLVPlybk.bufferingBar = bufbar;
Nei seguenti passaggi vengono creati i controlli personalizzati StopButton, PlayPauseButton, MuteButton e SeekBar:
-
Trascinate il componente FLVPlayback nello stage e assegnate il nome di istanza
my_FLVPlybk
.
-
Impostate il parametro
source
nella finestra di ispezione dei componenti su
http://www.helpexamples.com/flash/video/cuepoints.flv
.
-
Impostate il parametro skin su None.
-
Trascinate i componenti StopButton, PlayPauseButton e MuteButton nello stage e posizionateli sopra l'istanza FLVPlayback, impilandoli verticalmente sulla sinistra. Assegnate a ciascun pulsante un nome di istanza, inserendolo nella finestra di ispezione Proprietà (ad esempio
my_stopbttn
,
my_plypausbttn
e
my_mutebttn
).
-
Nel pannello Libreria, aprite la cartella FLVPlayback Skins, quindi aprite la sottocartella SquareButton.
-
Selezionate il clip filmato SquareBgDown e fate doppio clic per aprirlo nello stage.
-
Fate clic con il pulsante destro del mouse (Windows) o fate clic tenendo premuto il tasto Ctrl (Macintosh), quindi scegliete Seleziona tutto dal menu ed eliminate il simbolo.
-
Selezionate lo strumento Ovale, disegnate un ovale nella stessa posizione e impostate il riempimento sul colore blu (
#0033FF
).
-
Nella finestra di ispezione Proprietà, impostate la larghezza (W:) su
40
e l'altezza (H:) su
20
. Impostate la coordinata x (X:) su
0.0
e la coordinata y (Y:) su
0.0
.
-
Ripetete le operazioni elencate ai punti da 6 a 8 per SquareBgNormal, ma impostate il riempimento sul colore giallo (
#FFFF00
).
-
Ripetete le operazioni elencate ai punti da 6 a 8 per SquareBgOver, ma impostate il riempimento sul colore verde (
#006600
).
-
Modificate i clip filmato per le varie icone del simbolo all'interno dei pulsanti (PauseIcon, PlayIcon, MuteOnIcon, MuteOffIcon e StopIcon). Questi clip filmato si possono trovare nel pannello Libreria sotto FLV Playback Skins/
Label
Button/Assets, dove
Label
è il nome del pulsante (Play, Pause e così via). Per ogni clip filmato, eseguite queste operazioni:
-
Selezionate l'opzione Seleziona tutto.
-
Cambiate il colore in rosso (
#FF0000
).
-
Ridimensionate a 300%.
-
Modificate la posizione X: del contenuto su
7,0
per alterare la posizione orizzontale dell'icona in tutti gli stati del pulsante.
Nota:
questo metodo di modifica della posizione evita di aprire tutti gli stati del pulsante e di spostare l'istanza dell'icona clip filmato.
-
Fate clic sulla freccia Indietro sopra la linea temporale per tornare alla scena 1, fotogramma 1.
-
Trascinate il componente SeekBar nello stage e posizionatelo nell'angolo in basso a destra dell'istanza FLVPlayback.
-
Nel pannello Libreria, fate doppio clic su SeekBar per aprirlo nello stage.
-
Modificatelo in scala del 400%.
-
Selezionate il contorno e impostate il colore su rosso (
#FF0000
).
-
Fate doppio clic su SeekBarProgress nella cartella Skins/Seek Bar di FLVPlayback e impostate il colore su giallo (
#FFFF00
).
-
Fate doppio clic su SeekBarHandle nella cartella Skins/Seek Bar di FLVPlayback e impostate il colore su rosso (
#FF0000
).
-
Fate clic sulla freccia Indietro sopra la linea temporale per tornare alla scena 1, fotogramma 1.
-
Selezionate l'istanza SeekBar sullo stage e assegnate il nome di istanza
my_seekbar
.
-
Nel pannello Azioni del fotogramma 1 della linea temporale aggiungete un'istruzione
import
per le classi video e assegnate i nomi del pulsante e della barra di ricerca alle proprietà FLVPlayback corrispondenti, come mostrato nel seguente esempio:
import fl.video.*;
my_FLVPlybk.stopButton = my_stopbttn;
my_FLVPlybk.playPauseButton = my_plypausbttn;
my_FLVPlybk.muteButton = my_mutebttn;
my_FLVPlybk.seekBar = my_seekbar;
-
Per verificare il filmato, premete Ctrl+Invio.
|
|
|
