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


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

 

 


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



続・3D回転メニュー作成方法(BlurFilter)解説

ParaDraw Ver.0.3a4 で作成した絵を,Suzuka Ver.0.7.3.3 で動作させています。
このページは,「本格3D回転メニュー」「続・3D回転メニュー」の訂正補足説明です。

ブラー(ぼかし)の値を ActionScript で変化させるのには,BlurFilterクラスのメソッド などを使います。
このサイトを書きはじめた当初,
import flash.filters.BlurFilter;
これが,Suzuka では通用しないため,BlurFilterクラスのメソッド を使うことは不可能だと思い込んでいましたが, 実は,
new flash.filters.BlurFilter(x方向, y方向, 回数);
こちらの形の文法を使うと Suzuka でも BlurFilterクラス を扱うことができたのです〜(こんな抜け道があったとは... 愕然...)。

 

というわけで,「本格3D回転メニュー」 のスクリプトからの実測の結果,scl の値は 64〜100 の間を往き来することがわかっているので,その 64〜100 の値を使って, BlurFilter をかけます。

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

// 円運動させるものの個数を設定
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;
		//
		// ---☆BlurFilterに関すること☆---
		// scl の値から ブラーの値を算出して調節
		my_blur = (100-scl)/6;
		// BlurFilterクラスのインスタンスを作成
		filter = new flash.filters.BlurFilter(my_blur, my_blur, 2);
		// フィルター用の配列を用意
		filterArr = new Array(filter);
		// egg0〜egg n-1 にフィルターを適用
		this["egg"+i].filters = filterArr;
		//
		this["egg"+i].swapDepths(Math.floor(scl*10));
	}
};

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

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

 // ---☆BlurFilterに関すること☆---
 // scl の値から ブラーの値を算出して調節
 my_blur = (100-scl)/6;
 // BlurFilterクラスのインスタンスを作成
 filter = new flash.filters.BlurFilter(my_blur, my_blur, 2);
 // フィルター用の配列を用意
 filterArr = new Array(filter);
 // egg0〜egg n-1 にフィルターを適用
 this["egg"+i].filters = filterArr;

という行を加えただけです。

my_blur = (100-scl)/6; の /6 は,scl の値 64〜100 の 36 の数値の間で,ブラー値を 0〜6 に増減させたいという,6/36 から出てきた値です。

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

Suzuka では import ステートメントが使えませんが,使わなくても ActionScript でフィルター効果はかけられます。
BlurFilter以外のフィルターについても,もし機会がありましたら説明したいと思います。

 

 

タイムラインを使用してフィルターをかけるサンプルは
続・3D回転メニュー