EXTENSIONLayer들을 정확한 간격으로 복제해서 정렬해주는 Kangaroo Extention

Layer들을 복제하여 같은 간격으로 정렬해주는 여러가지 Script나 Extension은 있었지만, 다양한 속성들을 함께 복제하여 정렬해주는 기능은 대부분 없습니다. 이번에 소개해드릴 Kangaroo Extension은 컬러도 중간단계의 복제에서 자동으로 몰핑이 됩니다.



1. Kangaroo Extension

01. 아래 그림은 Soupcan이라는 원통을 만드는 Preset입니다. 이것을 이용해서 간단하게 애니메이션되는 움직임을 만들어 보겠습니다.

02. 처음에는 길어지는 애니메이션을 만들고, 이후에는 길어졌다가 다시 원상태로 되돌아가는 애니메니션을 만들었습니다. 이는 Loop로 반복되는 애니메이션을 만들기 위해서 입니다.

03. 앞서 만든 애니메이션된 Layer를 하나 복제하여 대각선 방향으로 위치시킵니다. 그런 다음, Kangaroo의 두 번째 버튼을 클릭합니다. 버튼의 모양을 보면 알 수 있지만, 이 버튼은 Make In-Between 버튼으로, 중간 단계를 자동으로 만들어주는 기능입니다. 이 기능은 일러스트레이터에도 있어서 한 번 정도는 사용해봤을 것입니다.

04. 클릭을 한 번할 때마다 하나씩 중간 단계의 Layer가 생성된다고 이해하면 됩니다.

05. 만든 후에 수정이 필요한 경우에는 처음에 만든 Layer와 그 다음에 만든 두 번째 Layer를 원하는 위치로 다시 옮긴 후에 Rebuild 버튼을 클릭하면 다시 적용됩니다.

06. 이제 만든 6개의 Layer를 Pre-Comp로 만듭니다. 그런 다음에 Pre-Comp를 복제하여 왼쪽으로 옮겨줍니다. 이때 방금 복제한 Comp의 Layer Bar를 약간 오른쪽으로 움직여서 시간차를 주겠습니다.

07. 이번에는 Make Next 버튼을 소개하겠습니다. 방금 했던 동작 또는 방식을 그대로 복제해주는 기능입니다.

08. 클릭을 몇 번하여 아래 그림처럼 만들어줍니다. Make Next 버튼은 방금 했던 동작을 그대로 기억하여 그림처럼 Layer Bar를 계단식으로 만들어줍니다.

09. 애니메이션을 만들어서 확인해보기 바랍니다.

2. Color In-Between 기능

01. 오브제와 오브제 사이의 형태의 중간 단계를 복제하는 기능도 다른 Script나 Extension에도 있지만, 컬러의 중간 단계도 함께 만들어주는 기능은 많지 않습니다. Kangaroo Extension은 컬러도 자연스럽게 중간 단계를 만들어줍니다. 파란 원을 하나 만든 후에 복제하여 빨간색으로 바꿔줍니다.

02. Layer를 선택하고 Make In-Between 버튼을 클릭합니다. 그러면 그림처럼 자연스럽게 컬러가 변화되는 것을 확인할 수 있습니다.

03. 이제 모든 Layer를 선택한 다음, 복제하여 그림처럼 밑으로 이동시킵니다. 그런 다음, Make Next 버튼을 여러 번 클릭하여 패턴처럼 만들어봅니다.

04. 이번에는 형태가 다른 상황일 경우에 어떻게 되는지 확인해보겠습니다. 왼쪽에 정 원을 하나 만듭니다. 그 다음에 원을 복제하여 맨 오른쪽으로 이동시킵니다. 오른쪽으로 이동시킨 원을 그림처럼 Path를 조절하여 부메랑처럼 만듭니다. 그리고 Make In-Between 버튼을 클릭합니다.

05. 중간 작업이 끝난 상태에서도 처음에 만든 Layer나 복제한 두 번째 Layer를 변형시키거나 컬러를 바꿔준 다음, Rebuild 버튼을 클릭하면 다시 중간 단계의 Layer들이 변형됩니다.

3. Typo Animation - 3D Layer

01. 이번에는 Typo에 적용해보겠습니다. MOTIONLAB이라고 Typo를 입력한 후에 Shape Layer로 만듭니다. 3D Layer를 체크한 후, Layer를 복제하여 화면의 앞쪽으로 배치합니다. 그런 다음, Layer의 컬러를 빨간색으로 바꿔줍니다.

02. Make In-Between 버튼을 클릭하여 멋진 장면도 간단하게 만들 수 있습니다. 물론, Shape Layer의 경우, 벡터라서 상당히 CPU나 그래픽카드가 어느 정도 받쳐주지 않으면 많이 버벅거림을 경험할 것입니다.

03. Stroke을 주면 느낌이 달라집니다.



04. 이번에는 Make In-Between으로 만들어진 중간 단계의 Layer들을 조절하는 방법을 알아보겠습니다. MOTIONLAB이라는 Typo를 만들어서 그림처럼 중간 단계를 만들었습니다.

05. Kangaroo Extension을 보면 밸류그래프 같은 썸네일 버튼이 있습니다. 물론, 이 작은 공간 안에서도 베지어 곡선을 조절하여 그림처럼 그래프를 조절할 수 있습니다. 조절함에 따라 중간 단계에 있는 Layer들의 위치가 그림처럼 바뀝니다. 밸류그래프를 조절하여 그래프를 움직여서 움직임의 속도 조절을 할 때 많이 봤을 것입니다.

06. 버튼에 커서를 올린 상태에서 오른쪽 버튼을 클릭하면, 그림처럼 미리 셋팅된 20개가 넘는 Preset들이 보여집니다. 간단하게 여기에서 선택해도 됩니다.

4. Line 애니메이션

01. 이번에는 Line 애니메이션에 간단하게 적용해보겠습니다. 그림처럼 곡선을 하나 그려줍니다. Taper 기능을 이용하여 그림처럼 끝부분이 얇은 Line으로 만들어줍니다.

02. Trim Path를 적용하여 왼쪽에서 오른쪽으로 Line이 움직이는 애니메이션을 만듭니다.

03. 애니메이션된 Layer를 복제하여 컬러를 바꿔줍니다.

04. 이제 복제해 만든 Layer의 키프레임들을 모두 선택하여 오른쪽으로 3 프레임 또는 5 프레임 정도 옮겨줍니다. 정확한 프레임을 알려드리지 않는 이유는 해보면서 그 차이를 느껴보라는 뜻입니다. 그런 다음, Make In-Between 버튼을 클릭합니다. 하지만, 여기에서 중요한 부분이 있습니다. 맨 마지막에 있는 버튼이 보이는데, 저렇게 작은 버튼 안에 2가지 기능이 있습니다. 위에 있는 키프레임 모양이 Affect All Keyframe이며, 밑에 있는 것이 Affect Current Time 옵션입니다. 현재 키프레임들을 순차적으로 중간 단계를 만들어주려면 반드시 윗부분의 키프레임 모양인 Affect All Keyframe을 선택한 후에 Make In-Between 버튼을 눌러야 합니다. 밑부분의 Affect Current Time이 선택된 상태에서 작업을 하면 인디케이터가 있는 부분에 쓸데없이 키프레임이 생깁니다.

05. Make In-Between 버튼을 몇 번 클릭하면 시간차가 생기는 키프레임들이 그림처럼 계산식으로 만들어집니다. 물론, 흰색과 빨간색의 중간 단계의 컬러도 생성됩니다.

06. 애니메이션으로 확인해보겠습니다.

Kangaroo의 기능은 적용하는 주체에 따라서 확장성이 크다는 장점이 있습니다. 단순하게 Layer들의 중간 단계를 만들어 준다는 것을 벗어나 아이디어를 생각해보기 바랍니다. 일단, 키프레임에 적용할 수 있다는 것이 가장 큰 포인트인 것 같습니다.