アニメーションとイージング
アニメーションとイージング
制作したサンプルサイトは、WEBサイトとしては一通り機能するものの、今のままでは、はっきり言って、わざわざFlashで制作する必要はありません。そこで、アニメーションをつけてみましょう。
アニメーションの基本
もともとアニメーションを制作するためのソフトウェアだったFlashには、アニメーションを簡単につけることができる機能があります。例えば、オブジェクトを移動させたり、フェードインさせたり、回転させたりです。
今回は、その中でも最も使用頻度が高い、フェードインを紹介します。
最初に、新規ムービークリップシンボル（空）を作成します。そこに、「TOP」ボタンをロールオーバーした画像（GIF）を配置しましょう。画像は、「ファイル」→「読み込み」→「ステージに読み込み」で取り込むことができます。
＊アニメーションを制作する時は、基本的に「ムービークリップ」シンボルを使用します。
読み込んだ画像を「F8」でグラフィックシンボル化し、任意の名前をつけます。上は、とりあえず、「G_TOP_o」とつけてみた図。ちなみに、ムービークリップは、「MC_TOPボタンアニメーション」と名前をつけました。
グラフィックシンボル化したら、任意のフレームに「F6」でキーフレームをうってみましょう。
その後、最初のキーフレームを選択、さらに、グラフィックシンボル「TOP」を選択し、プロパティパネルの「カラー」から、アルファを選択しましょう。
そこで、アルファを0％にすると、グラフィックシンボルが消えるのがわかります。
次に、キーフレーム「1」から「20」の間の普通のフレームをクリックし、「トゥイーン」から「モーション」を選択してみましょう。「1」から「20」の間が青くなり、矢印が表示させれるのがわかります。これで、アニメーションは完成です。
「return」でアニメーションを確認してみましょう。
基本的にFlashはアニメーションをループ再生させる仕様になっているので、「Action」レイヤーを作成し、最後にアクションスクリプト「this.stop();」をキーフレームに書きました。こうすることによって、1回だけ再生されるアニメーションを制作することができます。
Flashでアニメーションを制作する場合、このように、始点と終点にキーフレームをうち、中間をモーショントゥイーンさせるという手法をとります。例では、フェードインさせたましが、移動させたい場合は、始点と終点のキーフレームの「X」「Y」座標を変えてやればOKです。大きさを変えたり、回転させたりしたい場合も同様になります。
イージングについて
車はブレーキをかけても急には停止せず、摩擦がかかって徐々に停止します。そのような動きをFlashでは簡単につけることができ、それが「イージング」とよばれるものです。
青く、矢印になっているフレームをクリックし、イージングを「0」から「100」の間に設定すると、徐々にゆっくり再生されるアニメーションを制作する事ができ、「0」から「-100」に設定すると、徐々に早くなるアニメーションををつけることができます。
イージングをかけるだけで、アニメーションにメリハリが出るので、積極的に活用しましょう。
サンプルサイトへの適用
「ライブラリー」の中の「BT_TOP」をダブルクリックして、編集状態にし、元々あった画像を「元画像」レイヤーに、「アニメーション」レイヤーにライブラリーから「MC_TOPボタンアニメーション」をドラッグアンドドロップして、上のように「オーバー」キーフレームに配置します。
位置をちょうど元画像と重なるように調整しましょう。これで、マウスオーバーした時にすこしだけハイライトがかかるアニメーションが再生されるボタンの完成です。
ここまでのサンプルサイトを見る。
ここまでのサンプルFlashファイルをダウンロード。
（右クリック→ファイルをダウンロード:[top02.fla]270KB）
