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

一歩進んだタイムラインアニメーション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
もっと多様なアニメーションを作ってみたい!?もちろん可能です! 複数のプロパティを駆使して、タイムラインアニメーションを作成する方法を解説していきます。
講師:
10:59

字幕

このレッスンではEdge Animateで複数のプロパティを利用した一歩進んだラインアニメーションの制作方法を完成サンプルのアニメーションを参考にしつつ実際に制作しながら解説していきます。まずは、ダウンロードしてきたファイルの中にある「new_project」というフォルダの中の「new_project.an」をEdge Animateで開いておいてください。こちらの画面になれば順序は完了です。このファイルを使いながら解説を進めていきます。先に、今回参考にするサンプルアニメーションを確認しておきます。ダウンロードしたファイルの中こちらに「完成サンプル」というフォルダが入っていますのでその中の「new_project.html」をブラウザで開いてみましょう。この様に、オレンジ色の魚がなんだかそれっぽく動きますね。今回は これを真似しながら実際の制作を通してタイムラインで複数のプロパティを利用していくためのその手順を学んでいきましょう。それでは始めていきます。まずは、今現状、とてもシンプルな直線状のアニメーションがタイムライン上に存在しているのでまずはこれを消しておきましょう。そして再生ヘッドを「0」にしておきます。 それでは、アニメーションを作っていきたいと思います。今回、作業の所々で「ピン」の機能を利用します。「ピン」は、こちらのアイコンをクリックすることで、有効にすることもできますがこちらの再生ヘッドの黄色い部分をダブルクリックすることによってこの様に有効にすることもできます。更に、この状態で再生ヘッドのこの黄色い部分を更にダブルクリックするとこの様に、解除することもできますので覚えておいてください。それではやっていきます。完成サンプルを見ると魚は計4回移動している様ですのでそれを真似して作っていきたいと思います。まずは、再生ヘッドが「0秒」にあることを確認しておおよそこの辺りですね。そして「ピン」を有効にして大体「500ミリ秒」のところでこの辺まで移動させます。まず一つ目ができましたね。次です。「ピン」を解除して「500ミリ秒」空けてこの辺りから「ピン」有効にします。更に「500ミリ秒」のところに持っていきまして魚を移動後の位置に持っていきます。大体この辺りでしょうか。こんな感じですね。次に、この魚はこの辺りの左上の方に向かって移動していますのでそちらも作ります。更に「500ミリ秒」空けて「ピン」を有効にて「500ミリ秒」そして、移動後の位置に魚を持っていきます。 この辺りぐらいですかね。そして、更に「500ミリ秒」空けて最後、下に向かってする動きを作ります。「ピン」を有効にして「500ミリ秒」そして、移動後の位置に持っていきます。これで基本の流れはできましたね。それでは次に魚がこの位置に来た時に向きを変えないといけないのでその向きを変える処理を付けたいと思います。今回は左右の向きを変えたいので魚を選択した状態で再生ヘッドが向きを変えたい秒のところにあることを確認した上でこちら「プロパティ」パネルの中の「変形」横の伸縮で、いま「100%」になっているところを「-100%」にするとこの様に、向きが変わりますね。ただし、ここでキーフレームを打ってしまいますとこれまでのアニメーション自体も向きが変わった状態で動いてしまいますので今度は「0秒」アニメーションの開始位置の「0秒」に合わせた状態で伸縮を横の伸縮を「100%」に戻しておきます。こうすると、魚の向きは右に変わったのですが実際見てみますと、移動途中に、こういう風に向きを変えてしまっていますね。こういう場合はここの伸縮のトランジション中の緑のバーですね。を選択した状態で右クリックそして、「トランジションを削除」を選択します。 こうする事によって、キーフレームだけが残り中のアニメーションはなくなりました。実際に見てみますとこの様にこの「2秒」のポイントに来たところで向きが変わる様になりました。それと、最後にもう一度向きを変えるところがありますね。この部分に再度、魚をクリックして向きを、今度は「100%」に戻しておきましょう。この様に向きは変わったのですが同じ様に移動中に向きが変わってしまうので中のトランジションを削除しておきましょう。これで、このキーフレームの位置に来た時に初めて向きが変わるという様に設定できました。それでは次にこの魚の回転について設定していきたいと思います。魚の移動する方向に合わせて魚の顔の向きを調整していきます。まずはこの様に下に下っていくので「変形ツール」を選択してこの様に、少し下に傾けます。そうするとこうですね。次は二つ目の移動の時ですが、 少し、今度は顔を上げないといけないですね。ですので、大体この辺りで顔を上に上げてあげます。こうですね。更に魚は左上に向かって行きますのでここでも顔を左上に上げてあげましょう。こうですね。最後に下のほうに下って行きますのでこの段階で魚を下に向かせてあげましょう。 この様になりましたね。そして最後に、この様に右に向きますのでこの時も顔を少し下げてあげてこの様な感じにしておきましょう。一度、これでステージ上でプレビューしてみましょう。ここの「再生」ボタンを押してみましょう。いい感じに動いていますね。最後に、魚が向きを変える時に、少しだけアニメーションを加えてあげましょう。ここで、パッと、この様にいま切り替わる状態になっているので大体この「250ミリ秒」、この間ぐらいで少しアニメーションさせてみましょう。魚を選択していま、ここの「1.750」と書いてあるところにはキーフレームがないので、ここに横の伸縮のキーフレームを置いてあげます。そして、ここでは「100%」で大丈夫ですが向きを変えるところとここをトランジションでつないであげます。トランジションでつなぐ場合はキーフレームを選択して、右クリックそして「トランジションを作成」この様にトランジションが保管されました。ここでこの様に、ひっくり返ます。そしてこの部分も保管されてしまいましたので削除しておきます。「トランジションを削除」です。そして、最後に向きを変えるここここも「250ミリ秒」前の方でキーフレームを打ちます。 そして最後に向きを変えるところでこうなりますのでこのキーフレーム、選択しまして右クリック、「トランジションを作成」でトランジションが保管されました。この状態で、もう一度ステージ上でプレビューしてみましょう。この様に、アニメーションの制作が完了しました。念のためブラウザでもプレビューしてみましょう。アプリケーションメニューの「ファイル」>「ブラウザでプレビュー」をクリックします。するとこの様に先ほどの完成サンプルの様に動いていますね。以上でレッスンは終了です。今回は、Edge Animateで複数のプロパティを利用したタイムラインアニメーションの作成の方法を実際の手順を通して、解説しました。今回参考とした完成サンプルアニメーションのEdge Animateのプロジェクトファイルも用意しておりますのでぜひダウンロードして確認してみてください。

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

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

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

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

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

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