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

4-2 キーフレームを使ってアニメーションを作成しよう

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

この回では、コンテンツにアニメーションをつける前に、簡単な形をまず作成し、これをキーフレームを使ってアニメーションを作成していきます。

キーフレームを使ったアニメーションでは

■ 移動でアニメーションを作成する方法
■ アルファを変化させてアニメーションを作成する方法

がありますので、操作してみましょう。

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

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

・左上のツールバーから、「円」を選び、任意の場所に円を作成し、色を白、透過をなしにします。
円のシェイプを作成
任意の場所に円を作成

2.タイムラインパネルの再生ヘッドが先頭にあることを確認します。

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

3.オブジェクトを選択した状態で、「自動キーフレームモード」「自動ドランジションモード」を有効にします。

・タイムラインパネルでそれぞれ行います。
自動キーフレームモード
自動ドランジションモード

4.再生ヘッドを終了位置(1秒)のところに移動させます。

再生ヘッドを終了位置へ

5.円のシェイプをステージ内の違う場所に移動させます。

円のシェイプを移動
これで、(1)の位置から(5)の位置に移動するアニメーションの完成です。
0秒と1秒の間のプロパティが自動的に補間されています。
このように、自動的にアニメーションが作成されます。
アニメーションの完成

他に、キーフレームを使ったものとして、
アルファ(透過)を変化させるアニメーションの作成があります。
これも作成してみましょう。

アルファ変化のアニメーション作成方法

アルファを変化させるアニメーションの設定をします

再生ヘッドを先頭に移動させます。
再生ヘッドを先頭に移動
始点のアルファを0%にします。
始点のアルファを0%
再生ヘッドを終了位置(1秒)のところに移動させます。
再生ヘッドを終了位置
終点のアルファを100%にします。

これで、アルファが変化するアニメーションが作成できました。
アルファが変化するアニメーションを作成

アルファが変化するアニメーション
このようにして、キーフレームを使ったアニメーション作成は進めていきます。

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

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



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

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