デザイナーとして複雑なイメージおよびキャラクターアニメーションを作成するため、Adobe Photoshop や Adobe Flash Professional などの他の多様なツールまたはプログラムを使用する可能性は大いにあります。Edge Animate では、それらのツールによって生成したスプライトシートを読み込むことにより、そうした作成物を再利用できます。

スプライトシートは、タイル状にグリッド配置された小さなグラフィックスが複数含まれるイメージファイルです。複数のグラフィックスを 1 つのファイルにコンパイルすると、Edge Animate および他のアプリケーションで 1 つのファイルを読み込むだけでそれらのグラフィックスを使用できるようになります。このように読み込み効率が良いと、アニメーションの作成などのパフォーマンスが特に重要視される状況においてとても役立ちます。 

ほとんどのツールでは、スプライトシートはイメージファイル(PNG/JPEG)としてのみエクスポートできます。Adobe Flash Professional CC 2014 以降では、Edge Animate 固有のスプライトシートを生成できます。PNG/JPEG として保存されたスプライトシートおよび Flash Professional で生成されたスプライトシートのどちらであっても Edge Animate にインポートできます。

注意:

読み込んで使用するスプライトシートのサイズが 2048 X 2048 ピクセルを超える場合、デバイス上の Edge Animate コンポジションでパフォーマンスに関する問題が生じることがあります。

イメージファイルとしてのみ保存されたスプライトシートの読み込み

  1. スプライトシートを Edge Animate で読み込む前に、以下の点を確認してください。

    • スプライトシートのイメージのサイズがすべて等しい
    • イメージ間の余白が統一されている
  2. Edge Animate を開きます。シンボルパネルから、+ を右クリックして「スプライトシートを読み込み」をクリックします。

    また、ファイル/スプライトシートを読み込みをクリックすることもできます。

    シンボルパネルからのスプライトシートの読み込み
    シンボルパネルからのスプライトシートの読み込み

  3. 必要なスプライトシートを参照し、PNG ファイルまたは JPEG ファイルを選択します。「OK」をクリックします。

    「スプライトタイルを定義」ダイアログボックスが表示されます。

    image_sprite_import_1457968426287
    スプライトタイルを定義 - PNG または JPEG スプライトシートの読み込み

    • アニメーションをプレビューするには、「アニメーションをプレビュー」をクリックします。
    • 継続時間と FPS を指定します。PNG および JPEG ファイルの場合、FPS は初期設定で 24 に設定されています。必要に応じて FPS を変更できます。
    • 行数と列数、およびトリミングのオプションを指定します。
  4. 「読み込み」をクリックします。

    イメージパネルに、スプライトシートに対応する PNG または JPEG ファイルが保存されます。構成要素のイメージは、シンボルパネルに個別のシンボル(spritesheet_name_n という名前)として保存されます。

  5. シンボルパネルの必要なシンボルをステージにドラッグします。

Adobe Flash Professional で生成されたスプライトシートの読み込み

  1. Adobe Flash Professional CC 2014 以降で Edge Animate 形式を選択してスプライトシートを生成したことを確認します。

    Adobe Flash Professional CC におけるスプライトシートの生成方法については、Adobe Flash Professional CC ヘルプを参照してください。

  2. シンボルパネルから、+ を右クリックして「スプライトシートを読み込み」をクリックします。

    また、ファイル/スプライトシートを読み込みをクリックすることもできます。

    シンボルパネルを使用したスプライトシートの読み込み
    シンボルパネルを使用したスプライトシートの読み込み

  3. 必要なスプライトシートを参照し、PNG ファイルまたは JPEG ファイルを選択します。「OK」をクリックします。

    「スプライトタイルを定義」ダイアログボックスが表示されます。

    スプライトタイルを定義 - Flash スプライトシートの読み込み
    スプライトタイルを定義 - Flash スプライトシートの読み込み

    • 選択した PNG または JPEG に対応する EAS ファイルを読み込むには、「EAS ファイルを読み込む」を選択します。
    • アニメーションをプレビューするには、「アニメーションをプレビュー」をクリックします。
    • 継続時間と FPS を指定します。EAS ファイルの場合、FPS はソースから継承されます。必要に応じて FPS を変更できます。
  4. 「読み込み」をクリックします。

    イメージパネルに、スプライトシートに対応する PNG または JPEG ファイルが保存されます。構成要素のイメージは、シンボルパネルに個別のシンボル(spritesheet_name_n という名前)として保存されます。

  5. シンボルパネルの必要なシンボルをステージにドラッグします。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー