Edge Animateプチリファレンス 第2回:代替コンテンツを表示できるようにしよう

Edge Animate CC(以下、Edge Animate)では、「下位ステージ」機能を使って、Edge Animateのアニメーションコンテンツに対応していない環境下で、本来のアニメーションコンテンツではなく、代替コンテンツを表示するように設定できます。本記事では、下位ステージ機能の使い方を紹介します。Edge Animateの基本操作については、Edge Animate入門をご覧ください。

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

ポスターイメージと下位ステージの作成

Internet Explorer 6などの古いブラウザーでは、Edge Animateがアニメーションに使っている技術に対応しておらず、Edge Animateのアニメーションコンテンツを再生できません。「下位ステージ」機能を使えば、そうした環境下では代替コンテンツを表示するように設定できます。

下位ステージには、任意のテキストや画像を配置できます。また、Edge Animateには代替コンテンツを作る上で役立つ「ポスターイメージ」という機能があり、タイムラインの任意の再生位置の状態を画像(ポスターイメージ)として作成することができます。

ポスターイメージの作成

ポスターイメージを作成する手順は以下の通りです。

  1. タイムラインの再生ヘッドをキャプチャしたい位置に移動します。
  2. ステージをクリックして選択します。
  3. [プロパティ]パネル内の[ポスター]欄にある[ステージのキャプチャ]ボタンをクリックし、さらに、[キャプチャ]ボタンをクリックします。
  4. ポスターイメージが「Poster.png」という名前で作成され、[ライブラリ]パネルに登録されます。

下位ステージの作成

下位ステージ(代替コンテンツ)を作成する手順は以下の通りです(サンプル:sample.an)。

  1. ステージをクリックして選択します。
  2. [プロパティ]パネルの[下位ステージ]欄にある[編集]ボタンをクリックします。
  3. 画面が下位ステージ編集画面へと切り替わります。
  4. あとは、表示したい画像を[ライブラリ]パネルからドラッグ&ドロップして配置したり、テキストを配置します。

下位ステージを作成した後、元の画面へ戻るには、ステージ上部のナビゲーションから「Stage」をクリックします

このようにEdge Animateでは、元のコンテンツから「ポスターイメージ」を作成し、それを下位ステージへと配置することで、下位ブラウザー向けの代替コンテンツを簡単に作成することができます。