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

Ticker.addEventListener()メソッド

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Ticker.addEventListener()メソッドには、Stageオブジェクトが渡せます。
講師:
06:00

字幕

この JavaScript コードでは tweenjs を使っています もっとも tweenjs については 新しいバージョンで さほど大きな変更はありません ただ tweenjs に関連して tweenjs でも使っている easeljs のT icker に関して 注意が必要ですので そのことをお話ししたいと思います 先ずこのコードの Tween アニメーションを確かめておきましょう ブラウザでプレビューします 星が回りながら落ちてきてラウンドして また上から落ちてくる というこの繰り返しですね では Tween アニメーションの確認が 終わりましたのでブラウザは閉じます tweenjs に限らず createjs で アニメーションを再生するには 一定の間隔で両側を 更新する必要があります そのために使うのが Ticker クラスです Ticker クラスは一定のタイミングで 何かを起こすということに使います ここでは古いメソッド addListener を使っています これは古いバージョンからあるメソッドです 引数にはオブジェクトを渡します そしてそのオブジェクトに Tick という関数を 定めることに決まっています ウインドウというのは このスクリプトを書いている場所ですから スクリプトを書いている場所を見ると Tick という関数があります そうすると一定の間隔で この関数が呼び出され 中の処理が行われます やっていることは描画の更新ですね ステージに対してアップデートという メソッドを発行していきます もっとも Ticker クラスの Ticker.addListener というメソッドも イベントハンドラーと同じく 今後は使わない方が良いですよと とりあえずはサポートされていますけれども 将来サポートされなくなるかもしれない という風に言われています どうするかというと勿論 EventListener に書き換えます addLister は合っていますから 間に Event と入れれば良いですね そして EventListener は 引数 2 つ最初にイベント次に関数ですね イベントは 今までの Tick で 指定していきたいイベントは このまま tick です そして関数は別に 何という名前にしても構わないのですが 実行したいのはこれですから tick と書きましょう 短いですけどコピーします コントロール若しくはコマンドドラッグです アニメーションを確かめますので ファイルは保存します そしてブラウザでプレビューしましょう 星が上から回りながら 落ちてきてラウンドすると 同じアニメーションですね ただ先程と星の色と水平位置が違う と思われたかもしれません ここではスクリプトの方でランダムな色と 水平位置を設定するようにしているので そこは気にしないでください ちゃんと動いているということが 確認できましたので ブラウザのウインドウを閉じましょう この Ticker に定めた addEventListener の メソッドの使い方は原則通りです 引数第 1 引数はイベント 第 2 引数には関数ということですが 実は addEventLister のメソッドには 第 2 引数に場合によっては オブジェクトを渡すこともできます 勿論その決まりはあるんですけれども 今回のこの場合については ステージを渡すことができます stage と 何が起こるかというと stage オブジェクトを渡すと ステージに対するアップデートメソッドが 自動的に Tick のタイミングで 発行されます ということは この関数はいらなくなるんですね コメントアウトします Tick という関数がありますけれども コメントアウトしてしまう 先程の書き方ではここに関数を 指定しないといけなかったんですが 関数を指定しないで ステージを指定すると 内部的にこの stage.update が実行されます もう一度確認しましょう ファイルを保存して ブラウザでプレビューです また星の色と水平位置が変わりましたが やはり星が上から回りながら落ちてきて 下でバウンドする その繰り返しですね 同じように動いたことが 確認できましたので ブラウザは閉じましょう そしてまとめに入ります Tween に限らず 主にアニメーションで 一定のタイミングで描画を 更新するという時に使うのが Ticker クラスです そして Ticker クラスに 何かやらせたい時には 今までのバージョンですと addListener というメソッドを使い 引数にオブジェクトを渡しました それも今のところ扱えるんですが 今後は やはり addEventListener を使うのが良いでしょう そして原則としては addEventListener はイベント 今回の場合 Tick なんですけれども その後に第 2 引数は 関数を定めることが通常です ただし場合によっては オブジェクトを渡すこともできます 関数を渡せば その関数が 実行されるんですけれども ステージオブジェクトを 渡した場合 Ticker にですね ステージの描画の更新 具体的には stage.update が 自動的に この Tick の タイミングで呼び起こされます ですから やりたいことが アップデートだけであれば この書き方が簡単です もしアップデート以外に やる処理があるんであれば これは やはり原則通り関数を定めて その関数を渡してください

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

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

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

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

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

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