[Flash,ActionScript]湯気

Author :

料理から立ち上る湯気のFlashサンプルFlashで湯気のエフェクトを作ってみます。

(サンプルムービーは記事後半に)

某牛丼屋さんのウェブサイトで、いちど見かけたんです。牛丼から立ち上るゆげ。なかなかおもしろいなぁと思ったので、自分でもオリジナルの湯気を作ってみることにしました。

作ってみた結果、某牛丼屋さんのFlashの湯気とはちょっと違うものになりましたが、わりとリアルな感じの湯気です。

さあ、湯気、どうやって作ろうか…と思い立ったら、まずは自然から学びます。

タバコの煙を観察してみました。小さな小さな粒子が、くるくると廻りながらゆっくり上っていくのが見えます。

その一つの粒子がたち上る感じを、マンガチックに描いたのが、これ。

ゆげi本のかたち

実際に使うオブジェクトは白い色ですが、分かりにくいので着色しました。これを下から上へゆっくり動かすと、じわーりと回転しながら上っていくような雰囲気が出ます。

湯気1本のタイムライン

湯気のムービークリップというわけでまず、「ゆげ一本」のムービークリップを作っておきます。最初の数フレームでアルファ入りで出現し、下から上へゆっくり移動して、最後にアルファで消えます。

さらに「フィルター」でぼかしを入れて、それから、タイムラインのお尻に、なにもしない部分を入れておきます。

そしてこれを、たくさん配置します。

ゆげたくさん配置

全部同じクリップです。そのまま配置しただけだとちょっと不自然ですので、それぞれ大きくしてみたり、幅を広げてみたり狭めてみたり、適当に変化をつけます。

そしてこれらを、ランダムなタイミングで立ち上らせます。これもまた、煙を観察した結果を反映しています。粒子が上っていくとき、それぞれが全く不規則なタイミングでスタートしているように見えるから。

配置した湯気それぞれをムービークリップにして、インスタンス名を「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 ^)