sketchmon 으로 스프라이트 애니메이션을 만들어보자.
- 스프라이트 애니메이션은 여러컷으로 구성된 한개의 이미지파일을 자연스럽게 애니메이션으로 플레이 해준다.
아래는 애니메이션을 만들 이미지 원본
- 아래 이미지는 한개 이지만 8개의 프레임으로 구성되어 있으므로, 8개로 잘라서 순서대로 교체해서 보여주면 애니메이션이 완성된다.
준비되었으면 스케치몬으로 애니메이션을 만들어보자
먼저 스케치몬 캔버스를 준비하고 ( https://canvas.sketchmon.com )
1. 화면에 사각 박스를 적당한 사이즈로 드래그 하여 그리고, 배경을 없애 투명하게 만든다.
2. 만들어진 사각박스를 선택한 뒤 우측 [배경이미지 채우기] 를 클릭하여 이미지를 선택하면 아래와 같이 사각박스에 이미지가 들어간다. 이미지가 들어가면 우측에 파란색 [sprite] 버튼이 생기는데 그걸 클릭한다.
3. 스프라이트 생성 화면이 열리면 아래와 같이 8조각으로 나누고, 재생반복 항목은 무한대(∽)아이콘을 누른다. 이후 [확인]
4. 플로우로 이동하여 아래와 같이 작성한다.
- 플로우 내용 : 페이지가 로드되면 위에서 만든 스프라이트 애니메이션을 재생한다. (위에서 스프라이트 애니를 만든 사각박스 이름이 Square-01 이다.)
5. 미리보기를 클릭하여 결과를 확인 하자.
6. 다 완성됐으면 다른이에게 보여줄 공유링크를 생성하자.
7. 생성된 공유링크를 복사하여 친구에게 공유~
아래는 만들어진 결과 화면이다.
sketchmon
무료 디지털 웹 콘텐츠 제작 프로그램 skethcmon(스케치몬), 교육 콘텐츠 저작 프로그램, flow coding(플로우 코딩), pdf 파일 편집, 무료 이미지 배경 제거, 이미지 자르기, 무료 디자인 이미지 제공
sketchmon.com
'sketchmon 노트' 카테고리의 다른 글
디자인 콤포넌트 (2) | 2025.04.09 |
---|---|
sketchmon : 두근 두근 하트 만들기 (54) | 2025.03.15 |
sketchmon flow 샘플 (2) | 2025.03.14 |
스케치몬 타임라인으로 통통튀는 공 만들기 (4) | 2025.03.02 |
스케치몬(sketchmon) 으로 이미지 배경 지우기 (4) | 2025.03.01 |