Edge Animate 基本ワークフロー講座

イージング

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
単調なアニメーションだけではつまらない!?そんなときは、イージング機能が便利です。イージング機能は、アニメーションの動きにメリハリのある、緩急の付いたアニメーションを設定することが可能です!このレッスンではこのイージングの種類や設定について解説します。
講師:
07:30

字幕

このレッスンではEdge Animateの「イージング」機能について、解説していきます。まずは、ダウンロードしてきたファイルの中にあるこの「new_project.an」をダブルクリックしてEdge Animateで開いておいて下さい。これがその開いたファイルです。このファウルを使いながら解説を進めていきます。「イージング」機能はタイムラインのトランジションこの色の付いたバーですね。の動きに対して変化を付けることが可能な機能です。この機能を使うことで単調なアニメーションから抜け出し緩急のあるアニメーションを表現することが可能です。「イージング」は「タイムライン」パネルの、この中のこの部分から設定することができます。それでは実際にやっていきましょう。まずこちらのアイコンをクリックしてみます。するとこの様に「イージング」のカテゴリがここの左に並んでいます。更に、このカテゴリをそれぞれクリックするとこの様に更にその右にそのカテゴリに入っている「イージング」のタイプが複数表示されており更にそれらをクリックするとこの様にどの様にアニメーションに変化が付くかといった表示がされています。それでは、まず、こちらのカテゴリの種類から見ていきたいと思います。 まず、「線状」。こちらは、直線的な等速のアニメーションの変化ですね。なので、常に一定的なスピードでアニメーションが動作する、という意味です。次に、「イーズイン」。これはアニメーションの始まりはゆっくり始まるがアニメーションの終わりに近づいていくにつれて徐々にスピードが速くなっていっています。これが「イーズイン」です。「イーズイン」の中にもこの様に、色々なパターンがあります。更に、「イーズアウト」。こちらは、アニメーションの始まりは非常に速いスピードで進んでいくがアニメーションの終わりに近づきにあたって徐々にアニメーションのスピードがゆっくりになっていくという様なスタイルです。こちらも同様に色々のタイプの「イーズアウト」があります。次に「イーズイン/イーズアウト」です。これは、アニメーションの始まりはゆっくり始まって徐々ににスピードを上げるが終わりに近づいていくにつれて徐々にスピードがダウンしていくという様な形の「イージング」ですね。こちらも様々な種類があります。最後に、この「曲線状」です。これは、先ほどの「イーズアウト」に非常によく似た形ですね。この様に、始まりはスピードを上げて進んでいくが終わりに近づくにあたって徐々にスピードが落ちてくる、ゆっくりになるという状態ですね。 それでは、実際にアニメーションに「イージング」を設定してみましょう。今回はいまステージ上にいるこの魚この魚がいまこの様に動作していますね。この動きに対して「イージング」を設定してみましょう。まず、アニメーション全体に対して「イージング」を設定してみたいと思います。アニメーション全体に「イージング」を設定するためにはこの要素の名前が書いてある隣にあるこちらの色の付いたバーこの色の付いたバーが全体のアニメーションを意味しているのでこちらをクリックして選択状態にしておきます。そして、先ほどのこちらの「イージング」のボタンをクリックして例えば、今回は「イーズイン」にしてみましょうか。初めはゆっくり始まって終わりになると速い。こちらを設定してみます。設定できますと、この様に設定したトランジションを選択するとここのアイコンも設定した「イージング」の表示に変わります。それでは再生してみましょう。この「再生」ボタンを押してステージ上でプレビューしてみましょう。この様に先ほど何も設定していない時と比べて少し動きに変化が出てきたように思います。もう少し極端にしてみましょうか。こちらの「イージング」パネルを開いてこのあたりにしてみましょうか。 これで設定できましたのでプレビューしてみます。「再生」ボタンを押しますとこの様に本当に微妙の差ではありますが先ほどよりも、少し始まりのスピードが速くなった様に思います。もっと極端にしてみましょうか。こんな感じ一度設定してみましょう。そして「再生」ボタンを押します。この様な感じで少し奇妙な動きに変わりましたね。この様にステージ上にある要素の各動きトランジションですねトランジションに対して動きの変化を付ける機能を持つのがこちらの「イージング」です。それではいったん元に戻しておきましょう。「線状」を選択しておきます。いま、アニメーション全体に対して「イージング」を設定してみましたが次は、個々に「イージング」を設定してみたいと思います。例えば、これだけとかこれだけ、という感じですね。方法は簡単です。同じ様に設定したいトランジションを選択して「イージング」パネルを開きます。そして設定したいものを選択してすこしちょっと極端なものにしておきましょう。例えばこちらにしてこちらを選択している時に、ここのパネルのアイコンが変わっていれば、設定完了です。それではプレビューしてみましょう。ここの動きだけ少し変わりましたね。 この様にここの部分に行った時だけ少し動きが変わりましたね。この様な形でこれら個々のトランジションに対しても個別の「イージング」が設定できこちらをクリックすることで全体を一括で設定することも可能です。以上でレッスンは終了です。今回は、Edge Animateのタイムライン上の動きに対して変化を付けることができる「イージング」機能について、解説しました。「イージング」機能を駆使して単調なアニメーションから卒業して洗練されたアニメーションを作ってみてください。

Edge Animate 基本ワークフロー講座

このコースではEdge Animateでアニメーションを制作していくさいの基本的なワークフローを実際に作りながら学習していきます。新規プロジェクトの作成からタイムラインアニメーションの制作、シンボルの使い方やオーディオの利用、各種デバイスに対応させる方法などについて解説します。

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

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

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

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