ベストプラクティス - SWF アプリケーションのオーサリングガイドライン

  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. ビデオのキューポイントの操作
    9. Animate でのオブジェクトの描画および作成
    10. 線とシェイプの変更
    11. Animate CC での線、塗り、グラデーション
    12. Adobe Premiere Pro と After Effects の使用
    13. Animate CC のカラーパネル
    14. Animate で Flash CS6 ファイルを開く
    15. Animate でのクラシックテキストの操作
    16. Animate へのアートワークの挿入
    17. Animate に読み込まれたビットマップ
    18. 3D グラフィック
    19. Animate でのシンボルの操作
    20. Adobe Animate での線とシェイプの描画
    21. Animate でのライブラリの使用
    22. サウンドの書き出し
    23. Animate CC でのオブジェクトの選択
    24. Animate での Illustrator AI ファイルの操作
    25. スプレーブラシツールでのパターンの適用
    26. ブレンドモードの適用
    27. オブジェクトの配置
    28. コマンドメニューを使用したタスクの自動化
    29. 多言語テキスト
    30. Animate でのカメラの使用
    31. Adobe Scout での Animate の使用
    32. Fireworks ファイルの作業
    33. グラフィックフィルター
    34. サウンドと ActionScript
    35. 描画の環境設定
    36. ペンツールを使用した描画
  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. ベストプラクティス - アクセシビリティガイドライン
    12. Animate ワークスペースのアクセシビリティ
    13. スクリプトの記述と管理
    14. カスタムプラットフォームサポートの有効化
    15. カスタムプラットフォームサポートの概要
    16. アクセシビリティコンテンツの作成
    17. カスタムプラットフォームサポートプラグインの操作
    18. ActionScript 3.0 のデバッグ
    19. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. QuickTime ビデオファイルの書き出し
    9. ActionScript を使用した外部ビデオ再生の制御
    10. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    11. ベストプラクティス - ビデオ規則
    12. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    13. ベストプラクティス - FLA ファイルの構造化
    14. FLA ファイルを Animate 向けに最適化するベストプラクティス
    15. ActionScript パブリッシュ設定
    16. Animate のパブリッシュ設定の指定
    17. プロジェクターファイルの書き出し
    18. 画像とアニメーション GIF の書き出し
    19. HTML パブリッシュ用テンプレート
    20. Adobe Premiere Pro と After Effects の使用
    21. アニメーションのクイック共有とパブリッシュ

SWF アプリケーションのガイドラインについて

Animate アプリケーションを作成するのに最もよい方法は、作成するアプリケーションとそれに使用する技術によって異なります。

オンラインアプリケーションでは、ユーザーが Web サイトとやり取りすることによって、その Web サイトに影響を与えることができます。例えば、アプリケーションがユーザーから登録用のユーザー名やパスワードなどの情報を収集し、情報がフォーラムなどでサイトに追加され、あるいはユーザーがサイトの他の訪問者とチャットルームまたは対話型掲示板などでリアルタイムにやり取りするような場合があります。やり取りによっては、サーバーからの結果が SWF ファイルに反映されることもしばしばあります。上記の例は、ユーザーと、様々な種類のサーバーとのやり取りを扱うアプリケーションの例です。訪問者の情報やデータを使用しない Web サイトは、アプリケーションではありません(ポートフォリオ、マンガアニメーション、静止情報型サイトなど)。Animate アプリケーションでは、ユーザー、Web アプリケーションおよびサーバーの間のやり取りの手順が必要です。基本的な手順は次のとおりです。

  1. ユーザーが情報を SWF ファイルに入力します。

  2. この情報がデータに変換されます。

  3. このデータがフォーマットされて、Web サーバーに送信されます。

  4. Web サーバーがこのデータを収集して、ColdFusion、PHP、ASP などのアプリケーションサーバーに送信します。

  5. このデータは処理されて、Web サーバーに戻されます。

  6. Web サーバーはその結果を SWF ファイルに送信します。

  7. この SWF ファイルはフォーマット済みのデータを受け取ります。

  8. ActionScript がデータを処理して、このアプリケーションでデータを使用できるようにします。

アプリケーションを作成するときは、データの転送に使用するプロトコルを選択する必要があります。プロトコルは、データがいつ送信または受信されたか、転送時の形式、およびサーバーの応答の処理方法をアプリケーションに警告します。SWF ファイルにデータが受領されたら、操作してフォーマットする必要があります。プロトコルを使用すると、データが予期せぬフォーマットになる心配はありません。名前と値のペアを使用してデータを転送する場合は、データのフォーマット方法をチェックすることができます。データが正しくフォーマットされているかどうかチェックして、XML 形式のデータを受け取らないようにすることによって、データを予想し、作業するデータが SWF ファイルに認識されるようにします。

データの収集とフォーマット

アプリケーションは、ユーザーによる SWF ファイルの操作に依存しています。ユーザーによるフォームへの入力に依存することもしばしばです。Animate では、Animate アプリケーションにデータを入力し、フォーマットする方法が多数用意されています。この柔軟性は、アニメーションやインターフェイスのクリエイティブコントロールの機能、および ActionScript を使用して実行できるエラーチェックや検証によって実現されています。

データ収集用のフォームを Animate で作成する利点としては、次のようなものがあります。

  • デザインコントロールの向上

  • ページの更新の減少または不要化

  • 共通アセットの再利用

    ヒント:ユーザーから収集した情報は、ユーザーのコンピューターの共有オブジェクトに保存します。共有オブジェクトを使用すると、データをユーザーのコンピューターに保存できます。これは Cookie の使用に似ています。共有オブジェクトの詳細については、『ActionScript 2.0 リファレンスガイド』または『ActionScript 3.0 言語およびコンポーネントリファレンス』の「sharedObject クラス」を参照してください。

データの送信と処理

通常、情報をサーバーに送信する前に、それをサーバーが認識できるような形式に処理する必要があります。サーバーがデータを受信すると、様々な方法で操作することができ、SWF ファイルに受け入れられる形式で返すことができます。この形式は、名前と値のペアから複雑なオブジェクトまで様々です。

注意:

アプリケーションサーバーでは、出力の MIME タイプが application/x-www-urlform-encoded に設定されている必要があります。この MIME タイプがない場合は、結果が Animate に到達しても通常は使用できません。

次の表に、Animate を使用してサーバーとの間でデータを送受信するいくつかの方法を示します。

送信データ

説明

LoadVars.send および LoadVars.sendAndLoad

名前と値のペアを処理するためにサーバー側のスクリプトに送信します。LoadVars.send は、変数をリモートスクリプトに送信し、応答があっても無視します。LoadVar.sendAndLoad は名前と値のペアをサーバーに送信し、ターゲットの LoadVars オブジェクトの応答をロードまたは解析します。

XML.send および XML.sendAndLoad

LoadVars と似ていますが、XML.send および XML.sendAndLoad は名前と値のペアではなく XML パケットを送信します。

getURL

getURL() 関数または MovieClip.getURL メソッドを使用すると、変数を Animate からフレームまたはポップアップウィンドウに送信できます。

Remoting

Animate と ColdFusion、ASP.NET、Java などとの間で複雑な情報を簡単にやり取りできます。また、Animate Remoting を使用して、Web サービスを利用することもできます。

Web サービス

Adobe Animate には、リモート Web サービスへの接続、データの送受信および結果の各コンポーネントへのバインドを行える WebServiceConnector コンポーネントが用意されています。これにより、Animate 開発者は ActionScript を 1 行も書かずにリッチなインターネットアプリケーションを短時間で作成できます。

WebServiceClasses を使用すると、通常は複雑な ActionScript の記述を必要とするリモート Web サービスを利用できます。

データのロードと検証の追加

データをサーバーに送信する前に、取得した情報を検証します。これにより、リモートサーバーの負荷を抑えることができます。これは、ユーザーが必須フィールドに入力しないときほど多くの要求を処理しないためです。どのアプリケーションでも、クライアント側の検証に全面的に頼らず、サーバー側でも検証を行う必要があります。

簡単な登録またはログインのフォームを作成する場合でも、ユーザーが名前とパスワードを入力したことを確認します。この検証は、要求をリモートのサーバー側スクリプトに送信して、結果を待つ前に行います。サーバー側の検証だけに頼らないでください。ユーザーがユーザー名しか入力しないと、サーバー側のスクリプトは要求を受信し、送信中のデータを検証して、ユーザー名とパスワードの両方が必要であるというエラーメッセージを Animate アプリケーションに返さなければなりません。同様に、検証がクライアント側のみで SWF ファイル内で実行された場合、ユーザーが SWF ファイルをハッキングして検証を回避し、不正なデータを書き込もうとしてデータをサーバーに送信する可能性があります。

クライアント側の検証は、フォームのフィールドが 1 文字以上であるか、ユーザーが文字列ではなく数値を入力したことを確認する程度のもので十分です。例えば、電子メールアドレスを検証するには、Animate のテキストフィールドが空ではなく、少なくともアットマーク(@)とドット(.)の文字が入力されていることを確認します。サーバー側の検証では、もっと複雑な検証を追加して、電子メールアドレスが有効なドメインに所属していることを確認します。

サーバーから SWF ファイルにロードするデータを処理する ActionScript を記述する必要があります。SWF ファイルへのデータのロードが終了すると、その場所からデータにアクセスできます。ActionScript を使用して、データがすべてロードされたかどうかを確認します。コールバック関数またはリスナーを使用して、データがドキュメントにロードされたことを通知することもできます。

データはロードすると、いくつかの方法でフォーマットできます。

  • XML をロードした場合、データの解析と使用に XML クラスメソッドとプロパティを使用します。名前と値のペアを使用する場合、このペアは変数に変わり、変数として操作できます。

  • データを Web サービスや Animate Remoting から受け取ることもあります。

どちらの場合にも、配列、オブジェクト、またはレコードセットなどの複雑なデータ構造を受け取る可能性があり、これを解析して適切にバインドする必要があります。

エラー処理とデバッグの使用

アプリケーションは、一定のエラーを予測してそれに合った処理ができるように十分な堅牢性を持たせる必要があります。

ActionScript 2.0 でエラー処理を実行する最もよい方法は、try-catch-finally ブロックを使用することです。これはカスタムエラーをスローしてキャッチします。カスタムエラークラスを作成することによって、アプリケーション全体でコードを再利用することができ、エラー処理コードを記述し直す必要がありません。カスタムエラーのスローの詳細については、「Error クラス」(『ActionScript 2.0 リファレンスガイド』)を参照してください。try-catch-finally ブロックの詳細については、「try..catch..finally」(『ActionScript 2.0 リファレンスガイド』)を参照してください。

ActionScript 3.0 では、エラーのキャッチに flash.errors クラスを使用します。

詳細については、『ActionScript 3.0 のプログラミング』の「アプリケーションの同期エラーの処理」を参照してください。

ファイルの整理とコードの保存

ファイルを整理してコードを保存する前に、次に示すガイドラインについて検討してください。

  • SWF ファイルを複数の SWF ファイルに分割するか。分割する場合は、互いの関係をどのようにするか。

  • 複数の SWF ファイルでどのアセットが共有できるか。

  • 動的にロードするのはどのファイルか。

  • ActionScript をどこにどのようにして格納するか。

    アプリケーションを開発するときは、サーバー側のコードとファイルを ActionScript パッケージの論理ディレクトリ構造に類似したディレクトリ構造に保存します。コードがよく整理され、上書きされる危険性が低減するように、コードをこの方法で配置します。

    大きなアプリケーションでは、クライアント側の通信とサービスをクラスにカプセル化します。クラスを使用すると、次のような利点があります。

  • 複数の SWF ファイルでコードを再利用できます。

  • コードを一元管理して編集し、すべての SWF ファイルを再パブリッシュすることによってこれらのファイルを更新できます。

  • 類似した機能を実行する様々な UI エレメントやその他アセットを操作できる単一の API を作成することができます。

MVC デザインパターンの使用

MVC デザインパターンは、アプリケーションで情報、出力、およびデータ処理を分けるときに使用します。アプリケーションは、モデル、ビュー、およびコントローラという 3 つのエレメントに分割されます。これらはそれぞれ、プロセスの異なる部分を処理します。

モデル

アプリケーションのデータとルールを組み込みます。アプリケーションの処理の大部分は、デザインパターンのこの部分で発生します。このモデルには、CFC、EJB、Web サービスなどのコンポーネントとデータベースも含まれます。返されるデータは、プロセスのこの部分では、アプリケーションのインターフェイス(またはフロントエンド)用にフォーマットされていません。返されたデータは別のインターフェイス(またはビュー)に使用できます。

ビュー

アプリケーションのフロントエンド(ユーザーが操作に使用するインターフェイス)を処理し、モデルのコンテンツをレンダリングします。このインターフェイスは、モデルのデータの表示方法を指定し、ユーザーが使用するビューを出力し、ユーザーがアプリケーションのデータにアクセスまたは操作できるようにします。モデルが変更されると、ビューはデータを書き出しまたは読み込み(データを送信または要求)することによって更新され、その変更を反映します。複合型の Web アプリケーション(例えば Web ページ上で他のアプリケーションとやり取りする Animate を組み込んだアプリケーションなど)を作成する場合は、デザインパターンのビューの一部として、複数のインターフェイスを用意することを検討します。MVC デザインパターンは、各種ビューの処理をサポートします。

コントローラ

データを処理し表示するための、モデルとビューの要件を処理します。通常は、多数のコードが収められています。インターフェイス(またはビュー)からのユーザーの要求によって、モデルのどの部分でも呼び出します。アプリケーション固有のコードが収められています。このコードはアプリケーション固有のものであるため、通常は再利用できません。ただし、デザインパターン内のその他のコンポーネントは再利用できます。コントローラはデータの処理や出力は行いません。しかし、ユーザーからの要求を読み込んで、モデルまたはビューのコンポーネントの呼び出しが必要な部分を判断し、データの送信先と、返すデータに適した形式を判断します。コントローラは、モデルデータ内の、表示を必要とする部分にビューが必ずアクセスできるようにします。通常、コントローラはモデルとビューにかかわる変更の送信と応答を行います。

このモデルの各部分は、プロセス全体の中で必要な機能をすべて備えたコンポーネントとして作成されています。モデルのある部分を変更(例えばインターフェイスの手直しなど)しても、プロセスの他の部分は通常修正を必要としません。このため、問題が発生することは少なくなります。デザインパターンが正しく作成されていれば、モデルやコントローラを手直しすることなくビューを変更することができます。アプリケーションで MVC が使用されていない場合、どこかの部分で変更を行うと、コード全体に波及効果が起こり、特定のデザインパターンを使用していた場合よりも多くの変更が必要になります。

MVC パターンを使用する重要な理由として、データとロジックをユーザーインターフェイスと分離することが挙げられます。プロセス内のこの部分を分離すると、同じモデルと未フォーマットのデータを使用する、異なったいくつかのグラフィカルインターフェイスを利用することができます。つまり、様々な Animate インターフェイスを持つアプリケーションを使用できるということです。これらは Web 用のインターフェイス、Pocket PC 用のインターフェイス、携帯電話用のインターフェイス、そして Animate をまったく使用しない HTML バージョンなどです。データをアプリケーションのその他の部分と分離すると、複数のクライアントインターフェイスの開発、テスト、さらに更新でも大きく時間を短縮することができます。同様に、既存のモデルが使用できる場合、同じアプリケーションに新しいフロントエンドを追加するほうが容易です。

e-コマース Web サイトや e-ラーニングアプリケーションなどの大規模で複雑なアプリケーションを構築する場合は、MVC だけを使用します。このアーキテクチャを使用するには、Animate とこのデザインパターンがどのように作用するかを計画し、理解することが必要です。様々な部分が互いにどのように関係しているかを注意深く検討します。通常、これにはテストとデバッグが必要です。MVC を使用するとき、テストとデバッグは一般の Animate アプリケーションよりも複雑で難解です。複雑性を上げる必要のあるアプリケーションを構築する場合は、MVC を使用して作業を整理することを検討してください。

セキュリティの高いアプリケーションの作成

ログインして記事を読むだけの小さなポータルサイトを作成する場合でも、大規模な e-コマースストアを作成する場合でも、不正なユーザーがアプリケーションをハッキングしようとする可能性はあります。このため、次の手順でアプリケーションのセキュリティを高めることを検討してください。

  • データを HTTPS に掲載します。これは、セキュリティを高めたいデータ用のものです。データを処理するためにリモートサーバーに送信する前に、Animate で値を暗号化します。

    注意:SWF ファイルには、ユーザーからのアクセスを望まない情報やコードを決して保存しないでください。SWF ファイルを逆アセンブルして、サードパーティソフトウェアでそのコンテンツを見るのは容易です。

  • クロスドメインポリシーを追加します。これによって、許可されていないドメインからこちら側のアセットにアクセスできなくなります。

 

アドビのロゴ

アカウントにログイン