CreateJS実践講座

オブジェクトのアニメーションをスクロールさせる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
アニメーションするオブジェクトがステージ端を超えたら、反対側の端にスクロールさせます。
講師:
06:27

字幕

このレッスンでは一定の速さで 直線的に動いているこの点のオブジェクトが ステージの端から消えたら 反対側から出てくるように 設定したいと思います 今 左上に動いている点が 左端から消えると右端から出てきます 上から消えると下から出てくる このような処理を加えます Dreamweaver で開いている html ドキュメントは アニメーションはしますが ステージの端から消えてしまうと それきり戻ってきません 構造を簡単に確認します まずスピードです 水平方向 垂直方向のスピードを ランダムに決めて そしてボール 点のインスタンスを作るときに そのスピードを引数に渡しています そして渡された関数はその値を ボールの速度 velocityX velocityYに設定します そして Ticker クラスの Tick イベントも リスナー関数 アニメーションの関数で ボールの XY 座標に 自分自身に設定された速度 velocityX と velocityY を 加えていますので それで一定方向に動くということになります でも一定方向に動いたらそれきりですので 決して戻ってくることはありません 確認してみましょう ファイルメニューから ブラウザでプレビューします 左上方向に消えていきますが 左端からいなくなると それきり戻ってきません これを反対の端から 戻ってくるようにしたいということです 反対端から戻ってくるという処理を加える前に コードを少し書きやすいように整理しましょう それはこのアニメーションの関数です いきなりインスタンスの XY 座標を 設定していますが この設定をする前に変数に値を とっておくことにします X 座標とY 座標ですね nX nY としましたが そこにボール インスタンスの X 座標を入れます 同様に Y 座標についても変数を 一度入れます そしてその変数に対して速度を加える ですから この段階では インスタンスの速度にはなっていません そしてインスタンスの速度をどうするのか 変えるのか変えないのかという関数を設けます そしてその関数から戻ってきた結果を 設定するという形にします まだ動きは変えないので 関数は「roll」としましょう そこに nX を渡します そして同じように Y 座標も「roll」として Y 座標を渡します 今はまだ動きを変えないので roll の値を受け取る Value としましょう そしてその値をとりあえず書いてしまいます ということで特に動きは変わりません インスタンスの XY 座標に速度を加えました それを渡したら そのまま返ってきますから 先ほどと結果は変わらないはずです 念のため確認しましょう ファイルを保存して ブラウザでプレビューします こうして左上のほうに消えていきますが 戻って来ません でもちゃんと動いてますね 先ほどと変わらない動きに出来ました 次に反対側から戻ってくるという 処理を加えます Dreamweaver に戻りましょう まずステージの幅と高さは変数を設けてあって その変数の中に値をとっています ですからこの幅と高さを使って もし幅よりも大きかったら 小さかったら あるいは高さよりも大きかったらという処理を 先ほどの roll に加えていけばいい訳です では roll を呼び出すときに 引数を1つ加えます stageWidth 幅ですね それから stageHeight 高さを渡します roll の処理の仕方は同じで つまり最大値を置くというわけです length としましょう 受け取ったらこれよりも大きいのかどうかという 判定をするわけです if 文です もし受け取った値が length よりも 大きかったらどうしたらよいかというと 行き過ぎた訳ですから戻ってこないといけない ということで value から length を差し引きます こうすると反対側に戻ってくる ということになります もうひとつマイナスになって しまうことがあります else if です value がもしマイナスになったら これは反対の端のステージから 消えてしまったということになりますので 同様に今度は逆方向です 加えることの length です これで保存しましょう そしてブラウザで確認します 上から切れると早速出てきました 今度は左から消えます 右から出てきました 上から消えると下から出てくるということで ちゃんとスクロールする動きが 出来上がりました このレッスンではステージの上を 一定の速さで一定の方向に動くオブジェクトが ステージの外に出てしまった場合 反対側の端から登場するようにしました そのためにオブジェクトの移動先を計算して その移動先とステージの幅や高さを 関数に渡しました そしてその関数は移動先がステージの端 幅や高さを超えた場合には その幅や高さを引くことによって 反対側に戻しました あるいはマイナスになってしまった場合 今度は幅や高さを足しこむことによって またその反対側から登場させる ということができました

CreateJS実践講座

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

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

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

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

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