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

モーションパス

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
直線的なアニメーションだけじゃつまらない!?そんなときは、モーションパス機能を使ってみましょう!モーションパス機能は、ステージ上に書いた線に沿って、エレメントをアニメーションさせる機能です。
講師:
09:33

字幕

このレッスンではEdge Animateのモーションパス機能について、解説していきます。まずは、ダウンロードしてきたファイルの中にある「new_project.an」をEdge Animateで開いておいて下さい。開いた画面がこちらとなります。このファイルを使いながら解説を進めていきます。モーションパス機能は対象の要素の移動アニメーションを直線的な動きではなくステージ上に描いたパスに沿った形で曲線的な動きにさせる機能です。それでは実際に見ていきましょう。モーションパスへの切り替えはまず動かしたい要素をクリックしてこの「プロパティ」パネルの中の「モーションパス」というのをクリックします。これで、この要素は「モーションパス」でのアニメーション制御となります。一度「モーションパス」に切り替えると既にタイムライン上で設定されていたこちら「X」及び「Y」モーションのトランジションなどは、全て削除されてしまいますので、ご注意下さい。アニメーションの作成は「X」及び「Y」モーションの時と同じく移動開始時点と移動終了時点の要素の状態をキーフレームで設定して作成します。まずはそこまでやってみます。こちらの再生ヘッドをダブルクリックしてピンを表示させた上で例えば「3秒」のところまで持っていきます。 この状態で要素を「3秒」後の位置に持っていきます。この様に、「X」及び「Y」モーションのアニメーションと同じようにこの様に、直線状のアニメーションをまずは作ることができました。「モーションパス」の醍醐味はここからです。まず、ステージ上に描かれているこの青いライン上にマウスを持っていくとこの様にペンの様なアイコンに変わります。この状態でライン上をクリックしてドラッグするとライン上にアンカーポイントが追加されラインの形が変わります。この様に曲線的なラインにすることができました。この状態で一度ステージ上でプレビューしてみましょう。ここの「再生」ボタンを押します。するとこの様にアニメーションがラインに沿って動いているのがわかりますね。この様に「モーションパス」ではこのラインいわゆる「ベジェ曲線」で滑らかなアニメーションの移動を設定することができます。ベジェ曲線は、イラストレーター等を利用した事がある方には、馴染みのあるものですね。ちなみに先ほど設定したこちらのアンカーこのアンカーはライン上でいくつも追加することが可能です。ライン上でクリックするとこの様に、追加できます。そして、それぞれにこの様に、ドラッグすることで角度を付けていくことができます。 ちなみに、このアンカー、クリックするとこの様に、ハンドルが出てきます。このハンドルを、この様にドラッグしたり、位置を変えたりすることでこのカーブの調整も行うことができます。こちらもやってみましょうかね。この様にカーブを変更することができます。またこの青いライン上やアンカーこの白い点ですね。そして、このアンカーをクリックした時に出てくるこのハンドルこれらにはそれぞれの編集ガイドが付いておりそれぞれにマウスカーソルを合わせると例えば、アンカーですとこの様な編集ガイドが出てきます。ここで記載のキーをキーボードで押しながらマウスで操作することにより「モーションパス」の編集を行ることができます。試しにいくつかやってみましょう。まずは、ライン上にマウスを持っていってこの様に、編集ガイドが表示されました。まず上の「パスをドラッグ」ですがMacではCommandWindowsではControlを押した状態でパスをドラッグすることでパスの形状を維持したまま自由に移動させることが可能です。やってみましょう。今はMacで見ていますのでCommandWindowsの方はControlを押してください。この様に、押したキーのメニューが濃く表示されてきます。 この状態で、キーを押したままラインをドラッグします。するとこの様にパスの全体をドラッグして移動させることが可能です。次のメニューを見てみましょう。同じ様にライン上にマウスを持っていくと次は「パスを回転」というのがありますね。MacではOptionWindowsではAltを押した状態でパスをドラッグすることでパスの形状を維持したままパスを回転させることができです。一度やってみましょう。MacではOptionWindowsではAltです。押した状態にするとこの様に、マウスカーソルに回転のアイコンが出てきますのでこの状態でマウスをドラッグします。するとこの様にパスを回転させることができてますね。もう一つ見てみましょう。同じ様にマウスをこのライン上に持っていって編集ガイドが表示されますのでそちらの一番最後「パスを伸縮」ですね。「パスを伸縮」ではMacではCommand+OptionWindowsではControl+Altを同時に押した状態でパスをクリックすることでパスの形状を維持したままパス全体を伸縮させることが可能です。一度やってみましょう。MacではCommand+OptionWindowsではControl+Altこの状態でパスをドラッグするとこの様に伸縮の設定が可能です。 また、既に追加しているこれらのアンカーを削除するにはアンカーにマウスを乗せた上でMacではCommandWindowsではControlを押しながらアンカーをクリックすることでこの様にアンカーを削除することもできます。「モーションパス」にはもう一つ便利な機能があります。それが、この「プロパティ」パネルの中にあるこの「自動回転」という機能です。この「自動回転」にチェックを入れておくとパスの動きに合わせて要素もアニメーションの中で回転しながら移動します。一度やってみましょう。まず、「自動回転」を設定していない状態で動かすとどうなるかプレビューしてみましょう。こちらの「再生」ボタンを押してみます。この様に魚の向きは変わらずに移動していますね。それでは、次にこの「自動回転」のところにチェックを入れてみます。そして、この状態で、同じ様にステージ上でプレビューしてみましょう。「再生」ボタンを押します。少し変な回転になってしまいましたね。ちょっとこれを調整してみましょうか。まず再生ヘッドを「0秒」にしておきます。そして、この状態で、「変形ツール」を選択してアニメーションの最初の要素の向きですね。これを、この様にラインに沿った形にしておいてあげます。 そして、この状態で一度プレビューしてみましょう。この様にパスの動きに沿って魚が向きを変えて動く様になりました。この様に「自動回転」にチェックを入れてうまく動作しないおかしな動きになっていまう、という時は先ほどの様にこのアニメーションの開始位置の要素の回転を調整してあげて向きを整えてあげることでうまく動く様になる場合もありますので参考にしてみてください。以上でレッスンは終了です。今回は、Edge Animateの「モーションパス」について、解説しました。ぜひこの「モーションパス」をマスターして素晴らしいアニメーションを作っていきましょう。

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

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

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

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

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

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