CreateJSを応用したダイナミックなアニメーション

ハンドルをドラッグする

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ハンドルをマウスでドラッグするためのコードを加えます。EaselJSのマウスイベントを扱った処理です。
講師:
11:59

字幕

Canvas に置いた画像の右上隅の角に 青い丸の Shape が置いてあります これをマウスでドラッグできるように 設定をしてみましょう この HTML ドキュメントの JavaScript コードでは 画像の配置と Shape を青い丸を作って 画像の上隅に配置するという所までの 処理をやってあります まだドラッグの処理は加えていません 簡単に見ていきますと先ず外部画像は LoadQueue クラスを使って 先読みをし配置しています addEventListener で 読み込み終わった後の処理 リスナー関数を定めてありまして そこで画像の再描画を行っています 更にハンドルの Shape は 関数が設けてありまして この関数ですね Shape を作り そこに丸い青い絵を描いて その Shape を返し 変数に加えています 画像とハンドルの位置決めは LoadQueue オブジェクトに加えた- イベントリスナー fileload のイベントリスナーの関数 draw で行っています たたんであるのを開きましょう 先ずビットマップの画像なのですが 取り敢えずは SetAppearance という位置決めの 位置を設定する関数が定めてあります 単に指定されたインスタンスを 指定された場所に置く それから addChild も 行っているわけですけれども その時点では画像 Bitmap のインスタンスは Canvas エレメントの幅と高さを それぞれとっておいて その半分 つまり中央に配置してあります もっとも Bitmap のオブジェクトの 基準点というのは左上隅にありますから 画像がきちんと Canvas の真ん中にはまだなりません それをこのリスナー関数 draw で 行っているわけですけれども 先ずは画像のイメージを eventObject の result というプロパティを とってきています これが読み込んだ画像のイメージですね その幅と高さを変数にとって その半分ですね 高さ 幅と高さの半分ずつ Bitmap のオブジェクトを 左上隅に持っていっています 左上の方に引き上げています そうすることによって左上隅が最初 Canvas の中央 ステージの中央にあったものが 画像の幅の半分 高さの半分 左上に持ち上がることによって ステージの中心に 画像が配置されています と同時に今度は ハンドルの位置決めもしています handle のインスタンスを指定し 先程の SetAppearance ですね ビットマップの左上隅の座標に 画像のイメージの幅を加えると 右上右端の座標になりますね そして右上といいますと y 座標の方は 今度はビットマップの 左上隅の座標と同じですので この 2 つの座標を指定することによって 丸い Shape ですね あれが画像の右上隅に 配置されるということになっています 一応今現在の JavaScript コードの 結果を確認しておきましょう ファイルのブラウザーでプレビューです 保存しておきます 画像を含む Bitmap のオブジェクトと 丸い青い Shape の位置設定は きちんといっています 但しドラッグできるようには まだなっていません ではブラウザーのウィンドウを閉じます ハンドルをドラッグできるようにするには イベントハンドラを 加えなければなりません その処理をする前に 今回の作業に関係のない所は 畳んでおきましょう 描画の部分は大丈夫です ではイベントハンドラを追加するのは このハンドルを作る関数 createHandle です この中で Shape が この変数に入っていますね ドラッグしてコピーします コントロールもしくは コマンドキーを押しながらドラッグです これに対して イベントリスナーを登録するのは addEventListener ドラッグの場合にはマウスボタンを押したら というイベントになります これは mousedown です そして何をするかというと まだ関数は定めていないのですが ドラッグを始めましょう ということで startDrag という関数を定めます これがリスナー関数です リスナー関数は この位置設定の関数の下に 定めることにします ですから これは畳んでおきます そしてこの下に function の startDrag 念のため やはり タイプミスしないように ドラッグコピーしましょう コントロールキーもしくは コマンドキーを押しながらです そして丸括弧 ( ) 中括弧 { ですね この中に処理を書いていくことになります リスナー関数に定めると addEventListener で リスナー関数に定めますと eventObject という 引数を受け取ります これを受け取っておくことにします このリスナー関数 startDrag は 何をするかというと このリスナーはマウスボタンを 押した時に呼び出されます 押した時はドラッグの 開始ではありますけれども まだドラッグではありませんよね ドラッグというのは押したまま マウスを動かした時に起こる処理です ですから動かした時にどうするかという イベントリスナーをまた改めて 設定することになります このイベントリスナーは 引数に受け取った eventObject に対して登録することになります ドラッグコピーです あと やはり addEventListener を 使うんですが 長いのでタイプミスしないように ドラッグコピーします 今度のイベントは マウスボタンを押した後動かすですね 動かすのは mousemove になります そしてリスナー関数を定めます これも これから新たに定めることになります drag にしましょう そうしたら この下にまた関数を 定めていきます drag やはり eventObject を受け取りますので これもコピーしてしまいましょう 引数をコピーします コントロールもしくは コマンドドラッグですね この中に今度はドラッグする処理を 書いていきます ドラッグする相手は誰かというと 先程画像の右上隅に置いた 青い丸の Shape ですね そして これは handle という名前の 変数に入っています ですからここで handle と変数を 指定しても良いのですが もし あのハンドルが四隅についたら 変数を 4 つ設けて 4 つのドラッグをする- リスナー関数を設けなければいけないか ということになってきますね ですので もうちょっと 応用のききやすい方法をとりましょう ドラッグするものを変数にとります instance としましょう そしてドラッグするものを どうやって定めるかというと マウスボタンを押したそのインスタンスを eventObject から 教えてもらうことができます これをコピーしましょう eventObject に対して 誰が押されたのというのは target というプロパティです このプロパティで その具体的に クリックされたものが分かります ですから もしボタンが 4 つ ハンドルが 4 つあったとしても その押されたインスタンスが どれかというのがとれますので これに対して処理を行っていけば良い ということですね ではインスタンスの x 座標を定めます そして その位置は マウスポインタの位置ですね マウスポインタの位置も eventObject に聞くことができます ペーストしましょう この stageX ですね ステージから見たマウスポインタの x 座標 ということなのですが そこに合わせれば良いので x 座標をこのように合わせます y 座標も同様ですね ですのでコピーしてペーストします x を忘れないように y に変更します では保存して ブラウザーで確かめてみましょう ファイルメニューから ブラウザーでプレビューします 画像右上隅の青い丸の Shape マウスボタンを押して ドラッグしても動きません ステートメントが 1 つ 抜けていたからですね ではブラウザーを閉じましょう つい忘れがちなんですが マウスでドラッグするという処理 これも画面上はアニメーションになります CreateJS で アニメーションを見せるためには 必ず状態が変わったら 画面の再描画が必要になります つまりステージに対して update という命令を 発行しなければいけないわけですね ですからドラッグが行われる度に stage に update つい忘れがちなのでお気を付けください 改めてファイルを保存して そしてブラウザーでプレビューしてみます もう一度挑戦します 画像右上の青い Shape を ドラッグできました では今までのところをおさらいしましょう ブラウザーのウィンドウは閉じます ステージに置いたインスタンス 今回は Shape ですけれども それをドラッグする処理の確認です 先ずはインスタンスをクリックしたら クリックというのは マウスを押して放すことを言ってしまうので マウスボタンを押したらですね そのイベントリスナーを登録します addEventListener で イベントは マウスを押したらという意味の mousedown です そしてリスナー関数を定めます このリスナー関数は ボタンを押した時の処理を設定します 押した時は何をするかというと 次に動かしたらドラッグの処理を しましょうねということなので 非常に簡単な位置ステートメントです イベントリスナーを登録します マウスを動かしたら そして ここに定めたリスナー関数これが実際の ドラッグのアニメーションを処理します こちらに定めました インスタンスをとるには eventObject の target というプロパティで 参照することができます そしてその x y 座標を動かせば ドラッグになるのですが マウスポインタの座標は やはり eventObject に聞きます eventObject にステージから見た マウスポインタの座標はというと stageX stageY という プロパティです そして最後に忘れてはならないのが 画面の再描画 ステージに対する update です これでインスタンスの ドラッグの処理が行えます

CreateJSを応用したダイナミックなアニメーション

このコースではCreateJSの基礎を学んだ方に、ダイナミックでインタラクティブなアニメーションの作り方を解説します。JavaScriptであまり扱われない項目や、数学や物理などスクリプト以外の考え方も合わせて解説しています。CreateJSでぜひFlashに負けないコンテンツを作ってみましょう。

2時間43分 (16 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2014年01月07日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。