모션디자이너들의 작업환경을 개선하여 좀 더 빠르게 원하는 기능들을 찾아서 작업할 수 있게 만들어 준다는 Mobar스크립트입니다. 미니멀한 철학을 가지고 유니크하게 만들었다는 메뉴가 무려 100개가 넘습니다. 여기서 몇 개 소개해드리겠지만 하나하나 메뉴들에 익숙해지시면 정말 시간을 절약할 수 있을 것 같긴 합니다.
Mobar Script UI
01. 정말 어마어마한 메뉴들이죠. 많은 것이 좋긴 하지만 이렇게 너무 많아도 찾기가 힘들다면 아무 소용이 없겠죠. 하지만 Mobar는 이것을 각 파트별로 구분해 놓아서 찾기 편하게 만들어 놓았습니다. 검색 기능도 있어서 상당히 편리합니다.
02. https://www.motionape.com/ 에 들어가 보시기 바랍니다.
03. 설정 옵션을 보시면 작업시 얼마나 시간을 절약했는지도 보여주는 부분이 있습니다. Expand Menu on Mouse Over를 체크하면, 메뉴에 커서를 가져갔을 때 서브메뉴가 자동으로 나타납니다. 체크하지 않으면 클릭시에만 보여지게 됩니다.
04. Mobar의 메뉴는 가로형과 세로형으로 나뉘어집니다. 사용자 취향에 따라서 화면에 위치하기 편하도록 만들어졌습니다.
05. 수많은 메뉴들 중에서 자주 즐겨찾는 메뉴는 옆에 있는 별모양을 클릭하면 됩니다. 별을 클릭하면 메인 메뉴의 하단에 저장이 됩니다.
Apply Matte Layer
01. 이번에는 간단하게 Matte를 적용시켜보도록 하겠습니다. 현재 아이스크림을 든 이미지와 원형의 Shape Layer가 있습니다. 아이스크림 이미지를 선택한 다음 Layer / Apply Matte Layer를 선택합니다. 팝업 메뉴에서 matte Layer를 Shape Layer로 선택하고, Matte 타입을 Alpha Matte로 선택합니다.
02. 기존에 Matte기능을 사용하신 분들에게는 다소 생소한(?) 방법으로 Matte가 적용되어서 당황하실 수도 있습니다. 그 이유는 앞서 선택한 Matte Layer인 Shape Layer를 복제하여 아이스크림 레이어와 같은 이름으로 Matte Layer의 이름이 바뀌면서 이름 뒤에 II Matte라는 이름이 붙습니다. 다시 말하면 여기에서의 Matte기능은 선택한 Matte Layer를 복제하여 사용한다는 것입니다.
알아두시면 편리한 기능들
01. 기본 값으로는 버튼을 클릭했을 때 서브메뉴들이 나타납니다. 이때 새로 나오는 패널의 오른쪽 끝부분을 클릭하면 독립된 패널로 사용하실 수 있습니다.
02. 자주 사용하는 메뉴는 오른쪽에 있는 별모양을 클릭함으로 메인 메뉴에 나타나게 됩니다. 만약 새로 만든 메뉴를 제거하려면 버튼 아이콘에 커서를 대고 마우스의 오른쪽 버튼을 클릭하면 사라집니다.
03. Set Anchor Point기능에 대해서 알아보도록 하겠습니다. 사실 이 기능은 다른 스크립트에서도 많이 등장하는 기능 중 하나입니다. 레이어의 중심축을 쉽게 정해주는 기능입니다. 하지만 Mobar에는 특이한 2가지 기능이 더 있습니다. 간단하게 설명을 드리고 예제를 통해서 한번 더 설명드리겠습니다.
레이어를 선택한 다음 Dynamic Anchor Point를 클릭합니다. 그러면 레이어에 Anchor Control이라는 이펙트가 적용됩니다. Anchor Control 이펙트의 기능은 레이어의 중심축을 키프레임으로 바꿀 수 있습니다.
04.왼쪽에서 오른쪽으로 이동하는 애니메이션을 하나 만듭니다. 그런 다음 Dynamic Anchor Point 버튼을 클릭하여 보시는 것처럼 만듭니다.
05. 1초 정도 박스를 움직입니다. 멈출 때에 Anchor Control에서 Botton – Right로 설정합니다. 물론, Anchor Point는 토글 홀드 키프레임으로 키프레임이 생성됩니다.
06. Ignore Masks를 체크하면 현재 레이어에 적용된 Mask를 무시하고 원래 레이어의 사이즈에 맞게 중심축이 이동됩니다.
07. Clone & Mirror Keys는 선택한 멀티 레이어의 멀티 키프레임을 복제해줍니다. 그냥 복제하는 것이 아니라 거울에 반사된 것처럼 복제해 줍니다.
08. Offset Keys는 선택한 멀티 키프레임을 원하는 프레임만큼 이동시킬 수 있습니다. ( 현재 Method를 보시면 4개의 옵션이 있습니다. 하지만 아이콘이 보이지 않습니다. Mobar는 상당히 많은 스크립트들을 포함하고 있기 때문에 작업을 하다보면 간혹 아이콘이 표기되지 않을 수 있습니다. 이럴 때는 다시 선택하거나 Mobar를 다시 실행해주시면 됩니다. )
Method에는 아이콘의 모양처럼 멀티 키프레임을 정렬시키는 명령들이 있습니다.
09. 랜덤 모드도 있어서 유용하게 사용할 수 있습니다.
10. 자주 사용하는 익스프레션들을 모아 놓은 것도 있습니다. Keyframes / Key Looper를 선택하면 Loop Out이나 Loop In 관련 익스프레션을 모두 사용하실 수 있습니다.
예제로 알아보는 Mobar 스크립트만의 기능
01. 직사각형을 하나 만들어서 이동하는 애니메이션을 만들었습니다.
02.움직임을 더 극대화하기 위해서 직사각형이 움직일 때 휘어지도록 만들어 보겠습니다. Animation Tool / Bend를 선택합니다.
03.물론, Bend 이펙트는 기본 이펙트입니다. 헌데 약간 틀린 것을 느끼실 수 있을 것입니다. 기본이펙트인 CC Bend It 이펙트의 단점은 적용시킨 레이어가 움직이거나 할 때 설정 값인 Start와 End가 바뀌어서 제대로 적용되지 않는 다는 점이었습니다. 그리고 영역을 벗어나면 오류가 생겨나는 것도 문제였습니다. 이러한 부분을 Grow Bounds이펙트와 익스프레션으로 편리하게 제어해놓은 것이 Mobar의 Bend이펙트입니다.
04. 보시는 것처럼 Bend Power값을 이용하여 키프레임을 만듭니다.
05. 빠르게 움직이는 직사각형이 약간 젤리처럼 휘어지면서 움직이는 애니메이션에서 멈추게 된다면 휘어졌던 부분이 휘청거려야 어울리겠죠. 그래서 직사각형에 텐션을 주겠습니다. 키프레임을 선택한 다음 Animation Tools / Elastic Motion을 선택합니다.
06. 애니메이션을 만들어 보면 이렇게 보여집니다.
07. 이제 좀 더 애니메이션을 맛깔나게 만들어 보겠습니다. 멈출 때 약간의 흔들림을 추가해보도록 하겠습니다. 그러려면 중심축을 잡아야 합니다. 직사각형 레이어를 선택한 다음 Layers / Set Anchor Point를 선택해줍니다.
08. 애니메이션이 끝나는 시점에 타임마커를 위치시킵니다. Dynamic Anchor Point를 클릭합니다.
09. Dynamic Anchor Point는 이펙트처럼 적용이 됩니다. 중심축이 정상적으로 있다가, 멈출 때는 하단 오른쪽에 위치하여 회전되다가 다시 휘청거리면서 하단 왼쪽에 중심축이 이동하도록 만들었습니다. 애니메이션을 만들어 보면, 직사각형이 휘청거리면서 왼쪽에서 오른쪽으로 이동. 멈출 때 흔들거리면서 멈추는 애니메이션이 만들어 졌을 것입니다.
10. 이제 멈췄다가 잠시 시간이 흐르고 다시 오른쪽으로 이동하면서 화면 밖으로 나가는 애니메이션을 만들어 보겠습니다. Bend Tool과 Position의 키프레임들을 선택하고, Clone & Mirror Keys를 선택합니다.
11. 선택한 키프레임들이 거울에 비춘 것처럼 대칭으로 복제가 됩니다.
12. 여기에서 Position의 키프레임은 수정해 줘야 합니다. Position의 마지막 키프레임은 선택하여 오른쪽 화면 밖으로 이동시킵니다.
13. 움직일 때 예비동작을 위하여 Position에 키프레임을 하나 더 만듭니다. 레이어의 위치를 약간 왼쪽으로 이동시켜줍니다.
14. 애니메이션을 시키면 왼쪽에서 오른쪽으로 텐션감있게 움직이다가 멈춥니다. 잠시 멈춰있다가 왼쪽으로 살짝 움직였다가 다시 오른쪽으로 이동하면서 사라지는 움직임을 보여줄 것입니다.
타이포 작업과 Matte작업
01. MOTIONLAB이라는 타입을 입력합니다. Create / Create Shapes from Text를 선택하여 Shape Layer로 만들어 줍니다.
02. 바꾼 Shape Layer를 선택한 다음 Shapes / Explode Shapes to Layers를 선택하여 Shape Layer의 각 Group을 레이어로 나눕니다.
03. 이제 각 알파벳들이 Shape Layer로 바뀌었습니다. 각 레이어들을 선택하고 Text / Text Reveal Animation을 선택합니다.
04. 각각의 알파벳 레이어가 생성되는 옵션을 정할 수 있습니다. Text Reveal옵션에서 정해주시면 됩니다.
05. 애니메이션을 시켜보시면 밑에서 위로 나오는 타이포 애니메이션을 보실 수 있습니다.
06. 어떻게 이런 애니메이션이 만들어졌을까요. 바로 Matte를 이용한 것입니다. 자동으로 Matte 레이어가 생성되어 각 레이어에 적용이 된 것입니다.
07. 각 레이어들이 보여지는 시간 차를 주기 위해 이번에는 레이어들을 모두 선택하고, Offset Layers를 선택합니다. Method에서 Ascending을 선택합니다. 아이콘의 모양처럼 레이어 바가 정렬됩니다.
08. 애니메이션을 확인해보시기 바랍니다.
Delay 적용하기
01. 이번에는 익스프레션을 이용하여 애니메이션을 Delay시키는 방법을 설명드리겠습니다. 보시는 것처럼 가로로 긴 박스를 하나 만듭니다.
02. Layers / Duplicate Layers를 선택합니다. 15개를 Y축으로 복제할 것입니다.
03. 복제된 레이어들의 중심축을 외쪽 끝으로 옮겼습니다. 그럼 다음 맨 마지막 레이어의 Scale을 애니메이션 시키겠습니다. X,Y축의 연결을 해제하고, X축만 애니메이션을 시켰습니다. 0% ~ 100%로 만들어서 길어지는 애니메이션을 만들었습니다.
04. 애니메이션을 시킨 레이어의 속성을 선택합니다. 다시 말해서 Scale 애니메이션을 한 키프레임을 선택하시고, 이를 적용시킬 레이어들을 순서대로 선택합니다. 이때 선택하는 순서를 애프터이펙트가 기억하기 때문에 순서를 잘 선택해야 합니다.
05. 만약에 순서가 잘못 선택되었다면 이펙트 창에서 수정할 수 있긴 합니다. 키프레임 애니메이션을 시킨 레이어를 선택하시면 Delayer - Scale이라는 이펙트가 생성되었습니다. 여기에서 전체적인 Delay 시간을 조절할 수 있습니다. Offset Order에서는 Delay되는 레이어의 순서를 바꿀 수도 있고, 랜덤하게 적용시킬 수도 있습니다.
Delay 관련 익스프레션이 적용된 나머지 레이어들을 하나하나 선택해보면 Delay Index가 적용되어져 있습니다. 이것은 각 레이어의 순서를 정하는 이름표 같은 것입니다. 이것으로 적용되는 순서를 정해주는 것입니다.
정말 "새발의 피"라는 말처럼 수많은 스크립트들 중에서 몇 개만 소개해드렸습니다. 그 이유는 대부분의 스크립트들의 이름을 보시면 우리가 자주 사용하는 것들이 많습니다. 그래서 하나하나 적용해보시고 익숙해지시면 작업의 속도를 빠르게 하실 수 있을 것입니다.
모션디자이너들의 작업환경을 개선하여 좀 더 빠르게 원하는 기능들을 찾아서 작업할 수 있게 만들어 준다는 Mobar스크립트입니다. 미니멀한 철학을 가지고 유니크하게 만들었다는 메뉴가 무려 100개가 넘습니다. 여기서 몇 개 소개해드리겠지만 하나하나 메뉴들에 익숙해지시면 정말 시간을 절약할 수 있을 것 같긴 합니다.
Mobar Script UI
01. 정말 어마어마한 메뉴들이죠. 많은 것이 좋긴 하지만 이렇게 너무 많아도 찾기가 힘들다면 아무 소용이 없겠죠. 하지만 Mobar는 이것을 각 파트별로 구분해 놓아서 찾기 편하게 만들어 놓았습니다. 검색 기능도 있어서 상당히 편리합니다.
02. https://www.motionape.com/ 에 들어가 보시기 바랍니다.
03. 설정 옵션을 보시면 작업시 얼마나 시간을 절약했는지도 보여주는 부분이 있습니다. Expand Menu on Mouse Over를 체크하면, 메뉴에 커서를 가져갔을 때 서브메뉴가 자동으로 나타납니다. 체크하지 않으면 클릭시에만 보여지게 됩니다.
04. Mobar의 메뉴는 가로형과 세로형으로 나뉘어집니다. 사용자 취향에 따라서 화면에 위치하기 편하도록 만들어졌습니다.
05. 수많은 메뉴들 중에서 자주 즐겨찾는 메뉴는 옆에 있는 별모양을 클릭하면 됩니다. 별을 클릭하면 메인 메뉴의 하단에 저장이 됩니다.
Apply Matte Layer
01. 이번에는 간단하게 Matte를 적용시켜보도록 하겠습니다. 현재 아이스크림을 든 이미지와 원형의 Shape Layer가 있습니다. 아이스크림 이미지를 선택한 다음 Layer / Apply Matte Layer를 선택합니다. 팝업 메뉴에서 matte Layer를 Shape Layer로 선택하고, Matte 타입을 Alpha Matte로 선택합니다.
02. 기존에 Matte기능을 사용하신 분들에게는 다소 생소한(?) 방법으로 Matte가 적용되어서 당황하실 수도 있습니다. 그 이유는 앞서 선택한 Matte Layer인 Shape Layer를 복제하여 아이스크림 레이어와 같은 이름으로 Matte Layer의 이름이 바뀌면서 이름 뒤에 II Matte라는 이름이 붙습니다. 다시 말하면 여기에서의 Matte기능은 선택한 Matte Layer를 복제하여 사용한다는 것입니다.
알아두시면 편리한 기능들
01. 기본 값으로는 버튼을 클릭했을 때 서브메뉴들이 나타납니다. 이때 새로 나오는 패널의 오른쪽 끝부분을 클릭하면 독립된 패널로 사용하실 수 있습니다.
02. 자주 사용하는 메뉴는 오른쪽에 있는 별모양을 클릭함으로 메인 메뉴에 나타나게 됩니다. 만약 새로 만든 메뉴를 제거하려면 버튼 아이콘에 커서를 대고 마우스의 오른쪽 버튼을 클릭하면 사라집니다.
03. Set Anchor Point기능에 대해서 알아보도록 하겠습니다. 사실 이 기능은 다른 스크립트에서도 많이 등장하는 기능 중 하나입니다. 레이어의 중심축을 쉽게 정해주는 기능입니다. 하지만 Mobar에는 특이한 2가지 기능이 더 있습니다. 간단하게 설명을 드리고 예제를 통해서 한번 더 설명드리겠습니다.
레이어를 선택한 다음 Dynamic Anchor Point를 클릭합니다. 그러면 레이어에 Anchor Control이라는 이펙트가 적용됩니다. Anchor Control 이펙트의 기능은 레이어의 중심축을 키프레임으로 바꿀 수 있습니다.
04.왼쪽에서 오른쪽으로 이동하는 애니메이션을 하나 만듭니다. 그런 다음 Dynamic Anchor Point 버튼을 클릭하여 보시는 것처럼 만듭니다.
05. 1초 정도 박스를 움직입니다. 멈출 때에 Anchor Control에서 Botton – Right로 설정합니다. 물론, Anchor Point는 토글 홀드 키프레임으로 키프레임이 생성됩니다.
06. Ignore Masks를 체크하면 현재 레이어에 적용된 Mask를 무시하고 원래 레이어의 사이즈에 맞게 중심축이 이동됩니다.
07. Clone & Mirror Keys는 선택한 멀티 레이어의 멀티 키프레임을 복제해줍니다. 그냥 복제하는 것이 아니라 거울에 반사된 것처럼 복제해 줍니다.
08. Offset Keys는 선택한 멀티 키프레임을 원하는 프레임만큼 이동시킬 수 있습니다. ( 현재 Method를 보시면 4개의 옵션이 있습니다. 하지만 아이콘이 보이지 않습니다. Mobar는 상당히 많은 스크립트들을 포함하고 있기 때문에 작업을 하다보면 간혹 아이콘이 표기되지 않을 수 있습니다. 이럴 때는 다시 선택하거나 Mobar를 다시 실행해주시면 됩니다. )
Method에는 아이콘의 모양처럼 멀티 키프레임을 정렬시키는 명령들이 있습니다.
09. 랜덤 모드도 있어서 유용하게 사용할 수 있습니다.
10. 자주 사용하는 익스프레션들을 모아 놓은 것도 있습니다. Keyframes / Key Looper를 선택하면 Loop Out이나 Loop In 관련 익스프레션을 모두 사용하실 수 있습니다.
예제로 알아보는 Mobar 스크립트만의 기능
01. 직사각형을 하나 만들어서 이동하는 애니메이션을 만들었습니다.
02.움직임을 더 극대화하기 위해서 직사각형이 움직일 때 휘어지도록 만들어 보겠습니다. Animation Tool / Bend를 선택합니다.
03.물론, Bend 이펙트는 기본 이펙트입니다. 헌데 약간 틀린 것을 느끼실 수 있을 것입니다. 기본이펙트인 CC Bend It 이펙트의 단점은 적용시킨 레이어가 움직이거나 할 때 설정 값인 Start와 End가 바뀌어서 제대로 적용되지 않는 다는 점이었습니다. 그리고 영역을 벗어나면 오류가 생겨나는 것도 문제였습니다. 이러한 부분을 Grow Bounds이펙트와 익스프레션으로 편리하게 제어해놓은 것이 Mobar의 Bend이펙트입니다.
04. 보시는 것처럼 Bend Power값을 이용하여 키프레임을 만듭니다.
05. 빠르게 움직이는 직사각형이 약간 젤리처럼 휘어지면서 움직이는 애니메이션에서 멈추게 된다면 휘어졌던 부분이 휘청거려야 어울리겠죠. 그래서 직사각형에 텐션을 주겠습니다. 키프레임을 선택한 다음 Animation Tools / Elastic Motion을 선택합니다.
06. 애니메이션을 만들어 보면 이렇게 보여집니다.
07. 이제 좀 더 애니메이션을 맛깔나게 만들어 보겠습니다. 멈출 때 약간의 흔들림을 추가해보도록 하겠습니다. 그러려면 중심축을 잡아야 합니다. 직사각형 레이어를 선택한 다음 Layers / Set Anchor Point를 선택해줍니다.
08. 애니메이션이 끝나는 시점에 타임마커를 위치시킵니다. Dynamic Anchor Point를 클릭합니다.
09. Dynamic Anchor Point는 이펙트처럼 적용이 됩니다. 중심축이 정상적으로 있다가, 멈출 때는 하단 오른쪽에 위치하여 회전되다가 다시 휘청거리면서 하단 왼쪽에 중심축이 이동하도록 만들었습니다. 애니메이션을 만들어 보면, 직사각형이 휘청거리면서 왼쪽에서 오른쪽으로 이동. 멈출 때 흔들거리면서 멈추는 애니메이션이 만들어 졌을 것입니다.
10. 이제 멈췄다가 잠시 시간이 흐르고 다시 오른쪽으로 이동하면서 화면 밖으로 나가는 애니메이션을 만들어 보겠습니다. Bend Tool과 Position의 키프레임들을 선택하고, Clone & Mirror Keys를 선택합니다.
11. 선택한 키프레임들이 거울에 비춘 것처럼 대칭으로 복제가 됩니다.
12. 여기에서 Position의 키프레임은 수정해 줘야 합니다. Position의 마지막 키프레임은 선택하여 오른쪽 화면 밖으로 이동시킵니다.
13. 움직일 때 예비동작을 위하여 Position에 키프레임을 하나 더 만듭니다. 레이어의 위치를 약간 왼쪽으로 이동시켜줍니다.
14. 애니메이션을 시키면 왼쪽에서 오른쪽으로 텐션감있게 움직이다가 멈춥니다. 잠시 멈춰있다가 왼쪽으로 살짝 움직였다가 다시 오른쪽으로 이동하면서 사라지는 움직임을 보여줄 것입니다.
타이포 작업과 Matte작업
01. MOTIONLAB이라는 타입을 입력합니다. Create / Create Shapes from Text를 선택하여 Shape Layer로 만들어 줍니다.
02. 바꾼 Shape Layer를 선택한 다음 Shapes / Explode Shapes to Layers를 선택하여 Shape Layer의 각 Group을 레이어로 나눕니다.
03. 이제 각 알파벳들이 Shape Layer로 바뀌었습니다. 각 레이어들을 선택하고 Text / Text Reveal Animation을 선택합니다.
04. 각각의 알파벳 레이어가 생성되는 옵션을 정할 수 있습니다. Text Reveal옵션에서 정해주시면 됩니다.
05. 애니메이션을 시켜보시면 밑에서 위로 나오는 타이포 애니메이션을 보실 수 있습니다.
06. 어떻게 이런 애니메이션이 만들어졌을까요. 바로 Matte를 이용한 것입니다. 자동으로 Matte 레이어가 생성되어 각 레이어에 적용이 된 것입니다.
07. 각 레이어들이 보여지는 시간 차를 주기 위해 이번에는 레이어들을 모두 선택하고, Offset Layers를 선택합니다. Method에서 Ascending을 선택합니다. 아이콘의 모양처럼 레이어 바가 정렬됩니다.
08. 애니메이션을 확인해보시기 바랍니다.
Delay 적용하기
01. 이번에는 익스프레션을 이용하여 애니메이션을 Delay시키는 방법을 설명드리겠습니다. 보시는 것처럼 가로로 긴 박스를 하나 만듭니다.
02. Layers / Duplicate Layers를 선택합니다. 15개를 Y축으로 복제할 것입니다.
03. 복제된 레이어들의 중심축을 외쪽 끝으로 옮겼습니다. 그럼 다음 맨 마지막 레이어의 Scale을 애니메이션 시키겠습니다. X,Y축의 연결을 해제하고, X축만 애니메이션을 시켰습니다. 0% ~ 100%로 만들어서 길어지는 애니메이션을 만들었습니다.
04. 애니메이션을 시킨 레이어의 속성을 선택합니다. 다시 말해서 Scale 애니메이션을 한 키프레임을 선택하시고, 이를 적용시킬 레이어들을 순서대로 선택합니다. 이때 선택하는 순서를 애프터이펙트가 기억하기 때문에 순서를 잘 선택해야 합니다.
05. 만약에 순서가 잘못 선택되었다면 이펙트 창에서 수정할 수 있긴 합니다. 키프레임 애니메이션을 시킨 레이어를 선택하시면 Delayer - Scale이라는 이펙트가 생성되었습니다. 여기에서 전체적인 Delay 시간을 조절할 수 있습니다. Offset Order에서는 Delay되는 레이어의 순서를 바꿀 수도 있고, 랜덤하게 적용시킬 수도 있습니다.
Delay 관련 익스프레션이 적용된 나머지 레이어들을 하나하나 선택해보면 Delay Index가 적용되어져 있습니다. 이것은 각 레이어의 순서를 정하는 이름표 같은 것입니다. 이것으로 적용되는 순서를 정해주는 것입니다.
정말 "새발의 피"라는 말처럼 수많은 스크립트들 중에서 몇 개만 소개해드렸습니다. 그 이유는 대부분의 스크립트들의 이름을 보시면 우리가 자주 사용하는 것들이 많습니다. 그래서 하나하나 적용해보시고 익숙해지시면 작업의 속도를 빠르게 하실 수 있을 것입니다.