[Flash,ActionScript]湯気
Flashで湯気のエフェクトを作ってみます。
某牛丼屋さんのウェブサイトで、いちど見かけたんです。牛丼から立ち上るゆげ。なかなかおもしろいなぁと思ったので、自分でもオリジナルの湯気を作ってみることにしました。
作ってみた結果、某牛丼屋さんのFlashの湯気とはちょっと違うものになりましたが、わりとリアルな感じの湯気です。
さあ、湯気、どうやって作ろうか…と思い立ったら、まずは自然から学びます。
タバコの煙を観察してみました。小さな小さな粒子が、くるくると廻りながらゆっくり上っていくのが見えます。
その一つの粒子がたち上る感じを、マンガチックに描いたのが、これ。
実際に使うオブジェクトは白い色ですが、分かりにくいので着色しました。これを下から上へゆっくり動かすと、じわーりと回転しながら上っていくような雰囲気が出ます。
というわけでまず、「ゆげ一本」のムービークリップを作っておきます。最初の数フレームでアルファ入りで出現し、下から上へゆっくり移動して、最後にアルファで消えます。
さらに「フィルター」でぼかしを入れて、それから、タイムラインのお尻に、なにもしない部分を入れておきます。
そしてこれを、たくさん配置します。
全部同じクリップです。そのまま配置しただけだとちょっと不自然ですので、それぞれ大きくしてみたり、幅を広げてみたり狭めてみたり、適当に変化をつけます。
そしてこれらを、ランダムなタイミングで立ち上らせます。これもまた、煙を観察した結果を反映しています。粒子が上っていくとき、それぞれが全く不規則なタイミングでスタートしているように見えるから。
配置した湯気それぞれをムービークリップにして、インスタンス名を「yuge1」「yuge2」「yuge3」…と付けます。
そして、スクリプトを仕込みます。湯気と同じ階層に書く場合です。
yuge_num = 15;//配置した本数をこの変数にセットします。
for(i=1; i<=yuge_num; i++){//湯気すべてに対してループ
goRand(i);
}
function goRand(int){
rnd = Math.round(Math.random() *30);//rndは何になるか分からない
this["yuge" + int].gotoAndPlay(rnd);//ランダムな位置から湯気スタート
}
これで、湯気のできあがりです。
リロードすると、湯気の形が変わっていたりします。
それから、とても基本的なポイントですが、背景は濃い色でなくてはなりません。薄い色の上では目立たず、感じが出ません。「背景は白！でも湯気も！」とかこだわっちゃうタイプのクライアントさんに出会った場合は、ちゃんと説明してあげてください。
もし対象バージョンを6にする必要がある場合（広告など）は、湯気のぼかしが効きません。そんなときでも、だいたい湯気らしく見えちゃう、というのがこの作り方の特徴です。
↓上と全く同じFlaファイルを、ver6対応で書き出したのがこちら。
おいしそう (^ p ^)