AS花火

P1 / P2 / P3 / P4
P3のトゥイーン花火では花火が開いた時の形をシンボルにして(P3キャプチャ参照)、それをトゥイーンさせていまので、色を変えるくらいの変化しかつける事ができません。
もし各星(丸)が多少でも発光から消滅までの時間が変化したり、位置が変わったら面白いのでは?

そこで骨組みはトゥイーンを使って、変化の部分をAS(ActionScript)に任せようと言うのがこのAS花火の考え方です。
P3トゥイーン花火との大きな違いは、前者が花火全体の星をトゥイーンさせていたのに対して、こちらは1つの星のトゥイーンにしています。
もし、これだけで動作させた場合は1つの星が色を変えながら右に移動して消えて行くだけです。
作例では花火1部品1


注意:このMC(ムービークリップ)の中心点は必ず星が1フレームにあるときの場所にしましょう
図4
 
例えばこの花火1部品1をステージ上に角度を変えて10個並べてみてください。
せっかく並べても毎回同じ形と大きさ、タイミングで開くだけだし数も少ないしつまらないでしょ?
p5-01.fla参照
 
もっと数を増やしてみるかな?って100個とかいちいち並べてみますか?
そこでとりあえず指定した数を並べるASを考えて見ましょう。
まず作例のライブラリの花火1MC1をWクリックしてアクションパネルでASレイヤーのASを見てください。


図1
 

花火1MC1と花火1部品1の違い
花火1MC1内のASで花火1MC1内にある「fw1」と言うインスタンス名のついた花火1部品1を操作します。
部品はあくまで部品です。
実際にステージ上に配置するのは花火1MC1です

for (i=1; i<60; i++) {
duplicateMovieClip("fw1", "fw" + i, i);
this["fw" + i]._rotation = Math.floor(Math.random()*360)+1;
this["fw" + i].gotoAndPlay(Math.floor(Math.random()*5)+1);
hoshiSize = 30+(Math.floor(Math.random()*60)+1);
this["fw" + i]._xscale = hoshiSize
this["fw" + i]._yscale = hoshiSize
}

 

この中の「forステートメント」
for (i=1; i<60; i++) {
}

で、この場合「i=1」で「i」と言う変数を「1」に初期化しています。
「i<60」では条件を「i」が60よりも小さいうちはとしていますから59までになりますね。
ちなみに「i<=60」にかえると「よりも小さいか等しいかどうか」となるので60までになります。
「i++」はどうするかの部分で、インクリメント演算子と言い対象に1を加算します。(i=i+1)
つまりこのforステートメントが実行されると、forの{}内の処理が59回実行される事になります。

では、何を59回繰り返してほしいのでしたっけ?
そうそう、花火1部品1を59こ並べる作業でしたね?
それが「duplicateMovieClip("fw1", "fw" + i, i);」の部分です。

「duplicateMovieClip()」とはMCを複製してくれる便利な命令です。
「"fw1"」の部分は対象になるMCのインスタンス名になります。
花火1MC1の花火部品MCレイヤーにある花火1部品1を選択してプロパティでインスタンス名を確認してください。
「fw1」になっていますよね?


図2

もしも、どちらかの名前が違っているとこの命令は実行されませんので気を付けましょう。
「"fw" + i」は複製された無名のMCにインスタンス名を割り当てます。
「i」はforで説明した1から59までの数になりますから、例えば手動で59個の花火1MC1を配置してそれぞれにインスタンス名をつける作業を自動でやってもらうことになります。
こうして59個に個性?を持たせることで、後で説明する変化が生きてきます。

例えばせっかく59個をASで配置してやっても同じインスタンス名だとすると全部同じ動きになってしまいます。
最後の「i」はそのMC内での、深度を変えています。この部分も個性を持たせるためだと思って下さい。
では
for (i=1; i<60; i++) {
duplicateMovieClip("fw1", "fw" + i, i);
}

これだけでいいのでしょうか?

このスクリプトではステージ上のfw1というインスタンス名のMCを、59個複製し個別化してはいますが同じ場所なので、見た目は花火1部品1をひとつ配置したのとかわりません。
そう、角度を変えてやらないと放射状にならないですね。
p5-02.fla参照

 

for (i=1; i<60; i++) {
duplicateMovieClip("fw1", "fw" + i, i);
this["fw" + i]._rotation = Math.floor(Math.random()*360)+1;
}

「this["fw" + i]._rotation = Math.floor(Math.random()*360)+1;」で各花火1部品1の角度を決めています。
「this["fw" + i]」で対象のMCを指定します。
間のドット「.」はスクリプトの文法で「〜の」みたいな感じです。
MCには回転、サイズ、透明度他たくさんのプロパティ(属性)が用意されています。
「_rotation」はMCの回転(角度)を決めるプロパティで1〜360の数値で指定します。
「=」は=の左側に=の右側の値、式を代入することです。
「Math.floor(Math.random()*360)+1」は1〜360までの数値をランダムに発生させるのですが、この式は算数みたいに内側の括弧から始まります。
Math.random()で発生した0.0 〜 1.0 の疑似乱数に360を掛けた値を、Math.floor()で最も近い整数に切り捨てます。
この時点では0〜の360個の数字と言うことで0〜359までの乱数になりますが+1があるので1〜360のになります。

注意:Math.random()が記述されているMCをLoopさせた場合、乱数が更新されないケースがあります。ムービーを再生した時に乱数が更新されますので、それと同じような感じにしてあげればいいわけで、Math.random()が記述されているMCのタイムラインの前か後ろに空白キーフレームを挿入すればOKです。

図3

しかし、これだけでは放射状に星がランダムに並んだ円なんですよね。
p5-03.fla参照

 

for (i=1; i<60; i++) {
duplicateMovieClip("fw1", "fw" + i, i);
this["fw" + i]._rotation = Math.floor(Math.random()*360)+1;
this["fw" + i].gotoAndPlay(Math.floor(Math.random()*5)+1);
}


次のスクリプトでは「gotoAndPlay(Math.floor(Math.random()*5)+1)」の部分に注目!
「gotoAndPlay()」は指定したフレームにジャンプさせてそこから再生させます。
式は先ほどの説明でわかってもらえると思いますが、今度は1〜5の整数を発生させています。
花火1部品1のトゥイーンは1フレ〜25フレで26〜38までを空白フレームにしてますね?
ここでは、一つ前に角度を決めたインスタンスの開始フレームを+1〜+5まで変更することで星の開きをバラつかせています。
これでも、まだ物足りませんよね?
p5-04.fla参照

 

そこで各星のサイズを変化させて見ました。
「hoshiSize = 30+(Math.floor(Math.random()*60)+1)」で星のサイズを決めます。
計算すると31〜90までになりますね?
「this["fw" + i]._xscale = hoshiSize」で星の横の倍率を変更します。
「this["fw" + i]._yscale = hoshiSize」で星の縦の倍率を変更します。
これらの単位は%ですから縮小されることになります。

結果・・・縮小された分の開きの変化も加味されて作例の花火になります。
p5-05.fla参照

 

バリエーションを増やしたい時はトゥイーン部分を丸〜星や線〜丸に変化させたり、色を変えたり爆発時にハイライトを追加したりしてみてください。
作例ではシェイプトゥイーンを使っていますが、モーショントゥイーンでもいいですし、フレーム数やフレームレートを変えたり色々試して素敵な花火を作ってみてください。


P1下段の作例DLの中には特別付録?として、 私が2003年度に公開した作品のMCやグラフィック、完成見本数点のFLAを含めました。

次回の応募作品の参考用にご利用下さい。



P1 / P2 / P3 / P4

Click here to visit our sponsor
(c)1997-200 Tsuruji Studio. Kouji Sakamoto.