こんにちは、好井です。
「スマホサイト・アプリをつくろう」
すぐにネタが尽きて、スマフォ以外のことを書き出すと思うので、
せめて最初の数回はスマフォ関連の記事を小出しで書いてみようと思います。
井筒さんが「Flashをスマートフォンに対応させるには？-準備編-」にてGoogle Swiffyについて記載されているので、Swiffyを画像を差し替えて使用する際にFlash側では、どのように作成しておくのかを簡単にまとめておきます。
そもそもGoogle Swiffyとは
FlashをHTML5に変換できるというGoogle Labsで公開されているサービスです。
https://www.google.com/doubleclick/studio/swiffy/
iPhoneやiPadのようなFlash player非対応機種でもFlashと同等のコンテンツを閲覧可能になります。
どのような状態で変換されるかは、実際に試してみることをお勧めしますが、目が痛くなるような大量のjsonデータなどに変換されて出力されます。
jpegなどの画像データはbase64形式にエンコードされて書き出されます。アニメーションはtransformを使って実行しているようです。
Google Swiffyで変換されたコンテンツの画像を差替える
静的なコンテンツであれば、Swiffyで単純に変換するだけで問題ないのですが、Flashは外部画像を読み込んだりして動的にコンテンツを生成したい場合が多々あります。
Swiffyは仕組み上、外部の画像を読み込むことができませんので、loadMovieとかloadClipみたいな外部画像を読み込むスクリプトは変換されません。
では、動的に画像を差し替えるようなコンテンツはどのように作成するのかといいますと、PHPなどを使ってサーバーサイドで、Swiffyで変換されたコンテンツをさらに置換しなくてはなりません。
画像はbase64形式でエンコードされていますので、差し替えたい画像の箇所を、idや文字列などで特定し、そこをPHPでbase64形式でエンコードした画像データと置換することで画像を差替えます。
ベクターデータは変換できない
ちなみに、この方法では、Flashで描画したベクターデータを差し替えることはできません。(base64ではなくsvgとして変換されるため)
jpgなどビットマップデータのものしかbase64で変換されて書き出されないため、上手く差し替えられません。
Flash側での対応
以上のことから、createEmptyMovieClipなどスクリプトで作成したムービークリップに直接画像を読み込むような作り方をしているとまずいです。
Swiffyで置換されたコードに、差し替えるための画像が存在しない状態になってしまいます。
ですので、Flashを作成しているときに外部画像を読み込む際には、ステージ上に仮のビットマップ画像を配置しムービークリップ化して、そこに画像を読み込んで差し替えるように作成してやる必要があります。
後はソースから、画像を読み込むスクリプトをごっそり削ります。
Swiffyはかなり忠実にFlashを変換してくれるので、その他はあまり気をつけることはありませんが、ファイルサイズが膨れ上がるので、なるべくコードを短くする、画像の品質など気をつけておくといいと思います。
上手く変換できなかった場合は、変換できる作り方を手探りで探っていくしかありません。Flashは同じ表現でもさまざまな作り方がしやすいので、いろんな方法を試してみれば動く場合があるかもしれません。
Swiffyで変換された画像を差替える際の注意点
変更したい画像は全て別のビットマップ画像を使用します。
複数の画像を差し替えるときに、どうせ変換後画像を差し替えるわけですから、全て同じビットマップ画像を取りあえず入れておこうと考えると思いますが、この状態では画像を上手く差し替えてやることが出来ません。
以下のような感じ。
なぜこうなるのかというと、サイズを軽量化するために、同じビットマップ画像を使用している場合はひとつの画像を使いまわして使用するように変換されるためです。
つまり、複数の画像を変換する必要がある場合には、変換したいシンボルに対して、全て別々のビットマップ画像を入れておく必要があります。
