Flash Professional:マルチプラットフォームを制覇しよう 第1回 今すぐ試そう!HTML5書き出し機能
Flash Professional CC は、HTML5 Canvasを使うことでHTML5書き出しをサポートしています。アップデーター(Ver.13.1 – 2013年12月4日リリース)で更に強化されたHTML5の書き出し機能について、サンプルファイルを使って手順を紹介していきます。
Flash Professional CC の体験版をダウンロード サンプルファイルをダウンロード
新しくなったHTML5書き出し
2013年12月4日、Flash Professional CCのアップデータが公開されました。Flash Professional CC 13.1では、HTML5コンテンツ開発に関する機能がさらに強化されています。
- 新しいドキュメント形式「HTML5 Canvas」を追加
- 従来より多くの描画/アニメーション機能をHTML5コンテンツ制作で利用可能に
- [アクション]パネルにJavaScriptを記述してコンテンツを制御することが可能に(CreateJSのコードヒントを表示可能)
- 作成したコンテンツをHTML5コンテンツ(HTML+JavaScript/CreateJS)として書き出し
などの機能追加や強化がおこなわれ、HTML5オーサリングツールとして充実しました。
※Flash Professional CC 13.1では[Toolkit for CreateJS]パネルがなくなっていますが、HTML5コンテンツへの書き出しにはCreateJSを利用しています。
手元のflaファイルですぐに試せる
HTML5コンテンツへ書き出しできるのはHTML5 Canvasドキュメント形式からのみですが、他の形式のflaファイルをHTML5 Canvasドキュメント形式に変換するコマンド「ドキュメント形式をAS3からHTML5 Canvasに変換」が用意されています。変換後、HTML5コンテンツへ書き出しできます。 その手順は、とても簡単です。
1. 変換したいflaファイルを開く。
2. メニューからコマンド「ドキュメント形式をAS3からHTML5 Canvasに変換」を選択する。
3. 変換したファイルの保存先を選択する。
4. パブリッシュしてHTML5コンテンツへ書き出す。
変換前後のサンプルを見る >
なお、変換する際、[アクション]パネルに記述してあるActionScriptはコメントアウトされ(つまり、ActionScriptの内容は無効に)、Toolkit for CreateJS用のスクリプト(「/*js */」コメントブロックを使用したJavaScript)はその部分が抜き出されます。
つまり、Toolkit for CreateJS用の部分のみが、そのまま動くように変換されるわけです。また、ActionScript部分も消去されずにコメントアウトされるだけなので、それを見ながら新たにJavaScriptを記述していく、といったワークフローもできますね。
また、Flash Professional CC 13.1では、利用しているCreateJSのバージョンが以前より上がっています。CreateJSでは、バージョンアップ時に記述形式が変更されることがあるので、変換後は一通り動作チェックをお忘れなく。