このコンポーネントは、AMP HTML 広告、動画広告、イメージ広告ではサポートされていません。
スプライト シート コンポーネントを使用すると、1 つの画像ソースファイルで、スプライト アニメーションを作成したり、画像スプライトを個別に表示したりできます。
アニメーションの作成に使用される 8 つのスプライトを含むスプライト シート。各スプライトは、アニメーションの一部としてではなく、単独で表示することもできます。
プロジェクトにスプライト シート コンポーネントを追加するには:
- [コンポーネント] パネルを開き、その中の [グラフィックと効果] フォルダを開きます。
- スプライト シート コンポーネント
をステージにドラッグします。
- [プロパティ] パネルの [スプライト シート] プロパティ セクションで、[ソース] フィールドにスプライト シート（画像ファイル）の URL を入力します。ソースファイルがローカルにある場合は、フィールドで参照ボタン
をクリックして、パソコンのファイル システムからファイルを選択します。
- 表示するスプライトの X オフセット、Y オフセット、フレーム幅、フレーム高さを入力します。アニメーションを作成する場合、このスプライトはアニメーションの最初のフレームに表示されます。
- スプライト シートの使用目的に応じて、他のスプライトを表示する手順またはスプライト アニメーションを作成する手順を実施します。
他のスプライトを表示するには:
- 他のスプライト シート コンポーネントを追加します。
- 同じソースを使用するように新しいコンポーネントを設定し、このコンポーネントで表示するスプライトのオフセットとフレームの幅および高さを指定します。
スプライト アニメーションを作成するには:
プロパティ
| プロパティ | 説明 |
|---|---|
| 名前 | コンポーネント名。 |
| ソース | スプライト シートとして使用する画像の URL。動的データにバインドできます。 |
| X Offset（X オフセット） | スプライト シートの左端からスプライトまでのオフセット（ピクセル単位）。 |
| Y Offset（Y オフセット） | スプライト シートの上端からスプライトまでのオフセット（ピクセル単位）。 |
| フレーム幅 | スプライトの幅（ピクセル単位）。 |
| フレーム高さ | スプライトの高さ（ピクセル単位）。 |
| 位置揃え |
コンポーネント内のスプライトの位置を指定します。
|
| スケーリング |
コンポーネントとサイズが異なるスプライトを表示する方法を指定します。
|
詳細プロパティ
詳細プロパティは、スプライト アニメーションの設定に使用します。コンポーネントのプロパティ パネルで [詳細プロパティ] の横にある展開アイコン をクリックして、次のプロパティを編集します。
| プロパティ | 説明 |
|---|---|
| Number of Frames（フレーム数） | アニメーションを構成するフレームの数。スプライト シートに含まれるスプライトの数を超える値を入力すると、アニメーションの最後に空白のフレームが挿入されます。 |
| Duration（長さ） | 各フレームの再生時間（ミリ秒単位）。 |
| Number of Loops（ループの回数） | アニメーションを繰り返す回数。アニメーションを連続で繰り返す場合は、0 に設定します。 |
| 自動再生 | オンにすると、アニメーションが自動的に再生されます。 |
| End on frame one（フレーム 1 で終了） | オンにすると、アニメーションは最後のループの後、最初のフレームで終了します。 |
| Reverse（逆順） | オンにすると、アニメーションが逆再生されます。 |
イベントとアクション
スプライト シート コンポーネントによって送信されるイベント次のスプライト シート コンポーネントのイベントに基づいて、その他のアクションをトリガーできます。
| イベント | 説明 |
|---|---|
| 一時停止 | アニメーションが一時停止すると送信されます。 |
| 終了 | アニメーションが終了すると送信されます。 |
| 再生開始 | アニメーションの再生が開始されると送信されます。 |
| 最初から再生 | アニメーションの再生が再度開始されると送信されます。 |
[イベント] ダイアログで上記のイベントのいずれかを選択するには、スプライト シート コンポーネントをターゲットとして設定します。
他のイベントによって、次のスプライト シート コンポーネントのアクションをトリガーできます。
| アクション | 設定項目 |
|---|---|
| 新しいアニメーションを作成 |
|
| 再生 | 現在の停止位置または一時停止位置からアニメーションを開始します。 |
| 一時停止 | 現在のアニメーションを一時停止します。 |
| アニメーションを切り替え | アニメーションの再生と一時停止を切り替えます。 |
| 最初から再生 | 最初のフレームからアニメーションを開始します。 |
| 戻る | アニメーション内の 1 つ前のフレームを表示します。 |
| 進む | アニメーション内の 1 つ後のフレームを表示します。 |
| フレームに移動 | 指定したフレームを表示します。 |
[イベント] ダイアログで上記のアクションのいずれかを選択する場合は、スプライト シート コンポーネントをレシーバーとして設定します。
イベントを設定する方法をご確認ください。
プレビュー
ソース、オフセット、フレームの幅と高さを指定すると、Google Web Designer のステージにスプライト シート コンポーネントの静的プレビューが表示され、スプライトが正しく設定されたかどうかを確認できます。
スプライト アニメーションは、Web Designer のインターフェースではプレビューできません。スプライト アニメーションの再生を確認するには、右上隅の [プレビュー] ボタンをクリックして、お使いのブラウザでドキュメントをプレビューしてください。