Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ

Canvas は HTML5 の新しいエレメントであり、グラフィック、グラフ、イメージおよびアニメーションの動的な生成およびレンダリングを可能にする API を提供します。2 次元描画機能を提供する HTML5 用の Canvas API の存在により、HTML5 プラットフォームが強化されます。この機能は、ほとんどの最新のオペレーティングシステムおよびブラウザーでサポートされています。

基本的に、Canvas はビットマップレンダリングエンジンであり、描画は最終的なものなので、リサイズできません。さらに、Canvas で描画されたオブジェクトは、Web ページの DOM の一部ではありません。

Web ページ内では、<Canvas> タグを使用して Canvas エレメントを追加できます。このエレメントは、インタラクティブ機能を構築するために、JavaScript を使用して拡張できます。詳しくは、このリンクを参照してください。

新しい HTML5 Canvas ドキュメントタイプ

Animate では、リッチなアートワーク、グラフィック、アニメーションなどを使用して、HTML5 Canvas ドキュメントを作成できます。Animate に、リッチでインタラクティブな HTML5 コンテンツを作成するためのネイティブサポートを提供する、新しいドキュメントタイプ（HTML5 Canvas）が追加されています。そのため、従来形式の Animate のタイムライン、ワークスペースおよびツールを使用してコンテンツを作成しながらも、HTML5 出力を生成できます。シンプルに数回クリックするだけで、HTML5 Canvas ドキュメントを作成し、完全な機能を持つ出力を生成する準備が整います。この目的のために、Animate 内に、HTML5 出力を生成するためのドキュメントおよびパブリッシュオプションがあります。

Animate は CreateJS と統合され、これにより、HTML5 を使用したオープンな Web 技術を基盤にして、インタラクティブなリッチコンテンツを実現します。Animate は、ステージ上に作成したコンテンツ（ビットマップ、ベクター、シェイプ、サウンド、トゥイーンなど）用の HTML および JavaScript を生成します。出力は、HTML5 Canvas をサポートするすべてのデバイスやブラウザーで実行できます。

Animate と Canvas API

Animate は Canvas API を活用して HTML5 にパブリッシュします。Animate は、ステージ上に作成されたオブジェクトを Canvas の対応する要素にシームレスに変換します。Canvas 内の API を使用した Animate 機能の 1 対 1 のマッピングにより、Animate は、複雑なコンテンツを HTML5 にパブリッシュできます。

HTML5 Canvas ドキュメントの作成

HTML5 Canvas ドキュメントを作成するには、次の操作をおこないます。

1. ファイル／新規を選択して、新規ドキュメントダイアログを表示します。画面上部の「詳細設定」タブを選択してから、HTML5 Canvas オプションをクリックします。これにより、HTML5 出力を作成するために変更されたパブリッシュ設定で新しい FLA が開きます。

これで、Animate 内のツールを使用して HTML5 コンテンツを作成できるようになりました。HTML5 Canvas ドキュメントの作業を始めると、サポートされず無効になっている機能およびツールがあることに気づきます。これは、HTML5 内の Canvas エレメントによってサポートされる機能が、Animate でもサポートされるからです。例えば、3D 変形、点線、ベベル効果はサポートされていません。

HTML5 Canvas ドキュメントでのインタラクティブ機能の追加

Animate では、CreateJS ライブラリを使用して HTML5 コンテンツをパブリッシュします。 CreateJS は、モジュール式ライブラリおよびツールのスイートで、HTML5 を使用したオープンな Web 技術の上にインタラクティブなリッチコンテンツを実現します。CreateJS スイートは、EaselJS、TweenJS、SoundJS および PreloadJS により構成されます。CreateJS は、これらのそれぞれのライブラリを使用して、ステージ上に作成されたコンテンツを HTML5 に変換し、HTML および JavaScript 出力ファイルを生成します。また、この JavaScript ファイルを編集することで、コンテンツを拡張できます。

ただし、Animate で HTML5 Canvas 向けに作成したステージ上のオブジェクトにインタラクティブ機能を追加できます。つまり、Animate 内より、ステージ上の個々のオブジェクトに JavaScript コードを実際に追加して、オーサリング時にプレビューすることが可能です。Animate では JavaScript をネイティブでサポートし、コードエディター内に便利な機能も用意されています。そのため、プログラマーのワークフロー効率が向上します。

タイムライン上の個々のフレームおよびキーフレームを選択して、コンテンツにインタラクティブ機能を追加できます。HTML5 Canvas ドキュメントの場合は、JavaScript を使用してインタラクティブ機能を追加できます。JavaScript コードの記述方法について詳しくは、このリンクを参照してください。

JavaScript コードはアクションパネルで直接記述できます。JavaScript コードの記述時には次の機能がサポートされます。

JavaScript コードを間違えずにすばやく挿入したり編集したりすることができます。アクションパネルに文字を入力していくと、その入力内容を補完すると思われる候補のリストが表示されます。

また、Animate は、HTML5 Canvas を使用する場合のアクションパネル固有の機能も一部サポートしています。これらの機能を使用することで、ステージ上のオブジェクトにインタラクティブ機能を追加するときのワークフロー効率が向上します。サポートされる機能を次に示します。

シンタックスに応じて異なるフォントまたは色を適用してコードを表示します。この機能によって、コードを構造化して記述できるので、正確なコードとシンタックスエラーを視覚的に区別できます。

シンタックスに応じて異なる色でコードを表示します。この機能により、シンタックスの様々な箇所を視覚的に区別できます。

JavaScript コードを記述するときに、左側の角括弧と丸括弧に対応する右側の角括弧と丸括弧を自動的に追加します。

JavaScript を使用して、ステージ上のシェイプまたはオブジェクトにインタラクティブ機能を追加できます。JavaScript は個々のフレームおよびキーフレームに追加できます。

1. JavaScript を追加するフレームを選択します。
2. ウィンドウ／アクションを選択して、アクションパネルを開きます。

JavaScript コードスニペットの使用

Animate 内で使用可能な JavaScript コードスニペットを使用して、インタラクティブ機能を追加できます。コードスニペットにアクセスして使用するには、ウィンドウ／コードスニペットを選択します。JavaScript コードスニペットの追加について詳しくは、この記事を参照してください。

CreateJS ドキュメントの参照

インタラクティブ機能に誘導するためのコード

JavaScript により、アニメーションをインタラクティブにするための様々なオプションを実現できます。キャラクターにインタラクティブな動きを追加する方法を学習するには、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。

HTML5 でコンテンツをインタラクティブにする方法

HTML5 へのアニメーションのパブリッシュ

ステージ上のコンテンツを HTML5 にパブリッシュするには、次の操作をおこないます。

1. ファイル／パブリッシュ設定を選択します。
2. パブリッシュ設定ダイアログで、次の設定を指定します。

基本設定

FLA がパブリッシュされるディレクトリ。このデフォルトは FLA と同じディレクトリですが、参照ボタン「...」をクリックして変更できます。

チェックボックスをオンにすると、タイムラインがループします。オフにすると、最後まで再生された時点でタイムラインが停止します。

オフにすると、非表示のレイヤーは出力に含まれません。

ユーザーは、ステージを「水平方向」、「垂直方向」、「両方」のいずれで中央揃えするかを選択できます。デフォルトでは、HTML Canvas／ステージがブラウザーウィンドウの中央に表示されます。

ユーザーは、アニメーションを幅、高さ、両方のいずれに対してレスポンシブにするかを選択でき、パブリッシュされた出力を様々なフォームファクターに基づいてサイズ変更できます。結果は、レスポンシブで、よりシャープ、より鮮明な HiDPI 準拠の出力です。

また、出力は画面領域全体を境界線なしで覆うように伸張されますが、元の縦横比は維持されます。ただし、Canvas の一部はビューに収まらない場合があります。

• 「幅」、「高さ」または「両方」オプションでは、コンテンツ全体が Canvas サイズに縮小され、小さな画面（モバイルデバイスやタブレットなど）で表示する場合にも表示されます。画面サイズが作成されたステージサイズよりも大きい場合、Canvas は元のサイズで表示されます。

ユーザーは、アニメーションをフルスクリーンモードでの出力の表示に適合させるか、伸ばして適合させるかを選択できます。デフォルトでは、このオプションは無効です。

表示に合わせる：画面のスペース全体を使用したフルスクリーンモードで出力を表示しますが、縦横比は維持します。

フィットするよう伸ばす：出力に境界線のスペースがなくなるように伸ばします。

ユーザーは、デフォルトのプリローダーを使用するか、ドキュメントライブラリからプリローダーを選択するかを選択できます。

プリローダーは、アニメーションのレンダリングに必要なスクリプトとアセットの読み込み時に表示される、アニメーション GIF の形式の視覚的なインジケーターです。アセットが読み込まれると、プリローダーは非表示になり、実際のアニメーションが表示されます。

デフォルトでは、プリローダーオプションが選択されていません。

• デフォルトのプリローダーオプションを使用する場合は「デフォルト」オプション。
• 選択したプリローダー GIF を使用する場合は「参照」オプション。プリローダー GIF は、「イメージアセットを書き出す」で構成済みイメージフォルダーにコピーされます。
• 選択した GIF をプレビューするには「プレビュー」オプションを使用します。

切り替えオプションを使用して、ルートフォルダーレベルまたはサブフォルダーレベルでのパブリッシュを選択します。このボタンは、デフォルトでオンになります。オフに切り替えると、フォルダーフィールドが無効になり、アセットが出力ファイルと同じフォルダーに書き出されます。

ドキュメントをテクスチャとして書き出し ベクターアニメーションをテクスチャとして書き出して、アニメーションのパフォーマンスを強化します。詳しくは、テクスチャパブリッシングを参照してください。

 これは、「画像をスプライトシートに結合」オプションがオフになっている場合にのみ適用されます。

 サイズを保持しながら Canvas ドキュメントから読み込んだすべての画像（圧縮画像を含む）を書き出すこともできます。「基本」タブで「ドキュメントをテクスチャとして書き出し」および「画像をスプライトシートに結合」オプションをオフにします。画像はサイズ変更されずに書き出されます。

イメージアセットを配置し、参照元とするフォルダー。

スプライトシートに結合：すべてのイメージアセットをスプライトシートに結合するには、これを選択します。スプライトシートの他のオプションについては、ビットマップをスプライトシートとして書き出すを参照してください。

ドキュメント内のサウンドアセットを配置し、参照元とするフォルダー。

CreateJS ライブラリを配置し、参照元とするフォルダー。

 デフォルト設定では、ファイルが引き続き論理サブフォルダーに分離されてパブリッシュされます。

詳細設定

イメージ、サウンド、およびサポートされる CreateJS JavaScript ライブラリの書き出し先となる相対 URL。右側のチェックボックスをオフにすると、これらのアセットは FLA から書き出されませんが、指定されたパスはこれらのアセットの URL のアセンブルに使用されます。これにより、多数のメディアアセットが含まれている FLA からのパブリッシュを効率よく処理したり、変更した JavaScript ライブラリの上書きを防いだりすることができます。

「すべてのビットマップとスプライトシートを書き出し」オプションでは、Canvas ドキュメント内のすべてのビットマップを 1 つのスプライトシートにまとめることができます。その結果、サーバーリクエスト数が削減され、パフォーマンスが向上します。幅と高さの値を入力することで、スプライトシートの最大サイズを指定できます。

デフォルトを使用：デフォルトテンプレートを使用して HTML5 出力をパブリッシュします。

新しく読み込む：HTML5 ドキュメント用の新しいテンプレートを読み込みます。

書き出し：HTML5 ドキュメントをテンプレートとして書き出します。

オンにすると、CreateJS CDN 上でホスト管理されたライブラリのコピーが code.createjs.com で使用されます。ホスト管理すると、ライブラリをキャッシュ化し、様々なサイトで共有できます。

オフにすると、非表示のレイヤーは出力に含まれません。

オンにすると、ベクター命令がコンパクトなフォームで出力されます。読みやすい詳細命令を書き出す場合は、オフにしてください（学習目的に便利です）。

オンにすると、タイムラインのシンボルに frameBounds プロパティが含まれます。このプロパティには、タイムラインの各フレームの境界に対応する Rectangle の配列が含まれます。各フレームの境界を含めると、パブリッシュにかかる時間が大幅に増えます。

「JavaScript を HTML に含める」が選択されている場合、「パブリッシュ時に HTML ファイルを上書き」チェックボックスがオンになり、無効化されます。 「パブリッシュ時に HTML ファイルを上書き」チェックボックスをオフにした場合、「JavaScript を HTML に含める」はオフになり、無効化されます。

3. 「パブリッシュ」をクリックして、指定した場所にコンテンツをパブリッシュします。

 1 つのフレームで、ネストされたタイムラインを使用して設計されたアニメーションはループできません。

HTML テンプレート変数

新しいカスタム HTML テンプレートを読み込む場合、パブリッシュ時に、FLA ファイルのコンポーネントに基づいてデフォルト変数がカスタマイズされたコードスニペットで置換されます。 

Animate で認識、置換される現在のテンプレート変数を次の表に示します。

以前のバージョンの次のトークンは、現在のバージョンでは非推奨です。

 これらのトークンはモジュール化され、他のトークンで置換されています。

Canvas ドキュメントの HTML テンプレートの読み込みと書き出しに対する JSAPI のサポート

次の JSAPI は、Canvas ドキュメントの HTML テンプレートの読み込みと書き出しをサポートします。

• 指定された場所にある特定のドキュメントの HTML5 Canvas パブリッシュテンプレートを書き出します。

bool document::exportCanvasPublishTemplate(pathURI)

• 例：

var pathURI ="file:///C|/Users/username/desktop/CanvasTemplate.html” 

var exportFlag =fl.getDocumentDOM().exportCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be exported”);

• 指定された場所（pathURI）から特定のドキュメントの HTML5 Canvas パブリッシュテンプレートを読み込み、設定します。
  

bool document::importCanvasPublishTemplate(pathURI)

• 例：

var pathURI= “file:///C|/Users/username/desktop/CanvasTemplate.html”;

var exportFlag =fl.getDocumentDOM().importCanvasPublishTemplate(pathURI);

if(!exportFlag)

        fl.trace(“Template could not be imported”);

JavaScript の HTML への埋め込み

Canvas のパブリッシュ時に JS ファイルを HTML ファイルに含める機能が導入されました。

1. パブリッシュ設定メニューで「詳細」タブに切り替えて、「JavaScript を HTML に含める」を選択します。
2. JavaScript を HTML に含めるダイアログボックスで「OK」を選択して、HTML を上書きするコンテンツを再パブリッシュします。
3. これにより、「パブリッシュ時に HTML ファイルを上書き」チェックボックスが無効になり、パブリッシュイベント中に HTML が生成されますが、上書きはされません。
4. 「JavaScript を HTML に含めるのを停止」で、「OK」を選択して JavaScript を除外し、HTML ファイルを再パブリッシュします。
5. 「パブリッシュ時に HTML ファイルを上書き」が選択されていない場合は、「JavaScript を HTML に含める」オプションが自動的に表示されます。

 HTML を上書きしない場合は、「パブリッシュ時に HTML ファイルを上書き」オプションと「JS を HTML に埋め込む」オプションは共存できません。

グローバルスクリプトやサードパーティスクリプトの追加

アニメーション作成者は、アニメーション全体に適用可能な JavaScript コードをよく使用します。この機能を利用すると、特定のフレームに関連付けられていない、Animate 内からアニメーション全体に適用可能なグローバルスクリプトやサードパーティスクリプトを追加できます。 

グローバルスクリプトを追加して使用するには：

サードパーティスクリプトの追加

サードパーティの JavaScript ライブラリを組み込んで使用することもよくありますが、その場合は、Animate で生成されるコードを手動で修正する必要があります。この機能を使用すると、最新の JavaScript ライブラリやコードをアニメーションに柔軟に利用できるようになります。

サードパーティスクリプトを追加するには：

JSON データの JS への結合

お客様からのフィードバックに基づき、また JSON ファイルが本質的にセキュアでないことから、関連データと JS ファイルを結合し、個別の JSON ファイルは作成されなくなりました。

HTML5 Canvas 出力の最適化

Animate では、HTML5 Canvas の出力サイズとパフォーマンスを次の方法で最適化できます。

• 「パブリッシュ設定」で「スプライトシート」タブのオプションを使用して、ビットマップをスプライトシートとして書き出します。
• パブリッシュされる出力から非表示レイヤーを除外します（「非表示レイヤーを含める」チェックボックスをオフにする）。
• サウンド、ビットマップ、未使用のフレーム上の全アセットなど、すべての未使用のアセットを除外します（デフォルト）。
• 画像、サウンドおよび CreateJS JavaScript サポートライブラリについてアセット書き出しオプションをオフにして FLA からアセットを書き出さないように指定し、相対 URL を使用して書き出します。
• HiDPI 対応 HTML5 Canvas 出力：Animate では、コンテンツを表示するデバイスのピクセル比率に基づいて出力が拡大・縮小されます。この互換性により、ズームされた出力がよりシャープになり、高 DPI マシンで HTML Canvas 出力を表示する際に Canvas ドキュメントのピクセル化の問題も解決されます。
  

Canvas の透明な背景の設定

Canvas を様々な色にカスタマイズでき、表示の透明度を変更することもできます。透明な Canvas を作成した場合、パブリッシュ時に下層の HTML コンテンツを表示できます。

メモ：この設定によって、OAM のパブリッシュ時にも背景が透明になります。

1. 変更する Canvas を選択します。
2. プロパティペインで、「ステージ」を選択します。
3. ステージで、「アルファ」のパーセント値を設定します。

「カラーなし」色見本のサポート

「カラーなし」スウォッチオプションを使用して、Canvas の背景を透明にすることもできます。

1. 変更／ドキュメント／ステージの色を選択するか、プロパティインスペクターで「詳細設定」を選択します。
2. 「ステージの色」スウォッチで、「カラーなし」を選択します。

ビットマップをスプライトシートとして書き出し

HTML5 Canvas ドキュメントで使用している多数のビットマップを 1 つのスプライトシートとして書き出すことによって、サーバーリクエスト数が削減され、出力サイズが抑制されて、パフォーマンスが向上します。スプライトシートは、PNG（デフォルト）、JPEG、またはこれらの両方として書き出すことができます。

1. 「スプライトシート」タブで、「イメージアセットをスプライトシートに結合」チェックボックスをオンにします。
2. 「フォーマット」で「PNG」、「JPEG」または「両方」を選択します。
   
3. 「PNG」または「両方」を選択した場合、「PNG 設定」で次のオプションを指定します。
   • 画質：スプライトシートの画質を「8 ビット」（デフォルト）、「24 ビット」または「32 ビット」に設定します。
   • 最大サイズ：スプライトシートの最大高と最大幅をピクセルで指定します。
   • 背景：スプライトシートの背景色をクリックして設定します。
4. 「JPEG」または「両方」を選択した場合、「JPEG 設定」で次のオプションを指定します。
   
   • 画質：スプライトシートの画質を設定します。
   • 最大サイズ：スプライトシートの最大高と最大幅をピクセルで指定します。
   • 背景：スプライトシートの背景色をクリックして設定します。

HTML5 Canvas ドキュメントでのテキストの操作

HTML Canvas は、静止テキストとダイナミックテキストをサポートします。

静止テキスト

静止テキストには豊富なオプションがあり、パブリッシュ時にすべてのアセットをアウトラインに変換して、優れた WSYWIG ユーザーエクスペリエンスを提供します。静止テキストはベクターアウトラインとしてパブリッシュされるので、実行時に編集できません。

メモ：静止テキストを使用しすぎると、ファイルサイズが膨張する可能性があります。

ダイナミックテキスト

ダイナミックテキストを使用すると、実行時にテキストを変更できるので、ファイルサイズが大きくなりすぎることがありません。ダイナミックテキストがサポートするオプションの数は、静止テキストより少なくなっています。Adobe Fonts の Web フォントもサポートします。

エンドユーザーのコンピューターでは表示できないフォントでダイナミックテキストを使用している場合、出力には表示用のデフォルトのフォントが使用されるので、表示にゆがみが生じます。このような問題は Web フォントで解決されます。

HTML5 Canvas ドキュメントへの Web フォントの追加

Animate では、HTML5 Canvas ドキュメントのダイナミックテキストタイプ用の Web フォントを提供しています。Adobe Fonts により、トップフォントベンダーパートナーが提供する数千種類にのぼる高品質なプレミアムフォントに直接アクセスできます。Creative Cloud メンバーシップを使用して、シームレスに Adobe Fonts にアクセスして、最新ブラウザーおよびモバイルデバイス用の HTML5 出力で使用できます。

Animate での Adobe Fonts の Web フォントの使用について詳しくは、HTML5 Canvas ドキュメントでの Web フォントの使用を参照してください。

Animate リリース 2015.2 は、Canvas ドキュメント内のダイナミックテキストの視覚的なエクスペリエンスを強化して、ステージとパブリッシュされた外観が同期するようにします。

メモ：Adobe Fonts は、静的テキストタイプでは使用できません。

HTML5 Canvas 出力について

パブリッシュされた HTML5 出力には次のファイルが含まれます。

Canvas エレメント内のすべてのシェイプ、オブジェクトおよびアートワークの定義が含まれます。また、CreateJS 名前空間を呼び出して、HTML5 および対応する JavaScript ファイル（インタラクティブエレメントが含まれる）に Animate を変換します。 

アニメーションのすべてのインタラクティブエレメントに関する専用の定義およびコードが含まれます。また、JavaScript ファイル内には、すべてのタイプのトゥイーンに関するコードも定義されます。

これらのファイルは、デフォルトでは FLA と同じ場所にコピーされます。パブリッシュ設定ダイアログ（ファイル／パブリッシュ設定）で出力パスを指定することで、この場所を変更できます。

既存のコンテンツの HTML5 Canvas への移行

Animate 内の既存のコンテンツを移行して、HTML5 出力を生成できます。この目的のために、Animate では、個々のレイヤー、シンボルおよびその他のライブラリ項目の手動によるコピーまたは読み込みによって、コンテンツを移行できます。または、「AS3 を HTML5 Canvas ドキュメントに変換」コマンドを実行して、既存の ActionScript コンテンツを新しい HTML5 Canvas ドキュメントに自動的に移植することもできます。詳しくは、このリンクを参照してください。

ただし、Animate で HTML5 ドキュメントタイプの作業をする場合、サポートされない Animate 機能があります。これは、Animate 内の機能に対応する機能が、Canvas API 内にないためです。そのため、そうした機能は HTML5 Canvas ドキュメントタイプ内で使用できません。コンテンツの移行中に次の操作を実行しようとしたときに、この影響が出る可能性があります。

従来形式の Animate ドキュメントタイプ（ActionScript 3.0、AIR for Android、AIR for Desktop など）からコンテンツ（レイヤーまたはライブラリシンボル）を HTML5 ドキュメントにコピーする場合。この場合、サポートされていないコンテンツタイプは、削除されるか、またはサポートされているデフォルトに変換されます。

例えば、3D アニメーションをコピーした場合、ステージ上のオブジェクトに適用されているすべての 3D 変形が削除されます。

サポートされていないコンテンツを含む PSD または AI ファイルを読み込む場合。この場合、コンテンツは、削除されるか、またはサポートされているデフォルトに変換されます。

例えば、グラデーションベベル効果が適用されている PSD ファイルを読み込むと、その効果は削除されます。

複数のドキュメントタイプ（例えば、ActionScript 3.0 と HTML5 Canvas）で同時に作業し、サポートされていないツールまたはオプションを選択した状態でドキュメントを切り替えた場合。この場合、Animate は、その機能がサポートされていないことを視覚的に示します。

例えば、ActionScript 3.0 ドキュメント内で点線を作成した状態で、線ツールを選択したまま HTML5 Canvas に切り替えます。この場合、ポインターおよびプロパティインスペクターには、HTML5 Canvas 内では点線がサポートされないことを示すアイコンが表示されます。

ActionScript コンポーネントは削除され、コードがコメントアウトされます。また、（Animate 13.0 と Toolkit for CreateJS 用に）コメントブロック内に JavaScript を記述している場合は、このコードのコメントを手動で解除してください。

例えば、ボタンを含むレイヤーをコピーした場合、これらのレイヤーは削除されます。

移行後にコンテンツに適用される変更点

従来形式のコンテンツを HTML5 Canvas ドキュメントに移行した場合に適用される変更のタイプを次に示します。

HTML5 Canvas でサポートされないコンテンツタイプは削除されます。次に例を示します。

• 3D 変形は削除されます。
• ActionScript コードはコメントアウトされます。
• ビデオは削除されます。

コンテンツタイプまたは機能はサポートされますが、機能のプロパティはサポートされません。次に例を示します。

• オーバーレイブレンドモードはサポートされないので、標準ブレンドモードに変更されます。
• 点線はサポートされないので、実線に変更されます。

サポートされない機能の一覧および移行時におけるそれらのフォールバック値については、この記事を参照してください。

HTML5 Canvas ドキュメントへの他のドキュメントタイプの変換

万能のドキュメントタイプコンバーターにより、既存の FLA プロジェクト（任意のタイプ）を別のドキュメントタイプ（HTML5 Canvas、ActionScript／AIR、WebGL、カスタムドキュメントタイプなど）に変換できます。形式を変換するときには、Animate がそのドキュメントタイプに対して提供するオーサリング機能を利用できます。 

詳しくは、他のドキュメント形式への変換を参照してください。

JSFL スクリプトを使用して ActionScript 3 を HTML5 Canvas ドキュメントに変換

Animate では、AS 3 ドキュメントを HTML5 Canvas ドキュメントに変換するための JSFL スクリプトを提供しています。JSFL スクリプトを実行したときの動作は次のとおりです。

• 新しい HTML5 Canvas ドキュメントを作成します。
• すべてのレイヤー、シンボルおよびライブラリ項目を新しい HTML5 Canvas ドキュメントにコピーします。
• サポートされない機能、サブ機能または機能のプロパティにデフォルト値を適用します。
• それぞれのシーンに対して個別の FLA ファイルを作成します。これは、HTML5 Canvas ドキュメントでは複数のシーンがサポートされないからです。

1. Animate で ActionScript 3 ドキュメントを開きます。
2. コマンド／AS3 を HTML5 Canvas ドキュメントに変換を選択します。

 これは、「画像をスプライトシートに結合」オプションがオフになっている場合にのみ適用されます。