Adobe Edge Animateは、HTML5/CSS3/JavaScriptの枠組みでアニメーションを作成できるツールです。Edge Animateの機能を使えば、表示サイズ(ブラウザやスクリーンのサイズ)に応じてコンテン内容が変化する、レスポンシブなアニメーションも手軽に作成できます。

1つのHTMLファイルで異なる表示サイズに対応する方法

1つのHTMLファイルで、表示サイズが異なる環境に対応する方法としては、大きく分けて2種類あります。

  • リキッドレイアウト…コンテンツ内の要素の位置やサイズを「%」単位で設定する方法
  • レスポンシブWebデザイン…表示サイズ(特にブラウザの横幅)をもとに、コンテンツ内の要素の配置や表示/非表示を切り替える方法

リキッドレイアウトでは表示サイズに応じてコンテンツの位置や大きさを微調整することで対応し、レスポンシブWebデザインでは表示するコンテンツ自体をダイナミックに変化させて対応します。Edge Animateを使って、この2つの方法を組み合わせたバナーを作成してみましょう。

作成するサンプル

作成するサンプルは「レスポンシブなバナー」を想定したアニメーションです。仕組みとしては、「小さなバナー」と「大きなバナー」の2種類のコンテンツを用意し、ブラウザーの横幅「520px」を閾値として、表示するコンテンツを切り替えます。519px以下では「小さなバナー」、520px以上では「大きなバナー」を表示します。また、各バナー内ではエレメントを%単位で配置し、閾値とは関係ない範囲における横幅の変化に対して、エレメントの位置やサイズを微調整して対応できるようにします。

ブラウザー幅 表示するコンテンツの内容
0~519px

「小さなバナー」 横幅:100% 縦幅:50px 

エレメントはリキッドレイアウトで配置し、アニメーションさせます。

520px~

「大きなバナー」 横幅:100%(最大1,330px) 縦幅:90px

エレメントはリキッドレイアウトで配置し、アニメーションさせます。

サンプルダウンロード:データは「Adobe HTML5 特設サイト」から入手できます。

バナーの作成(%単位での配置とアニメーション)

Edge Animateを起動して、メニューから[ファイル]→[新規作成]を選択し、任意のファイル名を付けて保存します。また、同じフォルダー内に「images」フォルダーを作成し、バナー内で使用する画像をまとめて入れておきます。

ステージの設定

まずは「小さなバナー」から作りましょう。画面左上の[プロパティ]パネル内の[ステージ]欄で、コンテンツの表示領域となるステージのサイズを設定します。[W]は、横にある[幅の単位]トグルスイッチで単位をpxから%へ切り替え、値を「100.0」にします。[H]は、単位はpxのまま、値を「50」にします。なお、[プロパティ]パネル内には[最小幅][最大幅]項目もあり、コンテンツ幅の最小値/最大値を設定できます。

ステージの幅や高さの単位を%に設定すると、ウィンドウのルーラー部分にスライダーが表示されます。このスライダーをドラッグすることで、ステージサイズを任意のサイズに変更できます。とりあえず、スライダーを320pxの位置へ移動し、このサイズを基準としてアニメーションの作成を進めていきましょう。

エレメントの配置と単位の切り替え

次に、ステージ上にテキストや画像などのエレメントを配置していきます。今回のバナーは、右端にロゴ画像を表示し、残りのスペースで画像やテキストのアニメーションを展開させます。

まず、ロゴ画像を配置し、[プロパティ]パネル内の[位置とサイズ]欄で設定を行います。エレメントの座標基準を設定するアイコンの右下部分をクリックし、[右下を基準にする]モードにします。すると、パネル内に[右][下]項目が表示されます。[右]を「0%」、[下]を「0px」に設定すると、ロゴ画像が常にコンテンツの右端に表示されるようになります。

なお、座標を指定する際の[上][下][右][左]項目は、下表のCSSプロパティに対応しています。

対応するCSSプロパティ
設定項目 CSSプロパティ 説明
top 上端からの距離。
bottom 下端からの距離。
left 左端からの距離。
right 右端からの距離。

同じようにして、他の画像やテキストを[右下を基準にする]モードで配置していきます。なお、エレメントを%単位で配置する際のコツとして、最初はpx単位できっちりと配置し、位置が確定したら、エレメントをまとめて選択した状態で単位を%に変更すると、一括で変更できます。

Edge Animateでは、ステージ上で、表示サイズを変更した際の結果を確認できます。ルーラー上のスライダーをドラッグすると、任意の表示サイズ時における表示結果に切り替わります。

画像サイズをブラウザー幅に応じて拡大/縮小する

画像のサイズもブラウザー幅に応じて変化させたい場合には、画像サイズも%単位で設定します。まず、画像を選択した状態で、[プロパティ]パネルのエレメントタイプを[img]に変更します。次に、[W]の単位を%に変更し、[H]アイコン部分を押して[auto]にします。これで、画像サイズもブラウザー幅に対して横幅が%で変化し、縦幅は縦横比を保つように変化するようになります。なお、[プロパティ]パネルの左下にあるオプションボタンを押すと[最小幅][最大幅]項目が表示され、画像の拡大/縮小時の最大値や最小値を設定できます。

ルーラー上のスライダーをドラッグすると、表示サイズに応じて画像が拡大/縮小することを確認できます。

これで、ブラウザー幅に応じてエレメントの位置や大きさが変化する仕組みが完成しました。後は通常のアニメーションを作成するのと同じく、タイムラインを使ってアニメーションを追加していけばOKです。

このようにEdge Animateでは、CSSやJavaScriptのコードを記述することなく、%単位でのエレメントの配置や操作、アニメーションを作成できます。

ブラウザー幅によってコンテンツ内容を切り替える

続いて、ブラウザー幅をもとにコンテンツ内容をダイナミックに変化させる仕組み、いわゆるレスポンシブWebデザインを作りましょう。レスポンシブWebデザインを実現するにはいくつかの方法がありますが、一般的にはメディアクエリーを使って適用するCSSを切り替えることで、コンテンツの配置や構成に変化を付けます。Edge Animateではメディアクエリーを使って実装することもできますが、今回はJavaScriptを使ってEdge Animate内のみで実装できる方法を利用します。

またEdge Animateでは、ひとまとめのアニメーションを「シンボル」として登録して扱えます。ここでは「小さなバナー」と「大きなバナー」を、それぞれ個別のシンボルとして作成し、ブラウザー幅の閾値を境にして、表示するシンボルを切り替えることでコンテンツ内容を変化させます。

2つのシンボルの作成

「小さなバナー」用シンボルを「BN_SMALL」、「大きなバナー」用シンボルを「BN_BIG」として作成します。

  • BN_SMALL…幅:100%、高さ:50pxのシンボル。ブラウザー幅が0~519pxの時に表示します。
  • BN_BIG…幅:100%、高さ:90pxのシンボル。ブラウザー幅が520px以上の時に表示します。

BN_SMALLについては、先ほど作成したメインのタイムラインから、シンボル化したいレイヤーをCtrlキーを押しながらまとめて選択し、メニューから[編集]→[シンボルに変換]を選んで「BN_SMALL」という名前でシンボル化します。すると、[ライブラリ]パネルにシンボルが登録されます。このとき、メインのタイムライン上に「BN_SMALL」が表示されたままになるので、こちらは消去しておきましょう。

BN_BIGについては、BN_SMALLとある程度似たコンテンツとなるのであれば、[ライブラリ]パネル内でBN_SMALLを複製して作るのが簡単です。また、それぞれのシンボルのアニメーションを編集する際には、Edge Animateのルーラー上のスライダーを利用してコンテンツの仮想サイズを調整し、作りやすい大きさで作業を進めるとよいでしょう。こうして作成した2つのシンボルを、JavaScriptによって切り替えて表示するようにします。

JavaScriptによる表示サイズ判定処理

Edge Animateから書き出されるコンテンツは、エンジン部分にjQueryを利用しているため、jQueryやJavaScriptの機能を利用することができます。また、Edge Animate上のシンボルには、シンボルを操作するためのクラスや各種イベント処理があらかじめ用意されており、任意のタイミングでEdge Animate内のコンテンツをスクリプトから制御できます。今回は、Edge Animateのコンテンツが全て読み込まれた際に発生するcompositionReadyイベントを利用して、表示サイズの変化を監視するコードを作成します。

メニューから[ウィンドウ]→[コード]を選択し、[コード]ウィンドウを表示します。コードウィンドウ左側には、ステージや作成したシンボルの一覧がリスト表示されます。この一覧表の中から、イベント処理を追加したい対象の右側にある「+」ボタンをクリックすると、利用できるイベント処理のリストが表示されます。今回は[ステージ]→[イベント]→[ compositionReady]と辿り、compositionReadyイベントを追加します。すると、[コード]ウィンドウの左側のリストに選択したイベント名が表示され、コードの入力が可能な状態となります。

この状態で、[コード]ウィンドウのコード入力エリアに任意のJavaScriptコードを記述すると、該当するイベントが発生した時に記述したコードが実行されます。ブラウザー幅の変更に対応する処理の基本部分は、次のようになります。

var SIZE = 520; //閾値 var BN_SMALL = "bnsmall"; //小さいバナーを表す定数風変数 var BN_BIG = "bnbig"; //大きいバナーを表す定数風変数 var state = getState(); //現在のバナーの状態 //現在の状態を取得する関数 function getState(){ return ($(window).width()<SIZE) ? BN_SMALL : BN_BIG; } //バナー変更処理 function changeBanner(newState){ state = newState; if(newState==BN_SMALL){ console.log("@小さいバナーに変更する処理"); }else{ console.log("@大きいバナーに変更する処理"); } } //リサイズイベント $(window).resize(function() { //閾値を超えたらバナー変更処理呼び出し var newState = getState(); if(state != newState){ changeBanner(newState); } }); //初回呼び出し changeBanner(state);

JavaScriptやjQueryに慣れている方であれば、見慣れたコードではないでしょうか。前述の通り、Edge AnimateではjQueryが利用できるので、$セレクターを利用してwindowを取得し、width()で幅を取得したり、

$(window).width()

「$(window).resize(関数)」という構文でwindowのresizeイベント発生時に実行したい処理を記述する、といったことができます。

$(window).resize(function() { //閾値を超えたらバナー変更処理呼び出し });

また、JavaScriptベースなので、コンテンツの開発中には、ChromeやFirefox(Firebug)といったブラウザーで利用できるconsole.log()をコード内に記述し、コンソールに必要な情報を表示しながら開発を進めることも可能です。

console.log("@小さいバナーに変更する処理");

JavaScriptからCSSプロパティを変更する

上記コードの「バナー変更処理」部分にバナーのシンボルを切り替える処理を記述していきますが、その前にコードからエレメントのCSSプロパティを変更する方法についても触れておきましょう。各バナーのシンボルには高さを設定していますが、念のため、バナーを内包する要素(ここではステージ)にバナーの高さに合わせてheightプロパティを指定してみます。

JavaScriptからタイムラインとなるエレメントや、タイムライン上に配置したエレメントのCSSプロパティを変更するには、対象のエレメントへのjQueryハンドル(jQueryの処理対象として扱うための参照)を取得し、jQueryのcss()命令を実行します。

jQueryハンドル.css("プロパティ名", "値");

Edge Animateでは、個々のタイムライン(シンボル)を「Symbolクラス」のインスタンスとして扱えるようになっています。このSymbolクラスには、対象としたいエレメントのjQueryハンドルを取得するためのメソッドが用意されています。

jQueryハンドルを取得するための2つのメソッド
メソッド 説明
getSymbolElement() タイムラインとなるエレメントへのjQueryハンドルを取得。
$(エレメント名) タイムライン上にあるエレメントへのjQueryハンドルを取得。エレメント名には、タイムライン上のレイヤーに指定した名前を利用します。

また、Edge Animateの各種イベント処理には、「sym」と「e」という2つの引数があらかじめ渡されています。

イベント処理に渡される2つの引数
引数 説明
sym イベント処理を作成したシンボルへの参照。
e イベントに関する情報が集められたオブジェクト。いわゆるイベントオブジェクト。

この引数はそのままイベント処理内で利用できます。特に、任意のエレメントのjQueryハンドルを取得したい場合には、引数symを利用して以下の形で記述します。

sym.getSymbolElement().css("プロパティ名", "値"); sym.$(エレメント名).css("プロパティ名", "値");

さて、jQueryハンドルの取得方法がわかったところで、先ほど作成したイベント処理と組み合わせてCSSプロパティを変更する処理を作成してみましょう。今回は、「小さなバナー」の表示時は、コンテンツの高さ(heightプロパティ)を50pxに、「大きなバナー」の表示時は90pxに変更します。ステージ(メインのタイムライン)のcompositionReadyイベント内にコードを記述しているので、引数symにはステージへの参照が格納されています。そこで、「sym.getSymbolElement()」としてステージのjQueryハンドルを取得し、css()命令でプロパティと値をセットすればOKです。

//バナー変更処理(抜粋) if(newState==BN_SMALL){ sym.getSymbolElement().css("height","50px"); }else{ sym.getSymbolElement().css("height","90px"); }

これで、ブラウザー幅に応じて高さの変わる仕組みが完成しました。

JavaScriptからシンボルを配置/消去する

Edge AnimateのSymbolクラスでは、シンボルの動的な配置/消去を行うために次のメソッドが用意されています。

シンボルの配置/消去を行うためのメソッド
メソッド 説明
createChildSymbol(シンボル名,親名, インデックス) 新規シンボルを作成・配置します。シンボル名は[ライブラリ]パネル内の名称、親名はエレメント名、インデックス(省略可能)は追加位置を指定します。
deleteSymbol() シンボルを消去します。

この2つのメソッドを利用して、先ほど作成したコードを以下のように変更します。

//現在表示中のバナーへの参照を保持する変数を用意しておく var currentBanner = null; /* 中略 */ //サイズ変更処理 function changeBanner(newState){ //現在表示されているシンボルを消去 if(currentBanner!=null)currentBanner.deleteSymbol(); state = newState; if(newState==BN_SMALL){ //「小さなバナー」用のシンボルを動的に配置し、ステージサイズ変更 currentBanner = sym.createChildSymbol("BN_SMALL", "Stage"); sym.getSymbolElement().css("height","50px"); }else{ //「大きなバナー」用のシンボルを動的に配置し、ステージサイズ変更 currentBanner = sym.createChildSymbol("BN_BIG", "Stage"); sym.getSymbolElement().css("height","90px"); } }

これでスクリーンサイズに応じて、表示するシンボルを切り替える処理が作成できました。

JavaScriptからバナーらしい処理を追加する

最後に、バナーコンテンツらしい処理を追加しましょう。コンテンツ上にマウスカーソルが乗った際に、マウスポインタが指のマークに変更するように、以下のコードをcompositionReadyイベント内に追加します。

//バナーにマウスカーソルを乗せた際、マウスポインタを指のマークに変更 sym.getSymbolElement().css("cursor","pointer");

さらに、ステージのclickイベントに、コンテンツクリック時にリンク先へとジャンプするよう、以下のコードを追加します。

window.open("http://html.adobe.com/jp/", "_blank");

これでブラウザー幅に応じてコンテンツ内容が変化するバナーの完成です。

おわりに

このように、%単位でアニメーションを作成し、JavaScriptを併用してブラウザー幅を取得してコンテンツの内容をコントロールすることによって、異なるブラウザー幅でも同じEdge Animateアニメーションを使いまわすことが可能となります。

今回は単純にブラウザー幅の値のみを閾値として利用しましたが、ユーザーエージェントや画面解像度などの情報をJavaScriptで取得し、より細やかな判定を行い、コンテンツの内容を変化させることも可能です。また、単純に表示シンボルを切り替えるだけでなく、グリッドレイアウトのように複数のシンボルを配置し、表示サイズに応じて表示するシンボルを細かく切り替えていく、といった運用も可能でしょう。