Swiffyを調べてみた。

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

6/28にGoogleからSWFファイルをiOS等で見る事のできるHTML5コンテンツに変換する「Swiffy」が発表されました。

Swiffy
http://swiffy.googlelabs.com/

Swiffy ギャラリー
※アニメーションや簡単なミニゲームが試せます
http://swiffy.googlelabs.com/gallery.html

[engadget]Google、FlashをHTML5に変換するツールSwiffyを公開より

Google が Flashの .swf ファイルをHTML5コードに変換するウェブベースのツール Swiffy を公開しました。Flashプラグイン前提のブラウザ向けに制作した従来の .swfファイルを、iPhone や iPad などFlashが動かないけれど HTML5対応は進んだ環境向けに再利用できます。

Swiffy が現時点で対応するのは SWF 8 および ActionScript 2.0の一部。Flash 5 (SWF 5)までのほとんどの機能に対応しており、ソースからSWF 5で出力できる場合はそちらのほうが良い結果になるとされています。つまり変換できるのはアニメや簡単なスクリプトまで。

Swiffyが出力するのは.swfを再コンパイルしたJSONファイルと、クライアント側で動くJSファイル。ブラウザ側ではJavaScript がJSONファイルを読み込み、HTML5準拠のSVGやCSSなどで再現します。SVGの特定の機能を利用するため、サポートするのはWebkitベースの Safari (モバイル含む) や Chromeブラウザのみ。

2011/12/20 追記 Swiffyを使ったモバイル向けFlashサイトの作り方講座を更新しました。
こちらも合わせてご覧ください。

スマホ向けFlashサイトを作るには? 第一回 準備編
http://hi-posi.jp/?p=1217

Swiffyの使い方は非常に簡単です。

SWFファイルを指定して、変換ボタンを押すだけ。
結果画面にはSWFとSwiffyコンテンツが並んで表示され、動作の違いを比べて見る事ができます。
さらにサポートしてない機能を使っていた場合はエラーも表示されます。

まだ公開されたばかりで使えない機能も多いですが、
変換後のコンテンツがHTMLファイルとして保存できますし、さらにそれらを現状のHTMLコンテンツと組み合わせて使える事から、
場合によっては使えるのかもしれないと思ったので、すこし調べてみました。
で、そのメモです。

検証ランタイムのバージョン

バージョン:3.6

Swiffyについて

・ActionScript2で記述する。
・変換可能なSWFのサイズは2MBまで
・外部load系全般は使えない。(loadMovieやloadVariablesなど)
・テキスト入力
・ムービークリップのフィルターの一部(ドロップシャドー、ブラー、グローはサポート)
・Swiffyコンテンツ上ではブラウザのフォーカスがSwiffyにとられる。HTML部分をどこかに入れないとページ全体のスクロールができない。→JavaScriptと連携すれば可。

TIPS

■ボタンへの記述
スクリプトはActionScript2ですので、onハンドラか、onClipEventを使用します。
onClipEventで使う場合コンテンツ全体に適応されてしまいますので、hitTest等を使って、ムービークリップがクリックされた事を調べる必要があります。

onClipEvent (load) {
  //ムービークリップが表示された時
}
onClipEvent (unload) {
  //非表示になった時
}
onClipEvent (enterFrame) {
  //フレーム毎の処理
}
//※フレーム毎の場合、こっちでもOK。
onEnterFrame = function(){
  //フレーム毎の処理
}
onClipEvent (mouseDown) {
  //マウスを押した時
}
onClipEvent (mouseUp) {
  //マウスを離した時
}
//ボタンの例
onClipEvent (mouseUp) {
  //ステージにあるムービークリップbtn1が、マウスのx,y座標に重なっていれば、ボタンを押した事にする。
  if (_root.btn1.hitTest(_root._xmouse, _root._ymouse, true)) {
      //ボタン1を押した処理
  }
 
  //ステージにあるムービークリップbtn2が、マウスのx,y座標に重なっていれば、ボタンを押した事にする。
  if (_root.btn2.hitTest(_root._xmouse, _root._ymouse, true)) {
      //ボタン2を押した処理
  }
 
}
 
onClipEvent (mouseMove) {
  //マウスを動かした時
}
onClipEvent (keyUp) {
  //キーボードを押した時
}
 
/*Dataイベントは非対応
onClipEvent (Data) {
//Dataイベントは非対応 そもそも外部読み込みが非対応なので。
}*/
 
on(press){
  //
}
 
mc.onPress = function(){
//
}

■Swiffyに初期変数を埋め込む
Swiffyの起動時に「setFlashVars」という関数を使用する事によって、初期変数を埋め込む事ができます。
・JavaScript側

<script type="text/javascript">// <![CDATA[
var stage = new swiffy.Stage(document.body, swiffyobject);
 
//「a」という変数に「123」という値を入れる。
stage.setFlashVars("a=123");
 
//複数の場合は&でつなげばOK!
//stage.setFlashVars("a=123&#038;b=789");
 
//Swiffyコンテンツを再生する。
stage.start();
// ]]></script>

■SwiffyからJavaScriptを呼び出す
SwiffyからHTMLに記述されたJavaScriptを呼び出す事ができます。Flash側から値も送信でき、さらに先ほどご紹介したsetFlashVarsを使用する事によってSwiffyコンテンツに値をJavaScriptから送る事ができます。
SWFとJavaScriptの連携については、こちらの記事に詳しい記述方法が掲載されています。
FlashからJavaScript関数を呼び出す

・JavaScript側

<script type="text/javascript">// <![CDATA[
var stage = new swiffy.Stage(document.body, swiffyobject);
 
//初期変数「a」という変数に「123」という値を入れる。
stage.setFlashVars("a=123");
 
//Flashから呼び出だす関数
function hoge(){
 //変数「a」に値「456」を代入する。
 stage.setFlashVars("a=456");
}
 
//Swiffyコンテンツを再生する。
stage.start();
// ]]></script>

・Flash側(Swiffy)

//getURLの中に javascript:void( + javascriptの関数 + ); と書けばOK!
onClipEvent(mouseDown){
	getURL("javascript:void(hoge())");
}

クリックすると、aという変数が123から456に変化したのを確認できると思います。

■ハマりがち
もうAS3に移行した方が殆どだと思いますので、忘れてるかもですので(自分は忘れてた、、。)
onClipEventはMC内部に記述するのと同じで、一階層下にある事になります。
ステージにmc1というムービークリップを配置して、_rootにある abc という変数にアクセスする場合、

_root(変数: abc がある)
└mc1

という構造になりますので、

//ルートに直接か、
_root.abc = 123;
//相対でアクセス
_parent.abc = 123;

と記述しなければいけません。

■所感
Flash側でアニメーションを見せて、動的な部分はJavaScript側で制御する、という方法であれば、使えるのではないでしょうか?例えば、ユーザーごとにリンク先が違う場合など。
静的なものであれば、Swiffyだけで十分ですしね。

今後はSwiffyはサーバーアプリとして進化する事を望みます。
サーバーアプリであれば、SWFを動的に生成し、その後、SwiffyサーバーでそのSWFを変換すればいいだけですしね!

6 Comments

  1. […] 詳しくは、以下のページをご覧ください。 ・Flash ProからHTML5書き出しを可能にするSwiffy拡張機能 | ClockMaker Blog ・SWIFFYを調べてみた。 […]

  2. 木村 晋也 より:

    はじめまして、木村 晋也と申します。
    いつも参考にさせてもらっています。

    私も個人的趣味でswiffyについていろいろと可能性を探っているのですが、

    ・Swiffyコンテンツ上ではブラウザのフォーカスがSwiffyにとられる。HTML部分をどこかに入れないとページ全体のスクロールができない。→JavaScriptと連携すれば可。

    ここで躓いています。もしよろしければご教授いただけないでしょうか?

  3. 岡田昇三 より:

    >木村さん

    はじめまして!

    予め、JavaScriptで、scrollTo()が入ったfunctionを設定しておいて、
    Swiffyから任意のタイミングで、呼び出せば、ウィンドウのコントロールができます!

    ■ウィンドウ名.scrollTo()・・・・・スクロール位置を指定座標へ移動する
    http://www.htmq.com/js/window_scrollto.shtml

  4. 木村 晋也 より:

    >岡田様

    さっそくのお返事ありがとうございます。
    なんとかfocusを消せないか試行錯誤していましたが、私には思いつかなく挫折しそうでした(涙)

    岡田様の考え方で下記に仮アップしたサイトのような現在のマウスのy座標を追うようにしたのですが、
    http://www.testcgi.2-d.jp/

    まずswiffy側(actionscript)でこのy座標の差異を出し、html(javascript)側でこの差異を利用しスクロールさせる
    という考え方であっていますでしょうか?

    また、もしお時間がありましたらactionscriptの記述、及び仮アップしたサイトソースへの追加スクリプトの記述を
    お教え頂けないでしょうか?なにぶん勉強中で私の方でも奮闘している最中ではあるのですが・・
    どうやっても上手くいきません・・・。

    宜しくお願い致します。

  5. 岡田昇三 より:

    >木村さん

    >まずswiffy側(actionscript)でこのy座標の差異を出し、html(javascript)側で
    >この差異を利用しスクロールさせる
    >という考え方であっていますでしょうか?

    はい、あってますです。
    マウスダウン時に座標をとって、マウスアップ時にまた座標をとって、その差異をHTML(JavaScript)に渡せば、その分スクロールできるので、大丈夫だと思います。

    ただしSwiffyのフォーカスを切る、という事はできないので、ご注意くださいませ。

  6. 木村 晋也 より:

    岡田様>

    なるほど。マウスダウンとマウスアップで座標を取るんですね!!

    もう少し奮闘してみます!!
    本当にありがとうございます。

Leave a Reply