Webサイトデザイン制作Tips|Webあんぎゃ

Webサイトデザイン制作における基礎知識を中心に記載しています。
内容は2013/6/7より受講している求職者支援訓練「Webサイト制作科」の授業に基づいています。

 | 

2013-10-17

Webサイト制作における動的な図形の簡単な作り方(Google Web Designer)

Webサイト制作における動的なパーツなどの制作時に利用できる便利なアプリケーションの一つとして、「Google Web Designer」の紹介があったので簡単にまとめておく。

Google Web Designer」とは

以下を参照。
https://support.google.com/webdesigner/answer/3184833?hl=ja

準備
  1. Google Web Designer」で検索して、ダウンロードする(https://www.google.com/webdesigner/
  2. ダウンロードしたexeファイル(googlewebdesigner_win.exe)をダブルクリックしてインストールする
  3. インストールした「Google Web Designer」を開く(起動する)

f:id:porco_webangya:20131018020712j:image:w360

作成例

1.「ファイル」→「新しいファイル」
2.「新しいファイルの作成」画面で下記のように入力(指定)する

  • 「ディメンション」:「Custom」を選択
  • 「幅」と「高さ」を適当に指定する
  • 「名前」に保存したいhtml名を入力する
  • 「場所」に保存先を指定する
  • アニメーション モード」に「詳細」にする

f:id:porco_webangya:20131018015556j:image:w360
※他はデフォルトのままでOK
※白い部分をステージと呼ぶ
3.ペンツールを選択した状態で、塗りを設定し、ステージ上に任意の図形を描く
 →すると、ステージの下にあるタイムラインに<canvas>のタイムラインが表示される
f:id:porco_webangya:20131018041252j:image:w360
4.タイムライン上の任意の場所(ここでは00:01:00の位置とする)でマウスを右クリックし、「キーフレームを挿入」する
f:id:porco_webangya:20131018041527j:image:w360
5.「3D オブジェクト回転ツール」を選択し、ステージ上に現れた3軸の円(最初は青い円の中に赤い線と緑の線があるように見える)のいずれかの上でドラッグし、適当に回転させる
6.再度、タイムライン上の任意の場所(ここでは00:02:00の位置とする)でマウスを右クリックし、「キーフレームを挿入」する
7.再度、「3D オブジェクト回転ツール」で、ステージ上の3軸の円のいずれかの上でドラッグし、適当に回転させる
8.プレビューで見てみる
IEを含め、ブラウザのバージョンによって動かないこともある
9.Webサイトのパーツとして使いたければ上書き保存して、このファイルにページに必要な他のパーツなどを追加して、ページ(html)を完成させる

手順4〜5(6〜7)は必要に応じて繰り返したりする。

これを使うことで、Webページ上に配置する動的な図形などを簡単に作ることができる。
Canvasについては下記参照
http://www.html5.jp/canvas/what.html

スパム対策のためのダミーです。もし見えても何も入力しないでください
ゲスト


画像認証

トラックバック - http://d.hatena.ne.jp/porco_webangya/20131017/1382037888
リンク元
 |