このページの本文へ

本格バナー制作で学ぶ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つ、「コンポーネント」を使ったインタラクティブバナーの制作です。お楽しみに!

前へ 1 2 3 4 次へ

この連載の記事

一覧へ
Web Professionalトップページバナー

この記事の編集者は以下の記事をオススメしています

Webディレクター江口明日香が行く