2013年7月13日土曜日

『WebクリエイターのためのCreateJSスタイルブック』 出版記念特別セミナー 感想と覚書

昨日『WebクリエイターのためのCreateJSスタイルブック』 出版記念特別セミナーを拝聴。
講師は野中文雄氏。

氏のセミナーは毎回わかりやすく内容も豊富で感動させられる。

今回はネットに繋がらないトラブルにも関わらず、ローカルファイルで対応し、きっちり時間通りに終了。しかもネット復旧後、抜けた部分も再説明。
著書の宣伝はあくまでさりげない。

本は発売日に買いました
(セミナーでの割引販売がちょっと悔しい)

野中文雄氏、そしてセミナーを開催・手配いただいた方々に感謝。



講義の内容は今回の著書(WebクリエイターのためのCreateJSスタイルブック)のp40~70、p
100~114付近を要約したもの+解説。

以下気をつけるべきところのみ覚書。

・Shapeへの色設定
            var randomNumber=Math.floor(Math.random()*0xFFFFFF) ;
にてランダムにカラー数値を取得後
            var randomColor=createjs.Graphics.getRGB(randomNumber);
でstringに置き換える。以前は文字列置き換えで結構困ったことがあったような気がする。

・stage.update();
画面の描画。必ず入れる(忘れること多し)。
Flashはフレームレート毎に再描画してくれるが、createJSは(というよりcanvasが)行わない。負荷がかかりすぎるそうだ。

・Tween

var myTween=new Tween(target) ;
myTween.to({ x:100 …該当プロパティと値をこのオブジェクトに設定 }
  , 実行ミリ秒
 , イージング }
で動作。
myTween.to(…)を連続して記載すると、その順番通りに実行してくれる。
FlashのTween + addEventListenerで終了を判定しつつ動かしていた私には楽に感じられる(Tweener使ってる方にはあまり差がないかも)。


・マウスイベント
addEventListenerを設定するオブジェクトが少々Flashと異なる。
ドラッグなどのときは要注意。
設定する対象は以下の通り。
click           : DisplayObject
mousedown : DisplayObject
mousemove : MouseEvent
mouseup      : MouseEvent

以前Flash案件でDisplayObject+startDragでドラッグを行なったら、早いマウス動作にオブジェクトがついて来れず外れてしまうことがあった。
そのときはstageにMouseMoveイベントを追加し、オブジェクトにマウス座標を追っかけさせて対応したように思う。

DisplayObjectにイベント追加するのではなく、別物にイベントを付与し、マウス座標に追随させる、と考えればわかりやすい。



・おさらい整理したときに生じた疑問点

セミナーのスクリプトではなく、書籍記載のスクリプトの
eventObject.targetについて少し混乱。

        myShape.addEventListener("mousedown" , startDrag);

        function startDrag(eventObject){//マウスダウンイベント
           var instance=eventObject.target;//マウスダウンイベントのターゲット
            eventObject.addEventListener("mousemove", drag);
        }

        function drag(eventObject){//マウスムーブイベント
            var instance=eventObject.target;//マウスムーブイベントのターゲット
            instance.x=eventObject.stageX;
            instance.y=eventObject.stageY;
            stage.update();
        }
上記のふたつのeventObjectはそれぞれ違うものにも関わらず、
targetは同じものを指している。
mousemoveには直接DisplayObjectは関わっていないようにも思えるのだが、なぜtargetが参照できるのか?
時間があるときに再検証してみる。
今回はここまで。