Mise à jour : cet article a été publié initialement en 2011, à une époque où Flash, Silverlight et les premières solutions d’animation HTML5 coexistaient encore. Le paysage technologique a depuis profondément évolué. Flash Player et Silverlight ont atteint leur fin de vie, tandis que HTML, CSS et JavaScript se sont imposés comme les standards natifs du web. Nous avons conservé cet article pour son intérêt historique tout en actualisant les principales informations et ressources.
En 1996, Macromedia rachète à FutureWave une technologie qui deviendra quelques années plus tard l’un des moteurs d’animation les plus populaires du web : Flash.
Pendant de nombreuses années, Flash a permis d’intégrer dans les pages web des animations, des jeux, de la vidéo et des interfaces particulièrement riches. Son fonctionnement reposait cependant sur un plugin supplémentaire que l’utilisateur devait installer dans son navigateur.
Adobe rachète Macromedia en 2005 et poursuit le développement de Flash pendant plusieurs années.
Des sites créatifs ont largement contribué à populariser ce type d’expériences graphiques. Le site de l’illustratrice Lotie constitue encore aujourd’hui un exemple intéressant de travail visuel sur le web.
Le site FWA référence également depuis de nombreuses années des expériences numériques particulièrement créatives.
Microsoft avait de son côté lancé Silverlight, une technologie concurrente destinée elle aussi à proposer des contenus interactifs et multimédias dans les navigateurs.
Ces deux technologies appartiennent désormais à l’histoire du web : Adobe a mis fin au support de Flash Player le 31 décembre 2020 et Microsoft a arrêté le support de Silverlight le 12 octobre 2021.
Pour mémoire, le projet libre GNU Gnash avait également cherché à proposer une implémentation open source capable de lire des contenus Flash.
Pourquoi Flash a-t-il joué un rôle aussi important ?
Flash a notamment permis d’introduire des interactions graphiques particulièrement poussées entre l’utilisateur et son navigateur à une époque où les possibilités offertes nativement par HTML, CSS et JavaScript étaient beaucoup plus limitées.
Mais son fonctionnement sous forme de plugin représentait également l’une de ses principales faiblesses.
Les contenus Flash étaient plus difficiles à analyser et à indexer par les moteurs de recherche. Leur utilisation pouvait donc poser des problèmes de référencement naturel, d’accessibilité et de compatibilité.
La décision d’Apple de ne pas prendre en charge Flash sur l’iPhone et l’iPad avait également accéléré le débat autour de son avenir.
L’article du Monde publié à l’époque permet de retrouver le contexte de cette confrontation entre Adobe et Apple : Flash : Adobe répond à Apple.
JavaScript et le DOM : l’alternative native du navigateur
Une page web est constituée d’une structure composée d’éléments et de balises.
Le DOM (Document Object Model) fournit une représentation de cette structure pouvant être manipulée par JavaScript. Il est ainsi possible de modifier dynamiquement le contenu d’une page, ses styles ou son comportement sans nécessairement la recharger entièrement.
Le W3C et le WHATWG jouent un rôle majeur dans la standardisation des technologies du web.
JavaScript s’est progressivement imposé comme le langage incontournable pour créer des interactions dans les navigateurs.
Des bibliothèques telles que jQuery ont notamment simplifié pendant de nombreuses années la manipulation du DOM, la gestion des événements et la création d’animations.
Nous parlions d’ailleurs à l’époque de l’effet de parallaxe, réalisé grâce à JavaScript.
L’un des grands avantages de ces technologies était déjà leur intégration directe dans les navigateurs, sans imposer l’installation d’un plugin propriétaire supplémentaire.
Aujourd’hui, les navigateurs disposent d’API beaucoup plus riches et JavaScript peut s’appuyer sur CSS, SVG, Canvas, WebGL ou encore WebAssembly pour créer des expériences interactives avancées.
Et Dart ?
En octobre 2011, Google dévoilait Dart, que nous présentions alors comme une potentielle alternative à JavaScript.
Dart existe toujours, mais son évolution a été différente de ce qui pouvait être imaginé à l’époque.
Le langage est aujourd’hui notamment utilisé avec Flutter et peut cibler plusieurs plateformes. Pour le web, il peut être compilé vers JavaScript ou WebAssembly.
HTML5, CSS3 et la disparition progressive des plugins
L’arrivée de HTML5 et CSS3 a considérablement étendu les possibilités d’animation, de multimédia et d’interaction directement dans les navigateurs.
Canvas, SVG, les animations et transitions CSS, les API JavaScript ou encore WebGL ont progressivement permis de reproduire de nombreux usages autrefois réservés à Flash.
Le standard HTML n’est d’ailleurs plus développé sous la forme de grandes versions isolées comme à l’époque de « HTML5 ». Il est aujourd’hui maintenu en continu sous la forme d’un HTML Living Standard.
Pour comprendre le fonctionnement des animations avec Canvas, la documentation de MDN propose également des exemples concrets :
Les générateurs d’animations HTML5 : retour sur les outils de l’époque
Au début des années 2010, la transition de Flash vers les standards ouverts du web a entraîné l’apparition de nombreux logiciels permettant aux designers de produire des animations HTML, CSS et JavaScript à l’aide d’une interface graphique.
Plusieurs solutions évoquées dans la version originale de cet article ont depuis disparu.
Adobe Edge Animate
Adobe avait lancé Edge Animate afin de permettre la création d’animations reposant sur HTML, CSS et JavaScript plutôt que sur Flash.
Adobe a toutefois arrêté le développement actif d’Edge Animate plusieurs années plus tard.
Une partie de cette philosophie s’est retrouvée dans d’autres outils Adobe. Adobe Animate permet notamment de publier des contenus au format HTML5 Canvas.
Adobe Wallaby
Wallaby était un outil expérimental d’Adobe destiné à convertir certaines animations Flash en HTML5.
Cette solution illustrait déjà la transition qui était en train de s’opérer : plutôt que de dépendre d’un plugin Flash, les contenus interactifs devaient progressivement être produits avec les technologies natives du web.
Wallaby n’est aujourd’hui plus une solution utilisée ou maintenue.
Sencha Animator
Sencha proposait également Sencha Animator, un outil permettant de produire des animations CSS.
Le produit appartient désormais lui aussi à l’histoire des premiers outils de création d’animations HTML5.
Sencha continue en revanche de développer Ext JS, son framework JavaScript destiné notamment à la création d’applications web complexes.
MotionComposer
MotionComposer d’Aquafadas faisait également partie de cette génération de logiciels cherchant à faciliter la transition entre Flash et HTML5.
L’intérêt de ces différents outils résidait dans leur capacité à produire des animations sans nécessiter de développement entièrement manuel, tout en ciblant progressivement les standards natifs des navigateurs.
Ce qu’il reste de cette transition aujourd’hui
Avec le recul, la tendance observée dès 2011 s’est largement confirmée.
Flash et Silverlight ont disparu des navigateurs modernes et les technologies ouvertes se sont imposées :
- HTML pour structurer les contenus ;
- CSS pour la présentation, les transitions et de nombreuses animations ;
- JavaScript pour les interactions et la logique applicative ;
- SVG et Canvas pour le dessin et les animations graphiques ;
- WebGL pour les rendus graphiques accélérés ;
- WebAssembly pour exécuter dans le navigateur du code compilé avec des performances élevées.
Cette évolution a également amélioré la compatibilité entre appareils, l’accessibilité et la capacité des moteurs de recherche à comprendre les contenus.
Pour un projet actuel, l’objectif n’est donc plus de « contourner Flash », mais de choisir les technologies web adaptées à l’expérience recherchée tout en conservant de bonnes performances, une accessibilité correcte et une structure compréhensible par les moteurs de recherche.
C’est cette logique de standards ouverts que nous appliquons aujourd’hui lors de la création d’applications web sur mesure.
Pour poursuivre la lecture, consultez également notre article consacré à Google Web Designer et la création d’animations HTML5.