Astuce : Convertir du Flash (SWF) en HTML5 avec Swiffy

Qu'on l'aime ou non, la technologie Flash existe encore et aucune date d'enterrement n'est prévue par Adobe. Utilisé à bon escient, il est toujours possible d'en avoir plein les mirettes avec des animations sexy. Pourtant, une difficulté voit le jour : plusieurs plate-formes ne supportent pas l'installation du plug-in Flash. Alors, pourrait-on rendre ces animations HTML5 friendly ? C'est ce que nous propose Google avec Swiffy !

Cet outil est destiné à convertir le contenu Flash (SWF) en code HTML5, ce qui permet de le faire fonctionner sur des supports qui, à la base, ne supportent pas Flash comme les mobiles et tablettes (Android, iOS...). Théoriquement, cela devrait fonctionner sur toutes les plates-formes grâce aux standards.

Test en situation réelle

Faisons un essai avec un fichier relativement classique.

• L'animation boucle
• Au survol, l'animation réagit
• Au clic également
• Il y a différents effets (opacité, flou de mouvement..)
• Poids : 33.3 Ko
• Non libre de droits

Une animation Flash des plus simples, vous en conviendrez

Choix de la méthode de conversion

L'extension pour le logiciel Flash

Swiffy propose une extension à télécharger.

1. Direction la page de téléchargement : Swiffy Extension for Flash Professional
2. Installez l'extension en utilisant Adobe Extension Manager
3. L'extension est directement utilisable dans Flash

Uploader un fichier SWF sur le site

1. Allez sur le site de l'extension : Google Swiffy
2. Uploadez votre fichier SWF (1 Mo maximum) si vous possédez les autorisations nécessaires
3. Un aperçu avant / après vous est directement proposé

Résultat du test

Après avoir utilisé la seconde méthode voici ce que nous obtenons :

D'un côté nous avons l'animation originale au format Flash de l'autre le résultat de la conversion. Il faut dire que cela fonctionne plutôt bien. Il suffit alors simplement de récupérer la page HTML générée en faisant un clic droit "enregistrer la cible du lien sous...".

Demo

Avantages

• La qualité est sensiblement la même
• Les effets sont respectés
• Les évènements souris sont préservés
• Cela fonctionne partout, même sur mobile
  (ici sur un iPhone 3GS doté d'IOS6 et un Samsung Wave sous BADA 2.0)

Inconvénients

• C'est un peu moins fluide
• ... Et surtout le poids ! Il faut au préalable charger un fichier JavaScript (runtime.js) qui contient des instructions de base au framework Swiffy et qui à lui seul pèse 250 Ko. Le code de l'animation elle-même (hors framework) monte à 50 Ko (consultez le code source de la démonstration), ce qui nous fait un total de 300 Ko.

Conclusion

"Google Swiffy" fonctionne bien ! Même très bien pour notre animation. Hélas les 250 Ko du script de base plus les 50 Ko de l'animation sont dissuasifs face aux 33 Ko du fichier SWF (Flash). Utiliser cet outil pour simplement remplacer une petite animation Flash n'est donc pas la bonne solution, surtout sur mobile lorsque la bande passante est limitée. Peut être qu'avec des animations plus conséquentes, et sans autre alternative réelle, le jeu en vaut-il plus la chandelle ?

Nous manquons toujours d'outils performants et agréables à utiliser pour générer des animations à la manière de l'environnement Flash qui est très pratique, sans devoir écrire de ligne de code complexe pour définir des paramètres d'animation et importer de multiples ressources. Adobe a bien lancé Edge Animate qui ressemble de près à l'IDE Flash mais les fichiers produits restent tout autant lourds à exploiter. Les techniques Canvas et SVG ont encore quelques progrès à faire au niveau de la génération du code nécessaire et du support par les navigateurs notamment pour ce qui concerne SVG animé.