Adobe「Wallaby」でFlashをHTML5に変換!

【こちらの記事は、約5分程でお読みいただけます。】

皆さん、こんにちは！

本日ご紹介するのは、
2011年3月8日、Adobe社がFlashの一部をHTML5 に変換するツール
としてリリースした「Wallaby」（プレビュー版）です！

早速使ってみることにしました！！

※現時点では、変換が可能なのは、オブジェクトとアニメーションのみ。
残念ながら、まだActionScriptには対応していないようです。

では、実際に変換作業を見てみましょう＾＾

まず、次のようなFlashアニメーションがあります。

今回はこれをHTML化してみます。

それでは、Adobe Labsから「Wallaby」をダウンロードします。

※Adobe Labsとは
Adobe社の新しい技術、テクノロジ、製品を体験し
評価することのできるフォーラムです。

Wallabyのダウンロードページはこちら↓
http://labs.adobe.com/technologies/wallaby/
 

その後、インストールをします。
設定は、必要な場合のみ変更しましょう。

起動したあと、次の画面が初めに表示されます。
Browseボタンで変換したいファイルを指定します。

その後、Convertボタンで変換が開始され。
『successful』と表示されれば完了です。

変換が完了すると、
次のように「○○.html」ファイル以外に「○○_assets」、
「○○.css」、「○○.js」、「jquery-1.4.2.js」ファイルが同時に作成されます。

このファイル群を全てサーバーにアップロードしたものがこちらです。

FlashからHTMLへ変換したファイル

どうでしょうか・・・？？
おそらく見られない方が多いかと思います。

このツールのターゲットは「iOS（アイ・オーエス）」とされており、
ウェブブラウザの中でも「Google Chrome」または 「Safari」
でしか再生できません！

※「iOS（アイ・オーエス）とは、
iPhone、iPod touch、iPadに搭載されている
オペレーティングシステムのことを指します。

しかし、iOS搭載の「iPhone」「iPod touch」で閲覧すると
ボタン部分は、ActionScriptを使用しているので反応しないものの、
アニメーションは、オリジナルと比べても遜色の無い動きが見られます！

このツールのお陰でiOS等のFlash非対応環境でも、
Flash作成環境で作成したアニメーションを表示できるようになりますね。

対応ブラウザや挙動など、修正点は数多くありますので、
これからのアップデートに期待しましょう！
皆さんもぜひ、インストールして使ってみてくださいね！

--------------------------------------------------------------------------------

Webサイトには欠かせない、Flash/ActionScript3.0を、
KENスクールで一から学習していきませんか？？

⇒【Flash / ActionScript3.0講座一覧】
キーワードは「徹底的に書く」。
一つずつ確実にものにするために、
現役プログラマー＆Web講師が、
実践でそのまま使えるスクリプトの書き方を
マンツーマンで伝授していきます。

本日の更新者：
パソコンスクール KENスクール Web/DTPデザインコース
インストラクター 野村