ブログ・エス技研

当ブログは引越しをしました。10秒後に自動で転送しますが、転送されない場合は、http://blog.s-giken.net/ をご覧ください。
ブログ・エス技研 TOP  >  スポンサー広告 >  Google Swiffy >  Google Swiffyの使い方 【5】Swiffyの画像を差し替える方法

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
[ --年--月--日 --:-- ] カテゴリ:スポンサー広告 | TB(-) | CM(-)

Google Swiffyの使い方 【5】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で処理をする場合は簡単に処理を作ることができるでしょう。

20121201_swiffy_3.gif

【画像での説明】

また、Flash内のオブジェクトは、上記の画像の黄色のアンダーラインの部分のように「"id":20」のような形で IDが振られていますので、どの部分を差し替えればいいかは、この IDを目印に探せばいいのではないかと思います。


ただ、複数の画像を差し替える場合は、Flashを作成する際に気を付ける点があります。
それについては、下記のサイトに分かりやすく掲載されています。
 「Swiffyで画像を差替える際のFlash側の対応」
 http://www.plusmb.jp/2012/09/28/5790.html


画像を差し替える方法はいくつかあるかとは思いますが、私の場合は、Google Swiffyで変換したファイルから差し替える必要がある画像の部分をあらかじめ特定の文字列に置き換えた中間ファイルを作成しておく方法を採っています。
そして、表示側のプログラムで、特定の文字列ごとに必要な画像と差し替える形で JSONを完成させて HTMLに組み込むと言う方法です。


そして、中間ファイルを生成するツールを作っておけば Flashの作り替えが発生したときも比較的手間をかけずに対応をする事が出来ます。(上記の画像の赤色のアンダーラインの部分の用に画像のデータの部分を「」に置き換えています。)

Base64の画像の部分を差し替えるツールの処理としては、夏季のような感じでしょうか。
-------------
preg_replace( '/base64,[A-Za-z0-9+\/\n=]*"/', $replacement, $swiffy_f, 1 );
-------------
本当は、変換ツールを公開したいところですが、諸事情があってそれは出来ないのが残念ですね...



【目次】
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の バージョンの調べ方
関連記事
スポンサーサイト
[ 2012年12月14日 10:11 ] カテゴリ:Google Swiffy | TB(0) | CM(0)
コメントの投稿












管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL

プロフィール

エス技研

Author:エス技研
性別:男性
職業:Web系エンジニア
エンジニアになって 15年ほど経ちますが、その途中で 5年ほどディレクタ、マネジメントを中心とした業務を行っていたためにやや現場を離れていましたが、転職をきっかけに 2012年に現場に復帰し、新たな技術を楽しみながら勉強しています。
メインの環境は LAMP環境です。

FC2ブログランキング
FC2カウンター
FC2拍手ランキング
GoogleAdWords
カレンダー
05 | 2017/06 | 07
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 -
検索フォーム
ブロとも申請フォーム
QRコード
QR
フリーエリア


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。