Convertir le SWF en HTML5 à l’aide de Google Swiffy

Article sur Google Swiffy

Sorti le 28 Juin 2011, Swiffy est un outil de conversion édité par Pieter Senster, stagiaire en ingénierie américain chez Google. Le géant de Mountain View a donné les outils nécessaires à cet ingénieur pour proposer une solution radicale à la problématique suivante : “Comment rendre lisible des animations Flash sur des appareils qui ne le prennent pas en charge”.

En effet, même si pour l’heure une grande majorité de constructeurs intègre le plugin nécessaire à la bonne lecture de tels fichiers, il subsiste quelques exceptions, qui pour certaines sont d’envergure, comme iOS.

Le stagiaire à donc développé un outil permettant de convertir les fichiers SWF en HTML5, et le tout le plus simplement du monde.

Comment Swiffy fonctionne-t-il ?

Swiffy convertit donc le fichier SWF en une page HTML, contenant la signature quasi-parfaite du fichier en tant qu’objet JSON. Cette page HTML utilise une librairie JavaScript du nom de Swiffy Runtime pour reproduire les animations en utilisant principalement le format SVG (Scalable Vector Graphics).

L’objet JSON initialement créé contient également les codes ActionScript compilés qui sont exécuté en JavaScript via le navigateur.

Compatibilité et caractéristiques

Voici un tableau référençant les différents composants d’un fichier Flash et leur niveau de prise en charge par Swiffy.

Caracteristiques, compatibilités Swiffy
Notez que les navigateurs présents dans ce tableau prennent en charge l’HTML5 généré.

Méthodes de conversions

Plugin de Flash Profesionnel

Capture d'écran de la barre d'outil du logiciel Flash
Convertissez votre fichier SWF directement via la barre d’outils de Flash Profesionnel

Vous avez la possibilité de télécharger l’extension : Swiffy Extension for Flash Professional et de l’installer à l’aide d’Adobe Extension Manager.

Directement sur le site de Swiffy

Google Swiffy en cours de conversion d'un fichier Flash
Rendez-vous sur Google Swiffy et sélectionnez simplement votre animation Flash, ne devant pas excéder 1024 KB.

Une fois le tout converti, vous pouvez constater le rendu final du fichier HTML, que vous pourrez d’ailleurs comparer avec le rendu du fichier Flash d’origine :

Pré-rendu du fichier initial et du fichier généré
Vous remarquerez que le poids final du fichier HTML est légèrement inférieur au poids du fichier Flash. Toutefois, ce cas ne doit pas être généralisé. En effet, du fait qu’il faille importer la librairie Swiffy Runtime, et notamment dans le cas d’animations complexes (SVG en grand nombre), le poids final sera beaucoup plus important. La qualité d’animation est quant à elle identique, ou un tantinet plus saccadée, mais ça fonctionne et c’est bluffant !

Un lien est également généré vers une page contenant uniquement votre animation (cette page à une durée limitée de 15 minutes).

Toolkit for CreateJS une alternative à Google Swiffy

Alors que Swiffy travaille sur le bytecode (SWF), le plugin Flash proposé par Adobe se concentre quant-à-lui sur les sources (FLA). Nous retrouvons un algorithme basé sur une solution open source plus connu sous le nom de CreateJS.

Nous n’avons pas pu tester l’outil mais nous pouvons affirmer par le biais de sources fiables qu’il fait au moins aussi bien que Swiffy. Il intègre également une liste de plugins nécessaires pour la bonne gestion du fichier Flash. Parmi eux, on retrouve TweenJS qui gère les transitions et la chronologie des animations Flash. Mais aussi EaselJS pour les formes et canvas issus de Flash Professionnel, et enfin SoundJS pour les fichiers audio et leur lecture.

Quelques fonctionnalités plus avancées de Flash ne seront pas prise en compte tout comme avec Swiffy, comme des effets de masques spéciaux, les fonctions d’easing custom ou les courbes de déplacement.


Vidéo de démonstration de l’outil par AdobeTV. Pour les plus francophones d’entre-vous, nous vous suggérons d’utiliser le système de sous-titrage de YouTube

Conclusion

A première vue, de tels outils semblaient sonner le glas de la plupart des problèmes de compatibilité avec la technologie Flash. Une véritable révolution dans le monde du webdesign. Cependant, le facteur “poids” étant primordial dans la réduction du temps de chargement, il l’est d’autant plus lorsqu’on parle de navigation mobile.

Les terminaux mobiles disposent d’une bande passante faisant l’objet de perpétuelles fluctuations. Difficile encore aujourd’hui d’avoir un débit satisfaisant de façon constante. Les contenus multimédias ne doivent donc en aucun cas être trop lourds, sous peine de voir les visiteurs abandonner leur requête avant d’avoir téléchargé le contenu de la page.

Il serait sans doute plus sage de ne pas utiliser ces outils pour les contenus multimédias de type marketing et commerce (accessoirement vous épargnerez un peu plus nos mobiles et tablettes de la publicité) et de se contenter de convertir des fichiers beaucoup plus complexes, mention spéciale aux sites web full Flash.

Un outil qui a donc de beaux jours devant lui, mais qui nécessite d’être optimisé. Étant donné qu’il s’agit d’une version BETA, tout porte à croire que des améliorations seront effectuées de ce côté-là. Pour l’heure, utilisez-le avec parcimonie.

Convertir le SWF en HTML5 à l'aide de Google Swiffy, 4.0 out of 5 based on 1 rating

Commentaires

#1
Bozar

Excellent article ! Merci pour toutes ces infos !

#2
phil

J’ai acheté CS6 pour pouvoir créer des animations ET les convertir en HTML5 de manière à proposer à mes étudiants deux versions et couvrir ainsi tous les cas de diffusion (ou presque).
Or aujourd’hui après avoir pas mal travaillé dessus, ni la solution Swiffy ni la solution createjs ne me donnent un résultat correct. Je suis désespéré. Que faire?
je travail sous windows8 , flashccs6…

Kévin Pinto

Bonjour phil,

Tout dépend de la complexité de votre fichier de travail. Si votre flash contient beaucoup d’action script, ces outils peinent souvent à les convertir convenablement.
Rome ne s’est pas faite en un jour, et je pense qu’il nous faille prendre notre mal en patience pour laisser les outils évoluer.

A titre d’information, l’HTML5 n’en est qu’à ses prémices et ne sera finalisé qu’au cours du dernier trimestre 2014 où il continuera d’évoluer (5.1 – 2016…), il n’est pas impossible que les choses aient évolués de ce côté là.

Pour l’heure si le résultat ne vous satisfait pas, soumettez vous simplement à leurs caprices et proposez des animations plus “simplistes” à vos étudiants en leur expliquant que cette technique de conversion a ses limites.

Pour finir n’oubliez pas la documentation qui vous apportera surement des éléments de réponse.

Réagissez à cet article

Données obligatoires