Webふぉれすと
Web制作、Webデザインのスキルアップに役立つ情報をお届けします!
みんなが癒され、元気になるWebを目指します。
サイトマップはこちら
PI-chicc,PA-chicc
うぇぶ実験室
ふぉれすとCafe
NANAKORO*BEANS
くりっくりんく
イベント・セミナーを探せ!
ふぉれすとかわらばん
がしがし通信
今日のスタッフ
スタッフプロフィール
ご意見ご感想フォーム
トップページにもどる
Webふぉれすとトップ>うぇぶ実験室

GoLiveでアニメーションを作ろう

フロ−ティングボックスを利用してアニメーションを作る

まずはサイズや自動的に書き出されるソースコードなどは考慮に入れないで、思ったままに動かしたアニメーションを作成してみます。

GoLive画像配置 背景画像に夕焼けの写真を配置し、その上にフローティングボックス使用してUFOのイラストを重ねます。

次にこのUFOを動かしていくわけですが、それにはタイムラインエディタとフローティングインスペクタを使います。

タイムラインは、時間経過に従ってフローティングボックスの位置を制御し、アニメーションパスとして記憶させます。そしてフローティングインスペクタは、フロ−ティングボックスの動きの種類や、表示・非表示などを指定します。


タイムラインエディタ
GoLiveタイムラインエディタ

1秒あたりのフレーム数を15として、4秒分のアニメーションを繰り返す設定としました。

動きの切り替えになるポイントをキーフレームとして、それぞれのポイントに来たときにUFOのイラストを置く場所を記憶させていきます。キーフレーム間の動きは直線・曲線が選べる他、マウスの自由な動きから「記録アニメーション」を作成することもできます。

出来上がった作品は、次のページからご覧ください。

動きもスムーズに調整でき、ほぼOKというところで、どんなソースコードを書いてくれたのか見てみました。
全295行のうち、headの部分だけで200行以上も占めています!
GoLiveは、JavaScriptとCSSを利用してアニメーションを作成しているということがわかります。

前のページへ
うぇぶ実験室トップ
続きを読む


Copyright(c)2002-2004 Step-First All rights reserved. [About WebForest]
E-Mail:webforest@step-first.com