1. HUMAN TALKS MONTPELLIER – 8.01.13
DECOUVREZ
CREATEJS

2. PRESENTATIONS
• Fréderic CHAPLIN (@fredchaplin)
• Développeur Web & eLearning,
• Actionscript 3, Javascript, PHP
• Callimedia :
• Applications iOS, Android, Window, Plateformes
et modules eLearning, dessin anatomique.
• Santé

3. CREATEJS
• Suite de librairies javascript interconnectées :
• EaselJS : animations et applis utilisant
le canvas HTML5
• SoundJS : lecture et contrôle de sons
• TweenJS : moteur de transitions et d’animations
• PreloadJS : librairie de préchargement d’assets
• API ≈ AS3

4. HISTORIQUE
• Créateur : Grant Skinner
• Début en 2011 : EaselJS
• Ajout des autres librairies -> CreateJS
• Adoption par adobe pour l’Export HTML5 à
partir de Flash IDE (Flash CS6)
• Toolkit for CreateJS (avril 2012)

5. EASELJS
• Liste d’affichage
• Objets et API issus de l’AS3 :
• Stage, DisplayObject, MovieClip, Sprite, Graphics…
• Ticker : classe abstraite
• Metronome
• API connue :
• x,y, visible, mouseEnabled
• globalToLocal(), hitTest()

6. EASELJS
• Utilisation calquée sur le fonctionnement de
l'AS3:
• Création de l’objet Stage avec un canvas HTML5
en référence
• Démarrage de la Classe Ticker
• Ajout des objets au stage.
• Chaque objet visible hérite de DisplayObject.
• DEMO

7. TOOLKIT FOR CREATEJS
• Exporte une animation de Flash IDE
vers CreateJS
• Export séparé bibliothèque / scène
• Nécessité d’ajouter la version “CreateJS” du code
AS3 présent dans les frames
• DEMO

8. TWEENJS
• Librairie permettant de créer transitions
et animations :
• Sur les éléments d'un Stage EaselJS,
• Ou sur des éléments du DOM
• DEMO

9. SOUNDJS
• Lire et manipuler le son :
• Basique pour l'instant :
• Lecture, stop, position de tête de lecture
• Dégradation en arrière plan selon le browser utilisé :
WebAudio, HTML5 Audio et Flash.
• Des expériences sont en cours pour gérer le Web
Audio Input : API HTML5 pour utilisation du
microphone
• Dans la prochaine version de la librairie....

10. PRELOADJS
• Preloading
• images, sons, datas.
• Utilisation de XHR2
• Permet d'avoir des informations précises sur le
téléchargement :
• nombre de téléchargements terminés
• poids total téléchargé / poids restant (= %)
• Possibilité de créer un preloader de type Flash

11. LE FUTUR
• Prochaine version déjà en cours
d’évaluation :
• Système événementiel :
• « addEventListener »
• Et plus tard…
• Moteurs de rendus dynamiques
• Canvas ou bien… Webgl, SVG, HTML DOM.

12. POUR QUI, POUR QUOI ?
• Véritable passerelle pour flasheurs migrants
vers le HTML5
• Puissant, multitâches, multiplateformes :
• Performances honorables, (varie selon les
navigateurs)
• Gaming (AtariArcade SDK, )
• Animations (Flash IDE)
• Code open source (github)
• Aspect communautaire fort (forum)

13. MERCI
• Site officiel, demos, docs :
http://www.createjs.com
• G.Skinner Blog : http://gskinner.com/blog
• #createjs
• Mon Blog : http://small-codes.com
• @fredchaplin