AS3 ドキュメントを Canvas ドキュメントに変換する際の注意点

先週公開された Flash Profesional CC 13.1 では、HTML Canvas コンテンツ作成のワークフローが変更されました。

従来は、とりあえず Fla ファイルを編集したら、最後のパブリッシュの手順次第で出力フォーマットを選ぶというやり方でしたが、これが、新しく追加された Canvas 専用のドキュメント形式からのみ Canvas をターゲットにできる、という仕様に変更されています。

そうすると、これまで CreateJS 用に制作していた Fla ファイルからは、そのまま HTML コンテンツをパブリッシュできません。わざわざ新しい Canvas 用のドキュメントをつくって、そこにアセットを 1 つ 1 つコピーしたりインポートする作業が必要です。

さすがにそれは面倒、ということで、Fla ファイルのドキュメント形式を 「AS3 用から Canvas 用に変換」 するコマンドが用意されています。既存の Fla ファイルを開いて実行するだけで、HTML にパブリッシュする準備が整う便利ものです。

コマンドの実行は、「コマンド」 → 「ドキュメント形式を AS3 から HTML5 Canvas に変換」 です。ダイアログが表示されるので、変換したファイルの保存先を指定します。指定せずに、キャンセルを押してウインドウを閉じてしまうと変換が行われないのでご注意ください。

変換コマンドの動作

ドキュメント形式を変換するコマンドは、JSFL を使って記述されています。

コマンドを起動すると、以下のような動作が行われます。

  • 新しい HTML5 Canvas ドキュメントを作成
  • 全てのレイヤー、シンボル、ライブラリのアセットを新しいドキュメントにコピー
  • タイムラインスクリプトをコメントアウト
  • タイムラインの js コメントブロックに記述されたコードを抜き出し実行可能に
  • シーンの数だけこれらの動作を繰り返す (Canvas ドキュメントは複数のシーンをサポートしないため)

以上で、スクリプトは別として、同じコンテンツを持つ Canvas 形式のドキュメントが生成されて、まずはめでたしとなります。

ところが、Canvas 用ドキュメントには、Canvas API がサポートしない機能は持たないということになっているようで、そのため、コピーの際に削除や値の変更が行われる場合があります。

勝手に変更されるのはやな感じではありますが、パブリッシュ時に黙って無視されるよりはましな気もします。変換中に変更が行われた場合には、出力パネルに情報が表示されます。それを読めば、一通りの変更が把握できます。

サポートされない機能

Canvas ドキュメントでサポートされない機能の具体的な情報は、以下のページにまとめられています。 (今のところ英語のみ)

Unsupported features | HTML5 Canvas

このページによると、サポートされない機能に対する変換時の対応は、以下の 2 種類です。

  • 削除:
    表現や機能自体がサポートされないもの、例) 3D 変換、コンポーネント、ビデオなど
  • デフォルト値に変更:
    機能は存在するが属性が存在しない場合、例) 線のスタイル: 点線 → 実線

加えて、上で書いたように、タイムラインに記述されたスクリプトはコメントアウトされます。 (代わりに js コメントブロック内に JavaScript を書いておけば抜き出してくれます)

また、これらの制限はアセットの読み込み時にも適用されます。PSD を Canvas ドキュメントに読み込んだら効果がなくなっていた、ということが起きるようです。

 

トラックバック(0)

トラックバックURL: http://cuaoar.jp/mt4/mt-tb.cgi/488

コメントする

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261