Flash Professional CC et les nouveaux workflows

Flash Pro se renouvelle et vous permet de cibler le mobile avec les Spritesheets et HTML5 avec les Toolkits pour CreateJS et Dart. Mais attention, HTML5 ne se limite pas au Canvas, c'est un tout qu'il faut savoir maitriser.

Transcript

1. Philippe Elsass / @elsassph Flash Professional CC et les nouveaux work ows
2. Un Flash Pro’ tout neuf
3. Un Flash Pro’ tout neuf §  Complètement (ou presque) redéveloppé §  Architecture 64bits haute performance §  Retina sur Mac OS §  Début de l’intégration Creative Cloud §  Enregistrement de vos paramètres
4. Un Flash Pro’ tout neuf §  Un nouveau rythme de mise à jour pour les applications CC §  Idéalement 2-3 par an §  Le but: §  Corrections rapide des bugs §  Ajout incrémental de nouvelles fonctionnalités §  Eviter le stress d’une grosse mise à jour annuelle
5. Les mauvaises nouvelles §  Des décisions difficiles pour se réinventer §  (et tenir les délais)
6. Les mauvaises nouvelles §  Adieu / ce n’est qu’un au-revoir §  ActionScript 1/2 §  Texte TLF §  Bones §  Panneau Motion Editor §  Panneau Movie Explorer §  Reformater le code §  « Undo » au niveau de l’objet (VS global) §  Clips partagés
7. Adobe est à l’écoute §  Vous pouvez faire bouger les choses §  Mesures d’utilisation §  Réseaux sociaux et blogs §  Programme « prerelease » §  Partenaires stratégiques
8. Les bonnes nouvelles §  Performance et gestion mémoire améliorés §  Stage illimité §  Nouvel éditeur de code (Scintilla) §  Export vidéo Full HD, supportant ActionScript §  Export Spritesheet amélioré §  Meilleur report des erreurs JSFL §  PS: si vous êtes toujours sous CS3 vous avez manqué plein d’améliorations
9. Sneak Peek Prerelease §  Documents HtmlCanvas (CreateJS) §  Edition et completion JavaScript / JSFL §  Reformat AS3 et JavaScript §  Export SVG statique §  Panneau Kuler §  Des volontaires pour le programme Prerelease ? à philippe@elsass.me
10. Spritesheets Générer des Spritesheets depuis Flash Pro
11. Spritesheets §  Performant et universel §  Stage3D : Starling,… §  Mobile : Cocos2D, Sparrow, OpenFL,… §  HTML5 : CreateJS, Pixi.js, Dart,… §  Intégré et amélioré dans Flash Pro CC §  UI et JSFL debuggés §  Ajout de l’information de "pivot"
12. Spritesheets §  Ajout du ‘pivot’ §  Dans l'export Starling par défaut §  Peut être ajouté en JSFL dans les autres exports Avec pivot Sans pivot
13. Spritesheets §  Le saviez-vous ? §  Les exports Cocos2D, Starling, etc. sont des « plug-ins » JSFL §  Extensibles et éditables
14. Spritesheets §  Améliorer dans quelle direction ? §  Quelles options manquent ? §  Fichier vectoriel pour rasterization à l’exécution ? §  Squele es ? §  …
15. HTML5
16. Les nouveaux work ows §  HTML5 pourquoi ? §  Parce que c’est l’avenir du web §  Parce que Adobe produit des outils répondant à la demande §  Parce qu’on veut aussi des outils d’animation en HTML5
17. Comprendre HTML5 §  HTML5 est une collection de nouvelles fonctionnalités §  Des éléments sémantiques (nav, section, header, footer), §  Des nouveaux effets (CSS 3D, transitions), §  Des formulaires plus élaborés (placeholder, types de champs…), §  De nouvelles APIs graphiques (video, svg, canvas), §  De nouvelles APIs audio (audio, web audio API), §  Et encore des APIs (geolocalisation, local storage,…).
18. Comprendre HTML5 §  HTML5 n’est pas « tout compris » §  HTML est historiquement « incrémental » et non-contraignant §  Chaque fonctionnalité peut ou ne pas être implémentée §  Le développement est plus compliqué / risqué §  Mais c’est pas grave ! §  h p://caniuse.com §  h p://diveintohtml5.info/
19. Comprendre HTML5 §  En gros, nos outils sont : §  Le DOM en général §  SVG §  Canvas §  Video/Audio
20. Les DOMs
21. Le DOM classique §  Edge Animate pour le DOM §  Création d’animations basées sur des éléments DOM §  Possibilité de scripter interactions et timeline §  Intégration propre dans des pages existantes §  Limitations actuelles §  Pas encore de support CSS3D §  Pas de contrôle du DOM SVG (SVG == image) §  Outil encore jeune mais avec un fort potentiel
22. SVG, le DOM vectoriel §  SVG est un DOM graphique §  Bon support (IE9+, soit 85% de pénétration) §  Performance correcte §  Supporte bien les illustrations complexes §  Retina natif §  Styles et animations en CSS §  Pas d’outil d’animation direct §  A part Google Swiffy
23. Le cas Google Swiffy §  Créer pour convertir des bannières §  Extension Flash Pro §  1 SWF binaire à 1 JSON + 1 runtime JS §  Une prouesse technique §  Rendu SVG actuellement (idéal pour les vecteurs complexes) §  Interprétation AS2 et AS3 (partiel) §  Mais un runtime JS pas très léger
24. Le Canvas
25. Le Canvas §  « Canvas » §  Est un élément HTML §  Se comporte comme une image dans le DOM §  Le dessin dans un Canvas est persistant §  L’API de rendu dépend du « contexte » choisi.
26. Le Canvas §  Le « Contexte 2D » à BitmapData + Graphics §  Supporté par IE9+, soit 85% de pénétration §  API plutôt simple et très capable, mais assez bas niveau §  Performance vectorielle limitée par le CPU §  Support ltres et texte limités §  Le « Contexte 3D » (WebGL) à Stage3D §  Estimé à environ 30% de support §  API plutôt raide – c’est en gros de l’openGL §  Haute performance
27. Le Canvas §  Quels outils pour Canvas ? §  Toolkits pour CreateJS et Dart pour Flash Pro §  Le début de l’intégration de nouveaux formats de publication
28. Flash Professional
29. Toolkits : comment ça marche ? §  Structure d’un toolkit 1ère génération : §  Un panneau SWF pour la con guration §  Une JS API native pour exporter le DOM et les medias §  Des scripts JSFL pour publier dans le format désiré
30. CreateJS != Toolkit pour CreateJS §  CreateJS §  Un ensemble de librairies développées depuis 2010 par Grant Skinner §  Complet : EaselJS, TweenJS, SoundJS, PreloadJS §  Plutôt léger : environ 125Ko / 33Ko gzippé, accessible sur CDN §  Fiable §  Cible le contexte Canvas 2D
31. CreateJS != Toolkit pour CreateJS §  Toolkits pour CreateJS §  Exporte votre document FLA en code JavaScript §  L’export utilise les librairies CreateJS §  Limitations dues à Canvas
32. Toolkit pour CreateJS exporte… §  Chaque images et les sons du FLA §  1 librairie JS §  1 classe par symbole et image §  1 page HTML §  Objet canvas §  Script : preloader, lancement de l’animation
33. Les défauts du Toolkit pour CreateJS §  Tous les médias sont exportés et préchargés §  Même les éléments inutilisées §  La liste des médias à précharger est dans le HTML §  Il faut la copier-coller à chaque changement §  (ça sera corrigé dans une prochaine MAJ) §  Export texte minimal §  Et pas d’embed de polices §  Vectoriel plus lourd qu’en Flash
34. JavaScript ?
35. JavaScript ? §  Franchement, apprenez JavaScript (et le DOM) §  C’est la base quoi §  On ni par apprécier ses bizarreries §  Commencez simplement §  Prototypes simples et composition
36. JavaScript ? §  Pour devenir pro §  Modules §  AMD / CommonJS §  Plein d’éditeurs à essayer §  IntelliJ IDEA / WebStorm, Visual Studio, Sublime Text, Brackets, …
37. JavaScript ? §  TypeScript §  « Superset » strict de JavaScript §  Classes et annotations de type optionnelles §  Compile proprement vers JavaScript avec « source mapping » §  « TypeScript De nitions Manager » pour obtenir les de nitions de CreateJS §  Open source et multiplatforme §  Compilateur écrit en Typescript (node.js) §  Visual Studio, IntelliJ IDEA / WebStorm, Sublime Text…
38. JavaScript ? §  Haxe §  Language élaboré, très stricte, proche de l’AS3 §  Compile vers JavaScript avec « source mapping » §  « Haxelib » pour obtenir les dé nitions de CreateJS §  Open source et multiplateforme §  Compilateur natif super rapide §  FlashDevelop, IntelliJ IDEA, Sublime Text,…
39. Le problème §  Le problème de TypeScript et Haxe : §  Il y a des dé nitions pour les librairies CreateJS, §  mais pas pour l’export du Toolkit (vos symboles) §  La solution : §  h ps://github.com/elsassph/createjs-def §  JSFL et ligne de commande pour générer les dé nitions
40. Dart
41. Dart §  Dart est un nouveau langage pour le web §  Open source et multiplatforme §  Inventé par les ingénieurs de Chrome §  Objectifs §  A la fois dynamique et plus strict que JavaScript §  Compiler vers JavaScript §  Reste strict à l’exécution ! §  Améliorer l’API du DOM §  Plus besoin de jQuery
42. Dart §  Dart est un langage familier et intelligent §  Code immédiatement compréhensible §  Annotations de type optionnelles, classes, interfaces, mixins… §  Intègre les meilleures idées de plein de langages
43. StageXL §  Librairie Dart open source §  Emule avec délité la Display List de Flash §  dans un Canvas 2D §  Compatible Retina
44. Toolkit pour Dart §  Toolkit pour Dart §  Variante du Toolkit pour CreateJS §  Exporte votre document FLA en code Dart §  L’export utilise la librairie StageXL §  Open source §  La fête au JSFL ! §  h p://toolkitfordart.github.io
45. Toolkit pour Dart §  Chaque images et les sons du FLA §  Les PNGs sont combinées en Spritesheets §  1 librairie Dart §  1 classe par symbole et image §  1 classe principale §  Preloader et lancement de l’animation §  1 page HTML §  Objet canvas
46. Les défauts du Toolkit pour Dart §  Tous les médias sont exportés et préchargés §  Exclusion avec pre xe « ! » §  Export texte limité §  Pas d’embed de polices §  Pas de styles multiples HTML §  Vectoriel plus lourd qu’en Flash
47. Performance Canvas 2D
48. Performance Canvas 2D §  Rapide §  Images §  Texte §  Lent §  Vecteurs §  Scènes complexes §  Retina §  Pourquoi? §  La scène est dessinée intégralement, continuellement, et en JavaScript
49. Performance Canvas 2D §  Prévention §  Véri er le code généré pour identi er les problèmes §  Pro ler la charge CPU (ex: Chrome dev tools)
50. Performance Canvas 2D §  La 1ère étape est d’optimiser dans Flash Pro §  Statique §  Convertir en Image (menu contextuel) §  Remplace un élément complexe par un PNG §  Dynamique §  Cache As Bitmap (propriété instance) §  A appliquer au début d’une animation seulement. §  Le contenu est dessiné dans un Canvas temporaire durant l’exécution §  Ne se met pas à jour automatiquement comme ne Flash !
51. Performance Canvas 2D §  Il est aussi possible d’active le cache côté script §  CreateJS §  obj.cache(x, y, width, height, [scale]); §  var bounds = ObjClass.nominalBounds; §  obj.updateCache() §  StageXL §  obj.applyCache(x, y, width, height, [debugBorder]); §  var bounds = obj.getBounds(obj); §  obj.refreshCache();
52. Conclusions §  Richesse et performance sont possibles en HTML5 §  C’est une boite à outils très capable §  La difficulté et de choisir les bons outils et de les combiner
53. Merci ! Philippe Elsass / @elsassph