이전에 Flash Professional이였던 Adobe Animate CC를 사용하면 수백만 개에 달하는 스톡 사진, 그래픽, 아트웍을 손쉽게 이용하고 라이선스를 부여하여 다양한 형식의 애니메이션에 활용할 수 있습니다.
먼저 새로운 HTML5 Canvas 문서를 만들고 CC Libraries 패널을 열면 Adobe Stock에 액세스할 수 있는데요.
Adobe Stock에서 애니메이션을 적용할 에셋을 검색해 보죠.
Animate CC의 CC Libraries 패널에서 직접 검색하여 해당 에셋을 원하는 라이브러리로 바로 다운로드할 수 있습니다.
예를 들어 "underwater ocean sea deep arctic water"를 입력하면 많은 스톡 이미지가 표시되고, 이러한 이미지에는 모두 워터마크가 있습니다.
라이선스가 부여된 경우에는 체크 표시가 나타납니다.
이미지에 라이선스를 부여하기 전에 미리 보기를 다운로드하여 문서에서 사용해볼 수 있습니다.
이미지가 마음에 들면 CC Libraries 패널에서 바로 이 아이콘을 클릭하여 라이선스를 부여할 수 있습니다.
이미 사용할 이미지를 가져왔으므로 검색 결과를 지우고 마우스 오른쪽 버튼을 클릭한 다음 문서에서 사용을 선택합니다.
이 비트맵 이미지는 스테이지 크기보다 더 큰데요.
크기를 조정해 보죠.
현재 스테이지 크기는 550 x 400입니다.
이 비트맵 이미지를 스테이지 크기와 동일하게 설정한 다음 레이어 이름을 Ocean으로 지정하고 잠급니다.
이 레이어 위에 새 레이어를 만들어 보죠.
다시 Adobe Stock을 선택하고 다른 이미지를 검색합니다.
이번에는 구체적으로 키워드를 입력해 보죠. dolphin, porpoise, blue cartoon을 입력하면 많은 검색 결과가 표시됩니다.
이 이미지들은 대부분 벡터 아트웍인데요.
벡터 아트웍을 사용하면 에셋의 특정 부분을 손쉽게 수정하고 애니메이션을 적용할 수 있으며 픽셀화 현상 없이 원하는 대로 크기를 조정할 수 있습니다.
다시 말하면 원하는 경우 비트맵 미리 보기를 저장하거나 이 패널에서 바로 라이선스를 부여할 수 있습니다.
이미 이미지에 라이선스를 부여하여 사용할 수 있으며, 이 라이브러리에 저장되어 있습니다.
마우스 오른쪽 버튼을 클릭한 다음 문서에서 사용을 선택합니다.
이 이미지는 벡터 아트웍이므로 Animate CC로 이 벡터 아트웍을 가져오는 방식을 설정해야 합니다.
편집 가능한 경로를 유지하고 단일 Animate 레이어로 가져오도록 선택한 다음 확인을 누르면 이와 같이 돌고래가 표시됩니다.
라이선스를 부여하지 않은 벡터 에셋은 투명한 배경이 아니라 흰색 배경으로 렌더링됩니다.
이미지에 라이선스를 부여하면 벡터 이미지는 투명한 배경으로 렌더링되죠.
이 레이어 이름을 Dolphin으로 변경한 다음 자유 변형 툴을 사용하여 크기를 조정하겠습니다.
이 툴을 선택하면 이미지 주위에 핸들이 표시되는데, 이 핸들을 사용하여 크기를 줄입니다.
이처럼 벡터 이미지를 변형할 때 돌고래가 옆이나 위아래로 늘어나지 않도록 Shift 키를 눌러 돌고래의 비율을 유지하면서 조정합니다.
조금 더 작게 만들어 보죠.
돌고래가 선택된 상태에서 선택 툴을 다시 선택하고 수정 > 심볼로 변환을 누릅니다.
동영상 클립 심볼을 만들면 복잡한 벡터 아트웍에 애니메이션을 손쉽게 적용할 수 있습니다.
이름을 Dolphin이라고 입력한 다음 확인을 누릅니다.
이제 프레임을 80번 프레임까지 확대해 보죠.
두 레이어의 80번 프레임을 클릭하고 드래그하여 선택한 다음 삽입 > 타임라인 > 프레임을 선택합니다.
그러면 프레임 범위가 80번 프레임까지 확대됩니다.
Ocean 레이어에는 애니메이션을 적용하지 않으므로 잠금 상태로 둡니다.
Dolphin 레이어에서 이 지점을 마우스 오른쪽 버튼으로 클릭하여 모션 트윈 만들기를 선택합니다.
다시 1번 프레임으로 돌아가 돌고래가 옆에서 시작하도록 이동시킨 다음 40번 프레임에서 돌고래를 이 지점으로 이동시킵니다.
그러면 모션 안내선이 표시되는데, 마우스를 이 모션 안내선 위로 가져가면 커서가 모양 수정 커서로 바뀌고 커서 옆에 작은 호가 표시되는데, 이때 클릭하고 드래그하여 모션 경로를 조작할 수 있습니다.
원하는 대로 모션 안내선을 조정할 수 있습니다.
이제 80번 프레임으로 이동하여 돌고래를 화면 밖으로 이동시킵니다.
다시 이 모션 안내선을 클릭하고 드래그하여 조정합니다.
원하는 경우 모션을 보다 세부적으로 조정할 수 있습니다.
방금 만든 모션을 미리 보면 돌고래가 등장했다가 원을 그리며 사라집니다.
돌고래의 움직임을 좀 더 자연스럽게 표현하려면 모션 트윈이 선택된 상태에서 패스 방향으로를 선택하면 돌고래가 위로 올라가면서 멋지게 한 바퀴 돌고 사라집니다.
이 모션을 미리 보려면 1번 프레임으로 돌아가 재생을 누릅니다.
Canvas용으로 만들기 위해 컨트롤 > 테스트를 선택하면 이와 같이 만들어집니다.
지금까지 Adobe Stock 에셋을 통합하고 에셋에 애니메이션을 적용한 다음 HTML5 Canvas 문서를 내보내 보았습니다.
Animate CC를 사용하면 이 모든 것이 가능합니다.
