ささきち流 Suzuka & ParaDraw 講座
Suzuka & ParaDraw
TOP
PROFILE
ActionScript Editor
LINK
BBS


フリーのFlash作成ソフト SuzukaParaDraw でFlashな生活を楽しもうというサイトです。
続・3D回転メニュー サンプル&作成方法解説

 

 


サンプルダウンロード
PDRファイル・CSFファイル在中
「3d_rotation_c.zip」 8.63 KB (8,838 バイト)



続・3D回転メニュー作成方法(タイムラインでフィルターを操作)解説

ParaDraw Ver.0.3a4 で作成した絵を,Suzuka Ver.0.7.3.3 で動作させています。
続・3D回転メニュー などというタイトル名を使っていますが,これも実際はメニューではありません。
各スプライトに onハンドラ などを書いて,何か動作をさせると,メニューになります。 「本格3D回転メニュー」 のさらに続編です。

ブラー(ぼかし)の値を変化させるのは,BlurFilterクラスのメソッドを使わなくても,タイムラインの移動を使える Suzuka であれば簡単にできます。
各 egg スプライト内のタイムラインを複数フレームにして,ブラーを変化させるトィーンを作成すれば,BlurFilterクラス は全く必要ありません。

つまりスプライト内のタイムラインに次のようなトゥイーンを作成しておきます。

スプライト内

あとは透視変換で得られる大きさの値 scl を利用して,どこかのフレームに gotoAndStop() させれば良いだけです。
実測の結果,scl の値は 64〜100 の間を往き来することがわかったので,その間の 40フレーム くらいでブラーをトゥイーンさせています。

実際は トゥイーン でアニメーションさせるわけではありませんよ。
トゥイーンを使ってブラーが変化するアニメーションをスプライト内に作っておいて,その表示フレームを,スプライトの大きさに応じて gotoAndStop() で変えるということです。

スクリプトは次のようになります。

// 円運動させるものの個数を設定
n = 10;
// 円運動の基準 x座標 の設定
dtm_x = Stage.width/2;
// 円運動の基準 y座標 の設定
dtm_y = Stage.height/2;
// 円運動の半径の設定
rds = Stage.width/2-10;
// 円座標(角度)の初期値を設定
rad = 0;
//視点の距離を設定
vs = 180;
//
//透視変換用の関数 change3D を定義
function change3D(sx, sy, sz) {
	dim_x = sx*vs/(vs+sz);
	dim_y = sy*vs/(vs+sz);
	scl = 1*vs/(vs+sz)*100;
}
//
// 1フレーム進む時間ごとに毎回実行
this.onEnterFrame = function() {
	// 角度の加算をマウスの x座標 によって決める
	rad += (_root._xmouse-dtm_x)/dtm_x*2*Math.PI/80;
	// egg0〜egg n-1 までを操作
	for (i=0; i<n; i++) {
		// 角度を新たに変数化
		rad2 = i*2*Math.PI/n+rad;
		// 仮のx,y,z座標を算出
		tmp_x = Math.cos(rad2)*rds;
		tmp_y = Math.sin(rad2)*rds/4;
		tmp_z = 100-(Math.sin(rad2)+1)*50;
		//透視変換用の関数 change3D の実行
		change3D(tmp_x, tmp_y, tmp_z);
		// 変換後の数値によって座標や大きさなどを決定
		this["egg"+i]._x = dim_x+dtm_x;
		this["egg"+i]._y = dim_y+dtm_y;
		this["egg"+i]._xscale = this["egg"+i]._yscale=scl;
		this["egg"+i]._alpha = scl;
		// ★↓この行を加えただけ↓★
		this["egg"+i].gotoAndStop(Math.floor(scl-62));
		this["egg"+i].swapDepths(Math.floor(scl*10));
	}
};

これで,一点透視図法的な遠近法と,空気遠近法(というかピントのずれによる遠近法)の両方が表現可能になります。

「これぞ SWF8 の威力を十二分にかつ簡単に発揮できる Suzuka の驚異!」
と言った感じになったのではないかと思います。

前回の 「本格3D回転メニュー」 のスクリプトに

 // ★↓この行を加えただけ↓★
 this["egg"+i].gotoAndStop(Math.floor(scl-62));

という1行を加えただけです。
1行加えただけですが,ブラーの処理が PC に加わりますから,CPUへの負担はかなり大きくなります。
スペックが低いマシンだと,動作が遅く,カクカクになる可能性が大きくなります。
エンドユーザの CPU に不安を感じる場合は,ブラーの使用はやめておいた方が良いです。

しかし,たったこれだけ( gotoAndStop() だけ )でブラーに変化が付けられます。
「タイムラインの制御」でも,書きましたが,
やはり, stop(),play(),gotoAndStop(),gotoAndPray() は使い方次第ですごいものを作ることができる可能性があります。
そして,タイムライン が利用できるということは,すごく便利なことだと思います。

 

 

BlurFilterクラスを使用したサンプルは 続々・3D回転メニュー