マニュアルキャンセル

ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント

検索

最終更新日 : 2023年5月24日

モバイルデバイス向けの Animate コンテンツの作成

モバイルデバイス向けに Animate コンテンツを作成する場合、いくつかの基本的なルールがあります。例えば、極端に複雑なアートワーク、過度なトゥイーンまたは透過はなるべく避けるべきです。

Flash Lite の開発者は、それぞれのモバイルデバイスによってパフォーマンスが大きく異なるため、さらなる課題に直面します。様々なデバイス向けにコンテンツを配信するには、場合によって一番パフォーマンスの低いデバイスに合わせて作成する必要があります。

モバイルコンテンツを最適化するには、妥協点を考慮する必要があります。例えば、コンテンツの見栄えをよくする技術がある一方、相反するパフォーマンスを向上させる技術もあります。これらの妥協点を探るには、エミュレーターでのテストと対象デバイスでのテストを繰り返すことになります。色の再現性、テキストの判読性、操作性、ユーザーインターフェイスのレスポンスなど、実際のモバイルデバイスの操作の側面を評価するには、実際のデバイスでコンテンツを表示する必要があります。

Flash Lite のコンテンツは、Flash CC 以降のバージョンには適用されません。

モバイルデバイスのアニメーションに関する Flash Lite のガイドライン

モバイルデバイス向けの動画コンテンツを作成する場合、デバイスの CPU の制限を考慮し、このガイドラインに従い、Flash Lite コンテンツの動作が重くならないようにします。

新規の Flash Lite ファイルを作成するときに、ドキュメントの設定が正しくされていることを確認します。Animate ファイルはスムーズに拡大縮小できますが、作成時のステージサイズそのままではなくプレーヤー内で拡大縮小して実行される場合は、パフォーマンスが低下する可能性があります。対象デバイスの解像度に合わせて、ドキュメントのステージサイズを設定してください。また、Flash Player を正しいバージョンの Flash Lite に設定してください。
Flash Lite では、ベクトル画像を低品質、中品質、高品質でレンダリングできます。レンダリング品質を高くすると、ベクトル画像は Flash Lite 上でより滑らかで正確にレンダリングされますが、デバイスの CPU 使用率も高くなります。複雑なアニメーションを表示するには、プレーヤーの品質設定を変更しながら、SWF ファイルをひととおりテストしてください。SWF ファイルのレンダリング品質を制御するには、_quality プロパティまたは SetQuality コマンドを使用します。_quality プロパティの有効な値は、LOW、MEDIUM および HIGH です。
同時に適用するトゥイーンの数を制限します。トゥイーンの数を減らすか、1 つのアニメーションが終了してから別のアニメーションが始まるようにアニメーションの順序を指定します。
シンボルの透過（アルファ）効果は CPU の使用率を消費するため、なるべく使わないようにします。特に、アルファレベルが不透明ではない（100 ％未満の）シンボルのトゥイーン処理は避けます。
CPU の使用率を消費する視覚効果は使用しないようにします。例えば、大きなマスク、大量のモーション、アルファブレンド処理、広範囲にわたるグラデーション、複雑なベクトルなどです。
トゥイーン、キーフレームアニメーション、ActionScript による動作を組み合わせて試し、最も効果的な結果が得られるようにします。
ベクトルの楕円と円のレンダリングは、四角形の場合よりもメモリを大幅に消費します。また、曲線のストロークの使用も、CPU の使用率を増大させます。
実際の対象デバイスでアニメーションを繰り返しテストします。
Animate で動画領域が描画されるときは、その領域の周囲に長方形の境界ボックスが定義されます。領域を最適化するには、この長方形をできるだけ小さくします。トゥイーンと他のトゥイーンが重ならないようにします。Animate ではマージされた領域が 1 つの長方形として解釈されるので、全体の領域が大きくなります。アニメーションを最適化するには、Animate の「再描画する領域を表示」機能を使用します。
画面のムービークリップを非表示にする場合、_alpha = 0 と _visible = false は使用しないでください。ムービークリップを非表示にしたり、アルファをゼロに変更しても、線のレンダリング計算は行われるため、パフォーマンスが低下する可能性があります。
同様に、他のアートワークの背面にムービークリップを隠さないでください。この場合も、プレーヤーの計算が行われます。ムービークリップをステージの範囲外に移動するか、removeMovieClip を呼び出して削除してください。

モバイルデバイスでの Flash Lite のビットマップ画像とベクトル画像

Flash Lite ではベクトル画像とビットマップ画像の両方をレンダリングできます。それぞれの画像タイプには長所と短所があります。ビットマップ画像とベクトル画像のどちらを使用するかを決定づける理由は、常に明確なものがあるわけではなく、複数の要因によって変わります。

ベクトル画像は SWF ファイルの中で数式によりコンパクトに表現され、Flash Lite で実行時に画像を表示するために数式が計算されます。対照的に、ビットマップ画像は画素（ピクセル）の配列で表示され、より多くのデータのバイト数が必要です。そのため、ファイルにベクトル画像を使用すると、ファイルサイズとメモリ使用量が減ります。

また、ベクトル画像はサイズを拡大しても、滑らかな形状が維持されます。ビットマップ画像を拡大すると、画素が荒くなり角張って見えます。

ベクトル画像は、ビットマップと比較すると、レンダリングに多くの処理能力が必要です。特に、複雑な形状や塗りが多いベクトル画像は処理に時間がかかります。そのため、ベクトル画像を多用すると、ファイル全体のパフォーマンスが低下することがあります。ビットマップ画像はベクトル画像ほどレンダリングの処理時間がかからないため、ファイルによっては適した選択となります。例えば、複雑な道路地図をアニメーションにして携帯電話でスクロールする場合などです。

次の事項を考慮してください。

ベクトル画像にアウトラインを使用しないようにします。アウトラインには内部と外部のエッジがあるため（塗りは 1 つのみ）、レンダリング処理が 2 倍になります。
コーナーは曲線よりもレンダリングが単純です。可能であれば、平坦なエッジを使用します（特に非常に小さなベクトル画像の場合）。
アイコンなど、小さなベクトル画像の場合、最適化は特に有効です。複雑なアイコンにしてもレンダリング時に詳細が失われるため、その分のレンダリング処理が無駄になります。
一般的な方法として、小さく複雑な画像（アイコンなど）にはビットマップを使用し、大きく単純な画像にはベクトル画像を使用します。
適切なサイズでビットマップ画像を読み込みます。Animate に大きな画像を読み込んでから縮小すると、ファイルサイズと実行時メモリの無駄になります。
Flash Lite はビットマップのスムーズ処理をサポートしていません。ビットマップを拡大縮小または回転すると、見た目がギザギザになります。画像の拡大縮小または回転が必要な場合、ベクトル画像の使用を検討してください。
テキストは本質的に非常に複雑なベクトル形状です。当然ながらテキストは重要な場合が多く、まったく使用しないことはほとんどありません。テキストを使用する場合に、テキストをアニメーション化したり、アニメーション上に配置したりすることは避けます。ビットマップ化したテキストを使用することも検討してください。複数行の動的な入力テキストの場合、テキスト文字列の改行はキャッシュされません。Animate では実行時に改行され、テキストフィールドが再描画されるたびに改行が再計算されます。静的なテキストフィールドは、コンパイル時に改行が事前に計算されるため問題ありません。動的なコンテンツには動的なテキストフィールドの使用は避けられませんが、可能な場合は静的なテキストフィールドを使用するようにします。
Animate はビットマップの透過部分でも再描画の計算を行うので、PNG ファイルでは透過の使用を最小限に抑えてください。例えば、前面の要素に透過 PNG ファイルがある場合、全画面にわたる透過 PNG は書き出ししないでください。前面の要素の実際のサイズで書き出しするようにします。
ビットマップレイヤー同士、そしてベクトルレイヤー同士をグループ化します。Animate では、ビットマップコンテンツとベクトルコンテンツには異なるレンダリング機能が使用されるので、機能の切り替えに時間がかかります。

モバイルデバイス向けに Flash Lite ビットマップの圧縮率を設定

ビットマップを使用する場合、画像圧縮オプション（画像単位または全画像一括）を設定し、SWF ファイルサイズを縮小することができます。

ビットマップファイルごとの圧縮オプションの設定

Animate を起動し、ドキュメントを作成します。
ライブラリウィンドウでビットマップを選択します。
ライブラリウィンドウのビットマップアイコンを右クリック（Windows）または Control キーを押しながらクリック（Mac OS）し、コンテキストメニューから「プロパティ」を選択すると、ビットマッププロパティダイアログボックスが開きます。
圧縮ポップアップメニューから、次のオプションのいずれかを選択します。
- グラデーション塗りを含む写真や画像など、カラーやトーンが複雑に変化する画像には、「写真画質（JPEG）」オプションを選択します。このオプションを選択すると JPEG ファイルが作成されます。「読み込んだ JPEG データを使用する」チェックボックスを選択すると、読み込んだ画像に指定したデフォルトの圧縮品質が適用されます。圧縮品質を新たに指定するには、「読み込んだ JPEG データを使用する」をオフにして、画質テキストボックスに 1 ～ 100 の範囲で値を入力します。高い値を設定すると画質は高くなりますが、ファイルサイズも大きくなるので、適切な値を指定します。
- 形状が単純で色数が少ない画像には、「ロスレス（PNG/GIF）」を選択します。このオプションを選択すると、データの欠落がない可逆圧縮を使用して画像が圧縮されます。
「テスト」ボタンをクリックすると、ファイルの圧縮結果がわかります。

元のファイルサイズと圧縮後のファイルサイズを比較して、選択した圧縮の設定が適切かどうかを判断します。

すべてのビットマップ画像の圧縮の設定

ファイル／パブリッシュ設定を選択し、「Flash」タブをクリックすると、圧縮オプションが表示されます。
JPEG 画質のスライダーを調整するか、値を入力します。JPEG 画質を高くすると高画質になりますが、SWF ファイルのサイズは大きくなります。低画質にすると SWF ファイルが小さくなります。いろいろな設定を試して、ファイルサイズと画質の最適な組み合わせを見つけてください。

モバイルデバイスに合わせた Flash Lite フレームの最適化

Flash Lite をサポートするほとんどのモバイルデバイスは、1 秒間に約 15 ～ 20 フレーム（fps）のレートでコンテンツを再生します。フレームレートは最低で 6 fps に設定できます。開発時に、ドキュメントのフレームレートを対象デバイスの再生速度に近い値で設定してください。これによって、パフォーマンスに制限があるデバイスでコンテンツの動きを確認できます。最終的な SWF ファイルを発行する前に、ドキュメントのフレームレートを 20 fps 以上に設定し、デバイスが高いフレームレートをサポートする場合でもパフォーマンスを制限しないようにします。
gotoAndPlay を使用している場合、要求されたフレームが再生される前に、現在のフレームと要求されたフレームの間のフレームの初期化が必要になります。これらのフレームに異なるコンテンツが多く含まれる場合、タイムラインを使用するのではなく、異なるムービークリップを使用する方が効率的なこともあります。
すべてのコンテンツをファイルの最初に配置してプリロードする方法は、デスクトップコンピューターなどの場合は効果的ですが、モバイルデバイスの場合はファイルの起動が遅くなる可能性があります。ムービークリップを使用するときに初期化するように、コンテンツをファイル全体に配置してください。

モバイルデバイスの Flash Lite コンテンツ向けに ActionScript を最適化

ほとんどのモバイルデバイスには処理速度とメモリの制限があるので、モバイルデバイスで使用する Flash Lite コンテンツ向けに ActionScript で開発する場合は、次のガイドラインに従います。

ファイルとコードをできるだけ単純にします。使用していないムービークリップや、不要なフレームとコードのループを削除し、フレームが多すぎたり無関係なフレームを含むことのないようにします。
FOR ループを使用すると、条件が繰り返し確認される際にオーバーヘッドが発生するため、処理が遅くなる可能性があります。条件確認が繰り返されることによりループによるオーバーヘッドが問題になる場合、ループを使用するのではなく、複数の操作を個々に実行します。コードは長くなりますが、パフォーマンスは改善します。
フレームごとのループは、不要になったら直ちに停止します。
CPU の使用率が高くなるので、文字列と配列の処理はできる限り避けます。
ActionScript の getter メソッドと setter メソッドは他のメソッドの呼び出しよりもオーバーヘッドが多いので、直接プロパティにアクセスするようにします。
イベントを適切に管理します。イベントを呼び出す前にリスナが存在すること（null ではないこと）を確認する条件を使用して、イベントリスナの配列をコンパクトに保ちます。clearInterval を呼び出してアクティブなインターバルをクリアし、removeListener を呼び出してアクティブなリスナを削除してから、unloadapplication または removeapplicationClip を使用してコンテンツを削除します。Animate では、ムービークリップをアンロードするときに、ActionScript 関数が SWF データを参照している場合でも、SWF データのメモリは（インターバルやリスナなどから）再収集されません。
変数が不要になった場合、削除するか null に設定してガベージコレクションに指定します。変数を削除すると、不要なアセットが SWF ファイルから削除されるため、実行時のメモリ使用が最適化されます。変数を null に設定するよりも、変数を削除する方が適切です。
removeListener を呼び出してオブジェクトからリスナを明示的に削除してから、ガベージコレクションを行います。
関数を動的に呼び出し、固定のパラメーター群を渡す場合、call（apply ではなく）を使用します。
名前空間（パスなど）を小さくして、起動時間を短縮します。パッケージ内の全レベルを IF 文にコンパイルすると、新しく Object が呼び出されるため、パスのレベル数が減り時間が短縮されます。例えば、com.xxx.yyy.aaa.bbb.ccc.funtionName というレベルのパスは、com.xxx.yyy.aaa.bbb.ccc にオブジェクトがインスタンス化されます。プリプロセッサーソフトウェアを使用して、58923409876.functionName のようにパスを短くして一意な識別子にしてから、SWF コードをコンパイルする方法もあります。
同じ ActionScript クラスを使用する複数の SWF ファイルから構成されるファイルの場合、コンパイル時に選択する SWF ファイルからそのクラスを除外します。こうすることで、ファイルのダウンロード時間と実行時のメモリ必要量を軽減できます。
Object.watch と Object.unwatch を使用しないようにします。これは、オブジェクトプロパティを変更すると、プレーヤーが変更の通知を送信するかどうかを毎回判断する必要があるためです。
タイムラインのキーフレームで実行する ActionScript コードの完了時間が 1 秒を超える場合、コードを分割して複数のキーフレームで実行するようにします。
SWF ファイルを発行するときに、コードから trace 文を削除します。この場合、パブリッシュ設定ダイアログボックスの「Flash」タブにある「Trace アクションを省略」チェックボックスを選択します。
継承は、メソッドの呼び出し数を増加させ、より多くのメモリを使用します。実行時には、必要な機能をすべて含むクラスの方が、スーパークラスから一部の機能を継承するクラスよりも効率的です。そのため、設計時には、クラスの拡張性とコードの効率性のバランスを考慮する必要があります。
SWF ファイルに、カスタムの ActionScript クラス（例えば foo.bar.CustomClass）を含む別の SWF ファイルをロードし、その SWF ファイルをアンロードすると、クラス定義がメモリ内に残ります。メモリを節約するには、アンロードした SWF ファイルのカスタムクラスを明示的に削除します。delete 文を使用し、delete foo.bar.CustomClass などの完全修飾クラス名を指定します。
グローバル変数の使用を制限します。これは、グローバル変数を定義したムービークリップを削除しても、ガベージコレクションに指定されないためです。
Flash のコンポーネントパネルにある標準のユーザーインターフェイスコンポーネントを使用しないようにします。これらのコンポーネントは、デスクトップコンピューターで実行するように設計されており、モバイルデバイス用に最適化されていません。
できるだけ、関数の入れ子を深くしないようにします。
存在しない変数、オブジェクト、関数を参照しないようにします。デスクトップバージョンの Flash Player と比較すると、Flash Lite では存在しない変数を参照する処理に時間がかかるため、パフォーマンスの大幅な低下につながります。
匿名の構文を使用して関数を定義しないようにします。例えば、myObj.eventName = function{ ...} です。明示的に定義した関数の方が効率的です。例えば、function myFunc { ...}; my Obj.eventName = myFunc; のようにします。
Math 関数と浮動小数点の数を最小限に抑えます。このような数値計算はパフォーマンスが低下します。Math ルーチンを使用する必要がある場合、値を事前に計算し、変数の配列に格納する方法もあります。データテーブルから値を取得する方が、実行時に Flash で計算するよりもはるかに高速です。

モバイルデバイスに適した Flash Lite ファイルメモリの管理

Flash Lite では、ファイルから参照されなくなったオブジェクトや変数がメモリから定期的に消去されます。この処理はガベージコレクションと呼ばれます。Flash Lite では、60 秒ごと、またはファイルのメモリ使用率が急激に 20 ％以上増加したときに、ガベージコレクション処理を実行します。

Flash Lite でガベージコレクションを実行する方法やタイミングは制御できませんが、不要なメモリを意図的に解放することはできます。タイムラインまたはグローバル変数の場合、delete 文を使用して、ActionScript オブジェクトが使用するメモリを解放します。ローカル変数（例えば、関数の定義内で定義した変数）の場合、delete 文を使用してオブジェクトのメモリを解放することはできませんが、オブジェクトを参照する変数に null を設定できます。これにより、そのオブジェクトへの参照が他にない場合は、そのオブジェクトが使用するメモリを解放できます。

次の 2 つのコード例は、オブジェクトを参照する変数を削除することで、オブジェクトが使用するメモリを解放する方法を示します。2 つの例は、1 つ目がタイムライン変数を作成し、2 つ目がグローバル変数を作成する点以外は同じです。

// 最初の例：ムービーまたはムービークリップ
// タイムラインにアタッチされた変数 
// 
// Date オブジェクトを作成します。 
var mcDateObject = new Date(); 
// 現在の日付を文字列として返します。 
trace(mcDateObject); 
// オブジェクトを削除します。 
delete mcDateObject; 
// 未定義を返します。 
trace(mcDateObject); 
// 
// 2 番目の例：ムービーまたはムービークリップ
// タイムラインにアタッチされたグローバル変数 
// 
// Date オブジェクトを作成します。 
_global.gDateObject = new Date(); 
// 現在の日付を文字列として返します。 
trace(_global.gDateObject); 
// オブジェクトを削除します。 
delete _global.gDateObject; 
// 未定義を返します。 
trace(_global.gDateObject);

前述のように、ローカル関数の変数が使用するメモリを解放する場合は delete 文を使用できません。代わりに、変数の参照先を null に設定します。これは、delete を使用した場合と同じ効果があります。

function func() 
{ 
    // Date オブジェクトを作成します。 
    var funcDateObject = new Date(); 
    // 現在の日付を文字列として返します。 
    trace(funcDateObject); 
    // 削除しても効果はありません。 
    delete funcDateObject; 
    // 依然として現在の日付を返します。 
    trace(funcDateObject); 
    // オブジェクト参照を null に設定します。 
    funcDateObject = null; 
    // null を返します。 
    trace(funcDateObject); 
} 
// func() 関数を呼び出します。 
func();

Flash Lite にモバイルデバイス用のデータをロード

モバイルデバイス用のファイルを作成する場合、同時にロードするデータ量を最小限に抑えます。外部データを Flash Lite ファイルにロードする場合（例えば XML.load を使用して）、ロードするデータ用に十分なメモリが割り当てられていなければ、デバイスのオペレーティングシステムにメモリエラーが発生する可能性があります。このような状況は、使用可能なメモリの合計量が十分な場合でも発生します。

例えば、100 KB の XML ファイルをロードしようとするときに、デバイスのオペレーティングシステムで、データのロード処理に割り当てられたメモリが 30 KB しかない場合などです。この場合、Flash Lite には、使用可能なメモリ量が十分ではないというエラーメッセージが表示されます。

大量のデータをロードするには、データを小さいパーツ（例えば、複数の XML ファイル）にグループ化し、パーツごとにデータロードの呼び出しを行います。各データパーツのサイズ、つまり作成するデータロードの呼び出し数は、デバイスやファイルによって異なります。メモリエラーが発生しない程度の適切なデータ要求回数を決定するには、様々な対象デバイスでファイルをテストしてください。

パフォーマンスを最適化するには、できるだけ XML ファイルのロードと解析を行わないようにします。代わりに、単純な名前／値のペアにデータを格納し、そのデータを loadVars を使用してテキストファイルからロードするか、事前にコンパイルした SWF ファイルからロードします。

Flash Lite のコンパイル時にクラスを除外

SWF ファイルのサイズを縮小するには、コンパイル時にクラスを除外する方法があります。ただし、そのクラスにアクセスが可能で、型のチェックのために使用できなければなりません。例えば、複数の SWF ファイルまたは共有ライブラリを使用する（特に、それらが多くの同じクラスにアクセスする）ファイルを開発する場合などが該当します。クラスを除外すると、複数のファイル内に同じクラスが重複するのを防ぐことができます。

新しい XML ファイルを作成します。
この XML ファイルに <FLA_ファイル名>_exclude.xml という名前を付けます（<FLA_ファイル名> は、FLA ファイルの名前から .fla 拡張子を除いた部分です）。例えば、FLA ファイル名が sellStocks.fla の場合、XML ファイル名は sellStocks_exclude.xml になります。
FLA ファイルと同じディレクトリにファイルを保存します。
この XML ファイル内に次のタグを指定します。
```
<excludeAssets> 
    <asset name=”className1” /> 
    <asset name=”className2” /> 
</excludeAssets>
```
<asset> タグの名前属性に指定した値は、SWF ファイルから除外するクラス名です。必要な分だけ追加します。例えば、次の XML ファイルを使用すると、mx.core.UIObject クラスと mx.screens.Slide クラスが SWF ファイルから除外されます。
```
<excludeAssets> 
    <asset name=”mx.core.UIObject” /> 
    <asset name=”mx.screens.Slide” /> 
</excludeAssets>
```

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

新規ユーザーの場合

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

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

詳しく見る