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

シンボルアニメーションと、アニメーションの再利用

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
シンボルとは何かを理解したところで、次はシンボルにアニメーションを設定してみましょう!シンボルのタイムラインアニメーションの作成方法と、その再利用について、解説します。
講師:
09:18

字幕

このレッスンではEdge Animate のシンボルアニメーションとその再利用について解説していきます。まずは、ダウンロードしてきたファイルの中にあるnew_project.anをダブルクリックしてEdge Animate で開いておいてください。そしてこれがそのファイルを開いた状態です。このファイルを使いながら解説を進めていきます。シンボルのタイムラインアニメーションはステージのタイムラインとは独立したシンボル独自のタイムラインのなかでアニメーションを作成していきます。そして、そのアニメーションが設定されたシンボルをステージ上に、インスタンスとして設置していくことでステージのタイムラインの中でそのインスタンスごとに要するに、ディサインパーズごとにアニメーションを動作管理していくことが可能となります。それでは、実際にやってみましょう。まず、現状のファイルの確認からやっていきたいと思います。今、fishes_symというシンボルが一つあってそのインスタンスがここにありますね。ですので、今回はこのfishes_symに対してシンボルのタイムラインアニメーションを作っていきたいと思います。まず、シンボルのタイムラインにアクセスするためにはこちらのステージ上のそのインスタンスをダブルクリックするかこちらのシンボルのこのアイコンをダブルクリックするかでアクセスすることはできますが今回は、こちらのステージ上に置かれているインスタンスの方をダブルクリックしてみます。 この様に、シンボルのタイムラインアニメーションの画面になりました。ちなみにもう一度ステージに戻るためにはこちらのステージというのをクリックします。戻りましたね。もう一度ダブルクリックしてシンボルに入ります。まず先に忘れないようにこちらのシンボルのプロパティの中の「自動再生」こちらにチェックが入っているのでこちらのチェックを外しておきましょう。そして、合わせてこちらがシンボルの名前になっていることを確認しておいてください。こうすることでこのシンボルがステージ上に配置された時「自動再生」をオフにしておくとステージのアニメーションが始まった時に一緒に合わせてアニメーションを開始させることをセイブことができます。さて、早速こちらの魚の群れにタイムラインアニメーションを付けていきたいと思います。今回は、この魚がこの様にくるくる回るアニメーションを作ってみたいと思います。それでは、まず 「変形ツール」をクリックして選択します。そしてピンを有効にしておよそ300ぐらいにしておきましょう。この状態でこちらの変形プロパティの中にある回転の値に-360と入力します。こうすることで魚がこういう風に回転するのですがこれだとちょっと回転の意味が違ってくるので修正します。 魚が、この様に円を書くようにくるくると回転するようにするためにはこちらの基点の位置をずらしてあげる必要があります。今回は、およそこの辺りですかね。この状態で再生してみると、この様にこちらの基点を軸にして回転しているのが分かりますね。これで、タイムラインのアニメーションは完了です。次に、こちら魚の群れがこの様に一週してきた時にまた、再度ループしてこの様に、回る処理を加えたいと思います。ループ処理は、まず、再生の最後アニメーションの最後にこちらの「トリガー」を挿入していきます。すると、この様にコードパネルが出てきますのでこちらに、コードスニペットから「再生の開始位置」を選択します。すると、sym.playという命令が入ってきますのでこちらの内容を「0」0秒からアニメーションを再開させたいので「0」と入れます。そして、この状態で閉じます。そして、ステージに一回戻りましょう。ステージに戻ってきました。この状態で、こちらの魚の動きを確認してみたいたいのですがこの様に、再生ヘットを動かしても何もおきませんね。これは先ほどシンボルの設定の時に自動再生を「オフ」にしたからです。自動再生を「オフ」にするとこの様な形で勝手に再生することはなくこちらから、再生の指示を与えてあげる必要があります。 再生の指示を与えてあげるためにはこのインスタンスの要素の所にある「再生」と書かれているこの「+」ボタンこちらをクリックすることでその命令を与えてあげることができます。クリックしてみましょう。この様に、再生に関するメニューが出てくるのですがここでは「再生」を選択しておきましょう。すると、こちらの再生ヘットがあった場所を基準にこの様にそこのシンボルのタイムラインアニメーションがありますよというバーが表示されていきます。この状態で再生ヘットを動かすとこの様に回転しているのが分かりますね。では、この状態で一度ブラウザーでプレビューしてみましょう。アプリケーションメニューの「ファイル」>「ブラウザーでプレビュー」です。すると、この様に魚が円を描くようにアニメーションしていますね。ループもちゃんと効いています。これで、シンボルのタイムラインアニメーションの実装は完了なのですがステージ上によく見るともう一つ似たような魚の群れがありますね。今回、シンボルを作っているのでせっかくなので、こちらもそのシンボルに差し替えてしまいましょう。まずは、ことらの魚の要素をこちら普通の画像素材になっているのでそのまま削除しちゃいます。 右クリックから「削除」ですね。削除そして、こちらシンボルをステージ上にドラッグアンドロップしますとこの様に、インスタンスが出来上がりました。先ほど魚の向きが違いますので魚の向きを調整してあげましょう。こちらの「変形」の横軸の伸縮プロパティから「-100」と設定しておきます。この様に、向きが変わりました。さて、こちらも同様に再生の指示を与えてあげないといけないのでこちら、今fishes_sym2という名前が付いたインスタンスになっていますがこちらで再生ヘットを0にあることを確認して「再生」メニューをクリックします。こちらも同様にこの様にタイムラインアニメーションありますよというバーが出てきましたので少し再生ヘットを動かしてみましょう。この様に、動いていますね。もう少しだけ調整してみます。もう少し画像を小さくしてそして、少しだけ傾けておきます。こうすると、どうでしょう。この様に、自然な形で隣の魚の群れとも衝突せずにアニメーションさせることができましたね。ブラウザーで確認してみます。この様な形で、一つのシンボルをステージ上に二つ配置して二つのインスタンスが出来上がった状態でそのシンボルのアニメーションがそれぞれのインスタンスに反映されてこの様に再生されているという様な状態ですね。 以上で、レッスンは終了です。今回は、Edge Animateのシンボルアニメーションとその再利用について解説しました。複雑なアニメーションになるとこのシンボルをいかに有効に活用できるかがポイントとなりますのでしっかりとマスタしておきましょう。

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

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

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

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

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

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