#enseljs

為什麼使用EnselJS

以Flash使用者的使用經驗來看，這一套是最接近Flash的使用方式；

使用語法與習慣接近，適合老Flasher來進入html5的領域… XD

其實還有一套叫 flashJS，來不及看，所以先用看過的…

EnselJS的Class分類

stage stage包Canvas，DisplayObject被addChild到stage中，stage不斷的在update()或tick()中更新內容； canvas = document.getElementById("canvas的ID"); stage = new Stage(canvas);

類似Flash中的DisplayObject類別 Container：AS3是DisplayObjectContainer，把各DisplayObject再包起來再群組的工具 Bitmap：放圖片和影片用的 BitmapAnimation：放連結圖檔動畫（SpriteSheet）用的 Text：文字 Shape：放graphics畫出來的物件用的。 stage.addChild( DisplayObject )

類似Flash中MovieClip的方法類別，以下兩種皆不是DisplayObject，需要置放進對應的容器才能夠被addChild到stage中 graphics SpriteSheet

和Flash AS3的比對來學習>就動畫的使用上來比對說明

Flash中使用MovieClip來做動畫 使用play()、gotoAndStop()、gotoAndPlay()的方式來控制MovieClip

EnselJS使用SpriteSheet來製作類似MovieClip的物件, 也使用gotoAndPlay()與gotoAndPlay()相同的語法, 讓原本使用flash的使用者覺得親切

範例1，使用SpriteSheet來製作一個人物走路的動畫、使用BitmapAnimation做一個容器將SpriteSheet置入，再用addChild的方式加載進stage中 在gotoAndPlay()這方法中使用呼叫frame數的方法來控制 SpriteSheet http://192.168.43.33/~apple/EaselJStest/aniTest1.html 

使用Zoe來匯出連續圖檔 動畫全放在主場景上 使用grahpic元件，拉足影格 > 這種作法可能也可以轉出用AS創作的動畫 

範例2，使用function tick來不斷的改變元件的屬性，如同flash的onEnterFrame、setInterval等事件與方法。 http://192.168.43.33/~apple/EaselJStest/aniTest2.html 

範例3，加入判斷式來改變運行方向 http://192.168.43.33/~apple/EaselJStest/aniTest3.html 

範例4，在gotoAndPlay()這方法中使用flag的呼叫的方式來控制SpriteSheet，SpriteSheet對應的寫法。 使用DisplayObject中scaleX的方式來做物件的鏡射  http://192.168.43.33/~apple/EaselJStest/aniTest4.html 

TweenJS

主語法： Tween.get( 對像, {loop:true/false}) .to({屬性: 值} , 時間/豪秒)  .wait(時間/豪秒)  http://192.168.43.33/~apple/html5Test/aniTest5.html

和Flash AS3的比對來學習>就互動的方式來比對說明

滑鼠的控制Event：onPress、onRelease、onClick、onMouseOver、onMouseUp DisplayObject.事件類別 = function(){ }

http://192.168.43.33/~apple/html5Test/ctrlTest/helloWorld.html btn.onPress = showText  showText=function(){…} 

http://192.168.43.33/~apple/html5Test/test05.html for迴圏 (function(target) {      bmp.onPress = function(evt) {      } })(bmp) 

參考資源

EnselJS http://easeljs.com/

TweenJS http://tweenjs.com/

動畫方式 http://blogs.msdn.com/b/davrous/archive/2011/07/21/html5-gaming-animating-sprites-in-canvas-with-easeljs.aspx

EaselJS新手上路 http://blog.eddie.com.tw/2011/09/10/introduction-to-easeljs/

件者Grant Skinner http://gskinner.com/blog