Edge Animateで作成されるアニメーションは、ウェブ ブラウザー上で再生されるHTML5 モ ーションで す。HTML5 モ ー シ ョ ンと は、HTML5 や CSS、JavaScriptなどのウェブの技術で実現しているアニメーション表現のことです。Flashアニメーションの場合は、ウェブブラウザーにインストールしたFlash Playerによって動いていましたが、Edge Animateで作成したアニメーションは、HTML5やCSS3に対応したウェブブラウザーであれば、プラグインなどの拡張技術を必要としません。ブラウザーだけで動く、という利点と「HTML5やCSS3をサポートしていない古いブラウザーでは動かない」というデメリットが共存していますので、注意が必要です。

Edge Animateでアニメーションを作成する場合は、まず2つ以上の「キーフレーム」が必要となります。最も基本的なアニメーションは、始点と終点の2つのキーフレームを設定し、そのキーフレーム間の動きを作成します。キーフレーム間の動きを「トランジション」と呼びます。作成されたアニメーションは、複数のキーフレームとトランジションがセットになっていますので、タイムライン上を自由に移動させることができます。つまり、1秒後からスタートするアニメーションを、3秒後に変更することが簡単にできるわけです。また、アニメーションの複製（コピー）もできますので、いくらでも流用が可能です。

Edge Animateのアニメーションの仕組みを理解する01S T E P

92 93

Le

sson 0

1P

art 0

3H

TML5

モーションについて

理解しておこう

Lesson のねらい

Edge Animateで作成するアニメーションは、HTML5やCSS、JavaScriptによるウェブの技術で実現しています。Flashのような拡張技術で動作するものではありませんので、同じタイムラインベースでも操作方法は異なります。このLessonでは、基本的なアニメーション設定について学習します。

01Lesson HTML5モーションについて

理解しておこうEdge Animateのアニメーション機能は、タイムラインに始点と終点のキーフレームを設定し、2つのキーフレーム間の動き（移動や回転など）を作成するFlash のトゥイーンアニメーションに近い仕組みです。

les3_01.png

キーフレームの追加

キーフレームの追加

キーフレームの追加

キーフレームの追加

プロパティパネル

タイムラインパネル

プロパティパネルとタイムラインの各パラメータにキーフレームを追加するスイッチ（小さなひし形のアイコン）がある。クリックすると、キーフレームが追加される

ステージ上に配置されている画像やテキストを右クリックし、［キーフレームを追加］から選択することも可能

トランジションのバーをクリックすると選択できる

キーフレームをドラッグしてトランジションの長さを変更することができる

アニメーション設定を効率化できる「自動キーフレームモード」「自動トランジションモード」「ピン」

Part 03 　HTML5モーションの基本を完全習得しよう

94

Le

sson 0

1P

art 0

3H

TML5

モーションについて

理解しておこう

95

Edge Animateを起動して［新規作成］をクリックし、Lesson01フォルダの中にある「les3_01.png」

（キャラクターの絵）をステージにドラッグしてください。

位置を調整します。キャラクターをステージの左下にドラッグしてください。

この位置でキーフレームを作成します。まず、再生ヘッドが「0:00」にあることを確認してください。自

動キーフレームモードと自動トランジションモードのアイコンが選択されている場合は、クリックしてオフにしておきましょう。

水平方向の移動アニメーションを設定しますので、［位置とサイズ］パネルの［X］のキーフレームをク

リックしてください。タイムラインにキーフレームが追加されます。

キーフレームとトランジションの作成はとても簡単ですが、すべて手作業だと、とても時間がかかってしまいます。Edge Animateには、「自動キーフレームモード」と「自動トランジションモード」、そして「ピン」という自動処理の機能が搭載されています。自動キーフレームモードを使用すると、ステージ上の画像やテキストを動かしながら、自動的にキーフレームを設定していくことができます。さらに、自動トランジションモードを同時に使用すると、トランジションも作成してくれますので、短時間でアニメーションが作成できます。

ピンは、複数の画像パーツで構成されている絵に対して、個別にアニメーションを指定していくときに便利な機能です。例えば、ステージ上に文字一つひとつを配置してロゴをデザインした後、配置されている文字を個別に動かすことが容易です（「四方から文字が飛んできて、ステージ中央で合体し、ロゴになる」といったアニメーションなど）。なお、「ピン」については「Lesson 06　キーフレームを追加して動きを設定しよう」で具体的に解説します。

1

2 3

4

最も基本的なアニメーションの作成方法を学習しておきましょう。2つのキーフレームを作成して、中間の動きを自動生成します（トランジションの作成です）。キャラクターが左から右へ水平方向に移動する簡単なアニメーションですが、基本操作なのでしっかり習得しておいてください。

キーフレームを追加してトランジションを作成する02S T E P

もう一度、［位置とサイズ］パネルの［X］のキーフレームをクリックしてください。タイムラインにキー

フレームが追加されます。

6

タイムラインパネルの再生ヘッドを「0:01」の位置に移動します。

5

トランジションのバーをドラッグするとフレームの位置を変更することができる

選択されていない状態

選択されている状態

自動キーフレームモード 自動トランジションモード ピン

Part 03 　HTML5モーションの基本を完全習得しよう

96

Le

sson 0

1P

art 0

3H

TML5

モーションについて

理解しておこう

97

キャラクターを水平方向に移動させます。ステージの右側にドラッグしてください（※上下にずれないよ

うに注意してください）。s キーを押しながらドラッグすると、水平に移動できます。

スペースバーを押して、再生します（何回か繰り返してください）。この段階ではまだ動きません。アニ

メーションの「原画」に相当する2枚の絵が配置されている状態です。

キーフレーム間の動き（トランジション）が作成されました。アニ

メーションレイヤーとアニメーションプロパティレイヤー（トランジションのバー）が表示されています。

それでは、2つのキーフレーム間の動きを作成しましょう。2つ目のキーフレームを右クリックして、メ

ニューから［トランジションを作成］を選んでください。

キーフレームを確認してみましょう。最初のキーフレームは白、2つのキーフレームはアウトラインに

なっています。

7

9

11

10

8 アニメーションを確認します。スペースバーを押して、再生してみましょう（何回か繰り返してくださ

い）。

12

水平方向に移動させるアニメーションと、操作手順は同じですが、ここでは「回転の角度」を設定します。ステー

ジ中央に配置したキャラクターが、一回転するアニメーションです。

キーフレームとトランジションを削除します。タイムライン上のキーフレームとトランジションを矩形を

描くように選択してください。

1

作成したキーフレームに「回転の角度」を設定する03S T E P

∂ キーを押します。キーフレームとトランジションが削除されました。

2

キャラクターをステージの中央にドラッグしてください。

3