アニメーションの常套手段：減速して吸着
とにかくいろんな場面で使えてしまう、便利な動き。記述も簡単な上に、そこそこ気持ちの良い動きという理由で頻繁に使用する動き。それがこれ↓
flash player required.
この動きに名前はあるのでしょうか？ここでは便宜的に「減速して吸着」と呼ぶことにします。ではFlashを使って「減速して吸着」を記述してみましょう。動きの原理は極めて単純で、あるフレームの位置を以下の式で決めます。
あるフレームにおける位置 = (前フレームの位置) + (スピードの係数) × (目的位置 - 現在位置)
この動きの最も単純な例として、このページ上部にあるFlashのコードを紹介します。使用する言語はActionScript2.0です。
ルートに適当なムービークリップを作成し、mcTestという名前を付けます。そして、そのムービークリップの動きを実装するためのクラスを作成してみます。下記のスクリプトを、Flashドキュメントと同じディレクトリに「MyTestObject.as」というファイル名で記述します。
class MyTestObject{
var mc:MovieClip;
var nStart,nTarget,nSpeed:Number;
function MyTestObject(mcIn:MovieClip){
this.mc = mcIn;
this.nStart = 25;
this.nTarget = 475;
this.nSpeed = 0.2;
var owner:Object = this;
this.mc.onEnterFrame = function(){
this._x += owner.nSpeed * (owner.nTarget - this._x);
if(Math.abs(owner.nTarget - this._x) < 0.1){
this._x = owner.nTarget;
owner.Reset();
}
}
}
function Reset(){
this.mc._x = this.nStart;
}
}
ではコードを行を追って見ていきましょう。var mc:MovieClip;
var nStart,nTarget,nSpeed:Number;
function MyTestObject(mcIn:MovieClip){
this.mc = mcIn;
this.nStart = 25;
this.nTarget = 475;
this.nSpeed = 0.2;
var owner:Object = this;
this.mc.onEnterFrame = function(){
this._x += owner.nSpeed * (owner.nTarget - this._x);
if(Math.abs(owner.nTarget - this._x) < 0.1){
this._x = owner.nTarget;
owner.Reset();
}
}
}
function Reset(){
this.mc._x = this.nStart;
}
}
2行目：コンストラクタでルートから受け取るムービークリップ（の参照）を格納するための変数。このムービークリップをアニメーションさせます。
3行目：クラス内で使用する変数で、それぞれ初期位置、目的位置、アニメーションのスピードです。
4行目：このクラスのコンストラクタ。ルートからムービークリップ（の参照）を受け取って、
5行目：クラスのプロパティに代入します。
6-8行目：初期位置、目的位置、スピードをそれぞれ設定します。
10行目：（後述）
11行目：ムービークリップのonEnterFrameハンドラを使用してアニメーションさせます。
12行目：ここで、ページ冒頭のこの式↓
あるフレームにおける位置 = (前フレームの位置) + (スピードの係数) × (目的位置 - 現在位置)
が出てきます。10行目のownerは、ハンドラの内部からクラスのプロパティ・メソッドにアクセスするために用意しました。
13行目：目的位置に到達したかどうかを判断します。このアニメーションの手法だと、アニメーションが進行するにつれムービークリップの位置は限りなく目的位置に近づくものの、いつまでたってもイコールになることはないので、その差（ムービークリップの位置と目的位置の差）の絶対値が0.1以下になったらアニメーションの完了と見なすことにします。アニメーション完了のタイミングで、
14行目：mcを強制的に目的位置にしてやって、
15行目：ここでは19行目に作成したResetメソッドを実行してアニメーションがループするようにしました。
次に、ルートにおける記述です。いま作成したクラスのインスタンスをここで生成してやります。
var oTest:Object = new MyTest(this.mcTest);
ルートでの記述はこれだけです。パブリッシュしてアニメーションを確認してみて下さい。僕は普段、「スピードの係数」が0.4～0.5で「速め」、0.1～0.2で「遅め」という具合で指定しています。
ご参考になれば嬉しいです。m( __ __ )m