マニュアル キャンセル

FLA ファイルを Animate 向けに最適化するベストプラクティス

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作方法
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. Animate でのオブジェクトの描画および作成
    9. 線とシェイプの変更
    10. Animate CC での線、塗り、グラデーション
    11. Adobe Premiere Pro と After Effects の使用
    12. Animate CC のカラーパネル
    13. Animate で Flash CS6 ファイルを開く
    14. Animate でのクラシックテキストの操作
    15. Animate へのアートワークの挿入
    16. Animate に読み込まれたビットマップ
    17. 3D グラフィック
    18. Animate でのシンボルの操作
    19. Adobe Animate での線とシェイプの描画
    20. Animate でのライブラリの使用
    21. サウンドの書き出し
    22. Animate CC でのオブジェクトの選択
    23. Animate での Illustrator AI ファイルの操作
    24. ブレンドモードの適用
    25. オブジェクトの配置
    26. コマンドメニューを使用したタスクの自動化
    27. 多言語テキスト
    28. Animate でのカメラの使用
    29. グラフィックフィルター
    30. サウンドと ActionScript
    31. 描画の環境設定
    32. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. Animate ワークスペースのアクセシビリティ
    12. スクリプトの記述と管理
    13. カスタムプラットフォームサポートの有効化
    14. カスタムプラットフォームサポートの概要
    15. カスタムプラットフォームサポートプラグインの操作
    16. ActionScript 3.0 のデバッグ
    17. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    9. ベストプラクティス - ビデオ規則
    10. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    11. ベストプラクティス - FLA ファイルの構造化
    12. FLA ファイルを Animate 向けに最適化するベストプラクティス
    13. ActionScript パブリッシュ設定
    14. Animate のパブリッシュ設定の指定
    15. プロジェクターファイルの書き出し
    16. 画像とアニメーション GIF の書き出し
    17. HTML パブリッシュ用テンプレート
    18. Adobe Premiere Pro と After Effects の使用
    19. アニメーションのクイック共有とパブリッシュ
  9. トラブルシューティング
    1. 解決済みの問題
    2. 既知の問題

 

Animate ドキュメントの最適化

ドキュメントファイルのサイズが大きくなると、ダウンロードにかかる時間が増え、再生速度は遅くなります。その場合はいくつかの手順を踏むことで、再生に適した状態に加工できます。Animate では、パブリッシュ処理の一部としてドキュメントが自動的に最適化されます。ドキュメントを書き出す前に、様々な方法でファイルサイズを小さくして、さらに最適化を図ることができます。また、パブリッシュの際に SWF ファイルを圧縮することもできます。ドキュメントを変更しながら、いろいろなコンピューター、オペレーティングシステム、およびインターネット環境でテストします。

ドキュメントの最適化

  • 2 回以上表示されるエレメントに対しては、アニメーション化されたシンボルなどのシンボルを使用します。

  • アニメーションシーケンスの作成時には、可能な限りトゥイーンアニメーションを使用します。トゥイーンアニメーションでは、キーフレームの連続と比べてファイルスペースの使用量が小さくなります。

  • アニメーションシーケンスでは、グラフィックシンボルの代わりにムービークリップを使用します。

  • 各キーフレーム内で変化する領域を小さくします。つまり、動きのある領域をできる限り小さくします。

  • ビットマップエレメントはアニメーションにはできる限り使用せず、背景や静止画だけに使用します。

  • 最もサイズの小さいサウンド形式である MP3 を可能な限り使用します。

エレメントと線の最適化

  • エレメントをグループ化します。

  • レイヤーを使用して、アニメーション中に変化するエレメントと変化しないエレメントを分離します。

  • 修正/シェイプ/最適化を選択して、形状の描画に用いられている独立した線の数を最少にします。

  • 破線、点線、とぎれたストロークで構成される線など、特殊な線の使用を制限します。実線を使うと、メモリが少なくて済みます。鉛筆ツールで作成した線は、ブラシストロークよりもメモリが少なくて済みます。

テキストとフォントの最適化

  • フォントおよびフォントのスタイルの数を制限します。埋め込みフォントを使うとファイルサイズが大きくなるので、多用しないようにします。

  • 「フォントの埋め込み」オプションには、フォント全体を組み込むのではなく、必要な文字だけを選択します。

カラーの最適化

  • シンボルのプロパティインスペクターのカラーメニューを使用して、シンボル 1 つに対してカラーを変えながら多数のインスタンスを作成します。

  • カラーパネル(ウィンドウ/カラー)を使用して、ドキュメントのカラーパレットとブラウザー指定のカラーパレットを一致させます。

  • グラデーションを多用しないようにします。領域をグラデーションで塗りつぶすと、単色で塗りつぶす場合に比べて、約 50 バイト大きくなります。

  • アルファ透明度を多用しないようにします。多く使用すると再生が遅くなることがあります。

ドキュメント表示速度の高速化

作業中のドキュメントの表示速度を速めるには、表示メニューのコマンドを使って、レンダリング品質機能をオフにします。レンダリング品質機能をオンにすると、コンピューターの負荷が増え、表示が遅くなってしまいます。

これらのコマンドは、Animate ドキュメントの書き出しには何ら影響を与えません。Web ブラウザーでの Animate ドキュメントの表示状態を指定するには、object および embed パラメーターを使用します。「パブリッシュ」コマンドを使用すると、この設定が自動的に行われます。

  1. 表示/プレビューモードを選択し、次のいずれかのオプションを選択します。

    アウトライン

    シーン内のシェイプがアウトラインのみで表示され、すべての線が極細線で示されます。このため、グラフィックエレメントのシェイプの変更が簡単になり、複雑なシーンを高速で表示できます。

    高速

    アンチエイリアスがオフになり、すべての色や線スタイルが表示されます。

    アンチエイリアス

    線、シェイプ、ビットマップのアンチエイリアスをオンにしてシェイプと線を表示すると、画面上のエッジの表示が滑らかになります。「高速」オプションよりもゆっくりと描画します。この設定は、16 ビット(数千色)または 24 ビット(数百万色)のビデオカードを備えたモニターで表示するときに最適です。16 色や 256 色モードの場合、黒の線はスムーズに表示されますが、カラーは高速表示モードの方が美しくなります。

    アンチエイリアステキスト

    テキストのエッジを滑らかにします。大きいサイズのフォントに対しては効果的ですが、大量のテキストに適用すると処理速度が遅くなることがあります。通常の作業には、このモードを使用します。

    フル

    ステージ上のすべてのコンテンツが完全にレンダリングされます。表示速度が下がる可能性があります。

グラフィックとアニメーションの最適化

最適化され効率化されたアニメーションやグラフィックを作成する前に、プロジェクトの概要を決めて計画します。アニメーションのファイルサイズと長さに目標を立てて、開発工程全体をテストします。

グラフィックやアニメーションを最適化するには、次のガイドラインに従ってください。

  • グラデーションは処理に多くのカラーと計算を必要とし、レンダリングのために CPU に高い負荷がかかるため、使用しないようにします。

  • 同じ理由で、SWF ファイルで使用するアルファまたは透明度の量は、最小限にとどめます。

    透明度を含むオブジェクトのアニメーション化は CPU に負荷がかかるため、最小限にとどめます。ビットマップで透明なグラフィックをアニメーション化することはとりわけ CPU に負荷がかかるため、最小限にとどめるか、まったく使用しないようにします。

     Animate に読み込むビットマップ形式で最適なものは PNG です。これは、Adobe 版 Macromedia Fireworks のネイティブなファイル形式です。PNG ファイルではピクセルごとに RGB とアルファ情報が収められています。Fireworks の PNG ファイルを Animate に読み込んで、FLA ファイルでグラフィックオブジェクトを編集することができます。

  • 圧縮しすぎないように注意して、ビットマップを最適化します。Web に最も適した解像度は 72 dpi です。ビットマップイメージを圧縮するとファイルサイズが小さくなりますが、圧縮しすぎるとグラフィックの品質が損なわれます。パブリッシュ設定ダイアログボックスの JPEG の品質の設定で、イメージを圧縮しすぎていないかどうか調べます。たいていの場合、イメージをベクターグラフィックとして表現することをお勧めします。ベクターイメージでは多数のピクセルの集合ではなく、計算によってイメージが作成されるため、これを使用するとファイルサイズが小さくなります。イメージの品質を保ちながら、使用するカラーの数を制限します。

     ビットマップを元のサイズよりも拡大することは避けてください。イメージの品質が損なわれ、CPU に負荷がかかります。

  • プロパティ _visiblefalse に設定します。SWF ファイルで _alpha レベルを 0 または l にする方法はとりません。ステージ上のインスタンスの _alpha レベルを計算すると CPU に負荷がかかります。インスタンスの可視性を無効にすると、CPU にかかる負荷を抑制すると共にメモリを節約でき、SWF ファイルのアニメーションの動きを滑らかにできます。アセットのアンロードとリロードの代わりとして、プロパティ _visiblefalse に設定します。このほうが CPU の負荷は低くなります。

  • SWF ファイル内で使用する線と点の数を減らします。曲線の最適化ダイアログボックス(修正/シェイプ/最適化)を使用して、描画におけるベクターの数を少なくします。さらに最適化するには、「複数処理を適用」オプションを使用します。グラフィックを最適化するとファイルサイズは小さくなりますが、圧縮しすぎると品質が大きく損なわれます。ただし、曲線を最適化するとファイルサイズが小さくなる上に SWF ファイルのパフォーマンスも向上します。曲線および点の最適化に専用のサードパーティオプションを使用する場合、得られる結果は異なります。

最上の結果を得るには、アニメーションコンテンツを作成する様々な方法を試みて、それぞれのオプションをテストしてみてください。

フレームレート(1 秒あたりのフレーム数。単位は fps)が高いと、SWF ファイルのアニメーションが滑らかになりますが、CPU にかかる負荷は(とりわけ旧型のコンピューターで)高くなります。作成するアニメーションを様々なフレームレートでテストして、必要最低限のフレームレートを見つけてください。

スクリプトアニメーションのサンプルについては、Animate サンプル Web ページ(www.adobe.com/go/learn_fl_samples_jp)を参照してください。サンプルを使用するには、サンプルの zip ファイルをダウンロードして解凍し、ActionScript2.0¥Animation フォルダーに移動します。

アニメーションのフレームレートとパフォーマンス

アプリケーションにアニメーションを追加する場合、FLA ファイルに設定するフレームレートを検討します。フレームレートは SWF ファイルのパフォーマンスと、それを再生するコンピューターに影響を与える可能性があります。フレームレートを高く設定すると、特に多くのアセットを使用する場合や ActionScript を使用してアニメーションを作成する場合に、CPU の負荷が問題になります。

アニメーションを滑らかに再生するためには、フレームレートを適切に設定する必要があります。例えば、プロパティインスペクターで 12 fps(frames per second:1 秒あたりのフレーム数)に設定されたアニメーションは、1 秒間に 12 のフレームを再生します。このドキュメントのフレームレートを 24 fps に設定すると、12 fps に設定したときよりも、アニメーションは滑らかに再生されます。同時に、24 fps のアニメーションは、12 fps のアニメーションよりも再生速度が速いので、再生時間(秒単位)が短くなります。つまり、高いフレームレートの 5 秒間のアニメーションを作成するには、この 5 秒間を埋めるために低いフレームレートのアニメーションよりも多くのフレームを作成する必要があり、その結果、アニメーションのファイルサイズが大きくなります。通常、24 fps の 5 秒のアニメーションは、12 fps の 5 秒のアニメーションよりも、ファイルサイズが大きくなります。

 onEnterFrame イベントハンドラーを使用してスクリプトアニメーションを作成する場合、アニメーションは、タイムラインでモーショントゥイーンを作成する場合と同様に、ドキュメントのフレームレートで再生されます。onEnterFrame イベントハンドラーを使用せずに、setInterval(『ActionScript 2.0 リファレンスガイド』を参照)を使用することもできます。この方法では、フレームレートを使用するのではなく、指定した間隔で関数を呼び出します。onEnterFrame の場合と同様に、setInterval を頻繁に使用して関数を呼び出すと、アニメーションが CPU に負荷をかけます。

実行時にアニメーションが滑らかに再生される最小限のフレームレートを設定してください。そうすることによって、エンドユーザーのコンピューターの CPU 負荷を抑えることができます。30 ~ 40 fps を超えるフレームレートを使用すると CPU にかかる負荷が高くなり、実行時にアニメーションの表示が少ししか、あるいはまったく変更されなくなります。

アニメーションのフレームレートは、開発工程のできる限り早い段階で選択するようにします。SWF ファイルをテストし、アニメーションの再生時間と SWF ファイルのサイズを確認します。フレームレートは、アニメーションの再生速度に大きな影響を及ぼします。

フィルターおよび SWF ファイルのパフォーマンス

アプリケーションで多くのフィルターを使用すると、メモリ使用量が増し、Flash Player のパフォーマンスが低下する場合があります。フィルターがアタッチされたムービークリップは、2 つの 32 ビットのビットマップを含むので、このようなビットマップを数多く使用すると、アプリケーションのメモリ使用量が非常に大きくなります。場合によっては、コンピューターのオペレーティングシステムで、メモリ不足エラーが発生します。ステージ上に数千のビットマップを置くなど、アプリケーション内で多数のフィルター効果を使用しない限り、最近のコンピューターでメモリ不足のエラーメッセージが表示されることはほとんどありません。

しかし、メモリ不足のエラーメッセージが表示された場合は、次の事態が発生します。

  • フィルター配列が無視されます。

  • ムービークリップが、標準ベクターレンダラーを使用して描画されます。

  • ムービークリップのビットマップがキャッシュされません。

    メモリ不足のエラー発生後は、ムービークリップがフィルター配列やビットマップキャッシュの使用を試みません。パフォーマンスに影響を与える他の要因として、適用する各フィルターの quality パラメーターの値があります。quality パラメーターの値を高く設定するほど、効果を表現する際の CPU とメモリの負荷が増し、この値を低くく設定すると、コンピューターリソースの使用量が少なくなります。多数のフィルターを必要以上に使用することは避け、また、可能な場合は、quality の値を低く設定するようにします。

     100 × 100 ピクセルのオブジェクトを 1 回ズームインすると、そのコンテンツのサイズが 200 × 200 ピクセルになるので、4 倍のメモリを使用するようになります。さらに 2 回ズームインすると、オブジェクトの描画サイズは 800 × 800 ピクセルになり、元の 100 × 100 ピクセルのオブジェクトの 64 倍のメモリを使用します。SWF ファイルでフィルターを使用するときは、必ず SWF ファイルのコンテキストメニューからズームメニューの各オプションを無効にしてください。

    無効なパラメータータイプを使用すると、エラーメッセージが表示されます。一部のフィルターパラメーターには、値の有効範囲が設定されています。有効範囲外の値を指定すると、指定した値が、範囲内の有効な値に変わります。例えば、標準的な操作では quality の値を 1 ~ 3 にします。可能な設定範囲は、0 ~ 15 です。15 よりも高ければ、15 に設定されます。

    一部のコンストラクターでは、入力パラメーターとして必要な配列の長さに制限があるものがあります。畳み込みフィルターまたはカラーマトリックスフィルターを無効な配列(正しいサイズではない)を使用して作成すると、コンストラクターが失敗し、フィルターは作成されません。このフィルターオブジェクトがムービークリップのフィルター配列のエントリとして使用されると、無視されます。

    ヒント:ぼかしフィルターを使用する場合、blurX と blurY の値に 2 の乗数(2、4、8、16、32 など)を使用すると、計算処理が速くなり、パフォーマンスが 20 ~ 30% 向上します。

ビットマップキャッシュと SWF ファイルのパフォーマンス

ビットマップキャッシュを使用すると、アプリケーションで静止的なムービークリップのパフォーマンスが向上します。プロパティ MovieClip.cacheAsBitmap または Button.cacheAsBitmaptrue に設定すると、ムービークリップまたはボタンインスタンスの内部ビットマップ表現がキャッシュされます。これで、複雑なベクターコンテンツを格納しているムービークリップのパフォーマンスを向上させることができます。ビットマップがキャッシュされているムービークリップのすべてのベクターデータは、メインステージではなくビットマップに描画されます。

 その後、ビットマップは、最も近いピクセル境界に吸着された非伸縮、非回転のピクセルとして、メインステージにコピーされます。ピクセルは、親オブジェクトと 1 対 1 でマップされます。ビットマップの境界が変更されると、ビットマップは伸縮されずに再作成されます。

ボタンまたはムービークリップインスタンスのキャッシュについて詳しくは、次のトピックを参照してください。

  • 「ActionScript を使用したムービークリップのキャッシュとスクロールについて」(『ActionScript 2.0 の学習』)

  • 「ムービークリップのキャッシュ」(『ActionScript 2.0 の学習』)

    その内容がほぼ静的で、拡大や縮小、回転が頻繁に行われないムービークリップには、プロパティ cacheAsBitmap を使用します。そのようなムービークリップでは、cacheAsBitmap を使用することによって、ムービークリップの移動時(x 位置と y 位置の変更時)のパフォーマンスを向上させることができます。

    ムービークリップのキャッシュを有効にすると、サーフェスが作成されます。これにより、複雑なベクターアニメーションのレンダリング速度が向上するなど、いくつかの利点が得られます。状況によっては、キャッシュを有効にしてもパフォーマンスが向上しない、またはかえってパフォーマンスが低下する場合もあります。

    キャッシュされたデータの全体のパフォーマンスは、インスタンスのベクターデータの複雑さ、変更するデータの量、および opaqueBackground プロパティを設定するかどうかによって異なります。小さな領域を変更する場合、サーフェスを使用してもベクターデータを使用してもほとんど違いはありません。アプリケーションをデプロイする前に、両方のシナリオで作業内容をテストしてください。

ビットマップキャッシュを使用する状況

次に、ベクターグラフィックを最適化することによってビットマップキャッシュを有効にした場合に大きな利点が得られる一般的なシナリオを示します。

複雑な背景イメージ

ベクターデータによる詳細で複雑な背景イメージを使用するアプリケーション。パフォーマンスを改善するには、コンテンツを選択してムービークリップ内に保存し、opaqueBackground プロパティを true に設定します。これにより、背景はビットマップとしてレンダリングされるので素早く再描画でき、アニメーションの再生がより高速になります。

テキストフィールドのスクロール

スクロールテキストフィールドに大量のテキストを表示するアプリケーション。スクロール範囲を(scrollRect プロパティで)指定してスクロール可能に設定されたムービークリップ内にテキストフィールドを配置すると、指定したインスタンスの高速ピクセルスクロールが可能になります。ユーザーがムービークリップインスタンスをスクロールすると、スクロールされたピクセルが上にシフトし、テキストフィールド全体を再生成するのではなく、新しく表示される部分を生成します。

ウィンドウシステム

ウィンドウの重ね合わせが複雑なアプリケーション。各ウィンドウは開いたり閉じたりできます(例えば Web ブラウザーウィンドウなど)。各ウィンドウをサーフェスとして指定する(cacheAsBitmap プロパティを true に設定する)と、各ウィンドウは分離されてキャッシュされます。ユーザーはウィンドウをドラッグできるため、互いに重ね合わせることが可能となり、各ウィンドウではベクターコンテンツの再生成は必要ありません。

ビットマップキャッシュを使用すべきでない状況

ビットマップキャッシュを誤って使用すると、SWF ファイルに悪影響を与える可能性があります。サーフェスを使用する FLA ファイルを開発する場合は、次のガイドラインを守ってください。

  • サーフェス(キャッシュを有効にしたムービークリップ)を使いすぎないようにしてください。各サーフェスは通常のムービークリップよりも多くのメモリを使用するので、レンダリングのパフォーマンスを向上させる場合のみサーフェスを有効にしてください。

  • キャッシュされたビットマップは、通常のムービークリップインスタンスよりはるかに多くのメモリを使用します。例えば、ステージ上のムービークリップが 250 × 250 ピクセルの場合、通常の(キャッシュされていない)ムービークリップインスタンスで使用されるメモリは 1 KB ですが、キャッシュされるとメモリ使用量が 250 KB に達することがあります。

  • キャッシュされたサーフェスの拡大は避けてください。ビットマップキャッシュを多用しすぎると大量のメモリが消費され(前の項目を参照)ますが、コンテンツを拡大したときにそれは著しくなります。

  • サーフェスは、大部分が静的な(アニメーションではない)ムービークリップインスタンスに対して使用します。インスタンスはドラッグまたは移動できますが、インスタンスのコンテンツは、アニメーション化したり大幅に変更しないようにする必要があります。例えば、インスタンスを回転または変形させると、インスタンスはサーフェスからベクターデータへ、あるいはその逆へと変更されますが、これは難しい処理であり、SWF ファイルに悪影響を与えます。

  • サーフェスとベクターデータを組み合わせると、Flash Player の処理量(そして場合によっては CPU の処理量も)が増加します。例えばウィンドウアプリケーションを作成するときなど、サーフェスをグループ化するようにしてください。

Flash Player でのコンポーネントの操作

コンポーネントフレームワークを使用するとコンポーネントに機能を追加することができますが、アプリケーションのファイルサイズが相当に大きくなる可能性があります。コンポーネントは、互いに継承し合います。あるコンポーネントは Animate ドキュメントのサイズを増やしますが、同じフレームワークを使用する後続のコンポーネントが必ずしもファイルサイズを増やすとは限りません。ステージ上にコンポーネントを追加するとファイルサイズは大きくなりますが、ある時点で増加は止まります。これは、コンポーネントがクラスを共有し、これらクラスのコピーを新たにロードしないためです。

同一のフレームワークを共有しない複数のコンポーネントを使用する場合、SWF ファイルのサイズが非常に増える可能性があります。例えば XMLConnector コンポーネントでは SWF ファイルが 17KB 大きくなり、TextInput コンポーネントではドキュメントが 24KB 大きくなります。ComboBox コンポーネントを追加すると 28KB 増えますが、これはこのコンポーネントが、前のコンポーネントのどちらのフレームワークにも入っていないからです。XMLConnector コンポーネントはデータバインディングを使用するため、クラスによって SWF ファイルが 6KB 大きくなります。これらコンポーネントをすべて使用するドキュメントは、ファイルに他のコンテンツを追加する前に既に 77KB になっています。ドキュメントに新しいコンポーネントを追加するときは、SWF ファイルのサイズを慎重に検討してください。

コンポーネントは、親 SWF ファイルのライブラリに必要です。例えば、アプリケーションが使用するコンポーネントのコピーがライブラリに必要です。これは、実行時にロードされる子 SWF ファイルにこのコンポーネントが必要とされる場合でも同様です。これは、コンポーネントが必ず正常に機能するようにするために必要で、親 SWF ファイルのダウンロード時間は若干長くなります。しかし、親ライブラリはそこにロードされた SWF ファイルの中で継承または共有されません。それぞれの子 SWF ファイルは、同じコンポーネントの自分用のコピーがあるアプリケーションにダウンロードされる必要があります。

後方互換性を持つ SWF ファイルをパブリッシュしようとするときは、どのコンポーネントがその機能を備えているかをよく理解しておく必要があります。次の表は、Flash Player の各バージョンで各コンポーネントが使用できるかどうかを示したものです。

コンポーネント

Flash Player 6(6.0.65.0)以前

Flash Player 6(6.0.65.0)

Flash Player 7 および 8

Flash Player 9

ActionScript 3.0

サポートされません

サポートされません

サポートされません

サポートされます

ActionScript 2.0

サポートされます

サポートされます

サポートされます

サポートされます

V2 UI コンポーネントセット

サポートされません

サポートされます

サポートされます

サポートされます

メディアコンポーネント

サポートされません

サポートされません

サポートされます

サポートされます

データコンポーネント

サポートされません

サポートされません

サポートされます

サポートされます

V2 UI コンポーネントを機能させるには、「パブリッシュ設定」の「Flash Player 6r65 用に最適化」オプションをオフにします。

コンポーネントスタイルとパフォーマンスの最適化

ActionScript 2.0 を使用するときに、コンポーネントフレームワーク内で最も CPU に負荷がかかる呼び出しの 1 つとして、setStyle の呼び出しがあります。setStyle の呼び出しは効率よく実行されますが、その実装方法が原因で CPU に負荷がかかります。setStyle の呼び出しは必ずしもすべてのアプリケーションで必要とされるものではありませんが、これを使用するときは、パフォーマンスへの影響を考慮してください。

パフォーマンスを改善するために、スタイルの変更は、そのスタイルが適用されるオブジェクトでスタイルがロードおよび計算される前でも実行できます。スタイルがロードおよび計算される前にスタイルを変更できる場合は、setStyle を呼び出す必要がありません。

スタイル使用時のパフォーマンスを向上させるには、オブジェクトがインスタンス化されるときに、各オブジェクトにプロパティを設定します。ステージにインスタンスを動的にアタッチするときは initObj のプロパティを、createClassObject() への呼び出しの中で次の ActionScript に示すように設定します。

createClassObject(ComponentClass, "myInstance", 0, {styleName:"myStyle", color:0x99CCFF});

ステージ上に直接配置するインスタンスでは、各インスタンスに onClipEvent() を使用できます。サブクラスを使用する方法(推奨)もあります。サブクラスについて詳しくは、「サブクラスの作成について」(『ActionScript 2.0 の学習』)を参照してください。

コンポーネントのスタイル変更が必要な場合は、Loader コンポーネントを使用するとアプリケーションの効率が良くなります。別々のコンポーネントにいくつかのスタイルを実装するには、各コンポーネントをそれぞれの SWF ファイルに配置します。Loader コンポーネントでスタイルを変更して SWF ファイルにリロードする場合、SWF ファイルのコンポーネントが再度作成されます。コンポーネントが再作成されると、スタイルのキャッシュが空になり、このコンポーネントのスタイルはリセットされて再度参照されます。

 SWF ファイルのコンポーネントのすべてのインスタンスに 1 つのスタイルを適用するには、_global.styles.ComponentName を使用してグローバルにスタイルを変更します。

ランタイム共有ライブラリの使用

ランタイム共有ライブラリを使用して、ダウンロード時間を短縮できる場合があります。このライブラリは、通常大規模なアプリケーションで必要とされ、また同一サイトの多数のアプリケーションが同じコンポーネントやシンボルを使用している場合にも必要となります。SWF ファイルの共通アセットを外部化することにより、クラスを繰り返しダウンロードせずに済みます。共有ライブラリを使用する最初の SWF ファイルがダウンロードに最も長い時間を必要とします。これは SWF ファイルとライブラリの両方をダウンロードするためです。このライブラリがユーザーのコンピューターでキャッシュされると、後続の SWF ファイルすべてがこのライブラリを使用します。この処理によって、一部の大規模アプリケーションではダウンロード時間を大幅に短縮できます。

特殊文字の表示

コンピューターオペレーティングシステムには地域限定の特別なコードページがあります。例えば、日本のコンピューターには、イギリスのコンピューターとは異なるコードページがあります。Flash Player 5 以前のバージョンでは、テキストの表示をコードページに依存していました。Flash Player 6 以降のバージョンでは、テキストの表示に Unicode を使用しています。Unicode はすべての言語の文字を含む Universal Character Set で、テキスト表示に信頼性が高く、標準化されています。現在、大部分のアプリケーションで Unicode が使用されています。

Flash Player 6 以降での特殊文字の表示には、Unicode のエスケープシーケンスを使用できます。ただし UTF-8 または UTF-16 エンコードされた(Unicode)テキストをロードしない場合、または特殊文字の表示に Unicode のエスケープシーケンスを使用しない場合には、すべての文字が正しく表示されるわけではありません。Unicode コードチャートセットについて詳しくは、Unicode の Web サイト(Unicode.org)を参照してください。一般に使用されるエスケープシーケンスの一覧については、このセクションの最後にある表を参照してください。

Unicode を使用しないアプリケーションは、Web ページ上の文字のレンダリングにオペレーティングシステムのコードページを使用します。この場合、コードページによって表示される文字が指定されるため、ユーザーのオペレーティングシステムのコードページがアプリケーションのコードページと一致する場合にのみ文字が正しく表示されます。SWF ファイルの作成に使用したコードページは、エンドユーザーのコンピューターのコードページと一致している必要があります。様々な国のユーザーが使用するアプリケーションでは、コードページの使用はお勧めできません。このような場合は Unicode を使用します。

コードの中で System.useCodepage を使用すると、SWF ファイルは Unicode ではなくシステムのコードページを使用してしまいます。

この処理は、Unicode 以外でエンコードされたテキストを外部からロードしている場合、およびこのテキストがユーザーのコンピューターと同じコードページを使用してエンコードされた場合にのみ使用します。この条件の両方に当てはまる場合、テキストは問題なく表示されます。この両方の条件に当てはまらない場合は、テキストのフォーマットに Unicode と Unicode のエスケープシーケンスを使用します。エスケープシーケンスを使用するには、タイムラインのフレーム 1 で次の ActionScript 2.0 を追加します。

this.createTextField("myText_txt", 99, 10, 10, 200, 25); 
myText_txt.text = "this is my text, \u00A9 2004";

この ActionScript によってテキストフィールドが作成され、著作権表示の記号(©)が含まれるテキストがそのテキストフィールドに入力されます。

SWF ファイルがオペレーティングシステムのコードページを使用するようにすることができます。これは、useCodepage プロパティで制御します。Animate で SWF ファイルを書き出す場合、デフォルトでは Unicode テキストが書き出され、System.useCodepagefalse に設定されます。特殊なテキストまたは様々な国のシステムのテキストを表示する場合、問題が発生することがあります。この場合は、システムのコードページを使用すると、テキストが誤って表示される問題は解決すると考えられます。ただし、System.useCodePage は、他に手段がない場合に使用します。

システムのコードページを使用するには、タイムラインのフレーム 1 に次の行のような ActionScript 2.0 コードを入れます。

System.useCodepage = true;
<< need an AS3 example here as well. See
dev/qa. >>

 特殊文字は、ユーザーのコンピューターが使用しているフォントに含まれている場合にのみ表示できます。これがはっきりしない場合は、SWF ファイルに文字またはフォントを埋め込みます。

次の表に、よく使用される Unicode のエスケープシーケンスをまとめます。

文字の説明

Unicode のエスケープシーケンス

全角ダッシュ(

\u2014

登録商標記号(®)

\u00AE

著作権記号(©

\u00A9

商標記号(™)

\u2122

ユーロ記号(

\u20AC

円記号(\

\u005C

スラッシュ(/

\u002F

開き中括弧({

\u007B

閉じ中括弧(}

\u007D

より大きい(<

\u003C

より小さい(>

\u003E

アスタリスク(*

\u002A

ドキュメントのダウンロードパフォーマンスのテスト

Flash Player は、設定されたフレームレートに合わせようとしますが、実際の再生時のフレームレートはコンピューターによって異なる場合があります。あるフレームまでドキュメントが進んだときに必要なデータがダウンロードされていないと、ダウンロードが追いつくまでドキュメントは中断します。

ダウンロードパフォーマンスをグラフで表示するには、プロファイラーを使用します。プロファイラーには、指定したモデムの速度に対する各フレームのデータの送信量が表示されます。

 (Animate のみ)プロファイラーは Animate で使用できなくなりました。代わりに Adobe Scout を使用するよう選択できます。詳しくは、Adobe Scout の Animate での使用を参照してください。

Animate では、ダウンロード速度のシミュレーションに、使用するモデムの速度ではなく、インターネットの標準的なパフォーマンスの推定値が使用されます。例えば、28.8 Kbps のモデム速度のシミュレーションを選択すると、Animate ではインターネットの標準的なパフォーマンスを反映して、実際の値は 2.3 Kbps に設定されます。プロファイラーでは SWF ファイルの圧縮もサポートされています。これにより、SWF ファイルのサイズを小さくし、ストリーミングのパフォーマンスを向上させることができます。

loadMoviegetUrl などの ActionScript 呼び出しを使って、外部の SWF ファイル、GIF ファイル、XML ファイル、および変数を Flash Player にストリーミングする場合、データはストリーミング用に設定された速度で転送されます。メインの SWF ファイルのストリーミング速度は、他のデータ要求によって帯域幅が減少するのに応じて低下します。様々な速度と、サポートしようとするそれぞれのコンピューターでドキュメントをテストして、設計対象となる最低速の接続やコンピューターにとってドキュメントが過負荷にならないことを確認します。

再生が遅れる原因となっているフレームのレポートファイルを生成し、そのフレームの内容の一部を最適化または削除することもできます。

「ムービープレビュー」や「シーンプレビュー」コマンドを使用して、作成された SWF ファイルの設定を変更するには、ファイル/パブリッシュ設定を選択します。

ダウンロードパフォーマンスのテスト

  1. 次のいずれかの操作を行います。
    • 制御/シーンプレビューを選択するか、制御/テストを選択します。

      シーンまたはドキュメントをテストする場合は、パブリッシュ設定ダイアログボックスの設定を使用して、現在選択しているものが SWF ファイルとして Animate でパブリッシュされます。SWF ファイルが新しいウィンドウで開かれ、すぐに再生を開始します。

    • ファイル/開くを選択し、SWF ファイルを選択します。

  2. 表示/ダウンロード設定を選択してから、Animate がシミュレートするストリーミング速度を決定するためのダウンロード速度を選択します。ユーザー独自の設定を入力するには、「カスタマイズ」を選択します。

  3. SWF ファイルを表示するときは、表示/プロファイラーを選択して、ダウンロードパフォーマンスのグラフを表示します。

    プロファイラーの左側には、ドキュメントとその設定、状態、およびストリームについての情報が(ドキュメントにある場合は)表示されます。

    プロファイラーの右側には、タイムラインヘッダーとグラフが表示されます。このグラフのバーはそれぞれ、ドキュメントの各フレームを示しています。バーの長さは、バイト単位のフレームサイズに相当します。タイムラインヘッダーの下の赤い線は、制御メニューで設定された現在のモデム速度で所定のフレームがリアルタイムに流れているかどうかを示します。バーが赤い線を超えると、そのフレームが読み込まれるまでドキュメントが中断します。

     (Animate CC のみ)プロファイラーは Animate CC で使用できなくなりました。代わりに Adobe Scout を使用するよう選択できます。詳しくは、Adobe Scout の Animate での使用を参照してください。

  4. ストリーミングのオンとオフを切り替えるには、表示/ダウンロードのシミュレートを選択します。

    ストリーミングをオフに切り替えると、ドキュメントが Web 接続のシミュレーションなしでもう一度最初から再生されます。

    メモ:(Animate のみ)「ダウンロードのシミュレート」オプションは Animate で使用できなくなりました。

  5. グラフのバーをクリックすると、対応するフレームの設定が左のウィンドウに表示され、ドキュメントが停止します。
  6. 必要に応じて、次のいずれかの操作でグラフの表示を調整します。
    • 一時停止の原因となるフレームを調べるには、表示/ストリーミンググラフを選択します。

      このデフォルトの表示では、各フレームを表す薄い灰色と濃い灰色の縦棒が交互に表示されます。それぞれの縦棒の高さは、相対的なバイトサイズを示しています。最初のフレームにはシンボルのコンテンツが保存されているため、多くの場合は他のフレームよりもサイズが大きくなります。

    • 各フレームのサイズを表示するには、表示/フレーム毎データ量を選択します。

      この表示を見ると、どのフレームが原因でストリーミングが遅れるのかがわかります。グラフのフレームを表す縦棒が赤い線を超えている場合は、フレーム全体がダウンロードされるまで、再生が中断されます。

  7. テストウィンドウを閉じ、オーサリング環境に戻ります。

    プロファイラーを使用するテスト環境を設定しておくと、すべての SWF ファイルをテスト環境で直接開くことができます。ファイルがプロファイラーなどの表示オプションを使用して Flash Player ウィンドウ上に開きます。

     (Animate のみ)プロファイラーは Animate で使用できなくなりました。代わりに Adobe Scout を使用するよう選択できます。詳しくは、Adobe Scout の Animate での使用を参照してください。

最終レポートの生成

  1. ファイル/パブリッシュ設定を選択し、「Animate」タブをクリックします。

  2. 「サイズレポートの作成」を選択します。
  3. 「パブリッシュ」をクリックします。

    Animate により、拡張子 .txt のテキストファイルが生成されます(ドキュメントファイルが myMovie.fla であれば、テキストファイルは myMovie Report.txt になります)。レポートには、各フレーム、シェイプ、テキスト、サウンド、ビデオ、および ActionScript スクリプトのサイズが、フレームごとに一覧表示されます。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト