携帯コンテンツのFlashLite1.1を用いたサムネイル画像の作成
こんにちは、
CyberX エンジニア白井です。
今週からCyberXのエンジニアがソーシャルアプリの構築の中で培ったノウハウを
リレー形式でブログという形で公開していきます。
トップバッターを務めさせていただきます。
一つ目の記事として何を書くのか若干かんがえましたが、
あんまり他の会社でやっていると聞いたことがないことを
取り上げることにしました。
とういことで、FlashLite1.1のFlashを用いてサムネイル画像を作成する話をします。
携帯コンテンツではFlashLite1.1がいまだにつかわれます。
そういう弊社のソーシャルアプリも主にFlashLite1.1を使用しています。
たとえばモリんちゅ（弊社のモバゲーに出しているソーシャルアプリです。）
では次のように自分のモリをFlashで表示しています。
当然ユーザごとに合成する内容が違ってきます。
Flashの合成エンジンと、PHPを駆使して作成しています。
さて、ではせっかく合成したFlash、他に使い道はないでしょうか？
これまた、よくあるのが、携帯コンテンツでは、サムネイルを表示します。
ユーザのアバターが代表例です。
サムネイルですから、Flashで表示したのと同じ内容です。
じゃあ、このサムネイルどうつくりましょう？
「わざわざ画像を重ね合わせて、サムネイルつくるの手間がかかる。
・・・Flashつかえないの？」
って考えますよね！
Flashをキャプチャーしようと取り組む中で、さまざまな問題が発生しましたが、
（文末にそのあたりに触れた社内で使用した資料のリンクをはっております。）
現在は目的のサムネイルをFlashから作成できるようになりました。
ただし、同期処理ではなく、非同期処理となっています。
（負荷を考慮した結果、非同期処理におちつきました。）
で、実際の実現方法ですが、
FlashPlayer10（ActionScript3.0）をつかって処理しています。
FlashPlayer10にてキャプチャーしたいFlashLite1.1のFlashファイルを
読み込みます。
その後、ActionScriptにて、読み込んだFlashをBitmapへ変換、
BitmapからJPEGへ、と変換しています。
なぜBitmapが途中ででてくるのか？と疑問に思ったかもしれません。
実は、このBitmapがこのキャプチャーの仕組みの根幹の処理なのです。
ActionScript3.0には次のメソッドがあります。
パッケージ flash.display
クラス public class BitmapData
draw()メソッド
Flash Player のベクターレンダラを使用して、source 表示オブジェクトをビットマップイメージ上に描画します
つまり、Flashのベクター表示をBitmapへ変換してくれるのです。
それはつまり、キャプチャーそのものです。
あとは、キャプチャーしたいFlashLite1.1のFlashを読み込む処理と
Bitmapを任意の画像形式に変換するエンコード処理を
前後にはさむだけです。
（頭でわかっても実際には落とし穴がありました。）
ただし、FlashPlayerを起動する必要があります。
最初は、1枚キャプチャーするたびにFlashPlayerを起動し、
キャプチャーが終わったら、FlashPlayerを終了していました。
（同期処理）
しかし、FlashPlayerの起動コストが高い！
そのため、FlashPlayerを常に立ち上げておく形にし、
特定のURLをポーリングして、データがあるときのみ
FlashLite1.1のFlashを読み込むような処理に変更しました。
（非同期処理）
結果、サーバの負荷は運用に耐えられるレベルに下がりました。
（最終的なソースの一部を文末のスライドに載せています。）
この仕組みが構築できたおかげで、
Flashの合成処理をそのままつかって、
サムネイルをつくれるようになりました。
画像を重ね合わせてサムネイルを作成するよりも、
（GDや、ImageMagickの重ね合わせ）
ベクターデータを重ね合わせた後にBitmapに落とす
こちらの方式のほうが、画像がきれいにみえます。
弊社ではガンガン活用しています。
弊社のソーシャルアプリを見たときに
ちょっと思い出してもらえればと思います。
（星空バータウン（弊社mixiモバイルのソーシャルアプリ） 画像キャプチャー例）
※プレゼン時の資料
FlashLite1.1のSWFを画像キャプチャーする
CyberX エンジニア白井です。
今週からCyberXのエンジニアがソーシャルアプリの構築の中で培ったノウハウを
リレー形式でブログという形で公開していきます。
トップバッターを務めさせていただきます。
一つ目の記事として何を書くのか若干かんがえましたが、
あんまり他の会社でやっていると聞いたことがないことを
取り上げることにしました。
とういことで、FlashLite1.1のFlashを用いてサムネイル画像を作成する話をします。
携帯コンテンツではFlashLite1.1がいまだにつかわれます。
そういう弊社のソーシャルアプリも主にFlashLite1.1を使用しています。
たとえばモリんちゅ（弊社のモバゲーに出しているソーシャルアプリです。）
では次のように自分のモリをFlashで表示しています。
このFlash（上記はFlashを今回説明する仕組みでキャプチャーした画像です）は
Flash合成エンジンをつかって、PHPより素材のSWF
（上記の画像内では、パンダ、背景の草、地面、チューリップ、ひまわり）
を合成し、一枚のFlashにしています。
Flash合成エンジンをつかって、PHPより素材のSWF
（上記の画像内では、パンダ、背景の草、地面、チューリップ、ひまわり）
を合成し、一枚のFlashにしています。
当然ユーザごとに合成する内容が違ってきます。
Flashの合成エンジンと、PHPを駆使して作成しています。
さて、ではせっかく合成したFlash、他に使い道はないでしょうか？
これまた、よくあるのが、携帯コンテンツでは、サムネイルを表示します。
ユーザのアバターが代表例です。
サムネイルですから、Flashで表示したのと同じ内容です。
じゃあ、このサムネイルどうつくりましょう？
「わざわざ画像を重ね合わせて、サムネイルつくるの手間がかかる。
・・・Flashつかえないの？」
って考えますよね！
Flashをキャプチャーしようと取り組む中で、さまざまな問題が発生しましたが、
（文末にそのあたりに触れた社内で使用した資料のリンクをはっております。）
現在は目的のサムネイルをFlashから作成できるようになりました。
ただし、同期処理ではなく、非同期処理となっています。
（負荷を考慮した結果、非同期処理におちつきました。）
で、実際の実現方法ですが、
FlashPlayer10（ActionScript3.0）をつかって処理しています。
FlashPlayer10にてキャプチャーしたいFlashLite1.1のFlashファイルを
読み込みます。
その後、ActionScriptにて、読み込んだFlashをBitmapへ変換、
BitmapからJPEGへ、と変換しています。
なぜBitmapが途中ででてくるのか？と疑問に思ったかもしれません。
実は、このBitmapがこのキャプチャーの仕組みの根幹の処理なのです。
ActionScript3.0には次のメソッドがあります。
パッケージ flash.display
クラス public class BitmapData
draw()メソッド
Flash Player のベクターレンダラを使用して、source 表示オブジェクトをビットマップイメージ上に描画します
つまり、Flashのベクター表示をBitmapへ変換してくれるのです。
それはつまり、キャプチャーそのものです。
あとは、キャプチャーしたいFlashLite1.1のFlashを読み込む処理と
Bitmapを任意の画像形式に変換するエンコード処理を
前後にはさむだけです。
（頭でわかっても実際には落とし穴がありました。）
ただし、FlashPlayerを起動する必要があります。
最初は、1枚キャプチャーするたびにFlashPlayerを起動し、
キャプチャーが終わったら、FlashPlayerを終了していました。
（同期処理）
しかし、FlashPlayerの起動コストが高い！
そのため、FlashPlayerを常に立ち上げておく形にし、
特定のURLをポーリングして、データがあるときのみ
FlashLite1.1のFlashを読み込むような処理に変更しました。
（非同期処理）
結果、サーバの負荷は運用に耐えられるレベルに下がりました。
（最終的なソースの一部を文末のスライドに載せています。）
この仕組みが構築できたおかげで、
Flashの合成処理をそのままつかって、
サムネイルをつくれるようになりました。
画像を重ね合わせてサムネイルを作成するよりも、
（GDや、ImageMagickの重ね合わせ）
ベクターデータを重ね合わせた後にBitmapに落とす
こちらの方式のほうが、画像がきれいにみえます。
弊社ではガンガン活用しています。
弊社のソーシャルアプリを見たときに
ちょっと思い出してもらえればと思います。
（星空バータウン（弊社mixiモバイルのソーシャルアプリ） 画像キャプチャー例）
※プレゼン時の資料
FlashLite1.1のSWFを画像キャプチャーする