CreateJS新バージョンの大きな変更

イベントハンドラをイベントリスナーに書替える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
イベントハンドラによるクリックの処理を、新しいイベントリスナーで書替えます。
講師:
05:00

字幕

新しい CREATEJS にすると いきなり イベントハンドラが使えなくなってしまう というわけではありません。 今開いている HTML ドキュメントの JavaScript コードでは onClick イベントハンドラが使われています。 そしてスクリプト要素を読み込んでいるのは EaselJS-0.6.0 最新です。 これが動く事を示した上で イベントハンドラからイベントリスナーに 書き換えてみたいと思います。 まずこのスクリプトが どういう動きになっているのか ということを確認しましょう。 ファイルメニューから 「ブラウザでプレビュー」します。 ステージの左上の方に 青い四角のシェイプが描かれています。 onClick ですから これをクリックしますと 回転します。 30 度ずつ回転するという動きになっています。 確認ができましたので ブラウザのウィンドウは閉じましょう。 スクリプトの流れを簡単に確認します。 まずシェイプを描いている部分ですけれども シェイプは createRect という関数で描いています。 ここは位置やサイズの指定です。 そして関数がここにありまして シェイプを作ります。 そのシェイプの graphics プロパティーから グラフィックスオブジェクトを得て 四角い絵を描いて そしてシェイプを返しています。 それを stage に addChild することによって 表示しているということになります。 では、描画の部分はわかったので たたんでしまいましょう。 これは今日のポイントではありません。 ポイントはこちらですね。 四角で描いたシェイプオブジェクトの onClick イベントに ハンドラの関数を定めています。 それがここで rotate という 名前の通り回転するんですが イベントオブジェクトの target プロパティで クリックしたシェイプの インスタンスを取得します。 そしてそのインスタンスの ローテーションプロパティを プラス 30 度ということで クリックする度に 30 度回転していると。 それからアニメーションを ちゃんと描画するためには ステージの更新 update メソッドを 発行する必要があります。 では新しい CREATEJS イベントディスパッチャークラスの イベントリスナーに書き換えてみます。 このイベントハンドラを設定した部分は 一応比較するために 残しておきましょう。 コメントで省略します。 そして新たに改行をして このシェイプのオブジェクトに対して イベントリスナーを登録します。 コピーをしましょう。 ドラッグコピーです。 Ctrl キーもしくは Command キーを押したままドラッグ。 そしてイベントリスナーは addEventListener というメソッドで イベントリスナーの登録をします。 第一引数はイベントです。 onClick に対応するイベントは すべて小文字で click です。 そしてリスナー関数という風に 呼びますけれども 実行したい関数はやはり同じように この関数名の部分を第二引数に渡します。 ここもドラッグコピーしてみます。 では確認してみましょう。 ファイルは一旦保存します。 そして、ブラウザで確かめます。 「ブラウザでプレビュー」です。 ステージの左上に描かれた 青いシェイプをクリックしてみます。 イベントハンドラの場合と同じように 30 度ずつ回転します。 では確認ができましたので ブラウザのウィンドウを閉じて おさらいをしましょう。 新しい CREATEJS でも イベントハンドラはまだ使えます。 ここに読み込んでいるのは EaselJS-0.6.0 最新です。 そして現在 コメントアウトしてありますけれども onClick という イベントハンドラも使えました。 ただし、将来除かれる可能性があるので 使うことは推奨しません という扱いになっています。 ですから、やはり使う上では 最新のイベントリスナーの方が便利ですし 拡張性もありますので これから使う場合には こちらをぜひご利用ください。 そして、文法としては オブジェクトに対して、ハンドラの場合には ドットでハンドラを定めて 関数を代入の形にしたんですけれども イベントリスナーの場合には addEventListener というメソッドで 二つの引数を渡します。 第一引数はイベントを文字列で。 第二引数は関数の参照です。 これでクリックした時に この関数が実行されます。

CreateJS新バージョンの大きな変更

2013年2月にCreateJSがアップデートされました。このコースではイベントリスナーの採用やPreloadJSとSoundJSの変更など特に影響が大きいと思われる変更点をいくつかかいつまんで解説し、それらをどのように修正すればよいのか説明します。

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

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

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

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