Passer du flash au html5

En novembre 2011, Adobe a annoncé qu'il arrêterait le développement de son lecteur Flash pour appareils mobiles après la sortie de Flash Player 11.1 pour les appareils Android et du BlackBerry Playbook, optant plutôt pour se concentrer sur les outils de création d'applications HTML5 pour les appareils mobiles. Même si Adobe a réitéré sa prise en charge de Flash Player pour les navigateurs d'ordinateurs personnels, beaucoup pensent que ce n'est qu'une question de temps avant qu'Adobe ne mette également fin à la prise en charge de la version PC. C'est une mauvaise nouvelle pour les entreprises qui sont fortement investies dans les applications Flash, ainsi que pour les développeurs qui ont investi du temps dans l'acquisition des compétences de programmation nécessaires pour créer des applications Flash.

Examinons certaines des différences entre Flash et HTML5 et fournissons quelques conseils et outils pour faciliter la transition entre ces deux plates-formes.

Principes de base de la plate-forme Flash

Flash est souvent utilisé comme un terme générique pour désigner une plate-forme Adobe propriétaire qui se compose en fait des composants suivants:

• Flash: un outil utilisé principalement pour concevoir et créer des animations
• Flex: l'environnement de développement utilisé pour créer des applications, y compris un kit de développement logiciel (SDK)
• MXML: langage de balisage utilisé dans les projets Flash
• ActionScript: un langage de script

Pour exécuter une application Flash dans un navigateur Web, le plug-in Flash Player doit être téléchargé. Comme alternative, une application Flash peut être compilée pour s'exécuter dans l'environnement d'exécution de bureau Adobe AIR. Encore une fois, Adobe AIR doit être installé sur l'ordinateur de l'utilisateur pour qu'une application AIR s'exécute.

Flash utilise les principaux formats de fichiers suivants:

• .fla: fichier de projet Flash
• .flv: fichier vidéo Flash
• .swf: fichier d'application Flash / Flex compilé pouvant contenir des fichiers .flv

Principes de base de la plateforme HTML5

HTML5 est une plateforme standard ouverte composée des éléments suivants:

• HTML5: langage de balisage utilisé pour créer des pages Web
• Feuilles de style en cascade 3 (CSS3): langage de feuille de style utilisé pour spécifier la mise en forme des objets sur une page Web HTML5
• Interfaces de programmation d'applications (API): API pour prendre en charge des fonctionnalités telles que la messagerie par glisser-déposer et la messagerie croisée
• JavaScript: langage de script utilisé avec HTML5 pour activer l'animation

L'un des avantages de HTML5 est qu'il fonctionne nativement sur les navigateurs Web et ne nécessite pas de plug-in. Cependant, pour fonctionner correctement, un navigateur doit prendre en charge les fonctionnalités HTML5 et CSS3 pour une page Web HTML5. Les principaux navigateurs ont différents niveaux de prise en charge pour HTML5 et CSS3, et l'implémentation n'est pas terminée. JavaScript est presque universellement pris en charge par les navigateurs; cependant, les utilisateurs ont la possibilité de «désactiver» JavaScript, auquel cas les scripts côté client créés avec JavaScript ne s'exécutent pas.

Les formats de fichiers HTML5 incluent les éléments suivants:

• .htm / .html: fichier de page Web HTML5
• .css: fichier de feuille de style CSS3

Depuis 2011, la spécification HTML5 actuelle ne spécifie pas les formats de fichiers vidéo pris en charge, laissant aux navigateurs individuels le choix des formats à prendre en charge. Les formats actuellement pris en charge sont les suivants:

• .mp4: fichier vidéo MPEG 4 avec codec vidéo H.264 et codec audio AAC
• .webm: fichier vidéo WebM avec codec vidéo VP8 et codec audio Vorbis
• .ogg: fichier vidéo Ogg avec codec vidéo Theora et codec audio Vorbis

Conversion de projets Flash en HTML5

La conversion manuelle d'un projet Flash complexe en HTML5 est un processus long et laborieux, en raison des différences de plate-forme. Le développeur doit convertir les animations créées avec Flash et ActionScript en HTML5 et JavaScript. Heureusement, il existe quelques outils qui permettent d'automatiser la conversion de Flash en HTML5.

Adobe a lancé Wallaby, un outil expérimental qui peut être téléchargé gratuitement sur le site Web d'Adobe Labs. Wallaby prend un fichier de projet Flash (.fla) en entrée et exporte HTML5 et prend en charge les fichiers CSS et JavaScript. Cependant, les notes de version de Wallaby contiennent une liste assez longue de fonctionnalités qui ne sont pas converties - les plus importantes étant ActionScript, les films et le son. Wallaby est un outil limité principalement conçu pour convertir du contenu graphique animé en HTML5, afin qu'il puisse être intégré dans des pages Web à l'aide d'un outil de conception de pages Web.

Google Labs a publié Swiffy, un outil Web gratuit qui convertit un fichier d'application Flash compilé (.swf) en HTML5. La sortie peut ensuite être incorporée dans une page Web mais n'est pas facile à modifier pour un développeur. Comme Wallaby, Swiffy ne convertit pas toutes les fonctionnalités Flash. Swiffy prend en charge la conversion ActionScript, mais uniquement la version 2.0 (ActionScript est actuellement à la version 3.0). La sortie Swiffy ne fonctionne que sur les navigateurs prenant en charge les graphiques vectoriels évolutifs (SVG).

Edge, un nouvel outil de développement pour HTML5

Alors que HTML5 devient la plateforme de choix, de nouveaux outils font leur apparition pour fournir des environnements de conception et de développement intégrant HTML5, CSS3 et JavaScript.

En août 2011, Adobe a publié une version préliminaire de l'outil de développement Edge. Edge permet à un concepteur de créer des animations HTML5 et d'ajouter des animations aux projets HTML5 existants. Les concepteurs de Flash reconnaîtront certains éléments familiers dans l'interface utilisateur d'Edge, notamment la scène, la fenêtre des propriétés et la chronologie de l'animation. Edge, cependant, génère des fichiers CSS et JavaScript, et son contenu d'animation est stocké dans une structure de données JSON (JavaScript Object Notation).

Au moment d'écrire ces lignes, Edge prévoyait sa quatrième version préliminaire. De nouvelles fonctionnalités sont ajoutées à chaque version.

Conversion de YouTube en HTML5

Un signe du passage au HTML5 est que YouTube offre désormais la possibilité d'utiliser un lecteur vidéo HTML5 pour visionner des vidéos.

Avant d'offrir l'option HTML5, toutes les vidéos YouTube étaient livrées via un lecteur vidéo Flash. Les utilisateurs pouvaient télécharger des fichiers vidéo dans presque tous les formats, et YouTube convertissait ensuite chaque vidéo au format Flash (.flv) requis.

YouTube encode désormais également des vidéos avec le codec vidéo H.264 et le format WebM pour la livraison HTML5. Pour visualiser des vidéos au format HTML5, vous devez disposer d'un navigateur prenant en charge la balise vidéo HTML5 et un format vidéo utilisé par YouTube.

L'héritage de Flash

Comme indiqué précédemment, Adobe poursuit le développement de la version PC de Flash Player - pour l'instant. Même si Adobe cesse de prendre en charge Flash Player à l'avenir, les applications Flash héritées continueront d'être prises en charge sur le Web - probablement pendant des années. Ainsi, Flash ne disparaîtra pas de sitôt. Des outils sont disponibles pour convertir des applications Flash en applications HTML5, mais actuellement, ces outils ne prennent pas en charge la conversion de toutes les fonctionnalités Flash. À mesure que la norme HTML5 devient dominante, il est probable que les outils de conversion de fichiers Flash deviendront plus sophistiqués et de nouveaux outils seront créés pour développer du contenu avec la plate-forme HTML5.