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

簡単なタイムラインアニメーション

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
このレッスンでは、全てのアニメーションの実装のベースとなる、タイムラインアニメーションの基本について、解説していきます。
講師:
06:16

字幕

このレッスンではEdge Animateで実際にタイムラインアニメーションを作成する手順を解説していきます。まずは、ダウンロードしてきたファイルの中にある「new_project.an」をEdge Animateで開いておいてください。この画面がそのファイルを開いた状態です。このファイルを使いながら解説を進めていきます。タイムラインアニメーションは「タイムライン」パネルの横軸で表されている 時間軸の中で動かしたい要素のタイムライン上の任意の場所に複数のキーフレームを置いて、制作していきます。もっとシンプルに手順を説明いたしますとアニメーションの 開始する秒のところにキーフレームを置いてアニメーション開始時点の要素の状態を決定しそして、アニメーションの終了する秒のところにキーフレームを置いてアニメーション終了時点の要素の状態を決定すればOKです。設置されたキーフレームの状態を見てキーフレームの間にある要素の状態をEdge Animateが保管してアニメーションが生成されていきます。一点、実際にタイムラインアニメーションを作成していく前にこの緑のボタンがONになっていることを確認しておいてください。 このボタンはONなっていると各キーフレームの間の要素の状態をEdge Animateが自動で判断してアニメーションを自動挿入してくれる便利な機能です。OFFになっている場合はクリックしてONにしておいてください。それでは実際にやっていきましょう。今回は、この魚に対してアニメーションを設定していきます。例えば魚がこの左上のところから大体この辺りまで移動してくるアニメーションを作ってみましょう。そして、ここからここまで移動する時間を「2秒間」にしましょうか。それでは、まずタイムライン上の再生ヘッドこの赤いラインですね。この再生ヘッドがアニメーション開始時点つまり、「0秒」のところにあることを確認してください。そして、その状態でこの魚を選択状態にし「プロパティ」パネルの「位置とサイズ」の中からこの「X」/「Y」のキーフレームを設置していきます。キーフレームはこの菱形のマークをクリックすればOKです。押してみましょう。この様に タイムラインパネルの中のこの魚の要素「fish」にもこの様に、「0秒」のところにキーフレームが2つ入りました。左端いわゆる「X」と上端これが「Y」ですね。それではアニメーションの開始位置ですが先ほど申した通り、画面の大体左上から開始していきたいと思いますのでこの魚を選択状態にしてステージ上でドラッグしてこの辺りぐらいまで持っていきます。 すると、タイムライン上のここの値が変わりましたね。いま、この2つのキーフレームにはこの2つの値が記憶されました。次に、アニメーションの終了時点の設定をしていきましょう。アニメーションは「2秒間」と決めましたのでこのタイムラインの再生ヘッドを「2秒」のところに持っていきます。ここですね。そしてその状態で先ほどと同様に魚を選択状態でアニメーションの終了地点まで持っていきます。大体この辺りぐらいにしておきましょう。すると、「0秒」と「2秒」のところにあるキーフレームの間にこの色の付いたバーが現れました。これは、このキーフレームの間にある要素の状態をEdge Animateが判断して自動で保管してくれています。ちなみに初めに確認したこちらのボタンがOFFになっているとこの色の付いたバーは自動で出てきません。その場合は、このキーフレームを選択した状態で右クリックしますといまは隠れていますが「トランジションを作成」というメニューがありますのでこちらをクリックすることによってこのバーを出してくることができます。これでアニメーションの実装は完了です。思いのほかとても簡単でしたね。一度、こちらにある「再生」ボタンを押してステージ上で確認してみましょう。 この様に、アニメーションをしていることがわかりますね。次はブラウザでプレビューしてみましょう。アプリケーションメニューの「ファイル」>「ブラウザでプレビュー」を選択します。するとこの様にアニメーションをしているのがわかりますね。今回は「X」/「Y」の位置のプロパティだけにキーフレームを設定してアニメーションを作ってみましたが他のプロパティに対してもキーフレームを設定してアニメーションを作ることができますので色々と試してみてください。以上でレッスンは終了です。今回は、Edge Animateのタイムラインアニメーションについて実際にアニメーションを作りながら解説していきました。全てのアニメーションの基本となる部分ですのでしっかりと理解しておきましょう。

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

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

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

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

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

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