検索
連載

Toolkit for CreateJSによるFlashのHTML5書き出し：無料でCreative Cloudを使い倒せ（10）（2/2 ページ）

Toolkit for CreateJSを使えば、FlashのHTML5書き出しを容易に行える。書き出された後のHTML5はEdge Code CCで編集しよう。

[廣畑大雅，taiga.jp, クラスメソッド株式会社] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

書き出したHTML＋JavaScriptをEdge Code CCで編集

　書き出したHTML＋JavaScriptを「Adobe Edge Code CC」で編集します。Edge Code CCを起動したら「File」メニュー → 「Open Folder…」を選択します（図7）。


図7：「File」メニュー → 「Open Folder…」

　Toolkit for CreateJSでのパブリッシュ設定で指定した出力先フォルダを選択します。表示されたHTML、JavaScriptをそれぞれ選択すると下記のような状態になります（図8）。


図8：Edge Code CCにToolkit for CreateJSが書き出したフォルダを参照させる

Edge Code CCでJavaScriptのソースを見る

　Flashのシンボルがどのように書き出されたかを知るためにEdge Code CCは大変便利です。実際に書き出されたHTML内のJavaScriptのコードに着目してみます。

exportRoot = new lib.≪FLAファイル名≫();

　HTMLを書き出した場合、上記のようなコードが見つかると思いますが、Edge Code CC上でFLAファイル名上でマウスを右クリックすると、メニューが表示され、「Quick Edit」を選択することで、表示されたHTML内に書き出された別のJSファイルが展開されることに気付くはずです（図9、10）。


図9：Edge Code CCのQuick Edit機能

図10：別ファイルが真下に展開される

　この機能のすごい所は、別ソースファイルを展開したときに該当ブロックのみ表示するという点です。一見複雑に見えるJavaScriptのソースもEdge Code CCの機能を使えば、内部構造が比較的簡単に理解でき、さらにライブプレビュー機能を利用することによって簡単にリモートデバッグすることができます。後は、書き出されたJavaScriptのソースを編集すれば完成です（図11）。

　どのように編集したかはサンプルをご覧ください。

　皆さんも一度、Flash Professional CCの体験版をダウンロードして、試してみてはいかがでしょうか。


図11：Edge Code CC のライブプレビュー機能によるリモートデバッグ

廣畑大雅 プロフィール

taiga.jp

フリーランス エンジニア／アーキテクト

クラスメソッド株式会社 プリンシパル

Adobe Community Professional


「無料でCreative Cloudを使い倒せ」バックナンバー

Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る