Testing 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
Zoe http://easeljs.com/zoe.html