samedi 12 mai 2012

Kit HTML5 d'intégration Flash Canvas et SWF

Flash publie désormais en Air, en SWF et en Canvas.

La meilleure manière de gérer la transition du format Flash SWF vers le format Flash HTML5 Canvas qui le succèdera dans quelques temps est de publier les deux formats en même temps et de laisser chacun afficher le contenu qu'il peut en fonction des compatibilités de son environnement. Ce n'est pas une mince affaire me direz-vous ! Et bien voici ce qui devrait vous aider.

J'ai mis au point ce kit d'intégration Flash SWF/Canvas en français, librement inspiré de l'ancien kit XHTML SWFObject 2 anglais et open source.

Vous pouvez désormais publier une page HTML5 conforme dans laquelle un objet Canvas est préconfiguré en tant que contenu alternatif au format Flash SWF, pour Safari mobile et pour les navigateurs qui bientôt ne liront plus non plus le SWF ; )

Le format Flash demeurant plus compressé, mieux référençable, plus avancé techniquement que le format Canvas, et son lecteur étant également plus répandu que n'importe quel navigateur, il me semble évident de devoir proposer, à ceux qui possèdent le lecteur Flash et pour des sites animés, un fichier SWF en priorité. C'est seulement si le lecteur Flash apparaît indisponible, que je suggère dans ce kit un objet HTML5 Canvas de substitution. Et enfin seulement, si ni l'un ni l'autre ne sont possibles (ni lecteur Flash, ni iOS ? Il faudrait vraiment le faire exprès), j'affiche un pur contenu HTML.

Si maintenant nous choisissons de remplacer l'objet Canvas par un objet vidéo simple (balise <video> HTML5), ce dispositif simplifie également la gestion de la vidéo en ce sens que le même format Mpeg-4 H264 peut être géré à la fois par le lecteur SWF et par Safari mobile. Un seul encodage devient donc nécessaire avec ce kit, quand 5 sont requis dans le cadre d'une intégration classique subordonnée aux caprices des navigateurs (qui possèdent pourtant le lecteur Flash) et donnerait priorité au HTML5 avec malgré tout, au final, un contenu alternatif en SWF.

Dans tous les cas de figure, même si ce kit réconcilie Flash dans la production Web, gardons à l'idée que l'animation SWF ou Canvas d'un site doit rester complémentaire autant que possible à un contenu texte plus accessible. Flash, qu'il soit SWF ou Canvas gère avant tout une plus-value graphique, pas du texte ! Alors vous de jouer ; )

Télécharger gratuitement mon kit d'intégration HTML5 de Flash SWF/Canvas :

http://www.arzhurcaouissin.com/_partage/swfObject2-HTML5.zip


Exemple de code obtenu par le kit en question :

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <meta charset="iso-8859-1" />
        <link href="scripts/stylesContenuAlternatif.css" rel="stylesheet" />
       
        <!-- Début des données du Canvas -->
        <script>
            window.onload = function init() {
            // Déclaration du contexte 2D d'affichage :
            var canvas = document.getElementById('canvas');
            var context2D =canvas.getContext('2d');
           
            // Détailler le canvas ici :
            // ...
           
            };
        </script>
        <!-- Fin des données du Canvas -->
       
        <!-- Début des données du SWF -->
        <script src="scripts/swfobject.js"></script>
        <script>
            var flashvars = {};
            var params = {};
            params.wmode = "direct";
            params.allowfullscreen = "true";
            var attributes = {};
            attributes.id = "contenuFlash";
            swfobject.embedSWF("animation.swf", "contenuAlternatif", "100%", "100%", "10.2.0", "scripts/expressInstall.swf", flashvars, params, attributes);
        </script>
        <!-- Fin des données du SWF -->
       
    </head>
    <body>
        <div id="contenuAlternatif">
            <canvas id="canvas" width="100%" height="100%">
            <p>Placer ici le contenu alternatif au SWF et à Canvas</p>
            </canvas>
        </div>
    </body>
</html>


Pour obtenir le code d'une intégration Flash SWF/vidéo HTML5, consultez l'article suivant :


http://bloc-notes-arzhur.blogspot.fr/2011/06/19-video-html5.html

1 commentaire:

  1. Quelques bogues de rafraichissement étaient perceptibles dans une première version du kit. Je les ai corrigées. Vous pouvez de nouveau télécharger le fichier depuis ce 29 juin 2012.

    RépondreSupprimer