Actionscriptでふわふわ感を再現したい

とても困っているのでご質問させていただきます。
http://community.edita.jp/
上記のページの「雲が降ってくる」→「ふわふわと横に移動」→
「マウスオーバーでスムーズに拡大」ような一連の動きを
Actionscriptで再現するには
どのような記述をしたらいいのでしょうか？

ちなみに、落下するものはランダムで再現したいと思います。

当方、Actionscriptはかじったです。
できれば、わかりやすいシンプルな記述をご教授していただけると
ありがたいです。

環境：Flash8 Actionscript2.0

以上よろしくお願い致します。

No.1 回答者： BlurFiltan 回答日時： 2009/05/29 18:46

> わかりやすいシンプルな記述をご教授していただけると

> ありがたいです。

それだけ複合的なものの「出来上がり」を見て，
「わかりやすくシンプル」ということはないと思いますよ。
作るのは簡単ですが，それを理解するのは作る以上に難しいと思います。

いきなりの「出来上がり」を提示してそれを説明するのも大変ですから
以下では私が作成してみた手順を書きます。

どんなものを作る場合もそうですが，
複数のものを同時に動かそうとするのではなく
１つずつを着実に動かして作成していくというのが鉄則です。
というわけで「１つの雲」のみを動かす行程を書きます。



まずステージ上に基準点を真ん中にした「雲のムービークリップ」を作成し，
適当な場所に配置します 。
そしてその「雲のムービークリップ」に，例えば「kumo0」というインスタンス名を付けます。
そして，新規でActionScript用レイヤーを追加して
１フレーム２レイヤーにします (ここまでが下の図↓)。

そして，
ActionScriptを次のように進化させて作成して行きます。

ActionScriptレイヤーのフレーム1に，
一番上のものから順にコピペ＆パブリッシュしてみて，
１つ１つの部分を理解すれば
最後のスクリプトがなぜそうなるのか理解し易いのではないかと思います。
　　　　　↓↓
　　　　スタート
　　　　　↓↓
---x座標のみを動かしてみる------------------
// 「kumo0」に対して１フレーム進む時間ごとに実行する関数を定義
kumo0.onEnterFrame = function():Void {
// 2pxずつ左に移動
this._x -= 2;
// もし -(自分自身の横幅の半分) 未満のx座標になれば
if (this._x<-this._width/2) {
// ステージの右から(自分自身の横幅の半分) 右に移動
this._x = Stage.width+this._width/2;
}
};
---------------------------------------
　　　　　↓↓
　　　　　進化
　　　　　↓↓
---y座標も動かしてみる---------------------
// 初期y座標の記録
var kumo0Y:Number = kumo0._y;
// y座標を決める角度θの初期化
var theta0:Number = 0;

// 「kumo0」に対して１フレーム進む時間ごとに実行する関数を定義
kumo0.onEnterFrame = function():Void {
// x座標を2pxずつ左に移動
this._x -= 2;
// もし -(自分自身の横幅の半分) 未満のx座標になれば
if (this._x<-this._width/2) {
// ステージの右から(自分自身の横幅の半分) 右に移動
this._x = Stage.width+this._width/2;
}
// θを 60分の１周 ずつ加算
theta0 += 2*Math.PI/60;
// y座標をsin(θ)の値 ±20 で上下させる
this._y = kumo0Y+Math.sin(theta0)*20;
};
---------------------------------------
　　　　　↓↓
　　　　　進化
　　　　　↓↓
---ロールオーバーで拡大を追加してみる---------
// 初期y座標の記録
var kumo0Y:Number = kumo0._y;
// y座標を決める角度θの初期化
var theta0:Number = 0;
// ロールオーバー時のフラグ0の初期化
var over_flag0:Boolean = false;

// 「kumo0」に対して１フレーム進む時間ごとに実行する関数を定義
kumo0.onEnterFrame = function():Void {
// もしロールオーバーフラグがfalseであれば
if (!over_flag0) {
// x座標を2pxずつ左に移動
this._x -= 2;
// もし -(自分自身の横幅の半分) 未満のx座標になれば
if (this._x<-this._width/2) {
// ステージの右から(自分自身の横幅の半分) 右に移動
this._x = Stage.width+this._width/2;
}
// θを 60分の１周 ずつ加算
theta0 += 2*Math.PI/60;
// y座標をsin(θ)の値 ±20 で上下させる
this._y = kumo0Y+Math.sin(theta0)*20;
// サイズを５分の１ずつに元に戻す
this._yscale = this._xscale += (100-this._xscale)/5;
} else {
// サイズを５分の１ずつに２倍に近付ける
this._yscale = this._xscale += (200-this._xscale)/5;
}
};

// 「kumo0」にロールオーバーしたときの関数を定義
kumo0.onRollOver = function():Void {
// ロールオーバーフラグを true にする
over_flag0 = true;
};

// 「kumo0」からロールアウトしたときの関数を定義
kumo0.onRollOut = kumo0.onDragOut=function ():Void {
// ロールオーバーフラグを false にする
over_flag0 = false;
};
---------------------------------------
　　　　　↓↓
　　　　　進化
　　　　　↓↓
---雲をランダムな位置から落下を追加してみる-----------
// 「kumo0」のx座標をステージの範囲内でランダムに配置
kumo0._x = Math.random()*Stage.width;
// 「kumo0」のy座標をステージのすぐ上に配置
kumo0._y = -kumo0._height/2;
// 「kumo0」が落ちたかどうかのフラグ0の初期化
var drop_flag0:Boolean = false;
// 「kumo0」の落下地点 y座標 をランダムに出す
var kumo0Y:Number = 50+Math.random()*(Stage.height-100);

// y座標を決める角度θの初期化
var theta0:Number = 0;
// ロールオーバー時のフラグ0の初期化
var over_flag0:Boolean = false;

// 「kumo0」に対して１フレーム進む時間ごとに実行する関数を定義
kumo0.onEnterFrame = function():Void {
// もし雲が落ちたかどうかのフラグがtrueであれば
if (drop_flag0) {
// もしロールオーバーフラグがfalseであれば
if (!over_flag0) {
// x座標を2pxずつ左に移動
this._x -= 2;
// もし -(自分自身の横幅の半分) 未満のx座標になれば
if (this._x<-this._width/2) {
// ステージの右から(自分自身の横幅の半分) 右に移動
this._x = Stage.width+this._width/2;
}
// θを 60分の１周 ずつ加算
theta0 += 2*Math.PI/60;
// y座標をsin(θ)の値 ±20 で上下させる
this._y = kumo0Y+Math.sin(theta0)*20;
// サイズを５分の１ずつに元に戻す
this._yscale = this._xscale += (100-this._xscale)/5;
// もしロールオーバーフラグがtrueであれば
} else {
// サイズを５分の１ずつに２倍に近付ける
this._yscale = this._xscale += (200-this._xscale)/5;
}
// もしこの雲が落ちたかどうかのフラグがfalseであれば
} else {
// この雲を8pxずつ落下させる
this._y += 8;
// もし「kumo0」の落下地点 y座標以上になれば
if (this._y>=kumo0Y) {
// この雲を落下地点 y座標に固定
this._y = kumo0Y;
// そして雲が落ちたかどうかのフラグをtrueにする
drop_flag0 = true;
}
}
};

// 「kumo0」にロールオーバーしたときの関数を定義
kumo0.onRollOver = function():Void {
// ロールオーバーフラグを true にする
over_flag0 = true;
};

// 「kumo0」からロールアウトしたときの関数を定義
kumo0.onRollOut = kumo0.onDragOut=function ():Void {
// ロールオーバーフラグを false にする
over_flag0 = false;
};
---------------------------------------------



以上でスクリプトの説明は終わりです。

もし Math.sin() や Math.random()，
その他 if～else文 や onEnterFrame などがわからない場合は
個別にネット検索やヘルプで調べてみてください。
１つ１つはとうてい説明できそうにありません。



上の例では，雲は１つしか動かしていません。
複数の雲を動かす場合，
単純には，同様のスクリプトを雲の数だけ書き連ねれば良いということになります。
同様と言っても
インスタンス名は「kumo0」「kumo1」「kumo2」…のように１つの雲ごとに変えて，
各変数も 「kumo0Y」「kumo01Y」「kumo2Y」…のように変えて書くということです。

一応それでとりあえずはできると思いますが，
普通はあまりそのようなことはしません。
次のようにさらにスクリプトを進化させるのが普通です。

◎「for文 ＆ 配列アクセス演算子」を使ってループ処理をする

◎スクリプトを_rootに書くのではなくてムービークリップ内に書く

◎ムービークリップクラスを継承するカスタムクラスを作成し，
　 雲ムービークリップにそのクラスを適用する

などのようにさらに進化させて 「使える物」 にします。

「使える物」にする研究も 「それはそれ」 でしてみてください。

いきなり上のものを進化させるのはかなり難があると思います。
たとえば最初に書いた 「x座標のみを動かしてみる」 辺りを，
複数のムービークリップに適用させるにはどうすれば良いか
などから研究して身に付けて行くのが良いのではないかと思います。

「for文 ＆ 配列アクセス演算子」 で一括制御する方法辺りから始めるのが良いのではないかと思います。
　

この回答へのお礼

BlurFiltan様

この度はわかりやすく丁寧なご回答、本当にどうも
ありがとうございました！
おかげで解決の糸口が見つけられました！

また、大変厚かましいご質問をしてしまい失礼しました。

これを機に、ひとつひとつの動きを考え組み立てながら、
もっとFLASHの勉強をしていきたいと思います。

お礼日時：2009/05/29 22:56