- 2011年02月03日 (木)
- Tweet
HTML5出力可能なFlash CS5拡張機能を作ってみた
2011年1月30日に開催された「東京てら子」というFlashの勉強会で発表した内容ですが、HTML5出力可能な Flash CS5拡張ツールを作ってみたので紹介します。
まずはこちらのビデオをご覧ください。実際に動作している様子をビデオに録画したものです。
タイトルのとおり、Adobe Flash Professional CS5 から HTML5 コンテンツを書き出すという拡張機能で、サイトのトップページで使うようなシンプルなムービー制作に適したツールとなっています。対象ブラウザですがメジャーなモダンブラウザだけではなく、Internet Explorer 6-8 にも対応しています。
生成手順は次のとおり
( ↑ ) Flashの編集画面
( ↑ ) 拡張機能を［コマンド］から呼び出す。すると変換が自動的に行われる。
( ↑ ) 変換されたJavaScriptコードを生成、これをHTMLソースに貼り付ける。
( ↑ ) ブラウザのプレビュー、右クリックしてもFlash Playerでないことがわかる。
( ↑ ) Internet Explorerでも動く。
( ↑ ) iPad でも動く。
目標は現時点でも実戦投入できるレベル
Adobe も「Edge」というプロジェクト名で HTML5 出力可能なツールを開発しているとのことですが、現行バージョンの Flash CS5 でも工夫すればできるのでと思い作ってみました。Edge が製品レベルになるのはまだ先だと思うので、早く実践で使いたい場合にはいいかもしれません。
東京てら子でも発表したとおり開発途中のもので制限事項はありますが、上手に使えばIE6からiPadまでFlashアニメーションを全ての環境で動かすことができます。
HTML5変換ツールの需要
ちなみに、作っては見たもののこのツールがの需要があるのかまったく未知数で、開発を進めようか迷っていたりします。もし興味があるようでしたら、この記事をはてなブックマークするか、ツイートしてもらえるとありがたいです。まだツールは公開していないのですが、ブックマークが集まって需要があると判断できたら何かしらの形で公開します。
追記 (2014/01/26)
現在はFlash Pro CC 13.1にCreateJSベースの「HTML5 Canvas ドキュメント」という形で、タイムラインアニメーションをHTML5として書き出す機能として搭載されています。HTML5コンテンツを作成する場合は「HTML5 Canvas ドキュメント」を利用するといいでしょう。
2011年02月04日(金) 14:00
[…] HTML5出力可能なFlash CS5拡張機能を作ってみた | ClockMaker Blog […]
2011年02月04日(金) 22:46
失礼を承知の上で申し上げます。
率直にいってこのHTML5ツールに全く魅力を感じません。
このHTML5の記事をもって、Clock Maker様のブログ自体のブックマークを外しました。
ブクマ数を-1とだけカウントして頂ければ幸いです。
それでは失礼します。
2011年02月06日(日) 01:01
確かに、Flashを使えない環境が、モバイル、iPhone、iPad、Androidの一部、という現状では使いどころは少ないかもしれませんね、、
逆にターゲットを絞って、例えばJSではなくCSSのtransitionに変換するようなものだとiPhone、iPad対応という面で、よりニーズがあるのかと思います
2011年02月07日(月) 14:50
＞工藤さん
ご意見ありがとうございます。
＞柳生さん
お久しぶりです！ 確かにターゲットを絞ってCSS3などに変換するのはいいアイデアですね(CSS3 transitionのほうがiOSでは軽快という認識です)。
・どの環境にも同一のJSコードを出力する
・環境に応じて最適化したJSコードを実行する
(iOSではCSS3、IEではfilterやjQueryなど)
・Flash(SWF)を優先して、代替用(フォールバック用)にHTML5版を用意する
・そもそもjQueryではなくuupaa.jsのほうがいいのかも
と、いろいろ方針を考えまして、試行錯誤しているところです。
続編記事で報告する機会がありましたら、またご意見くださいませ。
2011年02月23日(水) 10:57
これはめちゃめちゃ素晴らしいですね！！
これからスマートフォンのコンテンツが確実に増えて行く中で、Flashの様に手軽にアニメーションを作るツールの需要も確実に増えて行くはずだと思います。という意味でも先駆的なのではないでしょうか。
iOSに絞るというのはいいかもしれませんね。AndroidはflaファイルからそのままswfにしてiOSはこの拡張機能を使ってCSS3を吐き出す、みたいな感じで。
むしろ今すぐ使わせて頂きたいです！
2011年06月06日(月) 20:05
驚きです。
いつ頃アップされる予定でしょうか？
今すぐにでも使いたいです。
2011年06月30日(木) 10:39
既存のモバイル用Flashを、こういったツールを使えばiPhoneやAndroid旧機種でも問題なく見られると思うと、夢みたいなツールですね。
今ちょうど、そういう仕事がありまして、切実に欲しかったりしますｗｗ
この記事を見てclockmakerさんをブクマしました。
これからも楽しみにしています。
Edgeもまだ開発中なのでしょうか・・？
こちらも合わせて楽しみです。