Dreamweaver TechniqueJAVA Script サンプル | CSS sample | JAVA Applet sample | Flash Sample
HTML4.0 riference | DynamicHTMLXHTML | XML sample | XSLT sample | RIKO's ASP Trial

レイヤーアニメーション

 

 

■ レイヤーの配置

アニメーションを作成するには、ドキュメント上にレイヤーを配置する必要があります。ここではアニメーションの開始位置に、それぞれのレイヤーを配置しました。レイヤーを配置したら、テキストやイメージなどをレイヤー内に挿入します。

■ タイムラインの設定

まず、アニメーションさせるレイヤーをタイムラインに登録します。【ウィンドウ】メニューの【その他】から、【タイムライン】を選択して、【タイムライン】パネルを表示させます。
ドキュメント上のレイヤーをタイムラインまでドラッグしてチャンネルに登録します。登録が完了すると15フレームの長さを持ったアニメーションがタイムラインに追加されます。続いてアニメーションバーをクリックしてバー全体を選択した状態にし、そのままドラッグして開始位置が1フレーム目になるように調整しておきます。
タイムラインの横軸方向(フレーム)は時間の経過を表します。初期設定では15フレーム/秒ですが、フレームレートは任意の値に買えることもできます。ただし、アニメーションの速度は再生するマシンのスペックに依存する部分が多いので、おおよその目安として 12〜15フレーム/秒と考えておきましょう。
レイヤーの重なり順は、Zインデックスで管理します。タイムラインの横軸(チャンネル)の順番でレイヤーの重なり順が変化することはありません。レイヤー1つにつき1つのチャンネルを使用するようにすると、管理が楽になります。

■ アニメーションの始点と終点の設定

タイムラインに登録したレイヤーに、実際にアニメーションを設定します。
レイヤーをタイムラインに登録した時点で、アニメーションバーの始点と終点にキーフレームが設定されており、すぐにアニメーションの設定が行えます。この2つのキーフレームを使用して単純なアニメーションを作成してみました。キーフレームは、フレームセルをクリックすることで選択できるので、任意のアニメーションバーの終点キーフレームを選択して、プロパティウィンドウで数値を入力して移動させることもできます。レイヤーを移動させるとそのレイヤーを選択した際にアニメーション中の軌跡を現すパスが表示されるので、動きを把握できるようになっています。

■ 再生時間とタイミングの調整

タイムラインのルーラ上にある赤いカーソルは現在のフレーム位置を示す再生ヘッドです。左右にドラッグすることで、アニメーションをプレビューできます。アニメーションの長さお変えたい場合は、対象のアニメーションバーの端にある白い丸で表現されているキーフレームを左右にドラッグして再生時間の調節をすることができます。
以上のような手順でドキュメント上のレイヤーごとにアニメーションを設定します。レイヤーごとのアニメーションバーをドラッグして開始キーフレームを調整することで、アニメーションが再生されるタイミングを制御することもできます。

■ キーフレームの追加と自動再生の設定

レイヤーの動きの設定はキーフレーム単位で行えるので、アニメーションバーにキーフレームを追加すれば複雑な動きのアニメーションも作成できます(キーフレームのないフレームでレイヤーを移動させてもアニメーションには組み込まれません)。アニメーションバーにキーフレームを追加するには、キーフレームを追加したいフレーム上で【CTRLキー】(または【コマンドキー】)を押しながらクリックします。
最後に【タイムライン】パネルの【自動再生】チェックボックスをオンにしておきます。これで、ページが読み込まれると同時にアニメーションが再生されます。ブラウザでプレビューを行い、正しく動作するようなら完成です。
R HOUSE | RIKO's Trial Page | Shirley's Pettit Case | Shirley's i-box | Shirley's little box