メモ

Google Swiffyを試してみました。【9.画像の構造と差替え実験】

Posted on by seigo

今回は、Swiffyがflaに配置されている画像に関してはちゃんとbase64状のデータで変換しています。それであれば、仕様に則って入れ替えれば画像の差替えが出来るんじゃなかろうかということで、SwiffyでFlash内に配置されている画像の構造についてと画像の差替え実験をしてみます。

Google Swiffy

夢が広がるなかなか楽しい実験になりました。

今回のソース

FLASH
[SWF]https://www.1ft-seabass.jp/memo/archives/google_swiffy_009/google-swiffy-009.swf,320,480[/SWF]

1,2の画像を配置しているFlashです。

それでは変換してみます

Google Swiffyで変換してみます。

→別ページで開く

画像を構成する部分はどこ？

さて、内部の画像を置き換える前に画像を構成する部分はどこかというと、Swiffyを構成するswiffyobjectのJSONで画像を構成する部分は、以下の「～base64の値　画像1～」「～base64の値　画像2～」となっている箇所です。

ソース全体

base64は長いので下記では省略して表示しています

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Swiffy output</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<script src="http://www.gstatic.com/swiffy/v3.8/runtime.js"></script>
<script>
swiffyobject = {"tags":[{"id":1,"height":200,"width":200,
"data":"data:image/png;base64,iVBORw0KGgo　～base64の値　画像1～　5ErkJggg==","type":8},
{"id":2,"height":200,"width":200,
"data":"data:image/png;base64,iVBORw0KG　～base64の値　画像2～　VORK5CYII=","type":8},
{"bounds":[{"ymin":0,"ymax":9599,"xmin":0,"xmax":6400}],"id":3,"paths":[{"fill":0,"data":["mvhvh:400f599i599I400F599i400f"]},{"fill":2,"data":["mvhvh:200e200i000D000D000d000d"]},{"fill":4,"data":["mhvhv:200e00f000D000d000d000D"]}],"fillstyles":[{"color":[0],"type":1},{"transform":"45184l::45184l::","bitmap":65535,"type":8},{"transform":"45184l::45184l00l200e","bitmap":2,"type":8},{"transform":"45184l::45184l::","bitmap":65535,"type":8},{"transform":"45184l::45184l00l00f","bitmap":1,"type":8}],"type":1},{"id":3,"matrix":"::::::","type":3,"depth":3},{"type":2}],"v":"3.8.0","backgroundColor":16777215,"frameSize":{"ymin":0,"ymax":9600,"xmin":0,"xmax":6400},"frameCount":1,"frameRate":30,"code":"","version":8};
</script>
</head>
<body style="overflow:hidden;margin:0;">

<script>var stage = new swiffy.Stage(document.body, swiffyobject);</script>
<script>stage.start();</script>

</body>
</html>

画像1

{"id":1,"height":200,"width":200,
"data":"data:image/png;base64,iVBORw0KGgo　～base64の値　画像1～　5ErkJggg==","type":8}

画像2

{"id":2,"height":200,"width":200,
"data":"data:image/png;base64,iVBORw0KG　～base64の値　画像2～　VORK5CYII=","type":8}

内部の画像を置き換えてみる

では、こちらの画像1の部分を画像2に入れ替えてみます

テキストエディタでそのまま入れ替えてみます。その結果が以下です。

→別ページで開く

無事変わりました！！

外部の別の画像をbase64化したデータで置き換えてみる

上記のサンプルですと「fla内に配置された特殊なbase64データ同士でだけうまくいくのではないか？」という疑問があったので、 外部の別の画像をbase64化したデータで置き換えてみました。

差し替えるPNG yellow_nolayer.png

こちらをbase64に変換しました。データ大きいのでテキストにリンク貼っておきます。

yellow_nolayer.pngのbase64データ

これを、上の画像1と差し替えてみます。その結果が以下です。

→別ページで開く

無事外部で変換されたbase64データで変換できました。

いやっほー。

というわけで、fla内に配置された特殊なbase64データということではないようですね！

おわりに

いかがでしたでしょうか！（テンション高め）

今回base64で変換したのはサーバーサイドでPHPで変換したものなので、これをうまくやればswfmillなどで行なっているような、サーバーサイドで画像を動的差し替えるコンテンツでもGoogleSwiffy＋サーバーサイドプログラムでうまく使えそうです。

以下、今回のファイル一式を置いておきますので興味のある方は変換して試してみてください。

.fla(CS4作成)データダウンロード：google_swiffy_009.zip

それでは、よいGoogle Swiffy Lifeを！

、、
seigo