오브제 하나의 움직임을 컨트롤해서 수많은 레이어들을 같게 움직이거나 다른 움직임들을 만들어 낸다면 정말 편리할 것입니다. 아마도 요즘 나오는 유료 After Effects 템플릿 등을 보면, 이와 같은 기능이 많이 사용되고 있음을 알 수 있습니다. 특히, 복잡해 보이는 트랜지션 등에 많이 사용되곤 합니다. 이제 하나하나 그 기능에 대해서 알아보도록 하겠습니다.
1. Download & Install
http://aescripts.com/overlap에 들어가서 구매하고, C:/Program Files/Adobe/Adobe After Effects CS6/Support Files/Scripts/ScriptUI Panels 안에 스크립트를 넣어주기만 하면 됩니다(Overlap처럼 몇 십 달러가 넘는 스크립트는 반드시 시리얼 번호가 있습니다. 시리얼 번호는 메일로도 오며, Aescript 사이트에서도 구매 후 확인할 수 있습니다).
After Effects를 열고, Window 메뉴의 하단을 보면 Overlap 스크립트가 보일 겁니다. 클릭하면 그림처럼 Overlap 창을 볼 수 있습니다. 왼쪽부터 OVERLAP, CLEAR, PHASE-SHIFT, RANDOMIZE, HELP 버튼이 있습니다. 이제 하나씩 설명하겠습니다. 물론, 여기서 말하는 설명 내용은 HELP 버튼을 누르면 확인할 수 있습니다.
2. OVERLAP
01. 간단한 정사각형 Shape Layer를 하나 만들고, Ctrl+D를 눌러서 총 5개의 Shape Layer를 만듭니다. 그런 다음에 Shape Layer의 컬러를 각각 다른 컬러로 지정합니다. 그리고 맨 처음에 만든 Shape Layer를 아래쪽으로 포지션 이동하는 1초짜리 애니메이션을 만듭니다.
02. 현재 하나의 Shape Layer만 애니메이션이 된 상태입니다. 이제 이것의 움직임에 따라서 나머지 레이어들이 따라서 움직이게 될 것입니다. Overlap 스크립트는 마치 EchoSpace 이펙트와 비슷한 효과를 낼 수 있습니다. 물론, 약간의 차이점은 있습니다.
03. 애니메이션된 첫 번째 Shape Layer의 Position 속성을 클릭한 다음에 Shift 키를 누르고, 다른 레이어들을 모두 선택합니다(첫 번째 Shape Layer의 Position 속성을 클릭한 다음에 Ctrl 키를 누른 상태에서 나머지 레이어들을 하나씩 클릭하여 선택해도 됩니다). 그런 다음 OVERLAP 버튼을 클릭합니다. 클릭하면 Overlap Shared Properties 창이 나옵니다. 여기를 보면, 애니메이션 키프레임이 있는, 즉 맨 처음 만든 Shape Layer에 Driver라는 명칭이 붙습니다. 그 레이어의 Transform > Position이 Overlap된다는 것이 명시되어 있습니다. 만약, Scale이나 Opacity, Rotation 등을 Overlap하기 위해서는 속성에 키프레임을 만들면 됩니다. 이제 모든 것을 확인했으면, 맨 우측 상단에 있는 설정 아이콘을 클릭합니다. Driver 레이어를 따라서 움직이는 모든 나머지 레이어들은 Driven 레이어라고 합니다.
04. 설정 아이콘을 클릭하면, 왼쪽에 옵션 값을 체크할 수 있는 메뉴들이 나타납니다. Rename Driver와 Color Labels 옵션을 클릭합니다. Rename Driver는 Driver가 되는 레이어의 이름을 바꿔주는 것이며, Color Labels은 주체가 되는 Driver 레이어 바와 그 외에 Driver의 명령을 받는 Driven 레이어 바의 컬러를 지정한 컬러로 바꿔주는 역할을 합니다. Color Labels 하단을 보면, Driver와 Driven 레이어 등의 컬러를 원하는 색깔로 지정할 수 있는 팝업 메뉴가 있습니다. 설정 후에 OK 버튼을 누릅니다.
05. Driver 레이어의 바 컬러가 Red로 바뀐 것을 알 수 있습니다. 그 외에 Driven 레이어의 바 컬러는 Yellow로 바뀌었습니다. 이렇게 바뀐 이유는 여러 개의 레이어들을 다룰 때, 좀 더 타임라인 상에서 확인하기 편리하게 시각적으로 차이를 둔 것입니다.
06. 이제 램프 리뷰로 애니메이션을 확인해보면, 첫 번째 Driver 레이어가 움직이고, 몇 프레임 뒤에 다른 레이어들이 똑같은 모션으로 움직이는 것을 확인할 수 있습니다.
07. 이번에는 다른 옵션으로 Overlap을 적용시켜 보겠습니다. 앞서 작업한 것은 다른 위치 값을 가지고 있는 여러 개의 레이어를 Driver로 지정한 Shape Layer의 움직임에 맞춰서 똑같은 움직임을 적용시켰습니다. 그리고 각각의 레이어가 가지고 있는 위치에서 같은 움직임만 주고, 포지션 및 스케일, 투명도까지 애니메이션을 주었습니다.
08. 맨 왼쪽에 있는 파란색 레이어가 애니메이션이 적용된 레이어입니다. 상단에 있다가 하단으로 이동하면서 투명도가 50%로 변하고, 다시 대각선 방향으로 이동하면서 세로로 길쭉한 모양의 라인처럼 스케일이 변하는 애니메이션을 만들었습니다.
09. 방금 애니메이션을 준 레이어를 먼저 선택한 다음, 나머지 레이어들을 선택하고, OVERLAP 버튼을 누릅니다(Driven 레이어 선택 시 선택을 하는 순서에 따라서 움직임이 변합니다). 이번에는 Maintain Original을 체크합니다. 이 옵션은 자신의 원래 포지션 및 속성 값을 그대로 유지하면서 Driver가 된 레이어를 따라서 변화하게 만들어 주는 옵션입니다.
10. 애니메이션을 확인해보면, 그림처럼 각각 자신의 위치에서 레이어들의 애니메이션이 Driver 레이어와 똑같이 움직이는 것을 확인할 수 있습니다.
11. 애니메이션을 확인해보면, 포지션뿐만이 아니라, 투명도와 스케일까지 완벽하게 똑같이 변화되는 것을 확인할 수 있습니다.
12. Driver 레이어를 선택해 봅니다. 여기에 나오는 Frame Delay 옵션은 첫 번째 레이어, 즉 Driver 레이어가 움직인 다음에 5 프레임 후에 다른 레이어들이 움직이게 하는 역할을 합니다. 물론, 두 번째 레이어가 움직인 다음에 다시 5 프레임 후에 세 번째 레이어가 움직이게 되며, 이런 식으로 계속해서 5 프레임씩 딜레이가 된 움직임이 적용됩니다.
3. OVERLAP Index, Invert
01. 이번에는 옵션 중에 Overlap Index가 하는 역할 및 Overlap Invert의 기능에 대해 알아보겠습니다. 레이어들을 중앙에 일렬로 배치를 한 다음, 하나의 레이어만 애니메이션을 시킵니다. 위에서 아래로 내려오는 애니메이션을 만들었습니다.
02. 애니메이션이 만들어진 레이어를 선택한 다음, 다른 레이어들을 각각 선택합니다. 그런 다음에 OVERLAP 버튼을 클릭합니다. Overlap Shared Properties 창에서 Auto-Orient 기능을 제외한 모든 옵션을 체크한 다음에 OK 버튼을 누릅니다.
03. 간단하게 설명하면, Index 기능은 스크립트로 제어를 하기 편리하게 애니메이션의 주체가 되는 Driver를 따라다니는 Driven 레이어들에게 각각 숫자를 붙여주는 역할을 합니다. 녹색 레이어가 1번, 노란색 레이어가 2번, 오렌지색 레이어가 3번, 빨간색 레이어가 4번… 이런 식으로 Index가 생겨납니다.
04. Index 값을 만약 0으로 입력하면, Overlap 기능 중에 Delay같은 효과가 사라지게 되며, Driver의 움직임과 같은 시간으로 움직이게 됩니다.
05. 현재 지정한 녹색 레이어와 오렌지 레이어의 Index는 각각 1번과 3번입니다. 일단, 모든 레이어의 Overlap Index 값을 0으로 설정합니다.
06. 그리고 녹색과 오렌지색 레이어의 Overlap Invert를 체크합니다.
07. 애니메이션을 시켜보면, 녹색과 오렌지색 레이어의 움직임이 Driver 레이어의 움직임과 정반대로 움직이는 것을 확인할 수 있습니다.
4. Auto Orient
01. Auto Orient 기능에 대해서 알아보겠습니다. 간단하게 Shape Layer로 화살표 모양을 만듭니다.
02. Polystar의 Point를 3으로 입력하여 삼각형 모양을 만들어 주고, 여기에 사각형을 더해 화살표 모양의 아이콘을 만들었습니다.
03. 방금 만든 화살표 아이콘을 복제하여 총 5개의 화살표 아이콘을 만듭니다. 각각의 컬러를 틀리게 지정하여 보는 것처럼 만들어 줍니다. 이제 솔리드 레이어를 하나 만들고, 거기에 Mask 패스를 그림처럼 그려줍니다.
04. Mask의 Path를 카피해서 Shape Layer 포지션 Path에 붙이기를 하는 것으로 화살표가 미리 만든 레이어의 Mask Path에 따라 움직이게 만들려고 합니다. 일단, 솔리드 레이어에서 만든 Mask Path를 선택하여 카피합니다.
05. 그리고 맨 처음에 만든 화살표 레이어의 Position에 붙이기를 합니다. 붙이기를 하면, 보는 것처럼 로빙 키프레임으로 붙이기가 됩니다.
06. 애니메이션을 확인해보면, 그림처럼 Mask의 Path가 화살표의 포지션 Path로 변환되었음을 알 수 있습니다.
07. 그런데 화살표를 애니메이션 시켜보면, 화살표의 움직임이 어색함을 알 수 있을 것입니다. 제대로 화살표가 움직이려면, Path를 따라 화살표의 몸통도 함께 움직여야 자연스럽습니다. 이제 이것을 만들어 보겠습니다. 먼저, 애니메이션이 된 화살표 레이어를 선택하고, Shift 키를 누른 상태에서 다른 화살표 레이어들을 지정합니다(Ctrl 키를 누른 상태에서 다른 화살표 레이어를 하나씩 선택해도 됩니다). 그리고 Overlap 버튼을 누릅니다.
08. Overlap Shared Properties 옵션에서 Maintain Original 옵션을 체크하지 않습니다. 만약, 이 부분을 체크하면, 레이어들이 각자 자신의 위치에서 Path를 따라서 움직이게 될 것입니다. 현재 만들려고 하는 애니메이션은 첫 번째 화살표를 따라서 다른 화살표 레이어들이 Path에 따라 움직이는 애니메이션입니다. 그리고 반드시 Auto-Orient 부분을 체크합니다. OK 버튼을 누릅니다.
09. Auto-Orientation 대화 창이 자동으로 나타납니다. 여기에서 패스에 따라서 자동으로 회전이 되게 만들어주는 Orient Along Path를 체크합니다.
10. 화면을 보면, 첫 번째 녹색 화살표의 움직임을 따라 다른 레이어들이 Path를 따라서 움직이는 것을 확인할 수 있습니다.
5. Clear, Phase-Shift, Randomize 버튼
01. Overlap 버튼 바로 옆에 있는 버튼이 바로 Clear 버튼입니다. Overlap을 적용시키면 여러 개의 레이어들에게 스크립트가 적용되기 때문에, 만일 취소하려고 할 때, 이것들을 하나하나 없애기가 쉽지 않습니다(불가능한 것은 아니지만, 상당히 귀찮습니다). Overlap을 적용한 다음에 이런 저런 작업을 해보고, 만약 이것을 취소하려면, 바로 Clear 버튼을 누르면 됩니다. 하지만, 여기에 제약이 있습니다. 프로젝트 파일을 Save시키거나 또 다른 작업들을 계속 한 다음에 Clear 버튼을 누르려고 하면 활성화가 되지 않습니다.
02. 맨 마지막에 있는 버튼은 Randomize 버튼입니다. Overlap 작업을 한 다음에 Randomize 버튼을 누르면 됩니다.
03. Randomize 버튼을 클릭하면, 보는 것과 같은 창이 나옵니다. Overlap 부분과 Factor 부분을 랜덤하게 할 것인지, 아니면 둘 다 랜덤하게 할 것인지를 묻는 창입니다.
04. Overlap Indices를 클릭하면, Overlap에 관련된 기능이 랜덤하게 적용됩니다. 보는 것처럼 일률적인 움직임에서 레이어들이 약간씩 자율적인 움직임으로 바뀌게 됩니다.
05. 이 버튼을 누르는 것에 따라서 조금씩 그 값들이 변화됩니다.
06. Factor Indices 버튼을 클릭하면, Factor 효과가 랜덤하게 적용됩니다. Factor는 Driven 레이어들을 순차적으로 조절하는 중요한 역할을 합니다.
07. Factor 부분을 조절했을 경우, 화살표들의 움직임입니다.
08. Factor 부분을 랜덤하게 조절하면, 그림처럼 완전히 레이어들의 움직임이 뒤섞이게 되는 애니메이션이 만들어 집니다.
09. Phase-Shift 버튼은 하나의 레이어의 움직임 또는 속성 값 애니메이션을 정반대로 만들어주면서 Loop를 적용시켜주는 기능을 합니다. 예를 들어, 걸어가는 캐릭터 애니메이션의 팔이나 다리 부분에 적용을 시켜주는 기능을 합니다. 먼저, Overlap 버튼으로 하나의 Driver 레이어와 Driven 레이어를 만듭니다.
10. 여기서 중요한 것은 Phase-Shift 적용을 하기 전에 이번엔 Driven 레이어의 속성을 먼저 지정하고, Driver 레이어의 속성을 지정해야 한다는 것입니다. 만일, 그렇게 하지 않으면 아마도 이런 경고창을 보게 될 것입니다.
11. 현재 애니메이션이 된 Driver 레이어의 Rotation 속성을 2번째로 선택해야 합니다. 물론, 먼저 지정해야 하는 것은 Driven 레이어의 Rotation 속성입니다.
12. 이제 애니메이션을 확인해보겠습니다. 2개의 레이어가 정반대로 Loop가 된 상태로 움직이는 것을 확인할 수 있습니다.
Overlap 스크립트는 복잡해 보이는 트랜지션이나 움직임에 자주 사용되곤 합니다. 하나하나 키프레임으로 만들기가 어려워 보이는 애니메이션도 Overlap 기능을 사용하면 깔끔하게 제작할 수 있습니다. 이처럼 다양한 스크립트들이 효율적인 작업을 위해서 계속 만들어지고 있습니다.
오브제 하나의 움직임을 컨트롤해서 수많은 레이어들을 같게 움직이거나 다른 움직임들을 만들어 낸다면 정말 편리할 것입니다. 아마도 요즘 나오는 유료 After Effects 템플릿 등을 보면, 이와 같은 기능이 많이 사용되고 있음을 알 수 있습니다. 특히, 복잡해 보이는 트랜지션 등에 많이 사용되곤 합니다. 이제 하나하나 그 기능에 대해서 알아보도록 하겠습니다.
1. Download & Install
http://aescripts.com/overlap에 들어가서 구매하고, C:/Program Files/Adobe/Adobe After Effects CS6/Support Files/Scripts/ScriptUI Panels 안에 스크립트를 넣어주기만 하면 됩니다(Overlap처럼 몇 십 달러가 넘는 스크립트는 반드시 시리얼 번호가 있습니다. 시리얼 번호는 메일로도 오며, Aescript 사이트에서도 구매 후 확인할 수 있습니다).
After Effects를 열고, Window 메뉴의 하단을 보면 Overlap 스크립트가 보일 겁니다. 클릭하면 그림처럼 Overlap 창을 볼 수 있습니다. 왼쪽부터 OVERLAP, CLEAR, PHASE-SHIFT, RANDOMIZE, HELP 버튼이 있습니다. 이제 하나씩 설명하겠습니다. 물론, 여기서 말하는 설명 내용은 HELP 버튼을 누르면 확인할 수 있습니다.
2. OVERLAP
01. 간단한 정사각형 Shape Layer를 하나 만들고, Ctrl+D를 눌러서 총 5개의 Shape Layer를 만듭니다. 그런 다음에 Shape Layer의 컬러를 각각 다른 컬러로 지정합니다. 그리고 맨 처음에 만든 Shape Layer를 아래쪽으로 포지션 이동하는 1초짜리 애니메이션을 만듭니다.
02. 현재 하나의 Shape Layer만 애니메이션이 된 상태입니다. 이제 이것의 움직임에 따라서 나머지 레이어들이 따라서 움직이게 될 것입니다. Overlap 스크립트는 마치 EchoSpace 이펙트와 비슷한 효과를 낼 수 있습니다. 물론, 약간의 차이점은 있습니다.
03. 애니메이션된 첫 번째 Shape Layer의 Position 속성을 클릭한 다음에 Shift 키를 누르고, 다른 레이어들을 모두 선택합니다(첫 번째 Shape Layer의 Position 속성을 클릭한 다음에 Ctrl 키를 누른 상태에서 나머지 레이어들을 하나씩 클릭하여 선택해도 됩니다). 그런 다음 OVERLAP 버튼을 클릭합니다. 클릭하면 Overlap Shared Properties 창이 나옵니다. 여기를 보면, 애니메이션 키프레임이 있는, 즉 맨 처음 만든 Shape Layer에 Driver라는 명칭이 붙습니다. 그 레이어의 Transform > Position이 Overlap된다는 것이 명시되어 있습니다. 만약, Scale이나 Opacity, Rotation 등을 Overlap하기 위해서는 속성에 키프레임을 만들면 됩니다. 이제 모든 것을 확인했으면, 맨 우측 상단에 있는 설정 아이콘을 클릭합니다. Driver 레이어를 따라서 움직이는 모든 나머지 레이어들은 Driven 레이어라고 합니다.
04. 설정 아이콘을 클릭하면, 왼쪽에 옵션 값을 체크할 수 있는 메뉴들이 나타납니다. Rename Driver와 Color Labels 옵션을 클릭합니다. Rename Driver는 Driver가 되는 레이어의 이름을 바꿔주는 것이며, Color Labels은 주체가 되는 Driver 레이어 바와 그 외에 Driver의 명령을 받는 Driven 레이어 바의 컬러를 지정한 컬러로 바꿔주는 역할을 합니다. Color Labels 하단을 보면, Driver와 Driven 레이어 등의 컬러를 원하는 색깔로 지정할 수 있는 팝업 메뉴가 있습니다. 설정 후에 OK 버튼을 누릅니다.
05. Driver 레이어의 바 컬러가 Red로 바뀐 것을 알 수 있습니다. 그 외에 Driven 레이어의 바 컬러는 Yellow로 바뀌었습니다. 이렇게 바뀐 이유는 여러 개의 레이어들을 다룰 때, 좀 더 타임라인 상에서 확인하기 편리하게 시각적으로 차이를 둔 것입니다.
06. 이제 램프 리뷰로 애니메이션을 확인해보면, 첫 번째 Driver 레이어가 움직이고, 몇 프레임 뒤에 다른 레이어들이 똑같은 모션으로 움직이는 것을 확인할 수 있습니다.
07. 이번에는 다른 옵션으로 Overlap을 적용시켜 보겠습니다. 앞서 작업한 것은 다른 위치 값을 가지고 있는 여러 개의 레이어를 Driver로 지정한 Shape Layer의 움직임에 맞춰서 똑같은 움직임을 적용시켰습니다. 그리고 각각의 레이어가 가지고 있는 위치에서 같은 움직임만 주고, 포지션 및 스케일, 투명도까지 애니메이션을 주었습니다.
08. 맨 왼쪽에 있는 파란색 레이어가 애니메이션이 적용된 레이어입니다. 상단에 있다가 하단으로 이동하면서 투명도가 50%로 변하고, 다시 대각선 방향으로 이동하면서 세로로 길쭉한 모양의 라인처럼 스케일이 변하는 애니메이션을 만들었습니다.
09. 방금 애니메이션을 준 레이어를 먼저 선택한 다음, 나머지 레이어들을 선택하고, OVERLAP 버튼을 누릅니다(Driven 레이어 선택 시 선택을 하는 순서에 따라서 움직임이 변합니다). 이번에는 Maintain Original을 체크합니다. 이 옵션은 자신의 원래 포지션 및 속성 값을 그대로 유지하면서 Driver가 된 레이어를 따라서 변화하게 만들어 주는 옵션입니다.
10. 애니메이션을 확인해보면, 그림처럼 각각 자신의 위치에서 레이어들의 애니메이션이 Driver 레이어와 똑같이 움직이는 것을 확인할 수 있습니다.
11. 애니메이션을 확인해보면, 포지션뿐만이 아니라, 투명도와 스케일까지 완벽하게 똑같이 변화되는 것을 확인할 수 있습니다.
12. Driver 레이어를 선택해 봅니다. 여기에 나오는 Frame Delay 옵션은 첫 번째 레이어, 즉 Driver 레이어가 움직인 다음에 5 프레임 후에 다른 레이어들이 움직이게 하는 역할을 합니다. 물론, 두 번째 레이어가 움직인 다음에 다시 5 프레임 후에 세 번째 레이어가 움직이게 되며, 이런 식으로 계속해서 5 프레임씩 딜레이가 된 움직임이 적용됩니다.
3. OVERLAP Index, Invert
01. 이번에는 옵션 중에 Overlap Index가 하는 역할 및 Overlap Invert의 기능에 대해 알아보겠습니다. 레이어들을 중앙에 일렬로 배치를 한 다음, 하나의 레이어만 애니메이션을 시킵니다. 위에서 아래로 내려오는 애니메이션을 만들었습니다.
02. 애니메이션이 만들어진 레이어를 선택한 다음, 다른 레이어들을 각각 선택합니다. 그런 다음에 OVERLAP 버튼을 클릭합니다. Overlap Shared Properties 창에서 Auto-Orient 기능을 제외한 모든 옵션을 체크한 다음에 OK 버튼을 누릅니다.
03. 간단하게 설명하면, Index 기능은 스크립트로 제어를 하기 편리하게 애니메이션의 주체가 되는 Driver를 따라다니는 Driven 레이어들에게 각각 숫자를 붙여주는 역할을 합니다. 녹색 레이어가 1번, 노란색 레이어가 2번, 오렌지색 레이어가 3번, 빨간색 레이어가 4번… 이런 식으로 Index가 생겨납니다.
04. Index 값을 만약 0으로 입력하면, Overlap 기능 중에 Delay같은 효과가 사라지게 되며, Driver의 움직임과 같은 시간으로 움직이게 됩니다.
05. 현재 지정한 녹색 레이어와 오렌지 레이어의 Index는 각각 1번과 3번입니다. 일단, 모든 레이어의 Overlap Index 값을 0으로 설정합니다.
06. 그리고 녹색과 오렌지색 레이어의 Overlap Invert를 체크합니다.
07. 애니메이션을 시켜보면, 녹색과 오렌지색 레이어의 움직임이 Driver 레이어의 움직임과 정반대로 움직이는 것을 확인할 수 있습니다.
4. Auto Orient
01. Auto Orient 기능에 대해서 알아보겠습니다. 간단하게 Shape Layer로 화살표 모양을 만듭니다.
02. Polystar의 Point를 3으로 입력하여 삼각형 모양을 만들어 주고, 여기에 사각형을 더해 화살표 모양의 아이콘을 만들었습니다.
03. 방금 만든 화살표 아이콘을 복제하여 총 5개의 화살표 아이콘을 만듭니다. 각각의 컬러를 틀리게 지정하여 보는 것처럼 만들어 줍니다. 이제 솔리드 레이어를 하나 만들고, 거기에 Mask 패스를 그림처럼 그려줍니다.
04. Mask의 Path를 카피해서 Shape Layer 포지션 Path에 붙이기를 하는 것으로 화살표가 미리 만든 레이어의 Mask Path에 따라 움직이게 만들려고 합니다. 일단, 솔리드 레이어에서 만든 Mask Path를 선택하여 카피합니다.
05. 그리고 맨 처음에 만든 화살표 레이어의 Position에 붙이기를 합니다. 붙이기를 하면, 보는 것처럼 로빙 키프레임으로 붙이기가 됩니다.
06. 애니메이션을 확인해보면, 그림처럼 Mask의 Path가 화살표의 포지션 Path로 변환되었음을 알 수 있습니다.
07. 그런데 화살표를 애니메이션 시켜보면, 화살표의 움직임이 어색함을 알 수 있을 것입니다. 제대로 화살표가 움직이려면, Path를 따라 화살표의 몸통도 함께 움직여야 자연스럽습니다. 이제 이것을 만들어 보겠습니다. 먼저, 애니메이션이 된 화살표 레이어를 선택하고, Shift 키를 누른 상태에서 다른 화살표 레이어들을 지정합니다(Ctrl 키를 누른 상태에서 다른 화살표 레이어를 하나씩 선택해도 됩니다). 그리고 Overlap 버튼을 누릅니다.
08. Overlap Shared Properties 옵션에서 Maintain Original 옵션을 체크하지 않습니다. 만약, 이 부분을 체크하면, 레이어들이 각자 자신의 위치에서 Path를 따라서 움직이게 될 것입니다. 현재 만들려고 하는 애니메이션은 첫 번째 화살표를 따라서 다른 화살표 레이어들이 Path에 따라 움직이는 애니메이션입니다. 그리고 반드시 Auto-Orient 부분을 체크합니다. OK 버튼을 누릅니다.
09. Auto-Orientation 대화 창이 자동으로 나타납니다. 여기에서 패스에 따라서 자동으로 회전이 되게 만들어주는 Orient Along Path를 체크합니다.
10. 화면을 보면, 첫 번째 녹색 화살표의 움직임을 따라 다른 레이어들이 Path를 따라서 움직이는 것을 확인할 수 있습니다.
5. Clear, Phase-Shift, Randomize 버튼
01. Overlap 버튼 바로 옆에 있는 버튼이 바로 Clear 버튼입니다. Overlap을 적용시키면 여러 개의 레이어들에게 스크립트가 적용되기 때문에, 만일 취소하려고 할 때, 이것들을 하나하나 없애기가 쉽지 않습니다(불가능한 것은 아니지만, 상당히 귀찮습니다). Overlap을 적용한 다음에 이런 저런 작업을 해보고, 만약 이것을 취소하려면, 바로 Clear 버튼을 누르면 됩니다. 하지만, 여기에 제약이 있습니다. 프로젝트 파일을 Save시키거나 또 다른 작업들을 계속 한 다음에 Clear 버튼을 누르려고 하면 활성화가 되지 않습니다.
02. 맨 마지막에 있는 버튼은 Randomize 버튼입니다. Overlap 작업을 한 다음에 Randomize 버튼을 누르면 됩니다.
03. Randomize 버튼을 클릭하면, 보는 것과 같은 창이 나옵니다. Overlap 부분과 Factor 부분을 랜덤하게 할 것인지, 아니면 둘 다 랜덤하게 할 것인지를 묻는 창입니다.
04. Overlap Indices를 클릭하면, Overlap에 관련된 기능이 랜덤하게 적용됩니다. 보는 것처럼 일률적인 움직임에서 레이어들이 약간씩 자율적인 움직임으로 바뀌게 됩니다.
05. 이 버튼을 누르는 것에 따라서 조금씩 그 값들이 변화됩니다.
06. Factor Indices 버튼을 클릭하면, Factor 효과가 랜덤하게 적용됩니다. Factor는 Driven 레이어들을 순차적으로 조절하는 중요한 역할을 합니다.
07. Factor 부분을 조절했을 경우, 화살표들의 움직임입니다.
08. Factor 부분을 랜덤하게 조절하면, 그림처럼 완전히 레이어들의 움직임이 뒤섞이게 되는 애니메이션이 만들어 집니다.
09. Phase-Shift 버튼은 하나의 레이어의 움직임 또는 속성 값 애니메이션을 정반대로 만들어주면서 Loop를 적용시켜주는 기능을 합니다. 예를 들어, 걸어가는 캐릭터 애니메이션의 팔이나 다리 부분에 적용을 시켜주는 기능을 합니다. 먼저, Overlap 버튼으로 하나의 Driver 레이어와 Driven 레이어를 만듭니다.
10. 여기서 중요한 것은 Phase-Shift 적용을 하기 전에 이번엔 Driven 레이어의 속성을 먼저 지정하고, Driver 레이어의 속성을 지정해야 한다는 것입니다. 만일, 그렇게 하지 않으면 아마도 이런 경고창을 보게 될 것입니다.
11. 현재 애니메이션이 된 Driver 레이어의 Rotation 속성을 2번째로 선택해야 합니다. 물론, 먼저 지정해야 하는 것은 Driven 레이어의 Rotation 속성입니다.
12. 이제 애니메이션을 확인해보겠습니다. 2개의 레이어가 정반대로 Loop가 된 상태로 움직이는 것을 확인할 수 있습니다.
Overlap 스크립트는 복잡해 보이는 트랜지션이나 움직임에 자주 사용되곤 합니다. 하나하나 키프레임으로 만들기가 어려워 보이는 애니메이션도 Overlap 기능을 사용하면 깔끔하게 제작할 수 있습니다. 이처럼 다양한 스크립트들이 효율적인 작업을 위해서 계속 만들어지고 있습니다.