Présentation des frameworks graphiques Javascript. La pluspart permettent de manipuler les objets à la manière de Flash (coordonnées x, y), on les appellera donc Flashlike.

1. Les frameworks flashlike en
JS

2. Plan
• HTML et le DOM.
• Où est placé mon objet HTML ?
• Les frameworks Flashlike.
• Où est placé mon objet avec un framework Flashlike ?
• Les autres frameworks JS
• Aller plus loin.

3. HTML et le DOM
Document Object Model
Interface de programmation
permettant l’accès aux éléments
composant une page web.
Permet le développement de pages
interactives.

4. HTML et le DOM
Une page web simple

5. HTML et le DOM
Une page web simple Ne l’est pas tant que ça
Représentation 3D des éléments HTML.

6. HTML et le DOM
• La modification d’un objet impacte ceux
qui suivent dans le « flux d’éléments »
• Le calcul de la position et de l’apparence
de chaque objet est complexe
• Problèmes de performance lorsqu’on
emploie un grand nombre d’objets
• Les éléments HTML sont assez limités et
contraints à des formes rectangulaires.
Visualisation du processus de placement des
éléments d’une page web. « reflow »
https://www.youtube.com/watch?v=ZTnIxIA5KGw

7. Où est placé mon objet HTML ?
La position d’un objet dépend des règles CSS appliquées.

8. Où est placé mon objet HTML ?
Appliquées à qui ?
• À l’objet lui-même.
• À ses parents.
• À ses frères. Un objet « pousse » les autres dans le flux.
… Et donc, aux frères de ses parents (oncles, tantes).
• Aux enfants de ses frères. Un objet grossi pour contenir ses enfants.
… Et donc, aux enfants des frères de ses parents (cousins).
• … bref, à toute la famille !
La position d’un objet dépend des règles CSS appliquées.

9. Où est placé mon objet HTML ?
La position d’un objet dépend des règles CSS appliquées.

10. Où est placé mon objet HTML ?
Quelles règles influencent la position ?
• Flux : position, float, display
• Style : margin, border-width, padding
• Position : top, left, right, bottom
• …
La position d’un objet dépend des règles CSS appliquées.

11. Où est placé mon objet HTML ?
La position d’un objet dépend des règles CSS appliquées.

12. Où est placé mon objet HTML ?
C’est pas fini !
• L’ordre dans lequel les règles CSS sont appliqués compte : les dernières lues écrasent les
précédentes
• La spécificité du sélecteur aussi : un sélecteur plus spécifique l’emporte sur un sélecteur plus
général.
• …Mais le marqueur !important permet de rendre une règle non écrasable
• Les « spécificités » du CSS qui complexifient le code. Une règle n’est prise en compte qu’en
fonction d’une autre.
• Border-width ne vaut rien si border-style n’est pas défini
• top, left, right, bottom ignorés si position n’est pas spécifié à fixed ou relative
• La règle clear, qui empêche les objets de se placer à coté d’un autre
• … il y’en a des dizaines.
• La prise en compte des règles dépend des navigateurs
…On ne parle ici que des règles influant la position des objets.
La position d’un objet dépend des règles CSS appliquées.

13. Où est placé mon objet HTML ?
En apparence simple, ça devient vite un vrai
casse-tête.
L’analyse des règles CSS appliqués à un objet
est si complexe qu’il faut des outils dédiés
pour y voir plus clair.
La position d’un objet dépend des règles CSS appliquées.
Développeur face à un élément HTML qui ne se place pas
à la position voulue.

14. Les frameworks Flashlike
• Développé par les flasheurs pour retrouver la simplicité et les performances de flash en HTML5.
• Conçus pour le développement de jeux, les interfaces riches et les sites web très animés.
• Excellentes performances, proche des applications natives quand on utilise WebGL.
• Compatible avec tout les navigateurs récents et mobiles (Android, iOS…).
• Rendu dans un objet <canvas> donc bitmap
• Collage de bitmaps (sprites, tuiles)
• Dessin des éléments vectoriels (rastérisation)
• Reprend le principe de displayObjects
imbriqués de flash.
Hiérarchie des displayObjects d’une scène.

15. Quelques exemples:
www.flashvhtml.com
Animation fluide à 60fps
WebGL (pixi JS)
Moteur animation Greensock
CAAT lien
Texte qui suit un chemin
modifiable à la volée.
www.animatron.com
Outil graphique permettant
de créer des animations.

16. Où est placé mon objet dans un
framework Flashlike ?
La position d’un objet dépend des propriétés x, y et rotation
de l’objet et de ses parents.

17. Où est placé mon objet dans un
framework Flashlike ?
La position d’un objet dépend des propriétés x, y et rotation
de l’objet et de ses parents.
…et c’est tout !

18. Les matrices de transformation
• Une matrice 3x3 pour chaque objet.
a = échelle horizontale a = biais vertical 0 constant
c = biais horizontal d = échelle verticale 0 constant
tx = translation horizontale Ty = translation verticale 1 constant
• En réalité, les propriétés x, y et rotation d’un objet affectent sa matrice de transformation.
• La matrice appliquée à un objet est la concaténation de la sienne et de celles de ses parents.
• Les GPU sont optimisés pour appliquer ces matrices a des images (même sur les cartes intégrées).

19. Autres fonctionnalités :
• Ces frameworks intègrent la gestion des évènements souris et clavier.
• … et parfois des spécificités liées aux mobiles (accéléromètre, gestes).
• Parseurs SVG : permet d’utiliser du SVG et de le dessiner à la taille
voulue.
• Rendu WebGL : utilise le GPU pour des performances optimales (60
images par seconde)
• Gestion des collisions entre objets

20. Avantages et inconvénients des
frameworks flashlike.
Avantages
• Simplicité : code orienté objet clair et bien
organisé.
• Performance, surtout pour ceux qui utilisent
WebGL.
• Licence libre pour tous.
Inconvénients
• Le rendu final est en bitmap et donc pas
d’export HTML vers PDF en vectoriel (il faut
du SVG pour ca).
• Pas de contrôles : boutons, textbox, etc…
• Utilisation de librairies dédiées
• Utilisation des contrôles HTML à coté

21. Les principaux frameworks
• KineticJS : Canvas ou WebGL
• EASELJS : Très complet : moteur d’animation, gestion des
chargements, du son, WebGL en béta…
• Collie
• CAAT : Rendu Canvas, WebGL et CSS
• Pixi : Orienté WebGL (avec fallback canvas)

22. Les autres types de frameworks
• Créés pour simplifier l’utilisation des fonctions HTML5 des navigateurs. Canvas (dessin bitmap) et SVG
(dessin vectoriel)
• Il sont très nombreux mais peu sont bien documentés.
• Dessin pur
• Raphaël : librairie de dessin très simple
• jQuery SVG : la syntaxe jQuery pour le SVG
• SnapSVG : Raphaël en version SVG
• Two.js : rendu SVG, Canvas ou WebGL
• Librairies plus complètes avec gestion des évènement clavier et souris:
• Paper.js : un des pioniers
• ProcessingJS : Plus qu’une librairie de dessin
• Représentation de données
• D3js : dédié aux représentations graphiques de données (data-binding) www.d3js.org
• www.highcharts.com

23. D3.js
• Framework dédié à la visualisation de données
• Système de data-binding: les graphismes se mettent à jour tout seul quand les données
changent.
• Un peu complexe qu’une simple librairie de dessin mais résultat spectaculaire
• Génération des graphismes en SVG permet un export vectoriel
www.d3js.org

24. Animer les objets
Les frameworks flashlike sont essentiellement fait pour l’animation. Les moteurs d’animation Javascript
permettent d’animer les propriétés de manière fluide à base d’équations mathématiques. Une ligne de code
permet de modifier une ou plusieurs propriétés.
•JQuery: très rependu, déjà inclus dans la plupart des applications web, performances faibles
•GreenSock Animation Platform (GSAP): la rolls royce des moteurs d’animation.
Version JS d’un moteur qui existe depuis 2004 sur flash. Robuste, simple, complet (séquençage d’animation,
harmonisation de propriétés cross-browser), le plus performant, bien documenté, maintenu à temps plein par
son créateur. Plusieurs personnes au support technique. Code source accessible et Licence commerciale
gratuite pour la plupart des projets. Support professionnel possible.
TweenMax.to("#myObject", 0.5, { opacity: 0 }), // fondu vers transparence totale qui dure 0,5s
•TweenJS: fait partie de la suite createJS (avec EaselJs, performances correctes).
•Les autres : DOJO, Zepto, MooTools, YUI3. Peu efficaces.

25. Aller plus loin
• Liste des frameworks flashlike, librairies de dessin canvas et SVG:
https://docs.google.com/spreadsheet/ccc?key=0Aqj_mVmuz3Y8dHNhUVFDYlRaaXlyX0xYSTVnalV5ZlE#gid=0
• Plus d’information sur les matrices de transformation
http://www.senocular.com/flash/tutorials/transformmatrix/
• SVG vs canvas:
http://paxcel.net/blog/canvas-vs-svg-comparison-of-the-two-graphic-features-of-html5/