HUMAN TALKS MONTPELLIER – 8.01.13              DECOUVREZ       CREATEJS
PRESENTATIONS • Fréderic CHAPLIN (@fredchaplin) • Développeur Web & eLearning,    • Actionscript 3, Javascript, PHP • Call...
CREATEJS • Suite de librairies javascript interconnectées :    • EaselJS : animations et applis utilisant      le canvas H...
HISTORIQUE • Créateur : Grant Skinner • Début en 2011 : EaselJS • Ajout des autres librairies -> CreateJS • Adoption par a...
EASELJS • Liste d’affichage • Objets et API issus de l’AS3 :    • Stage, DisplayObject, MovieClip, Sprite, Graphics… • Tic...
EASELJS • Utilisation calquée sur le fonctionnement de   lAS3:   • Création de l’objet Stage avec un canvas HTML5     en r...
TOOLKIT FOR CREATEJS  • Exporte une animation de Flash IDE    vers CreateJS    • Export séparé bibliothèque / scène    • N...
TWEENJS • Librairie permettant de créer transitions   et animations :   • Sur les éléments dun Stage EaselJS,   • Ou sur d...
SOUNDJS • Lire et manipuler le son :    • Basique pour linstant :       • Lecture, stop, position de tête de lecture      ...
PRELOADJS • Preloading   • images, sons, datas.   • Utilisation de XHR2   • Permet davoir des informations précises sur le...
LE FUTUR  • Prochaine version déjà en cours    d’évaluation :    • Système événementiel :       • « addEventListener »  • ...
POUR QUI, POUR QUOI ?  • Véritable passerelle pour flasheurs migrants    vers le HTML5  • Puissant, multitâches, multiplat...
MERCI • Site officiel, demos, docs :   http://www.createjs.com • G.Skinner Blog : http://gskinner.com/blog • #createjs • M...
Prochain SlideShare
Chargement dans…5
×

Decouvrez CreateJS

1 024 vues

Publié le

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 024
Sur SlideShare
0
Issues des intégrations
0
Intégrations
81
Actions
Partages
0
Téléchargements
7
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Decouvrez CreateJS

  1. 1. HUMAN TALKS MONTPELLIER – 8.01.13 DECOUVREZ CREATEJS
  2. 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. 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. 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. 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. 6. EASELJS • Utilisation calquée sur le fonctionnement de lAS3: • 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. 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. 8. TWEENJS • Librairie permettant de créer transitions et animations : • Sur les éléments dun Stage EaselJS, • Ou sur des éléments du DOM • DEMO
  9. 9. SOUNDJS • Lire et manipuler le son : • Basique pour linstant : • 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. 10. PRELOADJS • Preloading • images, sons, datas. • Utilisation de XHR2 • Permet davoir 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. 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. 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. 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

×