みなさんお久しぶりです！
例のごとく「井筒」ですw
さてさてついに最終目的の組み込み編まで来ましたね。
今回はiPhoneとAndroidそれぞれでのHTMLに組み込む際のポイントをご紹介します。
Android対応
では、まずAndroidです。
こいつは地味に厄介でして・・・Flashがきちんと画面サイズにはまらないなんてことがおきるのです。
困ったものですね。
そこで！便利なJSファイルを使いましょう。それは「swfobject」です！！
こいつを使えば面倒な記述をせず簡単にFlashを組み込めるのです。え？ダウンロード先はって？・・・Google先生に聞いてみてください。
まずは「swfobject.js」をダウンロードしてきたら下記をheaderタグに記述しましょう
<script src="./swfobject.js"></script>
では実際のコードも見ていきましょう。ここでは画面に合わせてFlashのサイズ調整も行っています。
<script type="text/javascript"><!--
window.onload = function(){
var swf = document.getElementById("flashContent");
swf.focus();
};
var swfW = window.innerWidth;
var swfH = Math.round(320 * (swfW / 240));
var flashvars = null;
var params = {autostart: "true",loop: "false",allowscriptaccess: "always",bgcolor:"#000000"};
swfobject.embedSWF("SWFファイル", "flashContent", swfW, swfH, "9.0.0","expressInstall.swf", flashvars, params);
//--></script>
<div id="flashContent">
<p>お使いの端末にはFlashPlayerがインストールされていないかバージョンが古いため対応しておりません</p>
<p>最新のFlashPlayerをインストールしてください</p>
<br><br><a href="<{$link}>">OK</a><br><br><br>
</div>
では軽く説明を
まずはじめにwindow.onload～の部分ですが、ここはFlashにフォーカスをあてています。
フォーカスをあてていないとFlash内のボタンをタップする際に一度FlashをタップしてFlashを操作できる状態にする必要があります。それをはじめからFlashを操作できる状態にしてくれます。便利ですよね。
その下の部分は端末の画面サイズを取得してFlashの表示するべきサイズを計算しています。
swfobjectはここからになります。
var flashvars = null となっている部分ですが、これはFlashがHTMLとデータをやり取りするように作られている場合に使用します。
var params = {auto～～ の部分はFlashの設定になります。ループ設定などはここで設定することになります。
swfobject.embedSWF～～ これが実際にswfobjectを使う部分ですね。中に9.0.0となっている部分はおわかりでしょうか？これはFlash playerのバージョンのことです。これを指定しておけばそれより古いFlash playerの端末に表示しなくなります。指定したFlash playerより古い or インストール自体されていないものは下のDIVタグで囲まれている部分が表示されます。
Android対応は以上になります。
iPhone対応
では、続いてiPhoneです。
まずはソースを。
<script src="https://www.gstatic.com/swiffy/v4.9/runtime.js"></script>
<script>
swiffyobject = <?php echo $swiffyTag ?>
</script>
<div id="swiffycontainer" style="width: 240px; height: 295px;"></div>
<script>
var swfW = window.innerWidth;
var swfH = Math.round(295 * (swfW / 240));
$("#swiffycontainer").css("width" , swfW);
$("#swiffycontainer").css("height" , swfH);
var stage = new swiffy.Stage(document.getElementById('swiffycontainer'), swiffyobject);
stage.setFlashVars("<{$flashVars}>");
stage.start();
</script>
まずは前回の記事でも記載したSwiffyのruntime.jsの読み込みですね。
swiffyobject = <?php echo $swiffyTag ?>となっている部分は前回の記事で画像を置換したSwiffyのJSONのコードです。
iPhone対応でもAndroidと同じように表示するサイズを端末の画面サイズに応じて変わるように計算する部分が入っています。
ほぼこのまま形として覚えてもらえれば大丈夫です。
最後に
実際に上記のような方法でソーシャルゲームの開発を行なって感じたことですが、FlashにバリバリActionScriptを組むとAndroidのFlash playerのバージョンを上げないと処理落ちしたり、Swiffy変換でももとのアニメーションでかなり高画質な素材を使用したり負荷のかかる重いアニメーションを使用しているとiPhone5ならサクサク表示されますがiPhone4Sでも処理が追いつかずフリーズするなんてことも発生しました。こればかりは経験してみないとわからないことですがFlashのスマートフォン対応はやっぱり大変。
やる気あふれる方は一度試してみてください。
