Page 1
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
キーフレームの追加
キーフレームの追加
キーフレームの追加
キーフレームの追加
プロパティパネル
タイムラインパネル
プロパティパネルとタイムラインの各パラメータにキーフレームを追加するスイッチ(小さなひし形のアイコン)がある。クリックすると、キーフレームが追加される
ステージ上に配置されている画像やテキストを右クリックし、[キーフレームを追加]から選択することも可能
トランジションのバーをクリックすると選択できる
キーフレームをドラッグしてトランジションの長さを変更することができる
Page 2
アニメーション設定を効率化できる「自動キーフレームモード」「自動トランジションモード」「ピン」
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
トランジションのバーをドラッグするとフレームの位置を変更することができる
選択されていない状態
選択されている状態
自動キーフレームモード 自動トランジションモード ピン
Page 3
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