CreateJS実践講座

複数のトゥイーンをつなげる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
トゥイーンのメソッドは複数呼出して、アニメーションをつなげることができます。
講師:
06:34

字幕

このレッスンではトゥイーンを複数繋げてみます いま画面でみているトゥイーンは 3つのトゥイーンがつながっています 1つはバウンドするように落ちてくる もう1つはしばらく待っているという トゥイーンです そのあとす~と消えてなくなります この3つのトゥイーンを繋げて 再生するということが tween classを使うと簡単にできます Dreamweaverで開いたhtmlドキュメントには トゥイーンが1つだけ設定してあります setTweenという関数でトゥイーンの設定を 行っているのですが トゥイーンオブジェクトを作ったら toメソッドを1回だけ呼び出しています ただ変えるプロパティはY座標と 回転のrotation2つあります そしてそれをこのtween constructorの 2つめの引数でloopをtrueにしてますので 繰り返し実行されるということです 1つのトゥイーンを繰り返し実行する 確認してみましょう ファイルからブラウザでプレビューします 上から回転しながら落ちてきて バウンドするように そしてすぐに消えてしまいます また上から落ちてくるということで 1つのトゥイーンが繰り返されています この後に2つトゥイーンを順々に 追加していきたいと思います tween objectに対して toメソッドで指定したトゥイーン これが終わったら 次のトゥイーンを行いたい 終わった後は気にする必要はありません この後にどんどん繋げて 書いていけばいいですね またmyTween tween objectを指定して 少し待ちなさいと 溜めを作るわけですね final answerみたいですが 文字通りwaitです 待ちなさい その中にどれぐらい待ちなさいという ミリ秒を指定します じゃあここでは2.5秒にしましょう 2500として これだけで前のtoのトゥイーンが終わった後 バウンドするようなトゥイーンが終わった後 2.5秒待ちます そしてloopしますので また上からバウンドして落ちてくる というトゥイーンが続きます 確認しましょう ファイルを保存して ブラウザでプレビューします 落ちてきてバウンドして さっきはすぐ消えましたね 少し待ちます 2.5秒 それから上から落ちてくるというふうに 2つのトゥイーンがこれで繋がりました 更にもう1個トゥイーンを加えたいと思います すぐには消えずに 待つようになったのはいいんですけど でもやはり消え方としてはパッと消えますね す~と消えてほしいということで このwaitの後にまたトゥイーンを追加します そして今度はまたトゥイーンの toメソッドを使いますので ここまでコピーしちゃいましょう そしてこの中に指定するのは す~と消えてほしいということなので α (アルファ) を変えます αを0にするわけですね αとして0 時間はというと やはり2.5秒にしましょうか そうすると待ちはこんなに長くなくても いいかもしれませんね 1000ぐらいにちょっと調整してみます ということで まずバウンドするトゥイーン 次に1秒待って そして2.5秒かけて消えていって loopして続くという形になります 確認しましょう ファイルを保存して ブラウザでプレビューです 上から落ちてきてバウンドします 一秒溜めます そして2.5秒で消えて また落ちてくるということで このようにどんどん量を追加して toとかwaitとかを追加していけば 順番にそのトゥイーンが行われるということです もう1つだけ文法的な手を加えましょう 今はtween objectに対してto tween objectに対してwait tween objectに対してtoという tween objectに対してが 続くんですけど 実はここで繋げて書いてしまうことができます この後にすぐドットを繋げて tween objectの指定が要りません これでも同じように動きます 文法的に言いますと このtoメソッドを呼び出すと toメソッドでトゥイーンが追加された tween objectが返されるんですね そうするとその返されたobjectに対して またwaitで呼び出すということになるわけです ということは更に繋げることも可能で waitもやはり tween objectを返しますので こう繋げてしまうことができます これでも動くと もっともちょっと見にくいので改行したほうが いいかもしれませんね 改行してもjava scriptでは 改行はないものとされます ただこのように改行して書いた場合の注意は 改行はしていますけれど ここまでで一文です ですから文の最後を示すセミコロンは ここにしかありません この二行目とか一行目の最後に セミコロンをうってしまうと それは文法エラーになりますので ご注意ください 動きはかわりませんけれど それでもちゃんと 動くということを確認するために またファイルを保存して ブラウザで見てみましょう ブラウザでプレビューです 上から落ちてきて 一秒溜めて2.5秒で消える 繰り返しですね このように変えても大丈夫だということです このレッスンでは複数のトゥイーンを 繋げる方法についてご紹介しました もっとも方法と言ってもただ単に objectに対するメソッドの呼び出しを to wait to と ただ単純に並べればいいということでしたね 並べれば順番のトゥイーンが再生されます そして待つ場合 - 溜めを作る場合には waitというメソッドになります もう1つ文法的に各トゥイーンのobjectを いちいち頭につけずに 繋げて書いてしまうことができる ドットで繋げることができます ただ最後に 文の最後にだけ セミコロンをつけるというところは 間違えないようにして下さい

CreateJS実践講座

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

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

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

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

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