Avant de peser le pour et le contre dans l’utilisation de ces deux technologies, voici une brève description de chacune d’elles.

Flash

Technologie appartenant à la compagnie Macromedia, elle sert à concevoir des animations lisibles sur les navigateurs web.

Les fichiers flash ont l’extension .swf.

Le fichier éditable (extension .fla) permet de compiler un fichier .swf.

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

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, le 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 qui 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ée 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 chacune d’elles

Pour flash

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

Le nombre de tutoriels est très important en comparaison de ceux concernant Canvas.

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

Pour le Canvas

Le Canvas est plus avantageux que 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.

De plus, Flash n’est pas interprété par les tablettes Apple ainsi que par de nombreux téléphones mobiles. Cela laisse une large place pour son concurrent.

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

Enfin, le Flash, comme tous les langages compilés, a besoin d’un logiciel qui se greffe au navigateur. La compatibilité n’est donc pas toujours assurée.

Performance

Voici la différence de performance entre une animation en flash et une animation avec la balise Canvas.

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

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

On remarque que sur les ordinateurs fixes et portables, les performances de la balise Canvas sont tout à fait acceptables comparées au Flash.

Mais sur les plateformes mobiles et tablettes, le flash a un avantage certain, dû à 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.