CreateJS実践講座

トゥイーンの_x001C_動きにバリエーションを加える

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
Tweenオブジェクトの設定にパラメータを加えることで、トゥイーンアニメーションに変化が加えられます。
講師:
06:57

字幕

このレッスンではごくシンプルなトゥイーンに いくつかのバリエーションを与えます 1つは繰り返しトゥイーンが実行されています もう1つ バウンドするような変化ですね これはパラメーター1つ加えるだけで 実行できます あと若干の設定についても説明します Dreamweaver で開いた html ドキュメントは ごくシンプルなトゥイーンだけが設定されています トゥイーンを設定する関数は― この set tweenで tweenを与える instance オブジェクトを引数に受け取ります それに対してnew tweenということで tween オブジェクトを作り to メソッドで設定しているのはY座標の変化 これが上から落ちてくる部分ですね それから回転についても 360 度回転する それを 5000 ミリ秒 5秒で変化させるというトゥイーンになっています 現在のトゥイーンを確認しましょう ファイルメニューからブラウザでプレビューします 上から落ちてきて― ゆっくり落ちてきますね 回転しながら そして止まります ループしません 一回こっきりです リロードしてみましょう ちょっと上が見えてしまっているので この後少し上にあげたいと思いますけど 回転して落ちてきて 止まっておしまいです これをループするようにしてみたいと思います ループの前に まず上から星が落ちてくるときの 上の座標なんですが shape のY座標 この myRadius というのは星形の半径です その半分上に上げているのですが もうちょっと上に上げましょう ですから2分の1をとっちゃいます そしてループなんですが ループは トゥイーンオブジェクトを作る時 トゥイーンコンストラクタですね この target を渡すんですが 更にまだパラメーターが指定できます 引数としてオブジェクトで渡します {}ですね loop これを true というふうに定めると ループしてくださいということになります では確認しましょう ファイルを保存してブラウザでプレビューします 上から落ちてきます そして止まる また上から落ちてきますね これはループ 繰り返しがずっと行われます それから上から登場するとき 完全に見えない状況から登場しますね ではさらにこの落ちてくるときの 値の変化の仕方 これを変えてみたいと思います Dreamweaver に戻りましょう トゥイーンの値の変化のさせ方は to メソッドの中で定めます この引数の最初はプロパティですね どの値をどういうふうに どのプロパティをどういうふうに変化させるのか そしてミリ秒なんですが この後にどのように値を変化させるのか ということを関数で指定します これはいくつか用意されているのですが 一番見栄えのするバウンドするように というものにしてみたいと思います Ease というクラスの中で Bounce バウンドですね out out in というのが付くんですけれど out というのは終わりのほうで トゥイーンの変化の終わりのほうで変化します バウンドというのは落ちてきて終わりのほうで はずみますね ということなので Bounce out が弾むような指定になります では 確認してみましょう ファイルを保存してブラウザでプレビューします 上から落ちてきて弾みますね また落ちてきます すると 先ほどよりも早くなりましたね というのもバウンドというのは やることが多いです それを5秒の中でやれということなので 先ほどの単純に落ちてくる場合よりは急がないと バウンドが終わらないですね ということで落ちてくるスピードが 見た目は早くなっています さらにもう1つ手を加えます これはアニメーションの見た目には 変更がありません スクリプトの構成の問題なんですけれど 毎回毎回 画面を更新しないと CreateJS のアニメーションというのは 実行されません 目に見えません ということなので Ticker に addEventListener で tick event に対して この処理を行ってくださいと それがこの関数ですね tick でステージのアップデートを行っています というのもやりたいことが stage の update だけの場合 わざわざ Function を リスナー関数を定める必要が実はありません 定めても結構なのですが省略できます ただこのままではいけませんので やはり ticker にお願いする必要があります ただしここに stage と stage オブジェクトですね new で作った stage オブジェクトを 渡してしまいます そうすると わざわざ関数を書かなくても 内部的に CreateJS が stage に対して アップデートを tick event のたびに行ってくれます ですからコードを書かなくても CreateJS のほうで 気をきかせてくれるということです では動きは同じなのですが 同じように動きますということを確認しましょう ファイルを一旦保存して ブラウザでプレビューです 上から落ちてきて 弾んで 弾み終わると また上から落ちてくる 動きは変わりませんけれども 先ほどの関数 リスナー関数がなくても動いたということです このレッスンではトゥイーンのアニメーションに 2つのバリエーションを加えました 1つは繰り返すと トゥイーンを設定したものを繰り返すというのは トゥイーンコンストラクターの引数2つ目に オブジェクトで loop プロパティを true にする これで繰り返しになります もう1つは今度は to メソッドに加えましたけれど 値の変化のさせ方 ミリ秒の時間の後に引数 パラメーターを加えて 今回は比較的面白い ease の中の bounce out というのを使いました それからもう1つ stage の update これはしなければいけないのですが もしやりたいことが― stage の update だけの場合には ticker に対して add event listener tick event に stage を登録してしまえば 内部的に stage の update をやってくれるので この関数がいらなくなるということでした

CreateJS実践講座

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

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

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

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

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