Swiffyを使ってスマートフォンでFlashアニメーションを再生する。

カクカクシカジカでFlashをスマートフォンで表示するお仕事をする事になった大熊猫です。

今回はGoogleが提供しているSwiffyを使ってスマートフォンでFlash(で作ったアニメーション)を表示するまでのやり方を簡単に解説したいと思います。
尚、Android OSはバージョン2.3まではFlash(Flash Lite)の利用が可能です。

今回の対象はiOSとAndroid OS 4.0以降の非Flash対応のスマートフォンになります。

そもそもSwiffyとは

Googleが提供している、Flash形式のファイルをSVGに変換して再現するサービスです。

当初はSwiffyのサイトへ行き、SWFをアップロードし、その後に書き出されるソースを利用するというもので、少し手間のかかるものでした。
しかし、今はFlashの正規なExtensionが公開されているため、Flash上で書き出し事が可能です。
そのため、Flashのエンジニアの方には導入しやすい環境になっていると思います。

こんな感じです。(Flashの画面)
sc01

今回の目的

今回はFlashでアニメーションを作成、そしてSwiffyを利用してSVG化を行いスマートフォンでもアニメーションを再生可能にするのが目的です。

こちらのリンクはSWFを貼り付けたHTMLです。
これと同じアニメーションをスマートフォンで表示可能になると成功となります。
※アニメーションの動きがおかしいのは私がflashを触るのが久々過ぎて適当になったためです・・・

さっそくSwiffyでSVG化してみる

まず先程のアニメーションを作成したFlashの画面を開きます。

Flash上でSwiffyでの書き出しを実行します。

先ほどの画像で表示されている
「コマンド → Export as HTML5(Swiffy)」を選択し書き出しを行います。
すると

「”元のファイル名”+swf.html」という形式のHTMLファイルが生成されます。

これをブラウザで開くとアニメーションが確認できます。
こんな感じです。

iOS,Android OS※のスマートフォン(※Android OS は4.0以降)で観覧が可能です
今回のアニメーションは単純なものでしたのでそれほど影響は無いと思いますが
動きのあるオブジェクトの数が多ければ多いほど多少の遅延が起きると思います。

このあたりはデバイスの性能によっては気にならない場合もあります

画像を任意のものに変更出来るようにする

単純に静的なアニメーションを表示したいのであれば

先ほどのままで良いのですが、PHP等のサーバーサイドの言語で
動的に画像を差し替えたい場合などは工夫が必要です。
次は画像の差し替えを行えるようにしたいと思います。

以下、その手順になります。

●JSONファイルを外部化して管理する(任意)

先ほどのHTMLから、JSONの部分を抽出し外部ファイ化しています。
外部化したのJSONファイルはこちらです。

※外部化する理由は単純に管理しやすいからなので必須ではありません。

●JSONの画像の部分を変数化してHTML側で変更可能にする

先ほどのJSONファイルの中に、画像を記述している箇所があります。
その部分を見つけて、任意の変数に置き換えます。

尚、JSONファイル上の画像はPathではなくData URIに変換されているので
注意が必要です。

以下のような部分を見つけてください。

(省略)"data:image/jpeg;base64,(省略)'

この果てしなーーーーく長い文字の羅列が画像のデータになります。

この部分を慎重に変数に書き換えます。
今回は変数名を「Panda」とします。

少しわかりにくいですが変数に書き換えたJSONファイルをこちらに用意しました。

次はこちらをHTML側で管理出来るようにします。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>Swiffyのテスト</title>
<link rel="stylesheet" href="style.css">
<script src="https://www.gstatic.com/swiffy/v5.1/runtime.js"></script>
<script>
var Panda = 'data:image/jpeg;base64,(省略)';
</script>
</head>
<body>
<div id="swiffycontainer"></div>
<script type="text/javascript" src="./sample002.js"></script>
<script>
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'),swiffyobject);
stage.start();
</script>
</body>
</html>

後は、変数(Panda)の値を変更すれば画像の差し替えが行えます。

※ただし差し替える画像もData URIに変換しておく必要があります。

これにより現在のこの愛らしいパンダを

sample001

下のような怖い感じに差し替える事が可能です。

sample002

結果こんな感じです。

このように画像を任意のものに変更する事が可能になります。

これまでFlashで生成したSWFをサーバーサイドで画像を変更するなどの
処理をしていた要領に近い形で動的に扱う事が可能となります。

●おまけ-Flash上で指定された変数の操作

Flash上で指定された変数の操作をする場合は以下のようにstage.setFlashVars()内で
変数と値を指定して記述します。

複数ある場合「&」で繋いでください。

stage.setFlashVars('hoge=1234$hoge02=3456');

このあたりは参考のURLなどに詳しく解説がありますので今回は割愛させていただきます。

参考