Edge Animate入門 第3回:エレメントのアニメーション

by Adobe Comms

Posted on 08-06-2013

本記事では、Adobe Edge Animate CC(以下、Edge Animate)で、タイムラインを使ってエレメントにアニメーションを付ける方法を紹介します。

Edge Animate CC の体験版をダウンロード サンプルファイルをダウンロード

キーフレームを使ったアニメーション作成

Edge Animateでは、キーフレームを細かく設定しながらアニメーションを作成できます。キーフレームとは、ある時点でのプロパティの値を指定するものです。

任意のエレメントを選択時に、[プロパティ]パネルを見ると、位置や大きさなどのいろいろな項目(プロパティ)の右側に「♦」ボタンがあります。このボタンは、「そのプロパティのキーフレーム(値の切り替わる位置)を作成する」ボタンです。

キーフレームを使ってアニメーションを作成する手順は以下の通りです。

  1. エレメントを選択して、[プロパティ]パネルで任意のプロパティの「♦」ボタンをクリックします。

  2. タイムラインにそのプロパティのレイヤーが作成され、キーフレームが設定されます。

  3. 再生ヘッドをアニメーションの終了位置へ移動します。

  4. 以下のいずれかの方法で

    • ステージ上のエレメントを直接移動する。
    • タイムライン上のプロパティの値をドラッグ操作する。
    • タイムライン上のプロパティの値をダブルクリックして、直接入力する。
  5. すると、新たなキーフレームが自動作成されアニメーションが完成します。

 図1 キーフレームを使ってアニメーションを作成する手順(サンプル:sample.an)

なお、作成したキーフレームの位置は、タイムライン上でドラッグして移動することができます。

スペースバーを押すと、Edge Animate上アニメーションのプレビューができます。また、[Ctrl](Mac OSはCmnd)+[Enter]キーを押すと、ブラウザ上でもプレビュー可能です。

2つのアニメーション記録モード

タイムラインの左上には、2種類のアニメーション記録モードのボタンがあります。キーフレームを使用してアニメーションを作成する際には、これらのモードのオン/オフによって、作成されるアニメーションに違いが出ます。

[自動キーフレームモード]:オンの場合、エレメントの移動などを行うと、その操作を反映したキーフレームが自動的に作成されます。

[自動トランジションモード]:自動キーフレームモードがオンの状態で、このモードもオンの場合、直前のキーフレームの値から、作成したキーフレームの値 まで、徐々に変化させるアニメーション(トランジション・アニメーション)が作成されます。オフの場合には、そのキーフレームの位置でプロパティの値が パッと変更するアニメーションが作成されます。

 図2 これらのモードは、ボタンをクリックすることでオン/オフを切り替えられます

初期状態は両モードともオンになっています。作成したいアニメーションに応じて、モードを切り替えてみましょう。

 図3 モードのオン/オフによるアニメーションの違い

なお、キーフレーム間のトランジション・アニメーションのみを削除したい場合には、アニメーションスパン(キーフレーム間の色のついている部分)をクリックして選択し、[Delete]キーを押します。

ピンツールを使ったアニメーション作成

Edge Animateでは、タイムラインに「ピンツール」という機能があります。ピンツールとは、「ステージに表示中の状態を固定(ピン)し、ピンと再生ヘッド の位置にキーフレームを設定し、トランジション・アニメーションを作成する」機能です。このピンツールを利用すれば、簡単にアニメーションを作成できま す。以下の手順で作成します。

  1. タイムラインの[ピン]ボタンをクリックし、ピンツールをオンにします。すると、タイムライン上に再生ヘッドとは別に、青い「ピン」が表示されます。
  2. 再生ヘッドをドラッグして、アニメーションを作成したい区間を指定します。
  3. ステージ上でエレメントを移動・変形します。これだけで、キーフレームが設定され、アニメーションが完成します。

  図4 ピンツールを使ってアニメーションを作成する手順(サンプル:sample2.an)

作成されたアニメーションは、「ピン」の位置の状態から、再生ヘッドの位置の状態まで、だんだんと位置や大きさを変化するアニメーションとなります。アニメーションの作成が終わったら、もう一度[ピン]ボタンをクリックし、「ピン」モードをオフにします。

なお、意図していなかったプロパティのアニメーションまで作成されてしまった場合には、タイムライン上からそのプロパティのレイヤーを選択し、[Delete]キーを押すと、そのプロパティのアニメーションのみを削除できます。

イージングの設定

Edge Animateでは、トランジション・アニメーションに、簡単にイージング(変化の度合いの調整)を付けることができます。イージングは、以下の手順で設定します。

  1. イージングを適用したいアニメーションスパンを選択します。
  2. タイムライン左上にある[イージング]ボタンを押して、適用したいイージングの種類を選択します。

 図5 イージングを設定する手順(サンプル:sample3.an)

イージングを使用すると、だんだんと加速・減速するようなアニメーションや、バウンドするようなアニメーションも簡単に作成できます。

Topics: クリエイティブ

Products: