Flash Actionscriptで湯気の表現
以前のエントリに書いたActionscriptを使った湯気の表現を解説します。
→サンプルを見る
湯気のアタッチ時に湯気の移動スピードや、幅、高さ、それと移動しながら大きさやアルファを変化させるので、その目標値を設定。onEnterFrame で湯気の左右の移動と角度の変化、アタッチ時に設定した目標値へ近づける処理をしています。湯気そのものはPhotoshopのエアブラシでちょちょっと作ったものです。
//湯気クリップ参照用
var mcs:Array = new Array();
//湯気の数
var yugeMax:Number = 12;
//湯気のコンテナクリップ
createEmptyMovieClip("yuge", 1);
//湯気アタッチ
for (var i = 0; i < yugeMax; i++) {
var mc:MovieClip = yuge.attachMovie("yuge", "yuge" + i, i);
yugeInit(mc);
mcs[i] = mc;
}
//---------------------------------------------
// 湯気初期設定
//---------------------------------------------
function yugeInit(mc:MovieClip) {
//この辺りの数値を変えると動きが変わります
mc._x = Math.random() * Stage.width;
mc._y = Stage.height * (Math.random() * 1 + 1);
mc.step = Math.random() * 0.2 + 0.1;
//徐々にここで設定した幅、高さに湯気が変化していきます。
mc.xscale = 50 + Math.random() * 50;
mc.yscale = 100 + Math.random() * 100;
mc._alpha = 100;
//徐々にここで設定したアルファに変化していきます。
mc.alpha = Math.random() * 80;
//湯気の角度。
mc._rotation = Math.random() * 10 - 5;
mc.onEnterFrame = yugeEnterFrame;
}
//---------------------------------------------
// 湯気メイン
//---------------------------------------------
function yugeEnterFrame() {
for (var i = 0; i < mcs.length; i++) {
var mc:MovieClip = mcs[i];
mc._y -= mc.step;
//初期設定で指定した値に徐々に近づいていきます。
mc._x += (Math.random() * 0.2 - 0.05);
mc._alpha += (mc.alpha - mc._alpha) / 20;
mc._xscale += (mc.xscale - mc._xscale) / 3;
mc._yscale += (mc.yscale - mc._yscale) / 5;
//湯気が画面からでたら新しく湯気を設定します。
if (mc._y < -mc._height) {
yugeInit(mc);
}
}
}
***** おすすめの参考書 *****
macromedia FLASH ActionScriptスーパーサンプル集
FLASH ActionScript 2.0入門完全ガイド+実践サンプル集 [CD-ROM付]
2006/2/2 木曜日
初めまして^^
falshにて湯気を表現したいと思い検索したところここにたどり着きました。
おかげ様でスクリプトは問題ないのですが湯気がどうも不自然に見えてしまいます。
湯気の画像が変なためかとかと思いいろいろ試しているのですが
相変わらずパッとしない状況です。
参考までにどのような画像を使われているのでしょうか?
解説を見ようとしたのですがリンク切れになっていたようなのでこいらからコメントさせて頂きました。
お時間あります時にで構いませんので宜しくお願い致します。
コメント by ゆう — 2008/1/6 日曜日 @ 10:27:16
どうも。
サンプルファイルをダウンロードできるようにしたのでどうぞ。
http://flapro.net/sample/yuge_sample.fla
コメント by admin — 2008/1/10 木曜日 @ 10:27:36