jeudi 10 mai 2012

Installer Toolkit CreateJS dans Flash Pro CS6

L'extension Toolkit CreateJS permet d'exporter les animations Flash au format HTML5 Canvas. Voici la procédure pour l'installer et publier votre première animation Flash en HTML5 :
  • Cliquez sur le lien suivant afin de télécharger sur votre poste de travail l'extension Flash HTML5 Toolkit for CreateJS
http://www.adobe.com/products/flash/flash-to-html5.html

ou bien,
http://download.macromedia.com/pub/flashpro/createJSExtension/Build12/Toolkit-for-CreatJS.zxp 
  • Quittez Flash Pro s'il est ouvert et double-cliquez sur l'extension .zxp pour l'installer via le module Adobe Extension Manager.
  • Relancez Flash et faites Fenêtre > Autres fenêtres > Toolkit for CreateJS pour afficher les contrôles de l'extension.
  • Dans le scénario de Flash Pro, réalisez des animations à partir d'interpolations classiques uniquement et de symboles graphiques. Chaque symbole doit être réparti vers un calque unique. Nommez chaque calque de manière intelligible et sans caractères spéciaux, sans commencer par un chiffre et sans tiret (comme un identifiant ou un nom d'occurrence) car ce nom sera utilisé dans le Javascript à l'export. Attention ! Si vous publiez dans un même dossier plusieurs documents Flash et que chacun possède des noms de calques similaires, CreateJS qui rassemble les médias dans des répertoires communs, va alors écraser les occurrences qui possèdent le même nom de calque par l'occurrence du dernier FLA publié. Un avantage qui permet d'optimiser des projets comprenant de multiples animations FLA distinctes (un livre interactif audio-visuel organisé par chapitres (articles) et mis en forme dans InDesign par exemple) mais qui peut s'avérer un piège si vous n'êtes pas avertis de cette mécanique et que vous ne souhaitez que les éléments d'un décor se substituent les uns avec les autres au fil des publications. Pour éviter cela, nommez bien distinctement tous les calques de tous les FLA que vous publiez dans un même répertoire ou bien publiez vos FLA dans des répertoires isolés.
  • Si des objets doivent recevoir de l'interactivité, utilisez des symboles de type MovieClip et attribuez-leur un nom d'occurrence. Privilégiez les symboles graphiques pour des animations moins lourdes à l'exportation Javascript.
  • Si vous développez, placez votre code Javascript dans la fenêtre Actions en l'enveloppant de balises de commentaires et du préfixe js, ainsi : /* js votre-code-Javascript */ (uniquement pour des actions simples telles que la navigation dans le scénario, sinon, préférez travailler dans un fichier Javascript dédié et lié à votre future page HTML).
  • Dans la fenêtre Toolkit for CreateJS, cliquez sur Publish pour exporter au format HTML5 et obtenir un aperçu instantané de votre animation dans le navigateur par défaut de votre système.
  • Dans le code source de la page HTML, veillez à localiser les requêtes Javascript (remplacer l'URL distant qui pointe sur le serveur de l'éditeur vers ces mêmes fichiers que vous aurez préalablement chargés en local) si votre document est destiné à une application mobile non connectée.
  • Dans le code source de la page HTML, pensez également à neutraliser si besoin les marges par défaut du document en définissant un style CSS pour la balise body, avec un margin et un padding de 0px. Le cas échéant, une bordure peut apparaître lors de l'intégration de vos animations dans un bloc image au sein d'une mise en page InDesign, à destination des appareils mobiles (Digital publishing).
Pour informations, Canvas est un standard HTML5 en cours d'émancipation et ne permet pas encore d'obtenir toutes l'interactivité et la qualité d'une animation Flash, mais c'est pour bientôt ; ). Canvas demeure non accessible et non référençable contrairement à une animation Flash SWF et à ce qu'on en dit. Canvas génère des animations plus lourdes que Flash pour un contenu équivalent car le code du SWF est compressé à la publication ce qui n'est pas le cas du Javascript (augmentation d'environ 35% du poids des fichiers en Canvas). Mais Canvas est lisible sur Safari mobile et peut être compilé dans une application native iOS et Android.
- Page générique Adobe d'information sur l'extension CreateJS :
http://www.adobe.com/fr/products/flash/flash-to-html5.html

- Exemple de jeu réalisé avec Canvas et Flash Pro (les FLA sont disponibles) :
http://www.adobe.com/fr/devnet/createjs/articles/getting-started.html

- Tutoriel sur la gestion des animations de scénario au sein de Flash Pro pour un export Canvas :


- Tutoriel sur le Javascript développé pour la réalisation du jeu Flash exporté en Canvas :


- D'autres présentations de même nature (sous-titres français) :
http://tv.adobe.com/fr/watch/visite-guidee-des-fonctionnalites-web-de-creative-cloud-et-cs6/exporter-du-contenu-flash-en-html-dans-flash-professional-cs6/

- Et pour le code :
http://tv.adobe.com/fr/watch/visite-guidee-des-fonctionnalites-web-de-creative-cloud-et-cs6/javascript-avec-flash-professional-cs6/

- Pour apprendre Canvas, consultez le blog suivant (GB) :
http://www.html5canvastutorials.com/tutorials/html5-canvas-tutorials-introduction/ 

- Résumé des méthodes Javascript utilisées pour mettre en forme un contenu Canvas :


- Autre démonstration d'un jeu réalisé avec Canvas sans Flash Pro :
http://www.lafermeduweb.net/tutorial/creer-un-jeu-en-html-canvas-et-javascript-13.html

- Démonstrations disponibles également sur le site original de l'éditeur de CreateJS (consultez chacune des pages relatives à chaque librairie Javascript EasyJS, TweenJS, SoundJS et PreloadJS) :
http://createjs.com/#!/CreateJS

7 commentaires:

  1. Bon article et bonne occasion de s'y mettre...
    perso je me bats depuis peu avec ce systeme d'export... je reste tres sceptique... pourquoi adobe ne l'a t-il pas incorporé d'office a flash ? ils disent pour faciliter les mises a jour... donc ce n'est pas encore assez stable ? pourquoi avoir utilisé ici la balise canvas pour l'animation mais ne pas avoir du tout utilise le meme systeme (canvas) dans edge ? etc... ca donne l'impression qu'adobe hesite et cherche encore comment passer de flash à l'html5...

    RépondreSupprimer
  2. Canvas, c'est pour du jeu, de l'anim bitmap. C'est ce qui devrait remplacer le SWF à terme, quand les navigateurs seront OK avec ce standard (W3C sera prêt fin 2014, + 2 ans pour concevoir les mises à jour des navigateurs + 4 ans pour que les utilisateurs les installent = 2020 ?).

    Edge fait du SVG, ce qui peut compléter Canvas, dans une certaine mesure. Mais Edge n'est pas encore disponible d'office non plus dans la CS. Il est probable que les prochaines mises-à-jour attendues désormais à chaque printemps clarifient tout cela.

    RépondreSupprimer
  3. Oui mais createjs aurait pu exporter du svg finalement, et edge du code utilisant canvas... les deux ont des avantages et des inconvenients, mais ce manque d'harmonisation m'inquiete un peu... peut etre est ce que je me trompe, mais je ne pense pas qu'adobe va maintenir les deux systemes longtemps... il y aura forcement un choix de fait a un moment. c'est clair qu'aujourd'hui avec HTML5, on est tous un peu dans le flou...

    RépondreSupprimer
  4. ps : et ca commence a devenir problematique parfois, comme pour les gens qui font des bandeaux de pub... ils utilisent flash mais ne peuvent continuer a faire des pubs que des millions de personne ne voient pas (= perte grave d'argent). revenir au gif animé ? oui mais un prix d'une perte de creativité illogique... exporter en html5 ? oui mais au prix d'une complexité d'integration (x fichiers a donner, tenir compte des versions de navigateur, ...) qui fait regretter flash...

    RépondreSupprimer
  5. ps2 : HTML5 est soit disant une super fusée... mais elle n'a pas encore décollé... et on est tous là a attendre betement l'evenement...

    RépondreSupprimer
  6. On n'ose plus utiliser Flash SWF et on ne peut pas encore utiliser HTML5. Google a trouvé une solution intermédiaire, ce sont les spritesheets ! Des animations en dur, suites d'images, gérées par Javascript. C'est pire que du SWF niveau accessibilité et référencement, mais c'est ultra compatible. Toutes les homes de Google, ainsi que nombre de jeux vidéo, sont animés ainsi.

    RépondreSupprimer
  7. Les Spritessheets selon Google :
    http://bloc-notes-arzhur.blogspot.fr/2012/10/google-anime-en-javascript.html

    RépondreSupprimer