Google Swiffyの使い方　【5】Swiffyの画像を差し替える方法

Swiffyの中の画像を差し替える方法

　
テキストを追加する方法の次は、画像を差し替える方法です。
　
Flashの中で利用している画像を動的に差し替えたい場合の対応方法についてです。
コーポレートサイトなどのイメージ Flashなどであれば、差し替える画像をあらかじめ Flash内に入れておき、必要に応じてそれを差し替える方法でも対応も可能ですが、差し替える画像の数が多い場合や後から動的に変更される画像を差し替える画像の対象にする必要がある場合などは、別途対応が必要です。
　
そのような場合の画像の差し替え方法については、【9.画像の構造と差替え実験】に分かりやすく実験結果が掲載されています。
http://www.1ft-seabass.jp/memo/2012/01/10/google-swiffy-9/
　
上記の記事でも書かれていますが、画像の部分は「”data”:”data:image/png;base64,」と言った記述で始まっていますので、その部分を探して画像を差し替えることで対応が可能です。（下の画像を参照。赤のアンダーラインの部分。その続きの「/9j/4AAQSkZJRgABA…..」の部分が画像のデータになります。画像の最後は「”（ダブルクォーテーション）」で閉じられています。）
　
差し替える側の画像もあらかじめ Base64でエンコードをする必要がありますが、PHPには Base64エンコーディングのコマンドもありますので、PHPで処理をする場合は簡単に処理を作ることができるでしょう。
　

　
また、Flash内のオブジェクトは、上記の画像の黄色のアンダーラインの部分のように「”id”:20」のような形で IDが振られていますので、どの部分を差し替えればいいかは、この IDを目印に探せばいいのではないかと思います。
　
　
ただ、複数の画像を差し替える場合は、Flashを作成する際に気を付ける点があります。
それについては、下記のサイトに分かりやすく掲載されています。
　「Swiffyで画像を差替える際のFlash側の対応」
　http://www.plusmb.jp/2012/09/28/5790.html
　
　
画像を差し替える方法はいくつかあるかとは思いますが、私の場合は、Google Swiffyで変換したファイルから差し替える必要がある画像の部分をあらかじめ特定の文字列に置き換えた中間ファイルを作成しておく方法を採っています。
そして、表示側のプログラムで、特定の文字列ごとに必要な画像と差し替える形で JSONを完成させて HTMLに組み込むと言う方法です。
　

　
そして、中間ファイルを生成するツールを作っておけば Flashの作り替えが発生したときも比較的手間をかけずに対応をする事が出来ます。（上記の画像の赤色のアンダーラインの部分の用に画像のデータの部分を「<?!–image01–>」に置き換えています。）
　
Base64の画像の部分を差し替えるツールの処理としては、夏季のような感じでしょうか。
————-
preg_replace( ‘/base64,[A-Za-z0-9+\/\n=]*”/’, $replacement, $swiffy_f, 1 );
————-
本当は、変換ツールを公開したいところですが、諸事情があってそれは出来ないのが残念ですね…
　
　
　
【Google Swiffy 使い方目次】
Google Swiffyの使い方　【1】基本編
Google Swiffyの使い方　【2】日本語の文字化けについて
Google Swiffyの使い方　【3】Swiffyに FlashVars的にテキストを渡す方法（Swiffyでは扱えない文字「%」「+」「&」）
Google Swiffyの使い方　【4】Swiffyに FlashVars的テキスト渡しで発生する不具合（テキストの背景が黒くなる）（テキストが上にずれる）
Google Swiffyの使い方　【5】Swiffyの画像を差し替える方法
Google Swiffyの使い方　【6】Swiffyの Flashムービー・Flashベクターを差し替える方法
Google Swiffyの使い方　【7】Swiffyの バージョンの調べ方