Edge Animateで作るHTML5リッチコンテンツ入門 ― 第4回

「レスポンシブ」で作る、スマホ対応トップバナー (1/4)

　アニメーションなどのHTML5コンテンツを手軽に制作できるオーサリングツール「Adobe Edge Animate」。前回は、Edge Animateでインタラクティブなスライドショーを制作しながら、シンボル機能について学びました。

　今回は、さまざまなウィンドウ幅に対応できるトップバナーを制作します。PCだけでなくスマートフォンやタブレットでも表示できるレスポンシブなコンテンツの作り方を学習しましょう。

　具体的には、レストランのWebサイトをイメージしたトップバナーを制作します。写真を上下左右に動かしながらテキストを表示し、フェードアウトで切り替えていくバナーです。完成版は以下のリンクを参照してください。

完成サンプル（画像クリックでサンプルを開きます）

　このサンプルを以下の手順で制作します。

1. 画像アニメーションを作る
2. 文字アニメーションを作る
3. レスポンシブ化する
4. スマートフォンのブラウザーに対応する

　最初は固定幅で制作し、その後にレスポンシブ化してスマートフォンに対応します。

1.画像アニメーションを作る

　画像アニメーションを制作します。Edge Animateを起動し、新規プロジェクトを作成しましょう。ステージの大きさは、幅880×高さ320pxです。

ステージを作成する

　ステージの色は黒(#000000)に設定します。

ステージの色を設定する

　スライドで使用する画像をアセットに読み込みます。右サイドのライブラリパネルにある「アセット」の[＋]をクリックして、アセットを追加します。作例では「cabbage」「dish1」「dish2」「floor1」「floor2」「tomato」の6つのファイルを読み込みます。

アニメーションする画像を読み込む

　アセットに準備した画像をステージ上に配置して、動きを付けていきます。今回は、以下の3パターンのアニメーションを制作します。

作成する画像アニメーションのパターン

　それぞれのアニメーションで変化させるプロパティを解説します。

左右に移動しながらフェードアウト(1枚目、2枚目)

　1枚目（トマト：Tomato）と2枚目（キャベツ：cabbage）の画像は、左右にアニメーションさせます。このアニメーションでは、以下のようにプロパティを設定します。すべてトランジションモードは「ON」にします。

	tomato			cabbage
タイムライン(s)	左端	不透明度	表示	左端	不透明度	表示
0	0px		オン
2		100
2.5	-15px	0	オフ	-15px	0	オン
2.75					100
4					100
4.5				0px	0	オフ

左端

　左右に動きを付けます。「tomato」は右から左へ15px、「cabbage」は左から右へ15px移動させます。

不透明度

　CSSのopacityプロパティを変化させてフェードイン、フェードアウトさせます。「tomato」は非表示にするときに不透明度を100から0にしてフェードアウト、「cabbage」は表示するときに不透明度を0から100にしてフェードイン、非表示にするときに不透明度を100から0にしてフェードアウトさせます。

表示

　CSSのdisplayプロパティを変更して表示、非表示を制御します。

1枚目と2枚目のタイムライン

上下に移動しながらフェードアウト(3枚目、4枚目)

　3枚目（料理：dish1）と4枚目（料理2:dish2）の画像は上下にアニメーションさせます。このアニメーションでは、以下のようにプロパティを設定します。すべてトランジションモードはONにします。

	dish1			dish2
タイムライン(s)	上端	不透明度	表示	上端	不透明度	表示
4.5	-30px	0	オン
4.75		100
5.75		100
6	0px	0	オフ	0px	0	オン
6.75					100
7.25					100
7.5				30px	0	オフ

上端

　上下に動きを付けます。「dish1」は上から下へ30px、「dish2」は下から上へ30px移動させます。

不透明度

　両画像ともに、表示させるときにフェードイン、非表示にするときにフェードアウトさせます。

表示

　CSSのdisplayプロパティを変更して表示、非表示を制御します。

3枚目と4枚目のタイムライン

位置は固定でフェードイン/アウト(5枚目、6枚目)

　5枚目（店内1:floor1）、6枚目（店内2:floor2）の画像は、位置は固定で、フェードイン／フェードアウトさせます。このアニメーションでは、以下のようにプロパティを設定します。すべてトランジションモードはONにします。

	floor1		floor2
タイムライン(s)	不透明度	表示	不透明度	表示
7.5	0	オン
7.75	100
8.75	100
9	0	オフ	0	オン
9.25			100
10.25			100
10.5			0	オフ

不透明度

　両画像ともに、表示させるときにフェードイン、非表示にするときにフェードアウトさせます。

表示

　CSSのdisplayプロパティを変更して表示、非表示を制御します。

5枚目と6枚目のタイムライン

　ここまで画像のアニメーションが完成しました。ブラウザーでプレビューしてみましょう。