初めて学ぶCreateJS

インスタンスをマウスクリックで動かす

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Shapeインスタンスを、マウスクリックで動かします。インスタンスへのクリックは、DisplayObject.onClickイベントで扱います。
講師:
07:23

字幕

マウスのクリックでインスタンスを 動作させる方法についてご説明します 星形のシェイプインスタンスなんですが クリックをすると そのたびに少しずつ回転します マウスの操作に対して スクリプトを実行するには イベントハンドラというものを使います この html ドキュメントに書いた script 要素の JavaScript は まだ星形を描いただけで マウス操作に対する処理は script として追加されていません ざっと流れを確認しましょう まず stage を作り そして Shape インスタンスを作ったら それを stage の子供として 加えています そして shape の位置を整え 星型を描く draw という関数を呼び出します 引数には shape . graphics プロパティ つまり graphics オブジェクトを 渡します 関数 draw は渡された graphics オブジェクトに対して 線と塗りを設定して drawPolyStar メソッドで 星形を描き stage の描画を更新しています 現在の動作を確認してみましょう 保存したら 「ファイル」メニューから 「ブラウザでプレビュー」です キャンバスの真ん中に 星形のシェイプが置かれました 但しマウス操作に対する スクリプトを書いていませんので クリックしても 何も起こりません マウス操作に対するスクリプトを書く前に この JavaScript コードを少し整理します 具体的には shape を作っている部分 これを別に関数として分けます そのほうが後々扱いやすいですから 関数名は function createShape とします そして shape を作って stage に加え位置調整をして 星形を描く関数を呼びだす この部分全部 移してしまいます そして初期化の関数 initialize から この関数を呼びだすわけですね せっかくですから もう少し 融通が利くようにしましょう 具体的には 位置は関数呼び出しで 自由に設定できるようにしましょう xy 座標を関数を呼びだすときに 指定します ということは受け取らなければいけませんので 引数を定めて これを xy 座標として設定します 更にせっかくですから 塗り色も指定できるようにしましょう これは draw のほうに入っているのですが それを createShape の 呼び出しのほうに 持って行ってしまいます ということは createShape の関数でも この引数をカラーを受け取って color という名前にします バケツリレーのように draw 関数の呼び出しにも この color を渡すということになります そしてdraw のほうは やはり引数を加えて color の引数を加えまして それを beginFill のメソッドに 指定すれば良いでしょう 動作は変わらないはずですけれど 一旦保存してブラウザで確認してみましょう 問題がないことを確認します 「ファイル」メニューから 「ブラウザでプレビュー」です 特に問題がなく キャンバスには 星形のシェイプが描かれました では いよいよマウス操作に対する スクリプティングにかかります オブジェクトをクリックした時に スクリプトを実行する その方法について ご説明します クリックした時というのは イベントと言われて 何か意味のある操作を行った時に 何かスクリプトを実行したいという場合には イベントハンドラというものを定義します 具体的にはクリックの場合には そのインスタンスに対して そのインスタンスをクリックした時 という意味で .onClick というふうに イベントを定めます そしてここには「=」 代入ということになりますけど 関数の名前を入れます ハンドラというのは イベントが起こった時に実行される 関数のことです ですから関数の定義は 普通に通常の関数として定義します そしてその関数の名前を onClick の後に付け加えればいい ということです そして関数の中には クリックしたらやりたいことを記述します 星形のシェイプに onClick イベントのハンドラを定めます では createShape の関数の中ですね myShape. として onClick です まだハンドラは定めていません move という名前にします そして function として move という関数を定めます やりたいことは シェイプの回転ですので shape が収められている変数 myShape を持ってきて rotation ですね 15度回転しましょう そして忘れていけないのは 描画の更新です stage を update します ではクリックでちゃんと動作するかどうか 確かめてみましょう 保存して「ファイル」メニューから 「ブラウザでプレビュー」します キャンバスには星形の シェイプが置かれています クリックしてみましょう ちゃんと回転しますね 以上がインスタンスをクリックしたときに スクリプトで動作させる方法です イベントハンドラというものを使います コードで確認しますと インスタンスに対して ドットで onClick というイベント これがクリックした時に起こるイベントです それに対して「=」で関数名 イベントで実行される関数のことを ハンドラと呼びました そのハンドラを定め そして後は普通に関数を定めて その中でクリックした時に やりたいことを記述すれば良い ということです

初めて学ぶCreateJS

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

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

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

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

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