Convertir du Flash (SWF) en HTML5 avec Swiffy

 Astuce par Simon-K (Art Director & Creative Designer, Strasbourg)Créé le 05 Août 2013 (14362 lectures) Tags : flash, 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.Faisons un essai avec un fichier relativement classique.L'animation boucleAu survol, l'animation réagitAu clic égalementIl y a différents effets (opacité, flou de mouvement..)Poids : 33.3 KoNon libre de droitsUne animation Flash des plus simples, vous en conviendrezSwiffy propose une extension à télécharger.Direction la page de téléchargement : Swiffy Extension for Flash ProfessionalInstallez l'extension en utilisant Adobe Extension ManagerL'extension est directement utilisable dans FlashAllez sur le site de l'extension : Google SwiffyUploadez votre fichier SWF (1 Mo maximum) si vous possédez les autorisations nécessairesUn aperçu avant / après vous est directement proposé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...".DemoLa qualité est sensiblement la mêmeLes effets sont respectésLes évènements souris sont préservésCela fonctionne partout, même sur mobile(ici sur un iPhone 3GS doté d'IOS6 et un Samsung Wave sous BADA 2.0)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."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é.