Flash CS6のHTML5サポート
Category
Other
iPhoneやiPadでのWebサイト制作が必須になりつつある現在、Flashでのコンテンツ制作は敬遠されがちな傾向にあります。これは、「iPhoneやiPadでFlashは表示できない」「SEOに問題がある」「ある程度のものならJavascriptで代用できてしまう」等の理由からでしょう。
ですが、ゲーム関連のコンテンツでは、HTML5やJavascriptではまだまだできることに限りがありますので、Flashで作成されたコンテンツの方がより精度は高いと言えます。その一方で、コーポレイトサイトや各種ポータルサイト等に限っていえば、Webサイト上に表示させる動きのあるコンテンツとしては、Javascriptで実装できる表現でも十分な気がします。
Flashクリエイターの皆さんにとっては、"慣れ親しんだFlashベースのオーサリングツールを使ってコンテンツ制作ができる"といった点が重要なのではないでしょうか。
先日、AdobeがCS6をリリースしましたが、Flashの新たな試みとして"HTML5のサポート機能"が実装されています。今回は、こちらに関して記事で取り上げてみたいと思います。
[2012.6.30追記]
ちなみに、Android OSに関しても「Flashの提供を停止する」とAdobeが発表しました。
8/15以降は、Flash Playerの新規ダウンロード・インストールが出来なくなります。
インストール済みの端末は、セキュリティ・バグ関連のアップデート対応のみ行うようです。
Keyword:Flash CS6,Toolkit for CreateJS,CreateJS
Flash CS6に実装されたHTML5のサポート機能
これはどいことかというと、Flash CS6ユーザーが無償で利用できる拡張機能”Toolkit for CreateJS”を使って、オープンソースであるCreateJSフレームワークでアセットやアニメーションをJavaScriptに書き出し生成することで、HTML5に対応したモバイルデバイスやデスクトップPCのブラウザで実行可能なコンテンツをFlashで生成しようというものです。
多数のWebクリエイターがFlashというオーサリングツールに慣れ親しんでいる中、”Toolkit for CreateJS”を使用することで、ベクトル・ビットマップ・クラシックトゥイーン・サウンド等、Flashの主要なアニメーションとイラストレーション機能を利用し、それらをFlashを介してHTMLとJavascriptに書き出すことが出来ます。
現状では、バナーやクラシックトゥイーンを使った簡単なアニメーション出力に限定されていますが、四半期ごとにアップデートされる予定だそうですので、徐々に対応する機能も増えていくのではないでしょうか。
[参考サイト]
・Adobe Flash Professional CS6
・Flash Professional CS6 -Toolkit for CreateJS-
CreateJSとは?
⇒ CreateJS 公式サイト
CreateJSとは、HTML5を介してリッチなインタラクティブコンテンツ制作をサポートするJavaScriptライブラリとツールを統合したもので、以下5つのツールに分かれています。
EaselJS -HTML5のCanvasと豊富なグラフィクスを提供するライブラリ-
- リッチなHTML5コンテンツ
- Canvasを利用した表示オブジェクト
- オブジェクトのネスティング
- マウスインタラクション
- 開発者に分りやすいAPIを提供
TweenJS -Javascriptで使用するためのシンプルなトゥイーンライブラリ-
- イージングと遅延
- 数値や数値以外(px等の単位)での指定
- 複数トゥイーンのシーケンス化
- CSSプロパティのサポート
- シンプルかつパワフルなAPI
SoundJS -オーディオ再生のためのAPIを提供するライブラリ-
- 互換性の確保
- フォールバックの優先順位
- Adobe Edgeのサポート
- テスト機能の提供
PreloadJS -画像・音声・JavaScript等のデータやコンテンツのプリロード用ライブラリ-
- データや素材のプリロード
- XHR2を利用したプログレスイベントの管理
- Tag Loadingへのフォールバック(XHR2利用不可の場合)
- 複数キューの管理
- キューの一時停止と再開
ZoëJS -SWFアニメーションをスプライトシートに変換するAIRアプリケーション-
- SWFをスプライトシートへ変換
- フレームの再利用設定
- 画像サイズの自動検出
- フレームラベルの保持
- ネストされたグラフィックスのサポート
関連記事(※当記事と関連性が高いと思われる記事)
Android端末でFlashを表示
2013/12/31
HTML5導入前に覚えておきたいこと
2011/12/22
HTML5のバリデータチェック時に覚えておきたいこと
2012/03/25
HTML5のplaceholder属性をInternet Explorerで使う
2012/05/01
HTML5.jsとIE9.js
2012/03/09
おすすめ書籍・商品(※当記事と関連性が高いと思われる書籍・商品)