CreateJS実践講座

オブジェクトをクリックしたときに動かす

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
オブジェクトにイベントリスナーを加えて、クリックしたら動かします。
講師:
04:26

字幕

このレッスンでは CreatwJS の EaselJS ライブラリで インスタンスをクリックした時に 行いたい処理を どのように変えたら良いのか ご説明します 今 Stage に星形の Shape のオブジェクトが 置いてあります クリックすると 少しずつ回転します この様な処理を作ってみましょう Dreamweaver で開いたのは まだ クリックに対する インタラクションが加えられていない html ドキュメントです でも 星形の Shape は出来ています Shape を作り 位置決めをして そして 星形を描くという 関数がここにあります 塗り色やストローク 線を決めたら drawPolyStar() というメソッドで 星形を描きました それが Stage に置いてあって 描画が更新されます 動きませんが 星形は出来ています 確認しましょう 「ファイル」から 「ブラウザでプレビュー」です 星形はちゃんと Stage の真ん中に置いてあります けれど クリックしても 何も起こりません その処理を加えましょう CreateJS では全体を通して 「何々したら これをして」という 処理については イベントリスナーを使うことになっています そのイベントリスナーを 誰に対して呼び出すか 誰にお願いするかです 今回の場合は Shape インスタンスですから これをコピーして持ってきます そして イベントを加えるメソッドは addEventListener() です Listener という綴りが間違いやすいです 何が起こったら? クリックが起こったらです イベントは文字通り click です まだ定義していませんが 回転したいので rotate と言う リスナー関数を定義します では そのリスナー関数を ここに書きます fanction で rotate イベントリスナーは一般に 呼び出されると 引数を1つ受け取ります オブジェクトです イベントが起こると 受け取るオブジェクトなので eventObject と呼ばれています 名前はどう決めても良いので 分かりやすく eventObject としました そして インスタンスを回転させたいわけです インスタンスは変数の myShape の中に入っていますので これをコピーして持ってきます 回転のプロパティは rotation です そして 15 度加算しましょう これで確認します 「ファイル」を「保存」して 「ブラウザでプレビュー」です クリックしても何も起こりません 1つ大事なことを忘れています それを加えましょう EaselJS は描画に キャンバスを使っています キャンバスと言うのは 「描画しなさい」と言われない限り 描画の更新をしません 星形を描いた後は stage.update() というメソッドを呼び出して 描画の更新をしました ところが クリックした時の イベントリスナーの rotate は 更新が無いのです ですから これをコピーしましょう コピーして持ってきます これで良いでしょう もう一度 「保存」して確認しましょう 「ブラウザでプレビュー」です インスタンスをクリックします 今度はちゃんと回転します Stage の更新を 忘れないようにしましょう このレッスンでは インスタンスをクリックした時に 行いたい処理の 定義の仕方について ご説明しました CreateJS 全般を通して addEventListener() が 何々をした時 というお願いの仕方です 今回はクリックの場合には クリックするインスタンスに対して お願いして イベントはクリックです そしてリスナー関数を登録し リスナー関数の中に やりたいことを書きます 最後に Stage の描画の更新を 忘れないようにしましょう

CreateJS実践講座

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

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

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

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

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