スマート プレゼンター®でセミナー撮影

4-3 モーションパスを使ってアニメーションを作成しよう

この講座は、Adobe Edge Animate CCを使用し、フラッシュを使わないでHTMLのインタラクティブなアニメーションを作成し、また、作成したコンテンツを、レスポンシブなレイアウトにしてタブレットデバイスで表示する、ということを目標に進めていきます。

今回はモーションパスを使ったアニメーションの作成方法をみていきましょう。
パスにアンカーポイントを追加すると移動に変化をつけることができ、柔軟なアニメーションを作れます。

移動のアニメーション作成方法

1.円のシェイプを作成します

・前回作成した円は選択してdeleteで消します。
・左上のツールバーから、「円」を選び、任意の場所に円を作成します。
円のシェイプ
円のシェイプを作成

2.自動キーフレームモード、自動ドランジションモードを確認します

・自動キーフレームモードが有効であることを確認します。
自動キーフレームモード
・自動ドランジションモードが有効であることを確認します。
自動ドランジションモード

3.モーションパスを選択します

・プロパティパネルの「位置とサイズ」でモーションパスを選択します
モーションパスを選択

4.位置のキーフレームを追加します

・タイムラインパネルの再生ヘッドが先頭にあることを確認します。
・プロパティパネルの「位置とサイズ」で、「キーフレームの追加対象:位置」をクリックします。
キーフレームの追加対象の位置」をクリック
・タイムラインパネルにてキーフレームが追加されたことを確認します。
・キーフレームが隠れている場合は目のマークの左の矢印をクリックすると表示できます。
キーフレームが追加された

5.再生ヘッドを終了位置へ移動します

・再生ヘッドを終了位置(2秒)のところに移動します。
再生ヘッドを終了位置に移動

6.円のシェイプの移動

・円のシェイプをステージ内の違う場所に移動させます
円のシェイプを移動
これで、(1)の位置から(6)の位置に移動するアニメーションの完成です。
0秒と2秒の間のプロパティが自動的に補間されています。
アニメーションの完成
また、移動前と移動後の間に、線が表れます。これをモーションパスといいます。
このモーションパスに沿って、オブジェクトが移動するアニメーションが作成されます。

モーションパスとキーフレーム

このモーションパスは移動させることができます。
再生ヘッドを1秒のところに移動させ、オブジェクトを移動させてみましょう。
再生ヘッドを1秒のところに移動
オブジェクトを移動
このように移動させると、1秒のところに、キーフレームが自動生成されるというところに注目してください。
キーフレームが自動生成
次は、モーションパスを直接変形させてみましょう。
線上をクリックするとアンカーポイントを追加でき、線を変形させることができます。
アンカーポイントを追加
線を変形
この方法でも線上を動くアニメーションが作成できますが、キーフレームは自動生成されません。
これもポイントです。
キーフレームは自動生成されていない
このように、モーションパスを使ったアニメーション作成は進めていきます。

次回は、ピンを使ったアニメーション作成について説明いたします。

<前のトピックへ || 次のトピックへ>



各種IT教材と販促支援物の制作承ります

講義、講演会の撮影承ります