新しくリリースされたAdobe Edge Animateは、HTML5を利用したアニメーションを作成できるツールです。本記事では、アニメーションサンプルの作成を通して、Edge Animateの機能を紹介します。

素材の準備(画像の取り込み)

Edge Animateでは、矩形/角丸矩形/楕円などのオブジェクトを描画できるほか、他のツールで作成した画像を読み込むことができます。今回のサンプルの素材は全て、Photoshopなどのツールを利用して作成しました。オブジェクトを重ねて表示する場合は、透過PNGファイルやSVGファイルを利用し、背景など透過の必要がなく容量を節約できる場合はJPEGファイルを利用するとよいでしょう。

画像を読み込むには、メニューから[ファイル]→[読み込み]を選びます。読み込んだ画像はステージ上に配置され、また[ライブラリ]パネルのimagesフォルダーに格納されます。

タイムラインでのアニメーション

Edge Animateでは、タイムラインにキーフレームを設定することで、テキスト/画像/図形などをアニメーションさせることができます。次のプロパティをキーフレームとして設定できます。なお、オブジェクトの種類によって設定可能なプロパティは異なります。

左端
右端
上端
下端

高さ
不透明度
表示
背景色
テキストカラー
境界線カラー
境界線の幅
変形の基点
移動(x)
移動(y)
回転(z)
伸縮(x)
伸縮(y)
傾斜(x)
傾斜(y)
切り抜き
背景位置
背景サイズ
ボックスシャドウのオフセット(水平方向)
ボックスシャドウのオフセット(垂直方向)
ボックスシャドウのカラー
ボックスシャドウのぼかしの半径
ボックスシャドウの広がり
フォントサイズ
文字間隔
単語間隔
行の高さ
テキストインデント
テキストシャドウのオフセット(水平方向)
テキストシャドウのオフセット(垂直方向)
テキストシャドウのカラー
テキストシャドウのぼかしの半径

キーフレームを設定するには、タイムライン上で目盛りを目的の時間まで動かし、オブジェクトを選択した状態で次のいずれかの操作を行います。

  • 右クリックメニューから[キーフレームを追加]を選択。
  • メニューから[タイムライン]→[キーフレームを追加]を選択。
  • [プロパティ]パネルの各プロパティに存在する菱形マークの[キーフレームの追加対象]ボタンをクリック。

サンプル前半のテキストアニメーション部分は、[左端]と[不透明度]プロパティをキーフレームとして設定しています。

イージングの設定

Edge Animateでは、キーフレームアニメーションに対してイージング(加減速)を設定できます。[タイムライン]パネルにある[イージング]ボタンをクリックすると、様々な種類のイージングが表示されます。イージングの内容がグラフで示されているので、直感的に選ぶことができます。なお、キーフレームアニメーションに対するイージングは、プロパティごとに独立して設定できます。

サンプル後半の落下するアイコンのアニメーション部分では、アイコンが落下して地面に衝突して跳ね返るという物理演算を用いたような動きとなっています。しかし実は、[上端]プロパティに「EaseOutBounce」、[回転]プロパティに「EaseOutBack」というイージングを設定しているだけです。[上端]と[回転]に異なるイージングの種類を設定したのは、違いを持たせることでアニメーションにバリエーションを持たせるためです。

Webフォントの適用

テキストにアニメーションをつける場合、Webフォントを適用しておくことをオススメします。制作用PCに入っているフォント(デバイスフォント)が、ユーザの閲覧環境に入っているとは限りません。また、拡大縮小や回転などの動きを設定したときにフォントが綺麗に表示されないことがあります。

このサンプルでは、Webフォントの実装に「Google web fonts」サービスを利用しています。なお、Google web fonts だけでなくEdge Web Fontを利用することもできます。

まずは、Google web fontsで使いたいフォントを探して、[Quick-use]画面からフォントの埋め込みコードを取得します。

次に、Edge Aniamteの[ライブラリ]パネルの[フォント]タブ上にある[+(Web フォントを追加)]ボタンをクリックすると、[Webフォントを編集]ウィンドウが開くので埋め込みコードを記述します。[フォント代替リスト]にはフォントの任意の名前を入力します。

JavaScriptでインタラクションを追加

Edge Animateでは、タイムラインにJavaScriptを記述してインタラクションを付与することができます。JavaScriptを記述するには、メニューから[ウィンドウ]→[コード]を選択して、[コード]パネルを開きます。

このサンプルでは、アニメーション後に表示されるボタン(MyButton)をクリックしたら、最初から再生するようになっています。MyButtonオブジェクトをクリックしたらタイムラインを再生するために、「sym.play();」という命令を記述しています。「sym」とは、Edge Animateで作成したコンテンツ全体を示すオブジェクトで、タイムラインの制御の命令を扱うときはsymオブジェクトのメソッドを利用します。ここでは「再生する」という命令である「play();」を使用します。

なお、このようなメソッドは、[コード]パネルの右側にあるスニペット(コードのテンプレート)から選択して利用できます。スニペットを利用して、Edge Animateのコードを覚えていくといいでしょう。

また、オブジェクトごとにマウスオーバー時のマウスカーソルの状態を設定できます。画面上に配置しているボタン(MyButton)は単なる画像なので、これをボタンとして見せるためにカーソルをポインターカーソルに設定します。オブジェクトを選択して、[プロパティ]パネルの[カーソル]タブから設定したいマウスカーソルを選択します。

プリローダーの設定

Edge Animateでコンテンツを作成する場合、基本的に画像やSVGなど外部アセットを利用することになるでしょう。これらはアニメーションを再生する前にロードしておく必要があり、ローディング中であることを示すために、プリローダーを用意しておきたいところです。Edge Animateでは、次の方法でプリローダーを簡単に設定できます。

  • ステージを選択した状態で、[プロパティ]パネルの[プリローダー]タブで[Polite]を選択して[編集...]ボタンをクリックします。
  • [プリローダーのステージ]の[プリローダークリップアートを挿入...]ボタンをクリックします。
  • プリローダーがいくつか用意されているので、一覧から使いたいものを選択します。

なお、プリローダーの画面は自由に作成することもできます。

未対応ブラウザーへの配慮

Edge Animateで作成するコンテンツには新しいHTML5/CSS3/JavaScriptを使用しており、それらに未対応のブラウザーではコンテンツを再生することができません(特に、Internet Explorer 6~8では、Edge Animateが使用している技術をサポートしておりません)。しかし、次の対策を施すことができます。

[下位ステージ]の作成

未対応ブラウザーに表示する代替画面を、Edge Animate上で作成できます。ステージの[プロパティ]パネルから[下位ステージ]の[編集...]ボタンをクリックすることで、下位ステージを編集することができます。

Google Chrome Frameへの誘導

「Google Chrome Frame」とは、Internet Explorer 6~8のレンダリングをGoogle Chromeと同等のものにするプラグインです。Internet Explorer 6~8のユーザがこのプラグインをPCに入れていれば、Edge Animateで作成したコンテンツを表示できます。Edge Animateの[パブリッシュ設定]では、Internet Explorer 6~8ユーザがEdge Animateのコンテンツを閲覧した際に、Google Chrome Frameのインストールを促すように設定できます。

今回のサンプルでは、下位ステージを作成した上でGoogle Chrome Frameへの誘導を有効にすることで、より多くのユーザにEdge Animateコンテンツを見てもらえるようにしつつ、最低でも代替コンテンツが表示されるようにしています。

おわりに

HTMLでアニメーションを作成する場合、従来はJavaScriptもしくはCSSをコーディングする必要がありました。複雑な動きや尺の長いアニメーションとなると、コードだけで作るのは至難の業です。Edge AnimateはGUIでアニメーションを作ることができる上に、タイムラインで調整した結果をすぐに画面上でプレビューできるメリットもあります。この新しいツールを使ってHTMLアニメーションの作成にぜひ挑戦してみてください。