CreateJS実践講座

イベントの起こったオブジェクトを調べる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
リスナー関数からイベントの起こったオブジェクトが調べられます。
講師:
03:49

字幕

このレッスンではマウスイベントの リスナー関数について 応用範囲の広がる書き方をご紹介します 今ステージには星型のインスタンスー シェイプがあります クリックすると回ります でももし同じように動かしたいものが 2つに増えたら あるいは10個だったら いちいちリスナー関数を10個書くのは大変です 1個でも済むような書き方があります それをご紹介しましょう Dreamweaverで開いたのは 今のクリックするとインスタンスが回転する そのJavascriptコードを書いた STMLドキュメントです 今の書き方というのは まずシェープインスタンスを グローバルの変数に入れ そのシェイプインスタンスに イベントリスナーでクリックした時に リスナー関数を実行しなさいと言っています そしてそのリスナー関数はというと グローバルな変数に入れておいた オブジェクトのローテーション 回転角を15と加算するということで回しています ですからもしインスタンスー シェイプインスタンスが2つに増えて 同じ動きをしたいといった時 たぶん変数を増やすのでしょうか そして変数が変わりますから 関数も変わります 内容は同じなのに そうしないで済むようにしたいと思います 具体的にはグローバルな変数を使いません これでどう書くかです ということはローカルな変数 関数の中での変数を宣言することになります そうすると今度は関数の外で マイシェイプという変数を見つけようとしても 関数の中にあるローカル変数は 参照できません グローバル変数がありませんので こんな変数はありません ということになってしまいます そこでどうするかというと 実はイベントオブジェクト これはとても便利で イベントに関する情報を持っています 今回の場合イベントオブジェクトに対して これをコピーしますけれども カレントターゲットというプロパティがあって それは何かというと イベントリスナーを登録したインスタンスが これで分かるのです それをマイシェイプといいます 同じ名前ですがこちらのローカル変数と こちらのローカル変数は別物ですね こちらで新たにイベントオブジェクトから このイベントを起こした インスタンスは何だと聞いて それを取り出しています その上でそのインスタンスの 回転角を回すということです 結果は変わりませんが確認してみましょう ファイルを保存して ブラウザでプレビューします インスタンスをクリックすると回転します けれどグローバルな変数を使っていません このレッスンでは マウスイベントのリスナー関数を 複数のインスタンスで共有できるような 書き方についてご紹介しました 具体的にはaddEventListenerで リスナー関数を登録する これはインスタンス毎に 行わなければいけないのですが そのリスナー関数でイベントオブジェクトの カレントターゲットというプロパティを調べれば クリックされたインスタンスを 調べることができます そしてもし動きが同じであれば この形でリスナー関数を共有してしまえば 同じ動きをさせることが リスナー関数1つでできてしまうということです そしてその結果 グローバルなシェイプオブジェクトを 入れるための変数は必要がなくなりました

CreateJS実践講座

CreateJSは、これまでFlashでしかできなかったようなインタラクティブなコンテンツや多彩なアニメーションを作ることができるJavaScriptライブラリです。このコースではチャプターごとにJavaScriptコードのサンプルをひとつずつとりあげながら、その制作方法を一歩一歩段階的に解説します。

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

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

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

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