FlashからHTML5に変換するWallabyを試してみた
結局今年の目標を書けてないですね。
考えてはあるのだけど、宣言して実行するのが大事なのに・・・。
とりあえずおはようございます、たすくです。
今朝こんな記事を見かけたので。
そんなわけで、早速簡単なサンプルを作ってみた。
まず、Flashでこんなのを作りました。
で、噂のWallabyで変換してみる
特にエラーも出ず、普通に変換が終了した。
"flashToHTML5.fla"に対して、書き出されたファイルは、
でした。
サーバーにアップして確認すると、
お、iPhoneでも動いたー！
ただ、ソースとしてやってることはシンプルで、
・それぞれの静止テキストをsvg（Scalable Vector Graphics）形式に変換し、画像としてHTMLに書き出す。
・CSS3でそれぞれの画像をCSS3の-webkit-transformあたりでアニメーションを表現
・jQueryも一緒に使ってJSで軽く制御（主にループ周り？）
こんなもんです。
うーーーん、このコーディングでHTML5と言っていいのかは難しいところだし、
まだまだこのツールを信頼して実用化するのは厳しいですね。
こんな風に書くのかー、と参考にはできるかもしれないけど。
でも、Adobeの開発者がこういうのを積極的に作って公開する、という姿勢はすごくいいので、
これからの追加開発に期待したいですね！
【追記】
手元にあった、ピグが走るflaも同様に変換して動かしてみた。
PCのChromeでは相当スムーズに動いたけど、iPhone3GSは処理速度的に厳しいっぽい・・・。
この辺はiPhoneの進化待ちってステータスですかね。確実に処理速度は上がっていくだろうし・・・。
まぁ、でも動いただけでテンション上がる上がる！笑
でも、やっぱりベクトルを1つずつsvgに変換して、それぞれdivでくくって同じように動かすんですね。
うーん、canvasとかでやってくれるわけではないのか・・・・。
考えてはあるのだけど、宣言して実行するのが大事なのに・・・。
とりあえずおはようございます、たすくです。
今朝こんな記事を見かけたので。
アドビ、FlashをHTML5に変換するツール「Wallaby」発表
Adobe Labsは米国時間3月7日、FlashをHTML5に変換する新しい無償ツール「Wallaby」を発表した。
AdobeのMAX 2010カンファレンスで最初に披露された同ツールは現在のところ、変換はできるが荒削りな部分があるとAdobe Flash Professionalシニア製品マネージャーを務めるTom Barclay氏は述べた。「HTML5は、バナー広告やウェブパブリッシングにおいて重要な技術」と同氏は述べるとともに、Flashは、特に複雑な双方向性が必要なゲームにおいて開発者らによって多用されているということを強調した。
現状のWallabyでは、FLA形式のファイルを選択して変換すると、そのFlashファイルがHTML5、JavaScript、CSSに変換される。ほとんどの描画要素、塗りつぶし、シェイプトゥイーン、モーショントゥイーン、シンボル名、インスタンス名などを含む、ほとんどのFlashファイルが変換されるとBarclay氏は述べた。Adobeの「Air」プラットフォーム上に構築されているため、WindowsとMacのどちらを使用する開発者もこのツールを使用することができる。
組み込まれたロギングツールにより、どの要素が変換されなかったかが通知される。現在のところ、変換されないのはオーディオタグやビデオタグなどである。Adobe Systemsは、今後HTML5のより複雑な部分に対するサポートを追加するかどうか決定する前に、開発者らからのフィードバックを待っていると Barclay氏は述べた。「開発者は、変換後にJQueryやJavaScriptを使用して双方向性を加えることができる」と同氏は説明した。また、同氏は、Wallabyの最初の目標について、Appleが「iOS」でFlashをサポートする予定がないことから、「iPhone」「iPad」「iPod touch」におけるバナー広告の開発をサポートすることであると付け加えた。ただし、Wallabyが出力するHTML5は、任意のWebKitベースのモバイルブラウザに対応する予定だと同氏は述べた（AndroidのデフォルトブラウザもWebKitを基盤としている）。
(http://japan.cnet.com/news/service/20427139/)
そんなわけで、早速簡単なサンプルを作ってみた。
まず、Flashでこんなのを作りました。
で、噂のWallabyで変換してみる
特にエラーも出ず、普通に変換が終了した。
"flashToHTML5.fla"に対して、書き出されたファイルは、
・flashToHTML5.html
・flashToHTML5.css
・flashToHTML5.js
・jquery-1.4.2.js
・flashToHTML5_assetsフォルダ
└・svgblock_0.svg
・svgblock_1.svg
・svgblock_2.svg
でした。
サーバーにアップして確認すると、
お、iPhoneでも動いたー！
ただ、ソースとしてやってることはシンプルで、
・それぞれの静止テキストをsvg（Scalable Vector Graphics）形式に変換し、画像としてHTMLに書き出す。
・CSS3でそれぞれの画像をCSS3の-webkit-transformあたりでアニメーションを表現
・jQueryも一緒に使ってJSで軽く制御（主にループ周り？）
こんなもんです。
うーーーん、このコーディングでHTML5と言っていいのかは難しいところだし、
まだまだこのツールを信頼して実用化するのは厳しいですね。
こんな風に書くのかー、と参考にはできるかもしれないけど。
でも、Adobeの開発者がこういうのを積極的に作って公開する、という姿勢はすごくいいので、
これからの追加開発に期待したいですね！
【追記】
手元にあった、ピグが走るflaも同様に変換して動かしてみた。
PCのChromeでは相当スムーズに動いたけど、iPhone3GSは処理速度的に厳しいっぽい・・・。
この辺はiPhoneの進化待ちってステータスですかね。確実に処理速度は上がっていくだろうし・・・。
まぁ、でも動いただけでテンション上がる上がる！笑
でも、やっぱりベクトルを1つずつsvgに変換して、それぞれdivでくくって同じように動かすんですね。
うーん、canvasとかでやってくれるわけではないのか・・・・。