本格バナー制作で学ぶGoogle Web Designerの使い方 (4/4)
2014年06月20日 11時14分更新
4.動きをつける
パーツの配置が完了したので、1ページ目（page1）からアニメーションを作っていきます。「詳細」アニメーションモードでは、Flash Professionalのようにタイムライン上で動きをつけられます。動きをつけたいパーツを含むレイヤーを選択し、任意のフレーム上で右クリックすると、キーフレームを挿入できます。
キーフレームの始点（>）をクリックするとアニメーションの開始時の状態、終点（<）をクリックすると終了時の状態を設定できます。状態は「プロパティ」パネルで設定します。
1ページ目では以下のように動きを設定します。
| ID名 | アニメーションの内容 | プロパティの設定項目 |
|---|---|---|
| BG | 背景画像の下から上への縦方向の移動 | 位置とサイズ→上 |
| txt1 | テキスト画像のフェードイン | スタイル→透明度 |
サンプルのように要素をフェードインさせるには、「プロパティ」パネル内「スタイル」の透明度で、0〜1の間の値を設定します。透明度を「1」にすると透過無し、 「0.5」にすると透明度は50%になります。
1ページ目のタイムラインは以下の画面のようになります。
5.イージングを設定する
タイムライン上のアニメーション始点から終点の間で右クリックをすると、イージングを設定できます。
イージングはプリセットから選択するほか、カスタムイージングも作成できます。
作例では、はじめはゆっくり、次第に加速する「イーズイン」を設定しました。
6.イベントの設定をする
1ページ目の動きが完成したので、アニメーションが終わったら次のページへ遷移するイベントを設定します。
「イベント」パネルの「＋」ボタンをクリックして、新規イベントを作成します。
各項目は以下のように設定します。
- ・ソース
- 「page1」を選択します
- ・イベント
- 「アニメーション完了」を選択します
- ・ターゲット
- 「page1」を選択します
- ・操作
- 「ページに移動」を選択します
最後の「設定」では、遷移先のページ名を「ページID」に設定し、ページ遷移の方法を「遷移効果」「長さ」「イージング」「方向」で設定します。ページ遷移の方法は以下から選択できます。
- ・「遷移効果」
- none,slide,fade,push
- ・「イージング」
- linear,ease,ease-in,ease-out,ease-in-out
- ・「方向」
- top,bottom,left,right
作例では、「遷移効果」を「fade」、長さを「1000（ミリ秒）」、イージングを「ease-in」、「方向」を「top」に設定しました。
以上で1ページ目のアニメーションがすべて完成しました。あとは、4〜5のステップを同様に2ページ目に設定したら、カフェのバナーの完成です。
◆2ページ目のアニメーション設定
- ・遷移効果
- fade
- ・イージング
- ease-in
- ・方向
- top
画像クリックでサンプルを表示します
まとめ
第3回目ではバナー制作のチュートリアルを、アニメーション中心に説明をしました。Flashの操作になれている方は、タイムラインでアニメーションを作れる「詳細」アニメーションモードが使いやすいと思います。ぜひ試してみてください。
次回は、Google Web Designerの特徴の1つ、「コンポーネント」を使ったインタラクティブバナーの制作です。お楽しみに！
