Google Web Designerで始めるHTML5アニメーション ― 第2回

チュートリアルで学ぶGoogle Web Designer操作まとめ (2/2)

5. 動きをつける

　最後に、アニメーションを設定して、バナーに動きを付けてみましょう。Google Web Designerでは、「クイック モード」と「詳細モード」の2つのアニメーションモードが選択できますが、今回は手軽に扱えるクイックモードで作成します。

　アニメーションを設定するためのタイムラインは画面の下部に配置されています。

　タイムラインが表示されていない場合は、画面右下の矢印をクリックすると表示されます。

　クイックモードはシーンごとにアニメーションを設定できます。「+」を選択するとシーンが増やせます。

　動きを付けてみます。例では、「バシャログ。」のタイトル画像をフレームインさせて、右上のロゴを回転させるアニメーションを設定します。

　シーンを追加し、タイトル画像を停止させたい場所まで移動させます。要素の位置移動は、「プロパティ」の中の「位置とサイズ」が便利です。

　さらにシーンを追加し、ツールバーから「3Dオブジェクト回転ツール」を選択して、右上のロゴを回転させます。

　コントロールの内側のリングをドラッグすると、要素を自由に回転できます。

6. 確認する

　シーンをひととおり作成したら、「プレビュー」で確認してみましょう。「プレビュー」「コードの表示」は、タイムラインの上部に配置されています。

　「プレビュー」ボタンを選択するとコンテンツがブラウザーで確認できます。あらかじめプレビューするブラウザーを選択したい場合は、「プレビュー」ボタンの横の三角のアイコンをクリックします。

　作成したコンテンツのコードを確認したい場合は、「コードを表示」を選択すると画面をコードビューに切り替えられます。

7. 公開する（書き出し）

　プレビュー表示で問題なければ「公開」を選択します。

　「公開」を選択すると、ファイルの保存方法の設定画面が表示されます。

　ファイルの保存方法は以下から選択できます。

[ファイルをフラット化]

1つのフォルダにすべてのファイルを格納します。

[zip を作成]

ファイルを zip ファイルに圧縮します。

[圧縮]

HTMLを圧縮します。

ポライト ロード

ホスティングページの読み込みが完了するまで初期読み込み以外を行ないません。

　必要な設定にチェックを入れて「公開」すると、指定の保存先にファイルが書き出されます。なお、一度公開したHTMLファイルはGoogle Web Designer上で再編集できません。

　以上で、バナーが完成しました。

画像クリックでサンプルを表示します

まとめ

　第1回と第2回をとおしてGoogle Web Designerの基本の使い方を説明してきました。次回からは応用編です。より実用的なアニメーションを制作します。