|
これは面白いので，ココでもやってみたかったものです。しっぽさんのとこで有名な「炎のエフェクト」 の Suzuka 作成版 です。
この「トゥイーンバーション」 の方はトゥイーンと gotoAndPlay() だけで動かしています。他のスクリプトは一切使用していません。
サンプル作成や説明に使っている ParaDraw のバージョンは Ver.0.3a4，Suzuka のバージョンは Ver. 0.7.4.1[リッチエディット版] です。
トゥイーンで複数のものが登場する無限ループアニメを作成するのは結構大変（ややこしい）のですが，前回のタイムラインアニメーション で使ったモミジとイチョウが切れ間無く出てくる方法を使うと作成できます。
このページは主に，タイムラインアニメーションので使った方法の違う形版の説明です。
しっぽさんのとこでは，特に具体的な作成方法などが提示されているわけではありません。
また，具体的なスクリプトも書かれていないので，ついでに ActionScript を使用する場合はどうするのかという例も下に一応付けています。
しかし，スクリプトバージョンはあくまでも オマケ です。
タイムラインの制御 でも書きましたが，stop();，play();，gotoAndStop();，gotoAndPlay(); だけでも結構なものが作れるものでしょう。
まずは，炎のエフェクトトゥイーンバーション の作成方法ですが，これはあくまでも一例です。
好みや状況によって大きさや数値は色々変わると思います。
 |
まずは ParaDraw などで 50×50px の赤い丸を描きます。
赤は赤ですが，しっぽさんのとこにも書いてあるようにまっ赤(#FF0000 255,0,0)ではなく，少しオレンジにしておきます。
このサンプルでは，RGB=255,35,0 にしていますが，これは好みによって変えます。 |
 |
Suzuka を起動させて，任意の名前でプロジェクトファイルを保存し，背景を黒にしておきます。 |
 |
ParaDraw などで作った赤丸をシンボルリストに読み込み，それと同じサイズのスプライトを用意します。
スプライトの基準点は真ん中にしておくのが作成しやすいです。 |
 |
上で作成したスプライトのレイヤーに，赤丸を追加し，今度はそれらを入れるの親スプライトを用意します。
大きさは適当ですが，このサンプルではキャンバスと同じ大きさにしています。 |
 |
上で作成した親スプライト内の編集に移り，赤丸の入ったスプライトをレイヤーに追加し，真ん中の下の方に配置します。
そして，ブレンドを [加算] に設定します。 |
 |
そのままの状態で [カラー] タブを選択し，[フィルター]そして[ブラー]にチェックを入れ，ぼかしを ｘ＝30，ｙ＝30くらいに設定します。
この数字も好みや場合によって変えます。 |
 |
そして，上で設定したスプライトのレイヤーを選択して，「右クリック」→「コピー」でそして「貼り付け」で，スプライトを重なるように４つにします。 |
 |
ここまでできましたら，横幅は赤丸と同じ50で，縦長のスプライトを作成します。
基準点は下の中央にしておくと後の作成がしやすいです。 |
 |
その縦長のスプライトの編集に移り，赤丸をレイヤーに配置し，40フレームで，下から上に移動するとともに，大きさが 0.1 になるようなトゥイーンを作成します。
また，ラベルレイヤーを挿入し，フレーム1に「point1」というラベル名を付けます。
さらにアクションレイヤーを挿入し，トゥイーンの最終フレームの次のフレームをキーフレームにして，
gotoAndPlay("point1");
と書きます。
gotoAndPlay() の () 内の引数が 1 つの場合，それが数値であると，フレーム数を意味しますが，「""」で囲んだ場合は，フレームラベル名になります。
|
 |
上で作成したスプライト（シンボル）を，「アイテムを複製」で40個にします。
そして，40個のスプライト内のタイムラインを，左のように１フレームずつずらしたものに編集し直して行きます。
これで，赤丸が出没するタイミングが１フレームずつずれたスプライトが作成できますよね。 |
 |
そしてそれら40個のスプライトを，親スプライト内に配置します。 |
配置のしかたですが，最初に重ねて並べた４つのスプライトの左右にランダムに ±25px，大きさはランダムに 0.6〜1 にしました。
ランダムは人間がやると，どうしても片寄が出ますし，考えるのが面倒だったので，私は Excel を使用して配置や大きさを決めました。
まずはランダムな x座標は，
Excel の A1 セルに「=INT(RAND()*51-25)+130」 と書いて，オートフィルでダーッと下に40行までドラッグして連続コピペ。
次にランダムな大きさは，
B1 セルに「=FLOOR(RAND()*41+60,1)/100」と書いてオートフィルでダーッと下に40行までドラッグして連続コピペ。
このようにして得た数値を，機械的にSuzukaに入力しました。
またこれら40個のスプライトは，全てブレンドを [加算] に設定します。
そして，メインの編集に戻って，できあがった親スプライト自体の設定を，[ブラー] ｘ＝15，ｙ＝15くらいにします。
あとは，「ファイル」→「SWFファイル生成」ででき上がりです。
親スプライト内にすべてを作成しているため，親スプライトごと動かせば移動や拡大縮小も簡単にできます。
作成は，結構ややこしくて手間は手間ですが，結局ほとんどスプライトなどの設定だけですよね。
炎のエフェクトは，一見高度ように見えますが，作成することに関してはやり方さえ理解できれば，あとは手間をかけるだけのことです。
ですから，このサイトの基礎・基本でも最初の方のページに入れています。
しかし，一番肝腎なのは知識やスクリプトなどではなく，しっぽさんのように 「炎のエフェクトはこのようにして作る」 というアイデアを閃くことですよね。
それさえできれば，Suzuka的には基礎・基本の方法で作成が可能だと思います。
このページの本題は「トゥイーンバージョン」で終わっていますが，オマケの「スクリプトバージョン」の方の補足説明です。
「トゥイーンバージョン」と「スクリプトバージョン」は，なるべく同じように動くものにしたつもりです。
しかし，トゥイーンバーション1.69 KB (1,733 バイト)，スクリプトバージョン595 バイト (595 バイト)SWFと，その差は１KB少ししかありませんが，比で言うとトゥイーンバーションはスクリプトバージョンの３倍近くのファイル容量がありますね。
トゥイーンバーションのようなものをさらに作り込んで行くと，少しの差がどんどん大きく拡大していくと言うことです。
そう考えると，このサンプルの場合は，ファイル容量と作成の手間を考えて，ActionScript の方が有利なのかもしれません。
比ではなく差で考えた場合で，なおかつこれ単品の場合は，わずか1KBほどの差なので，「どちらでもお好きな方で」という感じだと思います。
スクリプトバージョンは至って簡単です。
最初は上と同じで，親スプライト内に４つの赤丸スプライトを，「加算」＆「ブラー」設定で配置し，一番上の赤丸スプライトにインスタンス名を付けます。
構造は次のような感じです。
_root
└炎親スプライト
├炎スプライト（インスタンス名：honoo_mc）
├炎スプライト
├炎スプライト
└炎スプライト
それで，炎親スプライト内のフレーム1に次のスクリプトを書いています。
// 配列 filterArr を作成
filterArr = new Array();
// BlurFilerインスタンスの作成
myBlur = new flash.filters.BlurFilter(15, 15, 2);
// 配列 filterArr に BlurFilterインスタンス の値を追加
filterArr.push(myBlur);
// 配列 filterArr を MovieClip.filtersプロパティ に設定
this.filters = filterArr;
// 変数 n の初期化
n = 0;
//
// honoo_mc にブレンドモード「加算」
this.honoo_mc.blendMode = "add";
//
// １フレーム進む時間ごとに毎回実行
this.onEnterFrame = function() {
// n の値に 1 を加算
n++;
//
// honoo_mc を honoo_mc1〜? の名前で複製
this.honoo_mc.duplicateMovieClip("honoo_mc"+n, n);
//
// 変数 r1 に -25 〜 +25 の乱数を取得
r1 = Math.random()*50-25;
// fire_mc1〜? の初期座標を指定
this["honoo_mc"+n]._x = this.honoo_mc._x+r1;
this["honoo_mc"+n]._y = this.honoo_mc._y+10;
//
// 変数 r2 に 60 〜 100 の乱数を取得
r2 = Math.random()*40+60;
// honoo_mc1〜? の大きさを指定
this["honoo_mc"+n]._xscale = r2;
this["honoo_mc"+n]._yscale = r2;
//
// honoo_mc1〜? にブレンドモード「加算」
this["honoo_mc"+n].blendMode = "add";
//
// １フレーム進む時間ごとに実行（動かす）
this["honoo_mc"+n].onEnterFrame = function() {
// 上方向に 6 px ずつ上に移動
this._y -= 6;
// 大きさを小さく
this._xscale -= 2;
this._yscale -= 2;
// 大きさが 10％ 以下になったら
if (this._xscale<=10) {
// ムービークリップ(スプライト)を削除
this.removeMovieClip();
}
};
};
|
本当は親スプライトにブラーの設定をすれば良いだけのことなのですが，
つい最近，Suzuka でも import ステートメント を使わずに，クラスを完全修飾名で参照する文法で書けば BlurFilerクラス のスクリプトが使えることに気づいて嬉しくなったので，あえてブラーの設定はせずに BlurFilerクラス 使用してみました。
※ ちなみに最初の赤い●は ParaDraw で作成していますが，
赤い●くらいならParaDrawは不要ですよね。
Suzukaのテキストで50pointくらいの「●」を打てば良いだけです。
実際にやってみると雰囲気は少し変わりますができました。
●ではなく炎という文字でやったらもっとすごい炎ができるかも！
と思ってやってみましたら……
もし興味がある方はぜひやってみてください。
| 
