Beat Fly Blog

Dopo un po di attesa eccomi oggi a presentare un breve tutorial su come realizzare in Adobe Flash CS3 un Video Player personalizzato per video .FLV in streaming. Lo scopo del tutorial è quello di vedere come aggiungere componenti gia pronti al nostro player e riprodurre, con l’aggiunta di poche righe di codice il nostro video.

Per questo esempio utilizzerò il nostro video di elements01.net dunque, avendo il progetto una risoluzione televisiva PAL setteremo lo stage di Flash a 720×576 px e il framerate a 25. Questa è la grandezza dello stage che conterrà il nostro video, ma siccome dovremmo aggiungere i vari controllers al player alzeremo l’altezza a 600px. Il tutorial si basa su alcuni componenti base del player e non utilizza una grafica come contorno; questo perchè voglio lasciare e voi la creatività di rendere il tutto più personalizzato. Di seguito il primo passo:

Una volta settato lo stage, iniziamo dal pannello Components a trascinare sul nostro canvas i componenti che vogliamo utilizzare e instanziamoli nel pannello Proprietà; questo sarà fondamentale al fine di fare riferimento al nome di istanza via AS 3. Di seguito lo screenshot:

A questo punto, una volta allineati e posizionati i vari componenti, possiamo settare nel pannello Propietà ulteriori parametri dando anche il Path del nostro video .FLV Importante sarà anche spuntare la casella di Adatta a dimensioni FLV originali al fine di mantenere il filmato originale ben definito senza alcuna scalatura. Di seguito l’immagine:

A questo punto aggiungiamo un nuovo livello e chiamiamolo Actions dove inseriremo il nostro codice AS. Quello che facciamo non è altro che dichiarare i nostri componenti instanziati e il gioco e fatto. A questo punto provate il filmato e il tutto dvrebbe funzionare.

In questo tutorial ho volutamente omesso alcuni componenti come lo Stop, Avanti e Indietro al fine di focalizzarmi sul nuovo Component Full Screen proprio di Flash CS3. Il medesimo infatti, una volta instanziato e richiamato in AS svolgerà per noi il compito di permetterci la visualizzazione del video a tutto schermo. Per ottenere tutto ciò dovremmo, nel pannello Proprietà selezionare come esportazione anche il formato HTML e nel relativo Tab selezionare la voce Solo Flash – Consenti schermo intero. Il programma provvederà ad esportae nella cartella del progetto un file .JS contenente oltre che alcune funzione per Explorer 6 ed altro, anche il codice per permettere la visualizzazione nel Browser del Full Screen. Di seguito lo screenshot dell’esportazione e del prodotto finale. Buon lavoro.