SWFObjectの制作者Geoffさん、ハッピーバースデイ！

Flash／ActionScript開発のためのオープンソースコミュニティ「Spark project」では、毎月勉強会を開催しています。スキルレベルや立場にとらわれず、Flash好きが集まり、FlashやActionScript に関するトピックについて勉強する、フランクなイベントです。

今年5月末に開催された第9回勉強会には、ちょうど来日していたSWFObjectの制作者Geoff Stearnsさんも参加されました。SWFObjectとは、HTML内にSWFを埋め込むためのライブラリです。SWFObjectを使えば、Flash Playerのバージョン検出機能や代替コンテンツ提供機能などを手軽に実装でき、海外ではデファクトスタンダードと言えるくらい多くのFlasherが利用しています。読者の中にも、使っているという方は多いでしょう。実は、Dreamweaver CS4でもSWFの埋め込み手法として採用されています。

• swfobject - Project Hosting on Google Code
• SWFObject v2.0 ドキュメント日本語訳 : Media Technology Labs (MTL) : メディアテクノロジーラボ　ブログ 　※日本語訳を手掛けたのは、Spark projectのコミッターでもあるtrick7さんです。

勉強会では、Geoffさんとのトークセッションが行われましたが、その日はもう一つスペシャルイベントがありました。なんと、勉強会の2日前がGeoffさんの誕生日。そこで、急遽、有志のFlasherによる「Happy Birthday 大喜利」が企画されました。Flasherならではの趣向を凝らしたお祝いでした。SWFObjectの解説は上記リンクに譲るとして、本記事では大喜利で披露された「FlashユーザーによるFlashユーザーのための誕生日プレゼント」について、制作者のみなさんに解説していただきましょう。

なお、第9回勉強会の模様はUstreamのアーカイブで見ることができます。ビデオ後半には、「Happy Birthday 大喜利」もあります。ビデオと一緒に、これ以降の記事を楽しんで下さい。
http://www.ustream.tv/recorded/1571316

プレゼント01：A BIRTHDAY CAKE

技術解説

このプログラムは、FlashDevelopのAS3プロジェクトとして作成しました。順を追って、制作工程を解説します。

STEP01　素材の準備
まずは猫パティシエの画像を準備します。自作のお絵描き掲示板を使用して、次の三枚の絵を描きました。

これらの画像の背景を切り抜き、Loaderでロードして使用しました。猫パティシエが顔を描くときの効果音や、最後の歓声などの音素材は市販のものを使用しています。音素材はwav形式だったので、Flashのタイムラインに音を貼り付けただけのものをパブリッシュし、そのSWFファイルをEmbedして使用しました。

STEP02　フルスクリーンのソース矩形指定
プレゼン時に使用したノートPCは性能があまりよくなかったので、フルスクリーン時の表示範囲を狭くとってFPSの維持を試みました。次のコードを使い、フルスクリーン時の描画元として画面左上320×240ピクセルの矩形領域を指定しています。

stage.fullScreenSourceRect = new Rectangle(0, 0, 320, 240);

STEP03　ケーキ本体の配置
真上から見るビューだとケーキに見えなさそうなので、立体的に配置しました。立体配置にはFlash Player 10の機能であるrotationX、rotationY、rotationZとzプロパティを利用して、四角を描画しただけのSpriteを用意し、角度を変えながら組み立てました。

STEP04　顔の撮影・加工
Webカメラを通して画像を取り込み、明度的に暗い部分と、HSV成分で肌色っぽい部分を抽出しました。暗い部分はチョコレート、肌色の部分はストロベリークリームという設定を説明しながら、猫パティシエの手が端から順番にケーキ上をなぞっていき、なぞった部分を先ほど抽出した画像とマスクを使って塗っていきます。

MEMO:
ミカン日記: ActionScript3.0で肌色検出
http://kaiho-16.seesaa.net/article/62520420.html

猫パティシエの手・ハケも、Flash Player 10の3D機能を利用して配置することで、奥行き方向への移動も自然に見えるようにしています。なぞる動作は、BetweenAS3を使用してアニメーションさせました。

STEP05　ロウソク配置
ロウソクはGeoffさんの年齢を聞いてから本数を決定し、顔部分の邪魔にならないようにクリックで配置していきました。ロウソクの先端には、TeraFireを配置して、ゆらぐ炎を演出しています。

吹き消すボタンを押してもらったら、炎用のTeraFireを傾けて消し、再度TeraFireを煙用の設定で配置します。同じTeraFireクラスですが、設定次第で炎のようにも煙のようにも見せることができます。

炎のTeraFire: new TeraFire(0, 0, 10, 30, 0xFFFF00, 0xFF0000)
煙のTeraFire: new TeraFire(0, 0, 2, 200, 0xAAAAAA, 0xBBBBBB)

ページ 1 / 5

次のページ

著者について