スマホ向けFlashサイトを作るには? 第三回 Swiffy編

このエントリーをはてなブックマークに追加

『スマホ向けFlashサイトを作るには?』というテーマで更新をしています。
第二回目までは制作までのガイドラインを紹介してきました。

第三回目の今回からは実際のサンプルをHTML化するまで流れを
Swiffy編、HTML編と分けてご紹介していきたいと思います。

スマホ向けFlashサイトを作るには?
 ■ 目次
 第一回 準備編
 第二回 Flash編
 第三回 Swiffy編 この記事です。
 第四回 HTML編

では、第三回目、Swiffy編、はじまりはじまり~

■SwiffyでSWFをHTML5に変換する!

サンプルとして、シンプルなフリックできるギャラリーを作りました。

まずは、このFlashをSwiffyに変換していきます。

This movie requires Flash Player 9
■Flashのサンプル
フリックできるギャラリー

画面をフリックしてギャラリーを送る事ができる。

Swiffyの変換方法は2つの方法があります。
どちらの方法でも非常に簡単にSWFをHTML5に変換する事ができます。

・Swiffy拡張機能をインストールして、Flashから直接Swiffy変換する。
・Swiffyのページへアクセスして、SWFをアップロードして変換する。

詳しくは、以下のページをご覧ください。

Flash ProからHTML5書き出しを可能にするSwiffy拡張機能 | ClockMaker Blog
SWIFFYを調べてみた。

変換後のHTMLソースを見てみると、ものすごい量のソースが確認できると思います。


↑ブラウザの右クリックメニューでソースを表示したら、すごい量になりました。
いったいこれは何なんなのでしょうか?

■Swiffyの変換後の構造

では、ものすごい量になった変換後のHTMLソースを見てみます。

6行目の「 runtime.js 」と、7行目から始まる「 swiffyobject = {“tag… 」が確認できると思います。

6行目のJavaScriptは「Swiffyランタイム」といい、
この8行目の以降のswiffyobject=…は「JSONオブジェクト」というデータの塊です。

SwiffyはSWFを「JSONオブジェクト」に変換して、
Swiffyランタイム(JavaScript)で再生する、という技術になります。

↓こんな感じです。

つまり、

Flashにおける、SWFファイルとFlashPlayerの様な関係です。

このSwiffyランタイムのバージョンアップは頻繁に行われており、
現在はバージョン3.7になりました。

機能に関しての記事も書きましたので合わせてご覧ください。

Swiffyランタイムv3.7がサポートしている機能/サポートしてない機能
http://hi-posi.jp/?p=1919

■SwiffyObjectを扱いやすくする。

JSONオブジェクトを扱いやすいように
1つのJavaScriptにしておきます。

『SwiffyObject={“tags”:[{“typ』~ 『”version”:8};』

までをコピーし、JavaScriptファイルとして保存します。

名前は任意の名前で結構ですが、今回は「gallery.js」という名前で保存しました。

これで、変換前の「SWFファイル」と同じ内容の「JSファイル」ができあがった事になります。
これらのファイルは、次の第四回HTML組み込み編で使用します。

HTMLもすっきりしました。

<html>
<head>
<meta charset="utf-8">
<title>Swiffy output</title>
<script src="http://www.gstatic.com/swiffy/v3.7/runtime.js"></script>
<script type="text/Javascript" src="./gallery.js"></script>
</head>
<body style="overflow:hidden;margin:0;">
<script>var stage = new swiffy.Stage(document.body, swiffyobject);</script>
<script>stage.start();</script>
</body>
</html>

■Swiffyのファイルサイズを軽くする。

SwiffyはSWFをJSONオブジェクト変換すると説明いたしました。

そのJSONオブジェクトの中身を大まかに説明すると、
ActionScriptやモーションデータはSwiffyランタイムに最適化されたデータに、
ベクターデータはSVGに変換、
画像ファイルはbase64変換しdataスキームURIにしています。

SVGやbase64はデータ量が多くなり、殆どの場合、ファイルサイズが重くなります。
しかしモバイルでの再生を考えると、ファイルサイズは軽く作る必要があります。

今回のサンプルでも、
SWFのサイズは、2KB ですが、
Swiffy変換後は、13.4KB となり6倍以上のサイズになりました。

さらにSwiffyの再生には前述のとおりSwiffyランタイムが必要です。
このランタイムはv3.7で、96.5KBあります。

ランタイムと、JSONオブジェクト合わせて109.9KBとなってしまいます。

表:Swiffy変換後のファイルサイズ

SWF Swiffy
コンテンツ 2KB 13.4KB
Swiffyランタイム 96.5KB
TOTAL 2KB 109.9KB

ですので、なるべくファイルサイズを小さくする必要があります。

■Flashを軽く作る。

Flashのベクターデータは、SVGに変換されますが、
当然、複雑な形のベクターデータは、その分重くなりますので、なるべくシンプルな形で描画するようにします。
線の最適化を行ったり、変数名も極力短く、シンボルを使いまわします。

FlashLiteコンテンツを開発をされていた方は、そのままのテクニックが使えます。

以下の2つの記事は必読です。

Flash Lite制作 作業効率化&ファイル容量軽量化テクニック
http://www.adobe.com/jp/devnet/flash/articles/flashlite_koekatamarin_tips.html

ソーシャルゲームデザインで使える!パスを減らして軽量化するアイデア
http://design.kayac.com/topics/2010/11/pass.php

■gzip圧縮でさらに減らす

gzip圧縮をかけます。
サーバーサイドで、gzip転送する設定をします。

.htaccess で gzip 圧縮してデータ転送量を少なくする方法。
http://blog.btmup.com/web-general/htaccess-gzip.html

またファイル自体も7-zipなどでJSファイルを圧縮し、gzipファイル(.gz)にします。

7-Zipのホームページ(日本語)
http://sevenzip.sourceforge.jp/

prototype.jsを10KBにする方法の続き(.htaccessをスマートに使う)
http://asiamoth.com/mt/archives/2006-11/19_2357.php

gzip圧縮後、13.4KBあったファイルサイズは、2.6KBまで落ちました。

表:Swiffy変換後のファイルサイズ

SWF Swiffy+gzip
コンテンツ 2KB 2.6KB
Swiffyランタイム 96.5KB
TOTAL 2KB 99.1KB

これでコンテンツ部分ができました。
これらのファイルをHTMLに組み込んでいきましょう。

スマホ向けFlashサイトを作るには? 第四回 HTML編

に続きます。

スマホ向けFlashサイトを作るには?第一回 準備編
スマホ向けFlashサイトを作るには?第二回 Flash編
スマホ向けFlashサイトを作るには?第三回 Swiffy編
スマホ向けFlashサイトを作るには?第四回 HTML編

3 Comments

  1. […] 準備編 スマホ向けFlashサイトを作るには?第二回 Flash編 スマホ向けFlashサイトを作るには?第三回 Swiffy編 スマホ向けFlashサイトを作るには?第四回 […]

  2. […] 『スマホ向けFlashサイトを作るには? 第三回Swiffy編』 […]

  3. […] 目次 第一回 準備編 第二回 Flash編 第三回 Swiffy編 第四回 […]

Leave a Reply