締切済み

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

2009/05/29 10:12

とても困っているのでご質問させていただきます。 http://community.edita.jp/ 上記のページの「雲が降ってくる」→「ふわふわと横に移動」→ 「マウスオーバーでスムーズに拡大」ような一連の動きを Actionscriptで再現するにはどのような記述をしたらいいのでしょうか？ちなみに、落下するものはランダムで再現したいと思います。当方、Actionscriptはかじったです。できれば、わかりやすいシンプルな記述をご教授していただけるとありがたいです。環境：Flash8 Actionscript2.0 以上よろしくお願い致します。

jamaica88
お礼率55% (11/20)

Flash
回答数1
ありがとう数2

みんなの回答 （1）
専門家の回答

みんなの回答

BlurFiltan
ベストアンサー率91% (1611/1754)

2009/05/29 18:46 回答No.1

> わかりやすいシンプルな記述をご教授していただけると > ありがたいです。それだけ複合的なものの「出来上がり」を見て，「わかりやすくシンプル」ということはないと思いますよ。作るのは簡単ですが，それを理解するのは作る以上に難しいと思います。いきなりの「出来上がり」を提示してそれを説明するのも大変ですから以下では私が作成してみた手順を書きます。どんなものを作る場合もそうですが，複数のものを同時に動かそうとするのではなく１つずつを着実に動かして作成していくというのが鉄則です。というわけで「１つの雲」のみを動かす行程を書きます。まずステージ上に基準点を真ん中にした「雲のムービークリップ」を作成し，適当な場所に配置します。そしてその「雲のムービークリップ」に，例えば「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文＆配列アクセス演算子」で一括制御する方法辺りから始めるのが良いのではないかと思います。　