Avant de voir le pour et le contre de l’utilisation de ces deux technologies, voici une description de chacune d’entre elles.

Flash

Technologie propriétaire de la compagnie Macromedia, elle sert à concevoir des animations lisibles sur les navigateurs web.

Les fichiers flash lisibles par un navigateur ont l’extension .swf.

Le fichier éditable de l’extension .fla permet de compiler un fichier .swf lisible sur le web.

Afin de lire un fichier .swf les navigateurs ont besoin d’un plugiciel (ou plugin) nommé Flash Player disponible sur le site de macromedia. Il est nécessaire pour lire ce type de fichier.

Les dessins sont de type vectoriel et permettent de réduire le poids du fichier compilé, Flash permet aussi une interactivité avec un langage hôte comme le JavaScript, VBScript ou le PHP.

Intégrer une animation en Flash

<object type="application/x-shockwave-flash" data="animation.swf" width="200" height="200">
<param name="movie" value="animation.swf" />
<p>Texte alternatif pour ceux qui ne lisent pas le Flash.</p>
</object>

Canvas

Canvas est une nouvelle balise du HTML5 et permet d’effectuer des rendus dynamiques d’images bitmap directement dans une page web.

Voici un aide mémoire des fonctionnalités de la balise Canvas.

Son fonctionnement est simple: une balise canvas est utilisé dans le corps d’une page: <canvas id="canvas_name"></canvas>

Et dans l’entête de la page, un script en JavaScript va commander les effets à appliquer dans ce Canvas.

Intégrer une animation avec Canvas

<head>
<script type="text/javascript">
/*Fonction de création de dessin*/
function dessineMoiUnMouton() {
var objet = document.getElementById('canvas_name');
var dessin = objet.getContext('2d');
/*Instructions à afficher dans le canvas*/
dessin.stroke();
dessin.closePath();}
/*Lire les fonctions à appliquer au canvas*/
window.addEventListener("load", dessineMoiUnMouton, false);
</script>
</head>

<body>
<canvas id="canvas_name" width="400" height="300">Texte alternatif pour ceux qui ne lisent pas la balise canvas.</canvas>
</body>

Le pour et le contre de chacun d’eux

Pour flash

Flash est utilisé depuis la création d’internet pour afficher des animations soit 99% d’entre elles sur internet.

Le nombre de tutoriels afin de créer des animations Flash est très important en comparaison à ceux utilisés en Canvas.

Il y a énormément de designers et développeurs à former pour que le Canvas devienne majoritaire: de quoi décourager certaines agences de développement à effectuer la formation de leurs employés.

Pour le Canvas

Le Canvas a l’avantage sur le Flash au niveau du référencement car il est intégré directement dans le code source de la page et donc visible par les moteurs de recherche.

Flash n’est pas interprété par les tablettes de la marque Apple ainsi que de nombreux téléphones mobiles, ce qui laisse une large place pour le Canvas.

Le Canvas possède un langage non propriétaire, ainsi il peut être amélioré et personnalisé à l’infini.

Le Flash, ainsi que tous les autres langages compilés ont besoin d’un logiciel qui se greffe au navigateur, donc la compatibilité est plus ou moins respectée.

Performance

Voici la différence de performance d’une animation en flash et cette même animation avec la balise Canvas.

La notice FPS permet de voir le nombre de changement d’images par seconde.

Ces résultats dépendent des performances de votre ordinateur, du navigateur que vous utilisez ainsi que sa mémoire allouée en utilisation (autre onglet ouvert).

On remarque que sur les ordinateurs fixe ou portable, les performances de la balise Canvas sont toutes à fait acceptable comparée au Flash.

Mais sur les plateformes mobiles et tablettes, le flash à un avantage certain due à la nécessité de calcul rapide pour le navigateur.

De toute façon, de nombreuses plateformes mobiles et tablettes ne sont pas compatibles avec flash, ces plateformes devront être plus puissantes afin de ne pas pénaliser l’utilisateur, il s’agit d’un enjeu concurrentiel pour les constructeurs.

Conclusion

Il faudra sans doute plusieurs années avant que la balise Canvas soit adoptée par les designers et développeurs mais cette avancée est obligatoire afin que le web soit plus respectueux des normes W3C.