Fullscreen e ridimensionamento dei video con ActionScript 3

Quando si utilizzano file FLV, specialmente con il componente FLVPlayback, tipicamente ci si limita a ridimensionare il video in base al player, oppure al contrario portare il player alle dimensioni originali del file FLV. Nel primo caso, il filmato viene scalato in base alle dimensioni del player in maniera da mantenere le proporzioni, questo a seconda del video e del player utilizzato può dare origine a delle bande nere su alcuni lati del video.

Esistono tre diverse metodologie di ridimensionamento dei video:

L'opzione di default è MAINTAIN_ASPECT_RATIO, che permette di adattare il video a qualsiasi dimensione senza avere tagli o deformazioni.

Oltre che dal Component Inspector, queste proprietà sono accessibili tramite ActionScript e tutti e tre i valori sono relativi alla classe fl.video.VideoScaleMode, che dovremo quindi importare per utilizzare questi metodi di ridimensionamento.Tale classe è disponibile dal Flash Player 9.0.28 e risulta utilizzabile solo in ActionScript 3.

È possibile utilizzare queste modalità anche all'interno di player personalizzati creati tramite l'oggetto VideoPlayer. Attenzione, VideoPlayer e non Video: sebbene sia infatti possibile collegare entrambi i tipi di oggetto ad un flusso NetStream e creare un player personalizzato, l'oggetto Video non supporta le proprietà appena viste.

In questo articolo esamineremo l'utilizzo di queste proprietà con il componente FLVPlayback e con un oggetto di tipo VideoPlayer. Il procedimento è simile per i due metodi, seppur con alcune differenze nel codice e nelle opzioni a diposizione.

Modalità di ridimensionamento dei video con FLVPlayback

Per prima cosa creiamo un nuovo file Flash, quindi apriamo il pannello Components (Window > Components o Ctrl+F7) e trasciniamo un'istanza del componente FLVPlayback sullo stage, diamole quindi un nome istanza, ad esempio player.

Scegliamo a questo punto un video FLV da importare, possibilmente con una dimensione in pixel diversa da quella del player. Apriamo il pannello Component Inspector (Window > Component Inspector o Shift+F7) e impostiamo come source per il nostro FLVPlayback il video da utilizzare, togliendo la spunta all'opzione Match source dimensions.

Sempre nel Component Inspector possiamo selezionare la modalità di adattamento, impostata di default come già accennato su MantainAspectRatio.

Figura 1. Modalità di adattamento del filmato

Questo pannello ci consente quindi di impostare il metodo di adattamento e ridimensionamento che il filmato avrà appena avviato, ma vedremo come modificarlo dinamicamente durante l'esecuzione del filmato tramite ActionScript 3. Impostando infatti la proprietà solo dal pannello e senza sfruttare in seguito Actionscript, non sarebbe possibile variare la modalità di ridimensionamento del filmato in maniera dinamica.

Vediamo allora come agire sullo scaleMode del componente FLVPlayback: creeremo tre pulsanti che utilizzeremo per provare in runtime le diverse modalità della classe VideoScaleMode. Nel nostro esempio i pulsanti si richiamano rispettivamente exact, maintain e noscale, abbiamo inoltre inserito un pulsante cambia per passare da un video all'altro (noteremo come venga mantenuta l'impostazione di ridimensionamento scelta in precedenza, applicata però al nuovo video).

Di seguito vediamo un esempio di disposizione degli elementi appena descritti.

Figura 2. Struttura dell'esempio con FLVPlaback

Quello che vogliamo ottenere è un SWF con tutti i pulsanti per modificare il metodo di ridimensionamento o, nel caso di "Cambia video", il video attualmente in esecuzione. Scriviamo il codice:

// importiamo la classe VideoScaleMode
import fl.video.VideoScaleMode;

// impostiamo i listener per i pulsanti
exact.addEventListener(MouseEvent.CLICK,cliccato);
maintain.addEventListener(MouseEvent.CLICK,cliccato);
noscale.addEventListener(MouseEvent.CLICK,cliccato);
cambiavideo.addEventListener(MouseEvent.CLICK,cambia);

// in base al nome del pulsante impostiamo il corrispondente scaleMode
function cliccato(evt:MouseEvent)
{
  if(evt.target.name == "exact")
  {
    player.scaleMode = VideoScaleMode.EXACT_FIT;
  }
  else if(evt.target.name == "maintain")
  {
    player.scaleMode = VideoScaleMode.MAINTAIN_ASPECT_RATIO;
  }
  else
  {
    player.scaleMode = VideoScaleMode.NO_SCALE;
  }
}

// impostiamo la funzione per il cambio del video
function cambia(evt:MouseEvent)
{
  player.source = "Video2.flv"
}

Il codice è estremamente semplice, il componente FLVPlayback ha la proprietà scaleMode che ci permette di impostare il tipo di ridimensionamento che desideriamo. Teniamo presente che i valori EXACT_FIT, MAINTAIN_ASPECT_RATIO e NO_SCALE sono in pratica delle costanti che corrispondono alle stringe "exactFit", "maintainAspectRatio" e "noScale", avremmo potuto scrivere il codice della funzione cliccato anche in questo modo:

function cliccato(evt:MouseEvent)
{
  if(evt.target.name == "exact")
  {
    player.scaleMode = "exactFit";
  }
  else if(evt.target.name == "maintain")
  {
    player.scaleMode = "maintainAspectRatio";
  }
  else
  {
    player.scaleMode = "noScale";
  }
}

Senza la necessità di importare il package fl.video.VideoScaleMode.

In entrambi i modi, lanciando il filmato sperimentiamo che cliccando sui pulsanti cambia la modalità di visualizzazione del video; va prestata attenzione in particolare all'uso della modalità NO_SCALE, in questo caso infatti il video viene portato alle sue dimensioni originali e può quindi sforare (anche di molto) dallo spazio predisposto per il player, utilizziamo quindi questa modalità solo se abbiamo lo stage abbastanza libero oppure associando una maschera all'FLVPlayback (o se siamo sicuri che i video abbiano una dimensione che non supera quella del nostro player!).

Cambiare la modalità Fullscreen

Utilizzando il componente FLVPlayback, abbiamo un pulsante per mandare il video a schermo intero, in quel caso il video sarà espanso fino ad occupare tutto lo spazio disponibile, inoltre verrà sovrapposto a tutti gli altri elementi del filmato.

Figura 3. Fullscreen, dove i pulsanti "spariscono"

Possiamo verificare quest'ultimo punto posizionando degli elementi sopra al componente: nella visualizzazione "classica", rimarranno sopra al video, ma spariranno in modalitàfullscreen.

Figura 4. Visualizzazione normale, con i pulsanti sul video

Possiamo notare la differenza nelle figure: in figura 4 la visualizzazione è normale e i pulsanti sono posti sopra al video, in figura 3 la visualizzazione è in fullscreen e i pulsanti risultano assenti.

Questo è dovuto alla proprietà fullScreenTakeOver del componente FLVPlayback, che permette di ingrandire e mostrare solamente il player nella visualizzazione in fullscreen, portandolo in primo piano rispetto agli altri elementi (tornando alla visualizzazione normale, uscendo dal fullscreen, si tornerà alla situazione precedente); tale parametro di default è impostato su true, ma possiamo cambiarlo semplicemente così:

player.fullScreenTakeOver = false

In questo modo sarà portato a schermo intero tutto il nostro SWF e non solo il video. La differenza di larghezza nella pagina potrebbe non notarsi dato che lo sfondo è bianco, ma possiamo anche vedere come i pulsanti in questo caso siano rimasti al loro posto.

Figura 5. Fullscreen con fullScreenTakeOver impostata a "false"

Per ingrandire solo la parte che vogliamo (ad esempio il video) dovremo usare la proprietà fullScreenSourceRect, grazie a cui possiamo portare a schermo intero solo una porzione di filmato. In Actionscript 3 tale proprietà si può usare con la seguente sintassi:

stage.fullScreenSourceRect = new Rectangle(x,y,width,height);

Dove i parametri indicano rispettivamente le coordinate x ed y del margine superiore sinistro, la larghezza e l'altezza del rettangolo che vogliamo utilizzare come selezione degli elementi da portare in fullscreen.Ogni elemento che si trovi disposto nell'area delimitata dal rettangolo verrà mostrato a schermo intero, mentre gli elementi esterni a tale area saranno nascosti.

Utilizzo della classe VideoPlayer

Abbiamo visto come utilizzare il videoScaleMode su un componente FLVPlayback e le opzioni a disposizione per la modalità di riproduzione a schermo intero: vediamo cosa dovremmo cambiare se volessimo utilizzare un oggetto VideoPlayer, utile ad esempio nel caso in cui volessimo creare un nostro player personalizzato puttosto che basarci sull'FLVPlayback.

Il componente FLVPlayback in realtà è comunque necessario, dobbiamo infatti inserirne un'istanza almeno nella libreria del nostro fla per poter utilizzare la classe fl.video.VideoPlayer (di fatto anche l'FLVPlayback usa questo tipo di oggetto per riprodurre i video). A questo punto per creare il nostro player ci bastano poche righe di codice:

// importiamo la classe VideoPlayer
import fl.video.VideoPlayer;

// creiamo un player di 500x200 pixel
var player = new VideoPlayer(500,200);

// lo inseriamo nello stage
addChild(player);

// associamo un video al player
player.play("Video.flv");

Ovviamente in questo caso lanciando l'applicazionevedremo solo il video, senza alcuna skin o controllo di riproduzione.

Possiamo mantenere inalterata la parte di codice che si occupa di cambiare la modalità di adattamento del filmato, come per l'FLVPlayback infatti anche il VideoPlayer prevede la proprietà scaleMode e ne supporta i medesimi valori.

Abbiamo invece bisogno di una piccola modifica per la funzione cambia: il VideoPlayer infatti non prevede la proprietà source ma utilizza il comando play, perciò modifichiamo così funzione:

function cambia(evt:MouseEvent)
{
  player.play("Video2.flv");
}

Fullscreen con il VideoPlayer

Ovviamente non avendo a disposizione la skin del componente, non avremo nemmeno il pulsante per inviare il filmato a schermo intero e dovremo conseguentemente crearne uno. È interessante notare che il VideoPlayer non prevede la proprietà fullScreenTakeOver, sarà quindi necessario che la nostra funzione per la visualizzazione a schermo intero utilizzi il metodo visto precedentemente con il fullScreenSourceRect, ne consegue anche che qualora avessimo degli elementi posti sopra al video che volessimo nascondere nella visualizzazione a schermo intero dovremo renderli invisibli tramite ActionScript.

Un vantaggio che abbiamo usando il VideoPlayer (quindi con la possibilità di utilizzare dei controlli personalizzati) è ad esempio il potere utilizzare un set diverso di controlli nella visualizzazione a schermo intero rispetto a quelli utilizzati nella visualizzazione classica.