Flash Professional:マルチプラットフォームを制覇しよう 第1回 今すぐ試そう!HTML5書き出し機能

BY 公開

Flash Professional CC:今すぐ試してほしい! 新しい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オーサリングツールとして充実しました。

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コンテンツへ書き出す。

ドキュメント形式をAS3からHTML5 Canvasに変換

サンプル

変換前後のサンプルを見る >
なお、変換する際、[アクション]パネルに記述してあるActionScriptはコメントアウトされ(つまり、ActionScriptの内容は無効に)、Toolkit for CreateJS用のスクリプト(「/*js */」コメントブロックを使用したJavaScript)はその部分が抜き出されます。

Toolkit for CreateJS用のスクリプト(「/*js */」コメントブロックを使用したJavaScript)はその部分が抜き出される

つまり、Toolkit for CreateJS用の部分のみが、そのまま動くように変換されるわけです。また、ActionScript部分も消去されずにコメントアウトされるだけなので、それを見ながら新たにJavaScriptを記述していく、といったワークフローもできますね。

また、Flash Professional CC 13.1では、利用しているCreateJSのバージョンが以前より上がっています。CreateJSでは、バージョンアップ時に記述形式が変更されることがあるので、変換後は一通り動作チェックをお忘れなく。

  AUTHOR

吉岡 梅

シルエロ / 富士山麓で活動しているフリーランスの開発者/インストラクター。Flash・ActionScriptに関した記事・書籍の執筆も行っている。著書「Flash Professional CS5スーパートレーニング」「標準ActionScript3.0入門」など。