HTML5 Canvasドキュメントを作成してパブリッシュする方法

Hemanth Sharmaです Adobe Flash Pro CCの新機能 HTML5 Canvasのコンテンツの書き出しと作成をご紹介します HTML5 CanvasコンテンツはFlash Pro CCからネイティブで オーサリング、パブリッシュできるようになりました 使い慣れたツール、機能、タイムラインを使用して HTML5コンテンツを作成できます またFlash ProでJavaScriptをネイティブに記述可能で コードヒントやシンタックスの色付け機能を利用して JavaScriptを快適に記述できます JavaScriptでHTML5コンテンツを作成できるだけでなく 既存のActionScriptコンテンツをHTML5 Canvasに 変換することもできます このゲーム「Hungry Hero」は ActionScriptで作成しました ゲーム冒頭部分にあたる 2画面の基本的なコンテンツです 当初SWFでパブリッシュするためFLAファイルを作成しました このファイルをHTML5 Canvasドキュメントに変換する方法は2つあり FLAファイルからすべてのレイヤーをHTML5 Canvasにコピーするか コマンドメニューのJSFLスクリプトを使用して コピーします ここではJSFLスクリプトを使用します 「AS3ドキュメント形式からHTML5 Canvasに変換」をクリックします これで元のFlashドキュメントと同等のコンテンツを持つ 新しいFLAドキュメントが作成されます 新規ドキュメントとして保存すると このように、プロパティパネルに HTML5 Canvasドキュメントと表示されます パブリッシュ設定も JavaScriptまたはHTMLと変更されています この画面にあるように、Flash Pro CCはCreateJSオープンソースライブラリを使用して HTML5 Canvasコンテンツをサポートします HTML5コンテンツを書き出すフォルダーを 指定することもできます これでゲームが変換されました アクションパネルを開くと ActionScript 3のコード全体がコメント化されています 同じ内容をJavaScriptで記述します CreateJSライブラリを使用して簡単に記述できます JavaScriptで 60番目のフレームにCreateJSシンタックスを使用し stopをthis.stopと書き換えます 次にボタンのクリックイベントのイベントリスナーを2つ追加します 「再生」ボタン用に、this.playBtn.addEventListener ("click", playClick.bind(this));とします これをコピー＆ペーストして 「概要」ボタン用にインスタンス名をaboutBtnに変更し ここを fl_clickToGoToWebPageに変更します 2分程ですべてのコードを書き換えられました ではパブリッシュします 制御メニューでプレビューを選択すると このように HTML5 Canvas内のブラウザーでゲームが実行されます コード化したマウス操作もすべて機能しています 既存プロジェクトの移行に日数はかかりません 数分から数時間で完了します ここで、AS3をHTML5 Canvasに変換するときに 裏で実行されることを説明します Flash Pro CCが新規HTML5 Canvasドキュメントを作成し レイヤー、シンボル、ライブラリアイテムを HTML5 Canvasにコピーします サポートされない機能、サブ機能、機能プロパティには デフォルトを適用し シーンごとにFLAファイルを作成します HTML5 Canvasドキュメントをパブリッシュすると Flash ProはCanvas APIを使用して ステージ上のオブジェクトをCanvasの同等のオブジェクトに変換します AS3をHTML5 Canvasに変換するときには 出力パネルの警告をよく読んでください コンテンツの変換中に行われる変更について説明しています ファイルシステムを見ると Canvasの.htmlファイルが作成されています Flash Pro CCが先ほどのJavaScriptコードに従って作成した CreateJSコードを含む.jsファイルもあります ゲームのビジュアルアセットを含む画像フォルダーもあります パブリッシュ設定で指定すると、サウンドフォルダーも作成されます HTML5 Canvasのコンテンツをいちから作成することもできます ファイル／新規と選択し 「種類」で「HTML5 Canvas」を選択します Flashの一部の機能は、Canvas APIに同等の機能を持たないため HTML5 Canvasドキュメントで サポートされないものがあります このうち、既存コンテンツの変換に 影響するのは Flash AS3からHTML5 Canvasにレイヤーやシンボルをコピーする際 サポートされないコンテンツは削除されるかデフォルトに変換されます ワークスペースの表示が変わり サポートされるツールのみ表示されます 例えば、複数ドキュメントの操作中 サポートされないツールやオプションを選択したままFlash AS3から HTML5 Canvasドキュメントに切り替えると そのドキュメントタイプではサポートされない ツールであると示されます ActionScriptコンポーネントが削除され、AS3のコードがコメント化されます HTML5 Canvasへの変換時には AS3の3D変形が削除されます オーバーレイのブレンドモードがデフォルトの「標準」に設定されます 点線は実線になり、ビデオは削除されます HTML5 Canvasドキュメントで複数シーンがサポートされません HTML5の作成についてご紹介しました 皆さんもさっそくHTML5コンテンツの制作を始めましょう ありがとうございました