Adobe Flash Professional Team Blog「Behind the scenes of HTML5 Canvas rendering performance」に、Flash Professional CCのHTML5 Canvasドキュメントからの書き出しを最適化するために役立つ無償のJSFLツールが2本紹介されました。この記事とダウンロードページの情報をかいつまんでご説明します。

01 HTML5 Canvas Size Report

Flashドキュメントの[パブリッシュ設定]では、[サイズレポートを作成]オプションでSWFファイルに書き出される各要素のデータサイズが一覧表示されます(図001)。

図001■[パブリッシュ設定]ダイアログボックスの[サイズレポートを作成]オプション

JSFLツールHTML5 Canvas Size Reportは、HTML5 Canvasドキュメントからパブリッシュされるデータのサイズを[出力]パネルに表示します(図002)。書き出されるライブラリ項目や画像やサウンドなどの外部メディアのデータサイズは、つぎのようなかたちで[出力]されます。それぞれの項目とファイルサイズ、パッケージに占める大きさなどを確かめれば、HTML5 Canvasドキュメントのパブリッシュの最適化に役立ちます。

• SUMMARY
  • type
  • size
• JAVASCRIPT LIBRARY ASSETS
  • name
  • size
  • percent
• EXTERNAL MEDIA FILES

図002■[出力]パネルに表示されるHTML5 Canvas書き出しのサイズレポート

02 Filter Finder

JSFLツールFilter Finderは、FLAファイルの中で使われている[フィルター]や[カラー効果](明度や着色など)を調べることができます(図003)。これらの効果は、コンテンツのパフォーマンスに大きく影響します。けれど、シンボルが多かったり、さらに入れ子になっていたり、レイヤーやフレームの数が増えると、効果の使われている場所を探すのはむずかしくなります。

図003■[プロパティ]パネルの[カラー効果]と[フィルター]

Filter Finderは、[フィルター]または[カラー効果]が使われている場所の情報をつぎのような項目に分けて[出力]します。シンボルとタイムラインだけでなく、レイヤーやフレームも明らかにしたうえで、[フィルター]と[カラー効果]のどちらが使われているのかを示します(図004)。なお、このツールはHTML CanvasだけでなくFlashドキュメントでも利用できます。

• Symbol
• Timeline
• Layer
• Frame
• Filters
• Colorized

図004■[出力]パネルに表示される[フィルター]と[カラー効果]の情報

03 ツールの使い方

JSFLツールはダウンロードして、Flash Professionalの[コマンド]メニューから実行します。

1. 前掲ブログ記事またはツールのダウンロードページからファイルをダウンロード。
2. JSFLファイルをわかりやすい場所に保存。
3. Flash Professional CCの[コマンド]メニューから[コマンドの実行]を選び、ツールのJSFLを選ぶ(「コマンドを実行する」参照)。

作成者: 野中文雄
作成日: 2015年10月8日