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

4-1 アニメーション作成の基礎知識

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

今回からいよいよアニメーションに入ります。

EdgeAnimateにおけるアニメーションの作成方法

まず、EdgeAnimateにおいて、アニメーションの作成方法は以下の3種類あります。

  • ■ キーフレームを使用した方法
  •   キーフレーム間の状態変化をもとにアニメーションを作成します。

  • ■ モーションパスを使用した方法
  •   ベジェ曲線でパスを描き、その線上を動かします。

  • ■ ピンを使用した方法
  •   最終的なイメージをさかのぼって編集します。

これらをうまく使い分けて、アニメーションを作成していきます。

アニメーションの完成目標

次に、アニメーションの完成例を見てみましょう。
EdgeAnimate完成例
ブラウザ上で何度かリロードして確認してみてください。

  • ■ タイトル
  • ・タイトルマットが横からふわっと出てくる
    ・テキストがぼやけたところからシュッと出てくる

  • ■ Information
  • ・左右にスライドインしてInformationが入れ替わる

  • ■ ボタン
  • ・クリックしたときの動作

完成例をご覧いただき、どのようなアニメーションをこれから作っていくのか、想像できましたでしょうか。

次の記事では、まず、キーフレームを使ったアニメーションの作成を行います。

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



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

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