CreateJS実践講座

オブジェクトの数を増やしてアニメーションさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アニメーションするオブジェクトの数を増やして、それぞれランダムな速さと向きに動かします。
講師:
05:18

字幕

このレッスンではランダムな速さと向きで アニメーションするオブジェクトをたくさん作ってみます それぞれの速さ、向きはそれぞれランダムになっています そしてステージの端から消えると そのまま消えっぱなしにならずに 反対側からスクロールして現れるようになっています まだ一個だけのhtmlドキュメントを開いて 複数のオブジェクトを作るようにしてみます DreamWeaverで開いたこのHTMLドキュメントでは オブジェクトが1つしか作られていません オブジェクトはボウルという変数の中に いれることになっています そしてボウルを作るための関数を呼び出して それぞれに位置、座標、それから速さを設定し ティッカークラスのティックイベント アニメーションのリスナー関数を設定して その中で移動させています それからちゃんとステージの端から消えたら 反対側からでてくるという処理も加えてありますので 一個だけですけれども アニメーションを確認してみましょう ファイルメニューからブラウザでプレビューです でてくるのは一個だけですけれども ステージの端から消えると反対側の端からでてきます 次に下端から消えますね そうすると上端からでて 左端に消えると右からでてきます このインスタンスの数を増やしましょう オブジェクトを作っているのは この初期化の関数の中の このアドチャイルドまでの部分ですね そしてインスタンスが一個だけあったら ボウルでいいんですが 複数作りたいので これはSにして配列とします そうすれば複数のオブジェクトが入れられます 次にいくつ作るかということなんですが これはボウルカウントという変数にして 25個作りましょう ではこのオブジェクトを作る部分については 繰り替え処理になります 不応分ですね カウント変数を0からボウルカウントとして 毎回カウントアップ そしてアドチャイルドまでやったら これで25個作られることになります それからボウルという’変数が グローバルではなくなりましたので ここでバーをつけてローカル変数としましょう これでとりあえず25個のインスタンスは作られます もちろんまだ動きは不完全ですけれども ここで確認しましょう ファイルを保存してブラウザでプレビューします 25個出来上がりましたけれど動きませんね すくうばかりで動くほうの処理が加わっていません ですから次にそれを行いましょう まずボウルを作る処理の中で 配列ボウルズがありますので そこに作ったインスタンスを加えないといけません ボウルズ プッシュです そしてボウルを加えます では次に動くほうですね 動くのはティッカークラスのティックイベントに加えた このムーブというリスナー関数です これですね さてここに処理を加えます ここで配列からオブジェクトを取り出して 一個一個動かさないとダメということになります この部分を不応分で処理します カウンター変数 ここは同じですね そしてボウルカウント カウンター変数のカウントアップ そしてボウルという変数がすでにありませんので ボウルはあらためてローカル変数に取り出します この時配列を使ってボウルズのハイということで インスタンスが取り出されます ではこれで確認してみましょう ファイルを保存してブラウザでプレビューします 今度は全部ちゃんと動いてますね それから端からでていったインスタンスはどれも同じように 反対側の端から出てくるようになりました このレッスンでは一個のオブジェクトがうごくという アニメーションを複数のオブジェクトにして 複数のオブジェクトが様々な方向に アニメーションするように変えてみました 複数のオブジェクトを扱いますので オブジェクトは配列に入れました そして繰り返し分不応ステイトメントで処理を行い 作ったオブジェクトは配列に加える それからもう一方で動かす方 ティッカークラスのティックイベントのリスナーですね その中でやはり不応ループで インスタンスを一個一個とりだし 後のアニメーション処理については一個の場合と同様です

CreateJS実践講座

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

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

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

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

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