움직이는 스프라이트 애니메이션 만들기

스프라이트 애니메이션 기능을 이용하여 움직이는 애니메이션을 만들수 있습니다.
스프라이트 애니메이션은 여러컷으로 구성된 한개의 이미지파일을 자연스럽게 애니메이션으로 플레이 해줍니다.

 

애니메이션을 만들 이미지 원본 준비
아래 이미지는 한개 이지만 8개의 프레임으로 구성되어 있으므로, 8개로 잘라서 순서대로 교체해서 보여주면 애니메이션이 완성 됩니다.

 

준비되었으면 스케치몬으로 애니메이션을 만들어보자

먼저 스케치몬 캔버스를 준비하고 ( https://canvas.sketchmon.com )

 

1. 화면에 사각 박스를  적당한 사이즈로 드래그 하여 그리고, 배경을 없애 투명하게 만듭니다.

 

2. 만들어진 사각박스를 선택한 뒤 우측 [배경이미지 채우기] 를 클릭하여 이미지를 선택하면 아래와 같이 사각박스에 이미지가 들어갑니다. 이미지가 들어가면 우측에 파란색 [sprite] 버튼이 생기는데 그걸 클릭합니다.

 

3. 스프라이트 생성 화면이 열리면 아래와 같이 8조각으로 나누고,  재생반복 항목은 무한대(∽)아이콘을 누릅니다.
이후 [확인]

 

4. 플로우로 이동하여 아래와 같이 작성합니다.
플로우 내용 : 페이지가 로드되면 위에서 만든 스프라이트 애니메이션을 재생합니다. (위에서 스프라이트 애니를 만든 사각박스 이름이 Square-01 입니다.)

 

5. 미리보기를 클릭하여 결과를 확인 합니다.

 

6. 다 완성됐으면 다른이에게 보여줄 공유링크를 생성할 수 있습니다.

 

7. 생성된 공유링크를 복사하여 친구에게 공유 하세요~

 

 

아래 url 에서 실제 동작을 확인할 수 있습니다.

https://play.sketchmon.com/SMD55FZ195930A0384

계속 걷는 사람