AMP HTML 광고, 동영상 광고 또는 이미지 광고에서는 이 구성요소를 지원하지 않습니다.
스프라이트 시트 구성요소를 사용하면 스프라이트 애니메이션을 생성하거나, 하나의 이미지 소스 파일만 사용하면서도 각 이미지 스프라이트를 개별적으로 표시할 수 있습니다.
애니메이션을 만들 때 스프라이트가 8개 있는 스프라이트 시트가 사용됩니다. 각 스프라이트는 애니메이션의 일부가 아니어도 스프라이트 자체를 표시할 수 있습니다.
프로젝트에 스프라이트 시트 구성요소를 추가하는 방법:
- 구성요소 패널에 이어 그래픽 및 효과 폴더를 엽니다.
- 스프라이트 시트
구성요소를 스테이지로 드래그합니다.
- 속성 패널의 스프라이트 시트 속성 섹션에서 소스 입력란에 스프라이트 시트 이미지 파일 URL을 입력합니다. 소스 파일이 로컬 파일인 경우 입력란에서 찾아보기
버튼을 클릭하여 컴퓨터 파일 시스템에서 파일을 선택합니다.
- 표시하려는 특정 스프라이트의 X 오프셋, Y 오프셋, 프레임 너비, 프레임 높이를 입력합니다. 애니메이션을 만드는 경우 애니메이션의 첫 번째 프레임에 스프라이트가 표시됩니다.
- 스프라이트 시트 사용 용도에 따라 다른 스프라이트를 표시하거나 스프라이트 애니메이션을 만드는 단계를 따릅니다.
다른 스프라이트를 표시하는 방법:
- 스프라이트 시트 구성요소를 하나 더 추가합니다.
- 동일한 소스를 사용하되, 새 구성요소에 표시하려는 스프라이트의 오프셋 및 프레임 크기로 새 구성요소를 구성합니다.
스프라이트 애니메이션을 만드는 방법:
속성
| 속성 | 설명 |
|---|---|
| 이름 | 요소의 이름입니다. |
| 소스 | 스프라이트 시트로 사용된 이미지의 URL입니다. 동적 데이터에 결합될 수 있습니다. |
| X Offset (X 오프셋) | 스프라이트 시트 왼쪽 가장자리부터 스프라이트까지의 오프셋(픽셀)입니다. |
| Y Offset (Y 오프셋) | 스프라이트 시트 상단 가장자리부터 스프라이트까지의 오프셋(픽셀)입니다. |
| 프레임 너비 | 스프라이트의 너비(픽셀)입니다. |
| 프레임 높이 | 스프라이트의 높이(픽셀)입니다. |
| 정렬 |
구성요소 내에서 스프라이트의 위치입니다.
|
| 크기 조절 |
구성요소와 크기가 다른 스프라이트를 표시하는 방법:
|
고급 속성
고급 속성을 사용해 스프라이트 애니메이션을 구성합니다. 구성요소 속성 창의 고급 속성 옆에 있는 확장 아이콘 을 클릭하여 다음 속성을 수정합니다.
| 속성 | 설명 |
|---|---|
| Number of Frames (프레임 수) | 애니메이션을 구성하는 프레임의 수입니다. 스프라이트 시트의 스프라이트 수보다 큰 숫자를 입력하면 애니메이션 끝 부분에 빈 프레임이 생깁니다. |
| Duration (기간) | 각 프레임의 재생 시간(밀리초)입니다. |
| Number of Loops (반복 횟수) | 애니메이션이 반복되는 횟수입니다. 0으로 설정하면 애니메이션이 계속 반복됩니다. |
| 자동재생 | 선택하면 애니메이션이 자동으로 재생됩니다. |
| End on frame one (첫 번째 프레임에 종료) | 선택하면 마지막 반복 후 첫 번째 프레임으로 애니메이션이 종료됩니다. |
| Reverse (역재생) | 선택하면 애니메이션이 역방향으로 재생됩니다. |
이벤트 및 작업
스프라이트 시트 구성요소에서 전송하는 이벤트다음과 같은 스프라이트 시트 구성요소 이벤트를 기반으로 다른 작업을 트리거할 수 있습니다.
| 이벤트 | 설명 |
|---|---|
| 일시중지됨 | 애니메이션이 일시중지되면 전송됩니다. |
| 종료됨 | 애니메이션이 종료되면 전송됩니다. |
| 재생 시작됨 | 애니메이션 재생이 시작되면 전송됩니다. |
| 다시 재생됨 | 애니메이션이 다시 시작되면 전송됩니다. |
이벤트 대화상자에서 이러한 이벤트 중 하나를 선택하려면 스프라이트 시트 구성요소를 타겟으로 설정하세요.
다른 이벤트에 대한 반응으로 다음과 같은 스프라이트 시트 구성요소 작업이 트리거될 수 있습니다.
| 작업 | 구성 옵션 |
|---|---|
| 새 애니메이션 생성 |
|
| 재생 | 현재 중단되었거나 일시중지된 위치에서 애니메이션을 시작합니다. |
| 일시중지 | 현재 애니메이션을 일시중지합니다 |
| 애니메이션 전환 | 애니메이션 재생 및 일시중지를 전환합니다. |
| 다시 재생 | 첫 번째 프레임에서 애니메이션을 시작합니다. |
| 뒤로 이동 | 순서 내에서 이전 프레임을 표시합니다. |
| 앞으로 이동 | 순서 내에서 다음 프레임을 표시합니다. |
| 프레임으로 이동 | 지정된 프레임을 표시합니다. |
이벤트 대화상자에서 이러한 작업 중 하나를 선택할 때 스프라이트 시트 구성요소를 수신자로 설정하세요.
이벤트 구성 방법 알아보기
미리보기
소스, 오프셋, 프레임 크기를 지정하면 Google Web Designer에서 스테이지에 스프라이트 시트의 정적 미리보기를 표시하므로, 스프라이트를 정확히 지정했는지 확인할 수 있습니다.
스프라이트 애니메이션은 Web Designer 인터페이스 내에서 미리 볼 수 없습니다. 스프라이트 애니메이션이 재생되는 것을 보려면 오른쪽 상단의 미리보기 버튼을 클릭하여 원하는 브라우저에서 문서 미리보기를 하세요.