60L.design へのメールフォームです。 ご質問、お問合せ、お見積り等、お気軽にお送りください。
データの送信は firestorage 等の転送サービスをご利用ください。

お名前 ※必須項目 お名前を入力してください
会社様名
お返事先メールアドレス ※必須項目 お名前を入力してください
お問合せ種別

お問合せ内容 ※必須項目 お問合せ内容を入力してください
次の2つの数字を足して入力してください。 ※必須項目 半角数字を入力してください。

+

=

閉じる
お気軽にお見積り、
お問合せ下さい
Flashで炎を表現するTeraFireライブラリを試してみました。

PHPやWordPressでのwebサイト制作のお仕事を多くいただいていますが、時々あるのがFlashの制作です。
キャラクターアニメーション(しかもパーツ分けしていないJPEGから!)というお仕事もあるのですが、1つは『Flashで作ったナビゲーションやアニメをjQueryで再現して作り直す』というご依頼、それと『Flashを修正したいけれどどうすればいいか誰もわからない…』というトラブル対応です。

最近はブラウザゲームでFlashの需要が盛り返してきたようですが、webサイトとしては非常に縮小傾向かなと思っておりましたが、それが災いしたのかFlasherが減ってきて修正出来ない!という会社さんも増えてきているのかな?と思っております。

というわけで、ちょこっとFlashとActionScriptの経験があるので一つ修正のご依頼がありました。
アニメ自体は楽勝なのですが、どうも炎を再現するパーティクル演出が…。調べてみるととあるライブラリを使っているようで、私も調査してみました。

 

ps2015111502
そのライブラリは、trick7さんが開発された、『TeraFire』ライブラリで、非常に簡単にいい感じの炎を作れる素晴らしいものでした。

今回はちょこっとTeraFireライブラリの使い方を備忘録程度にご紹介します。
デザイナーさん向けとしてますので、scriptかける方からすると簡単すぎる内容だと思います。
まずはtrick7さんのブログの該当記事から、ソースファイルのfire.zipをダウンロードしておきます。(SVNは私は導入していないので試しておりません。)

ps2015111503
まずは何はなくともFlashファイルを新規作成します。ActionScript3.0を使用使用します。
炎のチェック用に背景が濃い方がいいようです。

ps2015111504
新規ファイルを作ったら早速ですが、ActionScript設定を行います。

ps2015111505
この後TeraFireライブラリを新規flaファイルと同じフォルダに格納するのですが、『flaファイルと同じフォルダに入れてます』という設定をします。
ライブラリパスをクリックした後に、+ボタンを押して、『./』と入力します。
いわゆるカレントディレクトリを指定するのですが、もしかしたらwindowsだと表記が違うかもしれません。

ps2015111506
設定パネルでOKを押したら、今度は先ほどダウンロードしたfire.zipを解凍して、その中にあるcomフォルダをflaファイルと同じフォルダに格納します。
本当はsrcフォルダを作って〜と本家でご説明があったのですが、なぜかsrcフォルダを作成してライブラリパスも同様に設定しても私の環境では動かなかったので…(汗)
ただ、設定の目的は同じですので今回はこれでご説明しています。

ps2015111507
今回は炎を生成するだけでなく、多少アニメーションさせたいので、シンボル内に炎を生成するようにします。
今回は適当な画像を配置してムービークリップとしてシンボルに変換しました。
あと一応30フレームでActionScriptを stop(); と記述し、ムービーがストップするようにすることも忘れずに…。いつも忘れがちなのです(汗)

ps2015111508
シンボルに変換したムービークリップ画像をダブルクリックして、ムービークリップ内で炎を生成します。
まずはActionScript用のレイヤーを1つ作り、キーフレームにActionScriptを記述しましょう。
FlashはAS用レイヤーを1つデフォルトで作ってくれたりしないんでしょうか…いつもレイヤー作るのが手間なのは私だけなのかな…(汗)

ps2015111509
記述するActionScriptは画像の通りです。

import com.trick7.effects.TeraFire;
これで先ほど配置したTeraFireライブラリを読み込みます。

var fire01:TeraFire = new TeraFire(-200,100,160,480);
これで炎のインスタンスを生成します。引数の数字は順に『X座標、Y座標、幅、高さ』で、省略可能です。
注意しないといけないのは、座標はムービークリップの基準点が原点となります。

fire01.alpha = 0.75
で炎を大雑把に透明度を下げてます。他、重ね順など普通のシンボルと同じように扱えるはずです。

また、炎は複数生成できるので、画像の通りインスタンス名を変えて同じように生成しています。

ps2015111510
たったこれだけで、保存してパブリッシュしてみると…炎ができてます!こんな手軽なのになかなかいい炎のアニメが作れるなんて、とても素敵なライブラリですね…本当に頭が下がります!

炎の生成はこれで完了ですが、今回はもうちょっとだけいじってみます。
炎の色を変えてみたいと思います。

ps2015111511
まず、改変は個人的使用の範囲として、試験させていただきます。
flaファイルに配置したcomフォルダの中に、TeraFire.asというファイルがあります。
このファイルをテキストエディタで編集して、引数に炎の色を指定できるようにしてみました。
まず、
public function TeraFire( …. ) ;
の引数の最後の方に、炎の開始色、炎の終了色を追加しました。それぞれcolorstart、colorendと変数名を指定しました。
引数省略時のデフォルトカラーは、TeraFireの初期カラーそのままにしてます。
そして、カラーを指定している行で、colorstart、colorendを使うように変数を入れ替えました。

余談ですが、trick7さんのソースファイルは丁寧で綺麗ですね…!いいお仕事をされる方のソースはもれなく綺麗な気がします。見習わないと…。

ps2015111512
TeraFire.asを保存したら、早速flaでインスタンス生成時の引数を追加です。
ちょっと緑っぽい色にしてみようかな〜と適当にカラーコードを記述。炎の内側の方が明るいとよいでしょうか。

ps2015111513
すると見事に炎の色も変わりました!
左側は引数あり、右側は引数なしです。

ps2015111514
最後はルートに戻って、画像のムービークリップをアニメーションさせれば、炎もそれに追従します。
今回は下からフェードインしながら動かしました。
実際はからのムービークリップを作って、そこに追加するとかでしょうが、これで私の今回の目的は達成したのでこれで終わり!

素敵なライブラリがあって仕事が無事に済みそうです。

ところで、Flashを作ったはいいですが、swfをブログに貼るのは抵抗がある+面倒ですね…。
でもFlashはActionScript3.0も含め、面白い仕事なのでまた来ないかな〜と思ってます。

『ふうらい姉妹1巻』読んでいて主人公の生活が非常に不安になる、超シュール系4コマ。

『LIAR GAME 18』最終戦、四国志ゲーム開始!19巻は4月中に発売なので完結直前です!

『野崎まど劇場』なんて酷いラノベだ…と、爆笑しました。フリーダムな短編集。将棋のアレも…。

『iPhoneアプリ開発の教科書』カラーでイラスト多くて、まずはこれを読んでみようと購入しました。

『数論の世界』高校レベルの知識での面白い数論の話。高校の時にこの本を知っていたら…。

『ミーティアわんわん』古賀亮一先生の電撃新連載!もったいないので少しずつ読んでます。

『新ゲノム5』相変わらずの古賀亮一マンガです。とにかくギャグの密度が高い…!

『HTML5&CSS3ポケットリファレンス』技術評論社のPRシリーズは鉄板です。

『容疑者Xの献身』今更ながら、こんなに面白い邦画に出会えるとは…!悪い予想を上回る結末。

『ゆるめいつ』シュール系脱力4コマ!この作品に触発されて4コマを描き始めました。