サンプルダウンロード
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回転メニューへ
|