Passando da Flash a HTML5

Nel novembre 2011, Adobe ha annunciato che avrebbe interrotto lo sviluppo del suo Flash Player per dispositivi mobili dopo il rilascio di Flash Player 11.1 per dispositivi Android e BlackBerry Playbook, optando invece per concentrarsi sugli strumenti per la creazione di applicazioni HTML5 per dispositivi mobili. Anche se Adobe ha ribadito il suo supporto di Flash Player per i browser dei personal computer, molti pensano che sia solo questione di tempo prima che Adobe interrompa anche il supporto per la versione per PC. Questa è una cattiva notizia per le aziende che sono fortemente investite in applicazioni Flash, nonché per gli sviluppatori che hanno investito tempo nell'acquisizione delle competenze di programmazione necessarie per creare applicazioni Flash.

Diamo un'occhiata ad alcune delle differenze tra Flash e HTML5 e forniamo alcuni suggerimenti e strumenti per facilitare la transizione tra queste due piattaforme.

Nozioni di base sulla piattaforma Flash

Flash viene spesso utilizzato come termine generico per fare riferimento a una piattaforma Adobe proprietaria che in realtà è costituita dai seguenti componenti:

• Flash: uno strumento utilizzato principalmente per progettare e creare animazioni
• Flex: l'ambiente di sviluppo utilizzato per creare applicazioni, incluso un kit di sviluppo software (SDK)
• MXML: linguaggio di markup utilizzato nei progetti Flash
• ActionScript: un linguaggio di scripting

Per eseguire un'applicazione Flash in un browser Web, è necessario scaricare il plug-in Flash Player. In alternativa, è possibile compilare un'applicazione Flash da eseguire nell'ambiente runtime desktop Adobe AIR. Ancora una volta, Adobe AIR deve essere installato sul computer dell'utente per poter eseguire un'applicazione AIR.

Flash utilizza i seguenti formati di file principali:

• .fla: file di progetto Flash
• .flv: file video Flash
• .swf: file dell'applicazione Flash / Flex compilato che può contenere file .flv

Nozioni di base sulla piattaforma HTML5

HTML5 è una piattaforma standard aperta che comprende:

• HTML5: linguaggio di markup utilizzato per creare pagine Web
• Cascading Style Sheets 3 (CSS3): linguaggio dei fogli di stile utilizzato per specificare la formattazione degli oggetti in una pagina Web HTML5
• API (Application Programming Interface): API per supportare funzionalità come il trascinamento della selezione e la messaggistica tra documenti
• JavaScript: linguaggio di scripting utilizzato con HTML5 per abilitare l'animazione

Uno dei vantaggi di HTML5 è che viene eseguito in modo nativo sui browser Web e non richiede un plug-in. Tuttavia, per funzionare correttamente, un browser deve supportare le funzionalità HTML5 e CSS3 per una pagina Web HTML5. I principali browser hanno diversi livelli di supporto per HTML5 e CSS3 e l'implementazione non è completa. JavaScript è quasi universalmente supportato dai browser; tuttavia, gli utenti hanno la possibilità di "disattivare" JavaScript, nel qual caso gli script lato client creati con JavaScript non vengono eseguiti.

I formati di file HTML5 includono quanto segue:

• .htm / .html: file della pagina Web HTML5
• .css: file di foglio di stile CSS3

A partire dal 2011, l'attuale specifica HTML5 non specifica i formati di file video supportati, lasciando ai singoli browser la scelta dei formati da supportare. I formati attualmente supportati includono:

• .mp4: file video MPEG 4 con codec video H.264 e codec audio AAC
• .webm: file video WebM con codec video VP8 e codec audio Vorbis
• .ogg: file video Ogg con codec video Theora e codec audio Vorbis

Conversione di progetti Flash in HTML5

La conversione manuale di un progetto Flash complesso in HTML5 è un processo che richiede molto tempo e lavoro, a causa delle differenze della piattaforma. Lo sviluppatore deve convertire le animazioni create con Flash e ActionScript in HTML5 e JavaScript. Fortunatamente, ci sono alcuni strumenti che aiutano ad automatizzare la conversione da Flash a HTML5.

Adobe ha rilasciato Wallaby, uno strumento sperimentale che può essere scaricato gratuitamente dal sito Web di Adobe Labs. Wallaby prende un file di progetto Flash (.fla) come input ed esporta HTML5 e supporta file CSS e JavaScript. Tuttavia, le note sulla versione di Wallaby contengono un elenco abbastanza lungo di funzioni che non vengono convertite, le più importanti delle quali sono ActionScript, i filmati e il suono. Wallaby è uno strumento limitato progettato principalmente per convertire contenuti grafici animati in HTML5, in modo che possa essere integrato in pagine Web utilizzando uno strumento di progettazione di pagine Web.

Google Labs ha rilasciato Swiffy, uno strumento gratuito basato sul Web che converte un file di un'applicazione Flash compilato (.swf) in HTML5. L'output può quindi essere incorporato in una pagina Web ma non è facile da modificare per uno sviluppatore. Come Wallaby, Swiffy non converte tutte le funzionalità di Flash. Swiffy supporta la conversione di ActionScript, ma solo la versione 2.0 (ActionScript è attualmente alla versione 3.0). L'output di Swiffy viene eseguito solo su browser che supportano la grafica vettoriale scalabile (SVG).

Edge, un nuovo strumento di sviluppo per HTML5

Man mano che HTML5 diventa la piattaforma preferita, stanno emergendo nuovi strumenti per fornire ambienti di progettazione e sviluppo che integrano HTML5, CSS3 e JavaScript.

Nell'agosto 2011, Adobe ha rilasciato una versione di anteprima dello strumento di sviluppo Edge. Edge consente a un designer di creare animazioni HTML5 e aggiungere animazioni a progetti HTML5 esistenti. I progettisti di Flash riconosceranno alcuni elementi familiari nell'interfaccia utente di Edge, tra cui lo stage, la finestra delle proprietà e la sequenza temporale dell'animazione. Edge, tuttavia, genera file CSS e JavaScript e il suo contenuto di animazione è archiviato in una struttura di dati JSON (JavaScript Object Notation).

Al momento della stesura di questo articolo, Edge ha anticipato la sua quarta versione di anteprima. Nuove funzionalità vengono aggiunte a ogni versione.

Conversione di YouTube in HTML5

Un segno del passaggio a HTML5 è che YouTube offre ora la possibilità di utilizzare un lettore video HTML5 per visualizzare i video.

Prima di offrire l'opzione HTML5, tutti i video di YouTube venivano consegnati tramite un lettore video Flash. Gli utenti potrebbero caricare file video in quasi tutti i formati e YouTube convertirà quindi ogni video nel formato Flash (.flv) richiesto.

YouTube ora sta anche codificando i video con il codec video H.264 e il formato WebM per la consegna HTML5. Per visualizzare i video in formato HTML5, è necessario disporre di un browser che supporti il ​​tag video HTML5 e un formato video utilizzato da YouTube.

The Legacy of Flash

Come notato in precedenza, Adobe sta continuando lo sviluppo della versione PC di Flash Player - per ora. Anche se Adobe smetterà di supportare Flash Player in futuro, le applicazioni Flash legacy continueranno a essere supportate sul Web, probabilmente per anni. Quindi, Flash non sparirà completamente in qualunque momento presto. Sono disponibili strumenti per convertire le applicazioni Flash in applicazioni HTML5, ma attualmente non supportano la conversione di tutte le funzionalità di Flash. Man mano che lo standard HTML5 diventa dominante, è probabile che gli strumenti di conversione dei file Flash diventino più sofisticati e che vengano creati nuovi strumenti per sviluppare contenuti con la piattaforma HTML5.