Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

Decouvrez CreateJS

1.077 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

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

×