初めて学ぶCreateJS

ハンドラの受取るイベントオブジェクトを使う

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
DisplayObject.onClickイベントは、ハンドラの引数としてイベントオブジェクトを渡します。そのプロパティから、クリックされたインスタンスが得られます。
講師:
06:24

字幕

インスタンスをクリックした時の処理には onClick イベントを使います そのハンドラに設定した関数は イベントオブジェクト というものを受け取ります そのイベントオブジェクトを どのように使うのかということについて ご説明したいと思います これが星形のインスタンスを描いて クリックしたら回転させるという JavaScript コードです 簡単に流れをご説明しましょう まず初期化の関数 initialize それが canvas 要素に対して stage を作ったら createShape という 関数を呼びだしています 引数は xy 座標と 星形の塗り色です createShape の関数は それらの引数を受け取ったら shape インスタンスを作り stage に子供として その shape インスタンスを付け加えます そして引数の xy 座標に 位置を定めたら onClick イベントのハンドラを 設定します これは move という関数です この関数はクリックされた時に その shape の回転角を15度加算し stage の描画を更新します 尚 draw という関数は shape の graphics プロパティ つまり graphics オブジェクトを渡して 色を指定すると この関数が呼びだされ 線と指定された塗り色で drawPolyStar メソッドを使って 星形を描きます この script 自体は 今の所問題はありません けれども例えば星を一個 増やしてみましょう この関数呼びだしをコピーして 同じ場所に重ねてはダメですので じゃあ位置を少しずらします 右下の方にずらしまして カラーもちょっと変えましょう 赤みを帯びたカラーです では確認をしてみます 保存をして 「ファイル」メニューから 「ブラウザでプレビュー」します シアンの星形の右下に 新たにマゼンダの星形が描かれました 最初にあったシアンの星形をクリックすると この星が回転します 良いですね ではマゼンダのほうの 新たな星形をクリックすると どうでしょうか やはり回転するのは シアンの星です これで差支えがなければいいのですけど クリックされたインスタンス自身を 回したいということが 多いのではないでしょうか その場合 先程のスクリプトでは 問題があります JavaScript コードを確かめます 何がまずかったかと言うと この move の関数の中の 回転角を変えるインスタンスです これは関数の外に var 宣言されています ということは1つに固定されてしまうんですね そうならないためには どうしたら良いかというと 今の希望は毎回毎回 固定せずに クリックしたインスタンスを なんとかとってきたいわけですね 「クリックしたインスタンス」と そしてそのインスタンスに対して 角度を変えれば良いわけです ではこのクリックしたインスタンスを どのように取り出せば良いでしょうか CreateJS のイベントには ハンドラに設定した関数に イベントオブジェクトというものを 受け渡すものがあります onClick イベントはまさにその1つで ハンドラに設定した関数に イベントオブジェクトというものを 引数として渡してくれます イベントオブジェクトは何かというと 使うのにいろいろ便利な 値や参照を持っているのです その中の1つにクリックされた インスタンスの情報があります それを利用すれば良いでしょう イベントオブジェクトを受け取るには イベントハンドラの関数に 引数としてイベントオブジェクトを受け取る 変数を設けます eventObject という 名前にしました そして これを利用して 「クリックされたインスタンス」は target というプロパティに収められています ですから これでクリックした インスタンスがとられて その回転角が回ります ということで クリックしたインスタンスが 回転するようになります では保存して確認してみましょう 「ファイル」メニューから 「ブラウザでプレビュー」します キャンバスにはシアンとマゼンダの 2つの星が描かれました まずシアンをクリックすると 回転します これは先程までと変わりません では今度はマゼンダの星をクリックします マゼンダの星が回転します ということで イベントオブジェクトを使うことによって クリックされたインスタンスがどれなのか ということを取得することができるわけです イベントオブジェクトというのは イベントハンドラで受け取ることができ そのイベントについての 有効な情報を持っています それを利用すると スクリプトの応用範囲が広がります 学習したことを コードでも確認しておきましょう インスタンスに対して イベントハンドラ onClick を定め そこに move という関数を設定しました すると そのイベントハンドラの move という関数は イベントオブジェクトというものを 引数として受け取ります すると そのマウス操作に関する 有効な情報をいろいろ持っていて そのうちの1つ target というプロパティ これがクリックされたインスタンスを参照します ですから違うインスタンスをクリックすれば そのインスタンスの参照を 受け取ることができる というわけです

初めて学ぶCreateJS

このコースではCanvasへの簡単な描画からTweenJSによるトゥイーンアニメーション、PreloadJSでの外部画像ファイルの読み込みやSoundJSでのサウンドの再生などのさまざまな種類のスクリプティングについて解説します。さらにEaselJSでのマウスによるインタラクティブな操作やフィルタを使った動的な表現なども紹介します。

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

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

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

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