Edge Animateを試そう：レスポンシブなアニメーションの作成

PCからスマートフォンの画面まで、自動的に対応するHTMLアニメーションをつくりませんか？

Edge Animateの［レスポンシブな拡大/縮小］機能を使えば、画面サイズに応じて表示が変わるインタラクティブなHTMLコンテンツや動きのあるHTMLコンテンツの制作が容易になります。

スマートフォンやタブレットなどの普及により、デバイスに対応したHTMLページの作成が重要な要件となった今の時代には、待望の機能と言えるでしょう。

画面サイズに応じたレスポンシブなアニメーション

この記事では、［レスポンシブな拡大/縮小］を使い、表示サイズに自動的に対応するHTMLアニメーションを制作する手順を解説します。

記事内で使用するサンプルのベースとなったコンテンツが公開されています。下のリンクをクリックするとご覧になれます。

［レスポンシブな拡大/縮小］を使ったコンテンツを見る
（※表示すると効果音が再生されるのでご注意ください。iOSなど、一部モバイル環境では再生されないことがあります）

上のコンテンツの制作には、Edge Animateのモーションパスや、オーディオ関連の機能も使われています。この2種類の機能については、別の記事で詳しく紹介しています。

参考：Edge Animateの基本的な使い方は「Edge Animate入門」をご覧ください。

［レスポンシブな拡大/縮小］機能を使えば、コンテンツの縦横比を維持したまま、さまざまな表示サイズに合わせてコンテンツを拡大/縮小させることが可能です。

まずは、ダウンロードしたサンプルファイルの（01_編集前）内にあるindex.anファイルをダブルクリックしてEdge Animate内で開いてください。このプロジェクトは、必要な素材をステージ上に設置しただけの状態です。

Ctrl + Enterキーを押して、ブラウザにプレビューを表示します。ブラウザの幅を変更しても、コンテンツの表示が変わらないことを確認しておきましょう。

これを、表示画面の幅に応じて変わるように変更します。手順は、Stageの［プロパティ］パネルにある［レスポンシブな拡大/縮小］にチェックを入れ、［幅］を選択するだけです。Stageの［プロパティ］パネルを表示するには、[エレメント]パネルでStageを選択します。

図2 ［レスポンシブな拡大/縮小］にチェックを入れ、［幅］を選択する

再びブラウザーでプレビューして、表示幅を変更してみてください。これだけの設定で、表示サイズの幅を基準とする拡大縮小が実現されたことがわかります。

［幅］以外にも、［高さ］、［両方］を選択することができます。選択したオプションによって、拡大縮小の振る舞いが変わります。

図3 PC横幅サイズ（1280px）図4 タブレット横幅サイズ（1024px）図5 スマートフォン横幅サイズ（320px）

［レスポンシブな拡大/縮小］機能の［幅］や［高さ］と合わせて、Stageに［最小値］や［最大値］を指定することで、拡大/縮小する範囲を制限できます。

Stageの[最大値]のデフォルトの値はnoneになっています。これを変更するには、[最大値]のラベルをクリックして、表示されたポップアップ内のチェックをクリックして外します。数値表示になったらキーやマウスにより任意の値を設定できます。

［最小値］と［最大値］に適当な値を指定したらプレビューで確認してみてください。

その他にも［ステージの中央を表示］にチェックを入れると、表示領域内で、常にコンテンツが中心に表示されるようになります。オプションの[垂直]、[水平]、もしくは[両方]により、縦だけ中央、横だけ中央といった指定も選べます。

図6 拡大/縮小サイズの［最小値］や［最大値］を設定できるほか、常にコンテンツを中心に表示させることができる