Tra le tante novità introdotte dalla Macromedia nella nuova versione di Flash MX 2004 Professional non poteva mancare quella legata ai contenuti video. Visto l'aumentare della banda nelle connessioni internet e la diffusione sempre più capillare del Flash Player per tutti i browser e le piattaforme più diffuse, vedere dei video con Flash diventa un'esperienza entusiasmante, semplice ed efficace ma soprattutto compatibile!
Nel passato i contenuti video sul web hanno spesso suscitato poco interesse perché portavano esperienze frustranti come ad esempio dover installare plug-in da 4MB (decisamente troppo pesanti per il nostro 56kb) ma allo stesso tempo troppo invadenti visto che la navigazione è di solito molto rapida e difficilmente un utente si sofferma ad installare un nuovo programma per poi dover riavviare il sistema. Dobbiamo fare in modo quindi che i contenuti video siano veicolati attraverso un player che tutti i browser hanno: ovvero Flash.
Il Flash player è molto leggero da scaricare e installare ed è presente su una percentuale altissima di computer; quale mezzo migliore!
Utilizzare Flash per inserire dei video diventa molto interessante e semplice e ci permette di rendere questi contenuti fruibili facilmente da un elevato numero di utenti. Esistono diversi modi per creare contenuti video: lo streaming e il download progressivo.
La tecnologia Streaming è alquanto complessa e di solito viene utilizzata da aziende specializzate nel settore in quanto necessita di risorse hardware e software particolari lato server. Nello streaming i contenuti vengono inviati all'utente in tempo reale in base alla richiesta. L'utente può andare avanti e indietro su un video in tempo reale in quanto il video viene inviato in streaming dal server. Quindi ad esempio se dobbiamo vedere un video che dura dieci minuti e vogliamo andare direttamente al quinto minuto possiamo farlo già da subito senza dover attendere il caricamento dei primi 5 minuti. In questo caso il file video non viene scaricato nella cache del computer.
Il download progressivo invece consiste nel vedere un video mentre questo viene scaricato progressivamente nella cache del nostro computer. Se il video ha una durata totale di dieci minuti e vogliamo andare da subito direttamente al quinto minuto non possiamo farlo, ma dobbiamo attendere che il caricamento del filmato sia superiore al quinto minuto stesso.
In questo tutorial prendiamo in considerazione la seconda tecnologia (download progressivo) che è sicuramente molto più semplice e meno onerosa.
Prima di iniziare consideriamo però il formato di Flash SWF. Un file SWF (chiamato anche filmato) può essere tranquillamente un video (ovvero una sequenza di JPG), e come sappiamo può essere visto in download progressivo mentre il filmato viene scaricato. La precedente versione di Flash MX (vers. 6) infatti supporta l'importazione dei video che poi possono essere esportati come SWF. Con Flash MX 2004 però è ora possibile manipolare direttamente dei video FLV ovvero il formato nativo per i video introdotto dalla Macromedia e creare delle applicazioni per mettere on line i nostri video senza troppi passaggi, inserendo anche delle slide e altri contenuti sincronizzati al video stesso.
Creiamo il nostro Video
Per prima cosa abbiamo bisogno di un video da pubblicare. In questo caso ho pensato ad un video didattico sulla chitarra, in quanto si presta bene a quello che è lo scopo di questo tutorial, ovvero creare dei contenuti video arricchiti e sincronizzati con altri contenuti che possono essere testi e/o foto anche animati (insomma delle slide).
Il formato di partenza del video è WMV (Windows Media Video), un formato molto utilizzato quando si fanno dei video importati dalla nostra Video Camera digitale. Una volta realizzato il video possiamo importarlo su Flash.
Apriamo il programma Flash MX 2004 e subito ci troviamo si fronte un pannello (vedi foto) che ci permette di accedere in modo rapido a quelli che sono i file aperti di recente, le varie tipologie di nuovi documenti e le varie tipologie di templates. Clicchiamo sotto Create New sulla voce Flash slide presentation. La stessa operazione può essere fatta dalla barra del menu principale File / New (Ctrl+N) selezionando poi Flash slide Presentation su General.
Abbiamo aperto un nuovo documento Flash (vedi foto) un po' diverso dai soliti, infatti possiamo notare che tra l'area degli strumenti e lo stage di lavoro abbiamo un'area con delle slide che hanno una struttura ad albero. In seguito vedremo qual è la funzione di questa area, per adesso andiamo su File / Import / Import to Library e selezioniamo il nostro file "mixolidio.wmv".
A questo punto si aprirà su Flash una finestra Video Import tipo questa (vedi foto). Selezioniamo Import the entire video (importa il video intero) e clicchiamo su Next (Avanti).
La seconda schermata (vedi foto) ci permette di settare sia il bit rate e la qualità (compressione) del nostro video in modo da ottimizzarlo in base alla connessione dell'utente (56kb, DSL etc etc) che le impostazioni avanzate del video. Se vogliamo apportare delle modifiche e utilizzare dei settaggi personalizzati possiamo cliccare su "Edit" per entrare nel rispettivo pannello delle impostazioni avanzate.
Nel caso delle impostazioni della compressione abbiamo questa schermata (vedi foto) mentre nel caso delle impostazioni video avanzate abbiamo questa altra schermata (vedi foto) dove possiamo scegliere se importare solo una determinata area del video, modificare la luminosità/contrasto etc etc.
Terminate le varie impostazioni e settaggi clicchiamo su Finish (Fine) e Flash MX 2004 inizierà ad importare il nostro Video. Terminata questa operazione possiamo aprire la libreria (F11) e vedere con immenso stupore che il video è stato importato correttamente. A questo punto dobbiamo creare il file video FLV (che come abbiamo detto prima è il formato nativo utilizzato da Macromedia Flash per i contenuti video) clicchiamo quindi col tasto destro del mouse sul file dentro la libreria mixolidio.wmv e selezioniamo Properties... (Proprietà).
Si aprirà questa finestrella (vedi foto) dove possiamo cliccare su Export, scegliamo quindi la cartella dove salvare il nostro file (l'estensione viene messa di default su FLV) e il nome da dargli.
Ecco come sarà il nostro file una volta salvato dentro una cartella
Abbiamo concluso il primo passo ovvero la creazione di un video FLV a partire da un video WMV. Nelle fasi successive passeremo alla creazione dell'applicazione vera e propria.
Creiamo l'applicazione che utilizza contenuti video FLV.
Andiamo sul primo fotogramma dopo aver selezionato la Prima slide Presentation. Se vogliamo possiamo anche cambiare il nome a questa slide facendo un doppio click sul nome. Osserviamo sulla destra se tra i pannelli si trova già il pannello Components se questo non dovesse esserci andiamo sul menu principale del programma alla voce Window / Development Panels / Components. Lo stesso procedimento vale per il pannello Component Inspector Window / Development Panels / Component Inspector. Adesso abbiamo sulla nostra destra i due pannelli, apriamo il pannello Components e sotto il gruppo Media Components selezioniamo e trasciniamo sullo Stage il componente Media Display.
Una volta posizionato sullo stage diamo un nome all'istanza (ad esempio video_mc) dal pannello Properties. Allo stesso modo sempre sotto il gruppo Media Components selezioniamo e trasciniamo sullo stage il componente MediaController, posizionandolo sotto video_mc. Selezioniamo sullo stage questo oggetto e diamo un nome all'istanza ad esempio controller_mc e sempre sul pannello Properties andiamo sui parametri del componente settando ControllerPolicy su On. Con Flash MX 2004 possiamo accedere alle proprietà e parametri dei componenti direttamente dal pannello Component Inspector che abbiamo aperto prima.
Adesso selezioniamo sullo stage video_mc e apriamo proprio il Component Inspector sul pannello Parameters. Di default abbiamo spuntata la voce FLV, impostiamo poi la durata del nostro video (basta guardare il videoWMV per sapere qual'è) impostiamo quanti fotogrammi al secondo (FPS) e su URL scriviamo il nome del nostro file video FLV (che come abbiamo detto prima è mixolidio.flv). Di default abbiamo poi spuntate le voci Automatically Play e Use Preferred Media Size (ovvero utilizza le dimensioni originali del video) (vedi foto).
Da notare che su URL possiamo inserire anche un indirizzo web assoluto tipo http://www.sito.com/video.flv anche se poi il filmato andrà messo su un altro server ad un altro indirizzo http. Inoltre notiamo che FPS ci permette di settare il numero di fotogrammi per secondo del video indipendentemente dalla frequenza impostata per il nostro filmato SWF. Possiamo quindi ad esempio caricare un video FLV che ha 30 fotogrammi al secondo sul nostro filmato SWF impostato su 12 fotogrammi al secondo senza alcun conflitto nella velocità di riproduzione.
Sulla parte bassa del Component Inspector abbiamo un + (più) e un - (meno) che servono per aggiungere/eliminare dei punti di sincronizzazione tra il video e le slide. Clicchiamo su + e aggiungiamo 6 caselle che corrisponderanno alle nostre slide. Chiamiamo le slide slide1, slide2....slide6 e per ognuna di esse settiamo il tempo esatto in cui devono apparire.
Fatto questo apriamo il pannello Behaviors (dovrebbe essere già aperto, altrimenti andiamo su Window / Development Panels / Behaviors) e, accertandoci che video_mc sullo stage sia selezionato, clicchiamo sul + (più) e scegliamo Media / Associate Controller.
Selezioniamo quindi il controller_mc e clicchiamo su OK (vedi foto). Su Behaviors apparirà un evento. Una volta fatto questo possiamo anche salvare il nostro documento Flash e mandare in esecuzione il nostro filmato per vedere il video.
Sincronizziamo le slide al contenuto Video.
Adesso passiamo al contenuto delle slide. Selezioniamo la slide1 sulla sinistra dello Stage. Come possiamo notare sul pannello Properties abbiamo una serie di proprietà che possiamo settare in base alle nostre esigenze. Per quello che andiamo a realizzare adesso possiamo lasciare le impostazioni di default. Il nostro scopo è quello di inserire in determinati punti del video un'immagine che ci mostra quelle che sono le note e la diteggiatura sul manico della chitarra in modo da capire meglio quello che il chitarrista sul video sta suonando.
Prendiamo quindi la nostra immagine importandola come sempre (File / Import / Import to stage) e posizioniamola sul primo fotogramma della slide1 in una posizione che non vada a sovrapporsi all'area del video. In effetti il funzionamento delle slide è proprio come il funzionamento dei livelli, quindi dobbiamo prestare attenzione a non creare sovrapposizioni indesiderate.
Per aggiungere un'altra slide clicchiamo col tasto destro sulla slide1 o su presentation (il nodo radice) e selezioniamo Insert Screen Type / Slide e apparirà una nuova slide (slide2). Anche in questo caso importiamo la nostra immagine e posizioniamola sullo stage dove vogliamo.
Ripetiamo questa operazione inserendo tutte le slide che desideriamo.
Dopo aver creato le varie slide dobbiamo fare in modo che queste vengano sincronizzate al video in base ai tempi che abbiamo precedentemente settato nei parametri di video_mc dal Component Inspector. Per fare questo selezioniamo video_mc sullo stage e apriamo il panello Behaviors, clicchiamo sul + (più) e scegliamo Media / Slide CuePoint Navigation. Selezioniamo il nodo radice (ovvero "presentation") e clicchiamo OK. Su Behaviors apparirà un'altro evento.
Mandiamo in esecuzione il filmato e osserviamo come le slide vengono cambiate durante l'esecuzione del video sincronizzandosi perfettamente in base ai tempi che abbiamo precedentemente impostato.
Aggiungere effetti alle slide.
Possiamo anche aggiungere degli effetti preimpostati alle nostre slide sfruttando una novità di Flash MX 2004. Per fare questo dobbiamo selezionare la slide alla quale vogliamo aggiungere un effetto e andare sul pannello Behaviors, clicchiamo sul + (più) e scegliamo Screen / Transition (vedi foto).
Possiamo scegliere tra 10 effetti preimpostati e senza scrivere una riga di codice modificare le varie impostazioni per pesonalizzare l'effetto che vogliamo ottenere.
Per ogni effetto abbiamo inoltre un'anteprima in tempo reale in base ai parametri che impostiamo.
Ora potete vedere il risultato finale del nostro video e scaricare il
