キーフレームを手動で追加する方法

最終更新日 2013/12/18

ステージに写真を追加に続いて、アニメーションを作成する方法です。

Adobe Edge Animate CC を使って、スライドショーを作成します。

「公式サイト：アニメーションの作成 | Edge Animate CC | Adobe TV」

エレメントパネルかタイムラインパネルで、Stage を選択します。

上の画像のように、プロパティパネルが Stage に切り替わります。

幅（W）と高さ（H）を、写真と同じサイズに変更します。

Stage と写真の配置がずれている場合は、写真をドラッグ＆ドロップで移動して四隅を合わせます。

アニメーションを作成する作業になるので、まずはアニメーションの作り方を解説します。

アニメーションを作成するポイントは、キーフレーム（白い菱形）です。

キーフレーム間の、値の変化がアニメーションになります。

キーフレームを追加する方法を解説します。

キーフレームを追加する方法は複数用意されているので、作業によって使い分けると便利だと思います。

上の画像のように、キーフレームを追加する位置に再生ヘッドを合わせます。

アニメーションを設定するエレメントを選択します。

上の画像は、キーフレームを手動で追加する方法です。

プロパティパネルの菱形をクリックすると、再生ヘッドの位置にキーフレームが追加されます。

値はプロパティパネルで入力しても構いませんし、エレメントを直接操作して設定することもできます。

上の画像のように、手動でキーフレームが追加されました。

不透明度と位置など、キーフレームは複数設定することもできます。

上の画像のように、アニメーションの終了位置に再生ヘッドを移動します。

キーフレームは手動で追加しても、自動で追加しても構いません。

手動で追加する場合は、先程と同じようにプロパティパネルでキーフレームを追加して、終了位置の値を設定します。

上の画像のように、キーフレーム間にアニメーションが作成されました。

タイムラインパネルの再生ボタンを押すと、アニメーションを確認できます。

キーフレームに設定した値を変更する場合は、再生ヘッドをキーフレームの位置に合わせます。

プロパティパネルで値を入力するか、ステージのエレメントを移動すると、値が変更されます。

キーフレームをクリックして選択すると、キーフレームを移動したり削除したりといった操作が可能です。

キーフレームを選択すると、キーフレームは白色から橙色に変わります。