Overview on CreatJS

CreateJS is a suite of handy Javascript libraris for HTML5 multimedia development.

Includes: AudiJS, TweenJS, EaselJS, PreloadJS

Transcript

1. $3&"5&+4
   
   David  Ng     20  AUG  2012  
2. $3&"5&+4
   
   → A  suite  of  Javascript  libraries  &  tools     → For  building  rich,  interac?ve  experiences      SOUNDJS  for  audio    EASELJS  for  canvas    PRELOADJS  manage  and  load  assets    TWEENJS  for  anima?on  and  tweening   Zoe    export    SWF    as  EASELJS  spirite   → With  HTML5 Grant Skinner
3. &"4&-+4
   
      hQp://createjs.com/Docs/EaselJS/module_EaselJS.html API    with  helper  classes  to  make  drawing  on  Canvas  more  easily     Including:     Shadow     Mouse  Event   Touch   Shape   Movie  Clip   Spirite  Sheet   Shadow ( color , offsetX , offsetY , blur ) MouseEvent ( type , stageX , stageY , target , nativeEvent ) frames: {width: 200, height: 200}, animations: { stand: 0, die: [1, 5, false] } MovieClip ( mode , startPosition , loop , labels )
4. &"4&-+4
   
   hQp://jsfiddle.net/TzbHB/3/light/ frames: {width: 200, height: 200}, animations: { stand: 0, die: [1, 5, false] } High-lights Ticker.setFPS(10); set  refresh  rate   Ticker.addListener(stage); register  1cker  to  stage      
5. 58&&/+4
   
   Tween.get(targetElement.style, { loop:true, css:true }) .to({opacity:1.0},300) .to({opacity:0.55},300) .to({opacity:1.0},300);    A  Tweening  and  anima?on  library          Works  with  EaselJS  or  independently        e.g.  delays,  easing,  callbacks,                    non-­‐numeric  proper?es,  sequencing,  and  plugins
6. 58&&/+4
   
   Tween.get(ball) .to({x:200},500) .wait(750) .to({alpha:0,visible:false}) .call(onComplete); Anima?on  you  can  apply:     backIn/out,  bounceIn  /out,  circIn/out  ,  elas?cIn/out,  linear,  quadIn/  out,  sineIn/out    …       Config  the  easing  by:     getBackIn,  getBounceIn  …  etc.     Let’s  try       hQp://andysaia.com/blog/tweenjs/
7. 58&&/+4
   
   Timeline  :   Synchronizes  mul?ple  tweens  and  allows  them  to  be  controlled  as  a  group.       Timeline ( tweens , labels , props ) An  array  of  Tweens An  object  defining  labels    for  using  gotoAndPlay/Stop Loop,  useTicks,   ignoreGlobalPause,   Paused,  posi?on   Yes,  it  is  very  FLASH-­‐like…  
8. $3&"5&+4
   
   
9. $3&"5&+4
   
   SOUNDJS  &  PRELOADJS     are  also  useful  for  HTML5  mul?media/  interac?on  game  development.  
10. $3&"5&+4
    
    OVERALL     Handy  and  essen?al  API  for  HTML5  canvas  development     Nice  visual  effects     Improved  readability  and  writability     Saved  lots  of  ?me  for  developers     But    what’s  your  choice  between  Javascript+CSS    vs  CANVAS  ?    
11. hQp://wwwimages.adobe.com/www.adobe.com/content/dam/Adobe/en/ products/flash/pdfs/flash-­‐to-­‐html5.pdf $3&"5&+4
    
    Refs:       hQp://createjs.com hQps://github.com/CreateJS/EaselJS/wiki/Examples More  EaselJS  examples   Official  site  ,  where  you  can  get  open  source  code   Info  about  CreateJS  by  Adobe   hQp://caniuse.com/#feat=canvas Broswers  that  can  support  CANVAS,  glad  to  see  IE9+  on  the  list