Visualizzare Video FLV Con Flashlite 3.0

Inserito da fbiondi il Gio, 03/04/2008 - 16:49

Immagini

Immagine 1 Immagine 2 Immagine 3 Immagine 4

Con le precedenti versioni di FlashLite (1.* e 2.*) la visualizzazione di filmati all’interno di un’applicazione mobile era limitata ai formati supportati dal telefonino in cui veniva utilizzata e non era possibile, inoltre, effettuare semplici operazioni sui video come la rotazione, l’applicazione di maschere o, tra le tante altre funzionalità interattive “essenziali”, il controllo dinamico del volume. È facile comprendere, quindi, come il supporto ai video FLV sia una delle features più attese nella release 3 di FlashLite e, anche se il software è ancora in versione beta (già disponibile sul sito di Adobe Lab) i test che abbiamo effettuato hanno avuto esito positivo e hanno confermato una certa stabilità e maturità del prodotto.

In questo articolo spiegheremo come realizzare un semplice player per visualizzare un filmato in formato FLV con la tecnica del “progressive download”, sia in locale sia in remoto, memorizzato direttamente sul telefonino o reso accessibile tramite un servizio di hosting remoto tradizionale. Con una tecnica analoga (che sarà trattata in un successivo articolo) è inoltre possibile visualizzare video in streaming, anche in tempo reale, sfruttando le potenzialità del nuovo Flash Media Server 3. Per realizzare il nostro video player sarà sufficiente attraversare pochi e semplici passi:

1) Innanzitutto è necessario scaricare dal sito Adobe Lab l’ultima versione del player FlashLite 3, attualmente certificato per essere installato solo su dispositivi Nokia N95, ma che dovrebbe funzionare anche su tutti i Nokia S60 3rd edition tra cui i modelli: 3250, 5500 Sport, 5700, 6110 Navigator, 6120 Classic, 6121 Classic, 6290, E50, E51, E60, E61, E61i, E62, E65, E70, E90, N71, N73, N73 Music Edition, N75, N76, N77, N80, N80 IE, N81, N81 8GB, N82, N91, N91 8GB, N92, N93, N93i, N95, N95 US 3G, N95 8GB. I test di questo articolo sono stati effettuati su un Nokia E65, sfruttando la modalità di collegamento Wi-Fi per effettuare i test in remoto.

2) Per creare l’applicazione occorre utilizzare Adobe Flash CS3, e per l’occasione dovrà essere installato anche l’ultimo aggiornamento disponibile sul sito Adobe, attualmente la 9.02 (marzo 2008). Tra le novità introdotte da questo aggiornamento vi è, appunto, l’estensione del supporto alla versione 3 di FlashLite.

3) A questo punto, con tutti gli strumenti a disposizione, si deve creare un nuovo documento Flash File (mobile) settando la proprietà Player Version in Flash Lite 3.0 di Adobe Device Center CS3. Selezionate il dispositivo per il quale volete sviluppare il video player, scegliendo l’opportuna risoluzione. Nel mio caso, disponendo di un Nokia E65, ho selezionato il device FlashLite 3.0 240x320px 16. (Immagine 1)

4) Create ora quattro livelli distinti:

- As: dove inserire il codice utile al funzionamento del player
- Video: che contiene l’oggetto video nel quale verrà visualizzato il filmato FLV
- Testi: con tutte le descrizioni inserite nell’applicazione (ovvero dei campi di testo statici)
- BackGround: che contiene le bande grigie situate sotto i testi ed eventuali altri elementi grafici (Immagine 2)

COME CREARE UN NUOVO OGGETTO VIDEO: Per creare un nuovo oggetto video è necessario aprire il menu della libreria, selezionare l’opzione New Video, e trascinare l’oggetto sullo Stage, posizionandolo alle coordinate (x: 0, y:100) e settando una dimensione adatta a visualizzare i video che andrete a proporre. Nel mio caso 240 x 129 pixel, visto che il video che ho usato in questo esempio ha tali dimensioni.

5) Dal punto di vista dell’interfaccia di interazione, tramite il nostro player l’utente potrà avviare un video cliccando sul tasto SOFT KEY 1 (vedi immagine seguente) e uscire dall’applicazione premente il tasto SOFT KEY2. (Immagine 3)
Copiate quindi il seguente codice ActionScript 2.0 all’interno del livello AS e testate l’applicazione premendo CTRL+ENTER, avviando automaticamente il DEVICE CENTRAL.
Lo script è spiegato passo-passo attraverso commenti posizionati in ogni punto del codice.

  1. // =========================================================
  2. // FS Commands 
  3. // ========================================================= 
  4. // Abilitiamo l’utilizzo delle SOFT Keys 
  5. fscommand2(“SetSoftKeys”, “”, “Exit”); 
  6. // Qualità Alta 
  7. fscommand2(“SetQuality”, “high”); 
  8. // Modalità FullScreen Attivata 
  9. fscommand2(“Fullscreen”, “true”); 
  10. // ========================================================= 
  11. // Dichiarazione variabili 
  12. // ========================================================= 
  13. // Path filmato FLV Locale: 
  14. var videos:String = “divani&divani_spot_S60.flv”; 
  15. // Path filmato FLV Remoto: 
  16. // var videos:String = “http://augitaly.fabiobiondi.com/UM/4_FLite3Video/divani&divani_spot_S60. flv”; 
  17. // NetConnection 
  18. var nc:NetConnection; 
  19. // Flusso stream var ns:NetStream; 
  20. // ========================================================= 
  21. // Gestione pressione Tasti 
  22. // ========================================================= 
  23. var tmpObj:Object = {}; 
  24. tmpObj.onKeyDown = function():Void { 
  25. switch(Key.getCode()) { 
  26. // SOFT KEY SINISTRA 
  27. // == > Play Video
  28. // =========================================================
  29. // FS Commands 
  30. // ========================================================= 
  31. // Abilitiamo l’utilizzo delle SOFT Keys 
  32. fscommand2(“SetSoftKeys”, “”, “Exit”); 
  33. // Qualità Alta 
  34. fscommand2(“SetQuality”, “high”); 
  35. // Modalità FullScreen Attivata 
  36. fscommand2(“Fullscreen”, “true”); 
  37. // ========================================================= 
  38. // Dichiarazione variabili 
  39. // ========================================================= 
  40. // Path filmato FLV Locale: 
  41. var videos:String = “divani&divani_spot_S60.flv”; 
  42. // Path filmato FLV Remoto: 
  43. // var videos:String = “http://augitaly.fabiobiondi.com/UM/4_FLite3Video/divani&divani_spot_S60. flv”; 
  44. // NetConnection 
  45. var nc:NetConnection; 
  46. // Flusso stream 
  47. var ns:NetStream; 
  48. // ========================================================= 
  49. // Gestione pressione Tasti 
  50. // ========================================================= 
  51. var tmpObj:Object = {}; 
  52. tmpObj.onKeyDown = function():Void { 
  53. switch(Key.getCode()) { 
  54. // SOFT KEY SINISTRA 
  55. // == > Play Video
  56. case ExtendedKey.SOFT1: 
  57. playVideo(videos); break; 
  58. // SOFT KEY DESTRA 
  59. // == > Chiudi l’applicazione 
  60. case ExtendedKey.SOFT2: fscommand2(“Quit”); 
  61. break; 
  62. } 
  63. }; 
  64.  
  65. Key.addListener(tmpObj); 
  66. // ========================================================= 
  67. // Visualizzazione del Video .flv 
  68. // ========================================================= function playVideo(file:String):Void { 
  69. // Creiamo una nuova connessione NetConnection (solo la prima volta) 
  70. if (!nc) { 
  71. nc = new NetConnection(); 
  72. nc.connect(null); 
  73. } 
  74. // Creiamo un nuovo flusso Stream (solo la prima volta) if (!ns) ns = new NetStream(nc); 
  75. // Abbiniamo il flusso stream all’oggetto video presente su Stage video_obj.attachVideo(ns); 
  76. // Play File ns.play(file); 
  77. } 
  78. stop();

Per visualizzare video FLV posizionati su server remoti, eliminate il commento alla riga precedente, e abilitate l’opzione “Local playback security” in “Access network only”, che trovate in fondo nelle impostazioni di pubblicazione (File -> Publish settings). (Immagine 4)
Per completare questa guida, riporto qui di seguito i collegamenti per scaricare i file sorgenti e un video di prova.

• Download Source .fla su http://augitaly.fabiobiondi.com/UM/4_FLite3Video/Sources.zip
• Download Video Sample .flv su http://augitaly.fabiobiondi.com/UM/4_FLite3Video/divani&divani_spot_S60....