Des animations Flash compatibles smartphones / iOs avec Swiffy

Développé par Google, l’extension Swiffy permet, à partir de Flash, d’exporter des animations Flash sous forme de code javascript (balise CANVAS), lisibles sur smartphone ou tablettes. Comme vous pouvez le voir dans l’animation ci-dessous, Swiffy permet de réaliser des cinématiques complexes et subtiles, avec la prise en compte des alpha, du easing (accélérations) et en proposant un rendu vectoriel SVG (ou bitmap). Ces animations peuvent ensuite s’intégrer facilement dans des pages HTML en intégrant le code généré par l’extension (div ou iframe). Elles s’affichent remarquablement bien sur iPhone & iPad, Androïd !

L’animation ci-dessous, qui ressemble à s’y méprendre à une animation Flash, est en fait une balise HTML Canvas alimentée par javascript. Le code de l’iframe est simplement copié-collé dans l’éditeur de texte de WordPress :

A ce jour, Swiffy intègre de nombreuses fonctionnalités Flash, avec les fonctions essentielles d’actionscript, la possibilité d’insérer un clickTag (compagnes publicitaires) ou même de charger d’autres animations externes (plus complexe). Néanmoins, c’est sur l’aspect « animation » que Swiffy se montre le plus efficace et potentiellement utile.

Il est possible que, pour des raisons de conception technique  ou simplement de maîtrise des coûts de développement, l’animation Swiffy soit difficile à intégrer directement dans la page d’accueil. Il est alors possible de l’intégrer facilement dans une lightbox (appelant une iframe) ou une page tunnel. Javascript et jQuery permettront d’assurer le comportement responsive.

Mais à quoi cela pourra t-il bien servir ?

A animer sa page d’accueil ou une landing page qui présenterait un produit, une carte de vœux, un événement, une nouveauté, des fonctionnalités nouvelles du site. Swiffy offre un rendu de très belle qualité avec des formats vectoriels assez légers.

Les animations Swiffy sont compatibles avec Internet Explorer 9+, Chrome 22+, Firefox 15+, Safari 6+, Mobile Safari (iOs 5), Androïd Browser (4.0.3), Opera 12.

Certaines fonctions comme la sonorisation ou les filtres Flash (ombre, flou, rayonnement) ou mode de fusion sont encore mal supportées, tout particulièrement sur smartphones. Voir les fonctions AS3 supportées par Swiffy : www.google.com/…/swiffy/actionscript3.html

En terme de poids de chargement, l’animation ci-dessus requiert un fichier Javascript de 33ko (fichier contenant l’animation) ainsi que la mise en cache de trois bibliothèques CreateJS.

Toutes les infos sur Swiffy : www.google.com/…/swiffy/

Tags | Animation, Évolution, Flash