본문 바로가기
sketchmon 노트

sketchmon : 스프라이트 애니메이션 만들기

by web data 2025. 3. 14.
sketchmon 으로 스프라이트 애니메이션을 만들어보자.
  • 스프라이트 애니메이션은 여러컷으로 구성된 한개의 이미지파일을 자연스럽게 애니메이션으로 플레이 해준다.

 

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

 

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

 

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

 

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

 

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

 

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

 

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

 

5. 미리보기를 클릭하여 결과를 확인 하자.

 

6. 다 완성됐으면 다른이에게 보여줄 공유링크를 생성하자.

 

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

 

 

아래는 만들어진 결과 화면이다.

 

 

 

 

https://www.sketchmon.com

 

sketchmon

무료 디지털 웹 콘텐츠 제작 프로그램 skethcmon(스케치몬), 교육 콘텐츠 저작 프로그램, flow coding(플로우 코딩), pdf 파일 편집, 무료 이미지 배경 제거, 이미지 자르기, 무료 디자인 이미지 제공

sketchmon.com