저자 :: MOTIONLAB 이병현 실장
마치, 아이돌 그룹이 군무를 하듯이, 여러 개의 Layer들을 가지고 Animation을 할 때, 클릭 몇 번으로 간단하게 Animation을 만들 수 있는 MographAE Script를 소개하겠습니다.
1. Clone Layers / Grid
01. MographAE Script는 하나의 Layer만 있으면 그것을 복제하여 여러 개로 만들어주는 기능도 함께 가지고 있습니다. 녹색으로 보이는 3개의 아이콘이 바로 Grid, Array, Linear입니다. 먼저, Grid Controller를 설명하겠습니다. 하나의 Layer를 가지고 와서 작업해도 되고, 미리 여러 개의 Layer를 배치한 후에 작업해도 상관없습니다. 지금은 25개의 Layer를 배치한 후에 모두 선택하고 Grid 아이콘을 클릭합니다.
02. MographAE Grid Control Layer가 생성되며, 모든 Layer에는 Expression이 적용되었습니다.
03. MographAE Grid 이펙트 패널을 보면, 다양한 옵션들이 있습니다. 앞으로 설명드릴 다른 기능들과 비교해 보는 것도 좋은 공부입니다. 몇 개를 제외하고는 비슷한 양식을 가지고 있습니다. Pin X, Y의 설정을 다르게 함으로써 전체를 컨트롤하는 중심축이 바뀌게 됩니다.
04. MographAE Grid Control Layer의 Scale 값을 Animation시켜보겠습니다. 다른 기능들도 이와 같다고 보면 됩니다. Scale을 0으로 하면 그림처럼 하나로 보여집니다. 25개의 Layer가 겹쳐져서 하나로 보이는 것입니다. Scale을 100으로 하면 설정한 값으로 바뀌게 됩니다.
05. Animation을 시켜보면 이렇게 보일 것입니다.
06. 옵션 중에 Delay Setting이란 것이 있습니다. 말 그대로 Layer가 움직일 때, 딜레이 값을 적용하는 것입니다. Enable Delay를 체크합니다.
07. 그런 다음에 다시 Animation을 확인해보면 다음과 같이 보입니다. 각 Layer들이 순서에 맞춰서 0.5초의 간격을 두고 움직이는 것입니다.
08. Delay Based On에 있는 옵션을 바꿔보겠습니다. Distance Along X Axis로 설정하고 Animation으로 확인하겠습니다.
09. Distance Along Y Axis로 설정하고 Animation으로 확인해보겠습니다.
10. Randomness를 적용하면, 각 Layer들이 무작위로 움직이게 만들 수 있습니다.
11. Scatter는 흩뿌리는 것을 뜻하며, Layer들을 무질서하게 만들어줍니다.
2. Array
01. 이번에는 원형으로 정렬해주는 Array 기능입니다. Layer를 하나 만든 후에 Array 버튼을 클릭합니다.
02. 기본값으로 5개가 복제되어 이렇게 보일 것입니다.
03. 만약, Layer의 개수를 더 늘리고 싶으면 3개 정도 선택하여 복제를 합니다. 총 8개의 Layer가 그림처럼 자동으로 원형 배치가 됩니다. 이렇게 되는 이유는 복제하기 전에 이미 Layer들 안에는 Expression이 적용된 상태이기 때문입니다.
04. Start와 End Angle 값을 조절하여 그림처럼 Animation도 가능합니다. 어디서 많이 본 것 같습니다. Shape Layer의 Repeater를 이용하여 방사형으로 만들 때도 이런 식으로 Animation이 가능합니다.
05. Radius로 원의 크기를 조절할 수 있습니다. Link Rotation으로 각 Layer들의 회전 값을 조절할 수 있습니다.
06. Base Z Rotation을 조절하면 회전도 가능합니다.
07. 이제 Animation을 만들어보겠습니다. Array Layer의 Scale 값을 0에서 100으로 Animation되게 Keyframe을 만듭니다. 이때, Enable Delay를 켜 놓습니다. 이유는 각 Layer들이 약간의 딜레이를 가지면서 Animation되게 하기 위해서 입니다.
08. 결과물을 확인해보면, 시간 차를 두고 원형으로 만들어지는 Animation이 만들어졌습니다.
3. Linear
01. 이번에는 직선 스타일로 만들어주는 Linear에 대해 알아보겠습니다. Layer를 하나 선택한 다음, Linear를 클릭합니다.
02. 그림처럼 6개가 복제되어 일렬로 정렬되었습니다. 다른 것들과는 달리, Spline이라는 속성은 자동으로 Keyframe이 생성되었습니다.
03. 이번에는 Linear Control Layer의 포지션을 Animation시켜보겠습니다. 현재 상태에서 위로 살짝 이동하는 Keyframe을 잡았습니다.
04. 이때 Enable Delay를 체크해줍니다.
05. 하나가 움직이면 그 Layer를 순차적으로 따라가는 자연스러운 Animation이 만들어졌습니다.
06. Linear 옵션 중에 Position 옵션을 조절해보면, 마치 Layer들이 연결된 것처럼 늘어지고 줄어드는 것을 확인할 수 있습니다.
07. Strength 값을 조절하면 Layer의 간격들을 조절할 수 있고, Z Rotation을 조절하면 각 Layer의 회전 값을 조절할 수 있습니다.
08. 이번에는 새로운 Layer를 현재 상태에서 추가해보겠습니다. 하트 모양의 Layer를 3개 만들었습니다.
09. 그런 다음에 현재 적용하고 있는 Linear 옆에 있는 링크를 클릭합니다.
10. 클릭하자마자 자동으로 다른 Layer들처럼 정렬됩니다.
11. 폴더 모양의 아이콘은 Layer의 Label 컬러를 바꿔줍니다. 컨트롤을 하는 Layer와 그렇지 않은 Layer의 컬러를 시각적으로 구분하기 쉽게 바꿔줍니다.
12. 하트 Layer를 사람 아이콘 중간에 넣고 싶으면, Layer의 위치를 그림처럼 바꿔 주기만 하면 됩니다.
13. Spline 속성은 자동으로 Keyframe이 Animation된 상태로 초기에 나타납니다. 이것이 하는 역할은 바로 정렬되는 Layer들의 간격 조정입니다. 그런데 자세히 보면 마치 Motion Path의 점이 찍힌 것처럼 Layer들이 배치되어 있음을 알 수 있습니다.
4. Field
01. 이제 방금 전에 만든 정렬된 상태의 Layer들을 모두 선택하고, Field를 적용해보겠습니다. 아이콘의 컬러는 분홍색입니다. Layer들을 선택하고 Field 아이콘을 클릭하면, 사각형 모양과 흰색의 화살표가 함께 나타납니다. Field의 모양은 사각형과 원형으로 표현할 수 있습니다.
02. Field를 왼쪽에서 오른쪽으로 움직이면, 각 Layer들의 포지션이 영향을 받습니다. 이펙트 패널 하단의 Transform-Position에 있는 Influence 값을 확인해보면 됩니다. 현재 각 축들이 100으로 설정되어 있습니다. 딱 그만큼만 Field의 영향을 받는 것입니다.
가이드라인을 해제하고 렌더를 하였습니다.
5. Noise
01. 이번에는 Noise를 알아보겠습니다. 그림처럼 여러 개의 Layer들을 정렬시켜 놓은 상태에서 Noise를 적용합니다.
02. 쉽게 말해서 정렬된 것들을 난장판을 만들거나 어지럽힌다고 생각하면 됩니다. 반대로 흩어져 있는 것들을 정렬시켜줄 때도 사용할 수 있습니다.
03. Select에는 2가지 기능이 있습니다. Noise Layer를 선택한 상태에서 Select 버튼을 클릭하면, Noise가 적용된 모든 Layer들이 자동으로 선택됩니다.
04. 두 번째 기능은 적용된 모든 Layer가 선택된 상태에서 1개 Layer의 속성을 함께 선택한 후에 Select 버튼을 누르면, 모든 Layer의 같은 속성들만 선택이 됩니다. 정말 편한 기능입니다.
05. 그런 다음에 Noise 옆에 있는 링크 버튼을 클릭하면, Scale도 Position처럼 제어가 가능해집니다.
6. Step
01. 이번에는 Step에 대해서 설명하겠습니다. 정렬된 여러 개의 Layer를 선택한 다음, Step 아이콘을 클릭하면 앞서 Noise와 비슷하게 Layer들의 정렬이 바뀝니다. Noise는 정렬된 것을 흩어지게 한다면, Step은 마치 군인들처럼 정렬되는 모양을 갖춥니다. Step의 포지션 값을 움직이면 재미난 정렬도 가능합니다.
7. Target
01. Target을 살펴보겠습니다. 여러 개의 Layer들을 정렬해 놓고 Target을 클릭합니다.
02. 약간 Field와 비슷한 면이 있습니다. 큰 차이점은 각 Layer들의 회전 값을 조절하여 생성된 Target을 마치 쳐다보는 것처럼 만들 수 있습니다.
8. Inheritance
01. Inheritance는 상속이라는 뜻입니다. 바꿔 말하면 물려받는다는 것입니다. 하나에서 다른 하나로 형태가 몰핑된다고 이해하면 될 것 같습니다. Layer 몇 개를 랜덤하게 배치합니다.
02. Layer들을 선택하지 않은 상태에서 Grid 버튼을 눌러서 Controller Layer를 하나 만들고, Array Controller Layer도 하나 만듭니다.
03. 이제 Layer들을 모두 선택한 다음에 Inheritance 아이콘을 클릭합니다.
04. Inheritance 옵션에서 Morph Target 1 > Cloner Type이 Grid로 된 것을 확인하고, Morph Progress의 Keyframe을 만들어줍니다. 0초에 0으로 입력하고, 1초에 360을 입력합니다.
05. Grid Controller Layer의 옵션에서 조절하여 Layer를 정렬합니다.
06. Inheritance Layer의 옵션 중에서 Morph Target 2를 Array로 설정합니다.
07. 이번에는 Array Controller Layer에서 옵션을 조절하여 원하는 대로 배치를 합니다. 이제 Inheritance > Morph Progress를 Animation합니다. 0, 1, 1, 2로 Keyframe을 만들어줍니다.
08. Animation을 만들어보면 원래 흩어진 상태에서 Grid로 정렬되고, 1초 후에 다시 Array로 원형 모양이 됩니다.
09. 현재 Animation 작업을 한 것들은 모두 Expression으로 작업한 것입니다. 이것을 Keyframe으로 바꿔주는 것이 바로 Bake 버튼입니다. Animation된 Layer들을 선택한 다음, Bake 버튼을 클릭하면 그림처럼 Expression으로 적용된 것들을 모두 Keyframe으로 바꿔줍니다. 한 Frame에 하나씩 Keyframe이 생성되어서 정신없이 보이긴 합니다.
저자 :: MOTIONLAB 이병현 실장
마치, 아이돌 그룹이 군무를 하듯이, 여러 개의 Layer들을 가지고 Animation을 할 때, 클릭 몇 번으로 간단하게 Animation을 만들 수 있는 MographAE Script를 소개하겠습니다.
1. Clone Layers / Grid
01. MographAE Script는 하나의 Layer만 있으면 그것을 복제하여 여러 개로 만들어주는 기능도 함께 가지고 있습니다. 녹색으로 보이는 3개의 아이콘이 바로 Grid, Array, Linear입니다. 먼저, Grid Controller를 설명하겠습니다. 하나의 Layer를 가지고 와서 작업해도 되고, 미리 여러 개의 Layer를 배치한 후에 작업해도 상관없습니다. 지금은 25개의 Layer를 배치한 후에 모두 선택하고 Grid 아이콘을 클릭합니다.
02. MographAE Grid Control Layer가 생성되며, 모든 Layer에는 Expression이 적용되었습니다.
03. MographAE Grid 이펙트 패널을 보면, 다양한 옵션들이 있습니다. 앞으로 설명드릴 다른 기능들과 비교해 보는 것도 좋은 공부입니다. 몇 개를 제외하고는 비슷한 양식을 가지고 있습니다. Pin X, Y의 설정을 다르게 함으로써 전체를 컨트롤하는 중심축이 바뀌게 됩니다.
04. MographAE Grid Control Layer의 Scale 값을 Animation시켜보겠습니다. 다른 기능들도 이와 같다고 보면 됩니다. Scale을 0으로 하면 그림처럼 하나로 보여집니다. 25개의 Layer가 겹쳐져서 하나로 보이는 것입니다. Scale을 100으로 하면 설정한 값으로 바뀌게 됩니다.
05. Animation을 시켜보면 이렇게 보일 것입니다.
06. 옵션 중에 Delay Setting이란 것이 있습니다. 말 그대로 Layer가 움직일 때, 딜레이 값을 적용하는 것입니다. Enable Delay를 체크합니다.
07. 그런 다음에 다시 Animation을 확인해보면 다음과 같이 보입니다. 각 Layer들이 순서에 맞춰서 0.5초의 간격을 두고 움직이는 것입니다.
08. Delay Based On에 있는 옵션을 바꿔보겠습니다. Distance Along X Axis로 설정하고 Animation으로 확인하겠습니다.
09. Distance Along Y Axis로 설정하고 Animation으로 확인해보겠습니다.
10. Randomness를 적용하면, 각 Layer들이 무작위로 움직이게 만들 수 있습니다.
11. Scatter는 흩뿌리는 것을 뜻하며, Layer들을 무질서하게 만들어줍니다.
01. 이번에는 원형으로 정렬해주는 Array 기능입니다. Layer를 하나 만든 후에 Array 버튼을 클릭합니다.
02. 기본값으로 5개가 복제되어 이렇게 보일 것입니다.
03. 만약, Layer의 개수를 더 늘리고 싶으면 3개 정도 선택하여 복제를 합니다. 총 8개의 Layer가 그림처럼 자동으로 원형 배치가 됩니다. 이렇게 되는 이유는 복제하기 전에 이미 Layer들 안에는 Expression이 적용된 상태이기 때문입니다.
04. Start와 End Angle 값을 조절하여 그림처럼 Animation도 가능합니다. 어디서 많이 본 것 같습니다. Shape Layer의 Repeater를 이용하여 방사형으로 만들 때도 이런 식으로 Animation이 가능합니다.
05. Radius로 원의 크기를 조절할 수 있습니다. Link Rotation으로 각 Layer들의 회전 값을 조절할 수 있습니다.
06. Base Z Rotation을 조절하면 회전도 가능합니다.
07. 이제 Animation을 만들어보겠습니다. Array Layer의 Scale 값을 0에서 100으로 Animation되게 Keyframe을 만듭니다. 이때, Enable Delay를 켜 놓습니다. 이유는 각 Layer들이 약간의 딜레이를 가지면서 Animation되게 하기 위해서 입니다.
08. 결과물을 확인해보면, 시간 차를 두고 원형으로 만들어지는 Animation이 만들어졌습니다.
3. Linear
01. 이번에는 직선 스타일로 만들어주는 Linear에 대해 알아보겠습니다. Layer를 하나 선택한 다음, Linear를 클릭합니다.
02. 그림처럼 6개가 복제되어 일렬로 정렬되었습니다. 다른 것들과는 달리, Spline이라는 속성은 자동으로 Keyframe이 생성되었습니다.
03. 이번에는 Linear Control Layer의 포지션을 Animation시켜보겠습니다. 현재 상태에서 위로 살짝 이동하는 Keyframe을 잡았습니다.
04. 이때 Enable Delay를 체크해줍니다.
05. 하나가 움직이면 그 Layer를 순차적으로 따라가는 자연스러운 Animation이 만들어졌습니다.
06. Linear 옵션 중에 Position 옵션을 조절해보면, 마치 Layer들이 연결된 것처럼 늘어지고 줄어드는 것을 확인할 수 있습니다.
07. Strength 값을 조절하면 Layer의 간격들을 조절할 수 있고, Z Rotation을 조절하면 각 Layer의 회전 값을 조절할 수 있습니다.
08. 이번에는 새로운 Layer를 현재 상태에서 추가해보겠습니다. 하트 모양의 Layer를 3개 만들었습니다.
09. 그런 다음에 현재 적용하고 있는 Linear 옆에 있는 링크를 클릭합니다.
10. 클릭하자마자 자동으로 다른 Layer들처럼 정렬됩니다.
11. 폴더 모양의 아이콘은 Layer의 Label 컬러를 바꿔줍니다. 컨트롤을 하는 Layer와 그렇지 않은 Layer의 컬러를 시각적으로 구분하기 쉽게 바꿔줍니다.
12. 하트 Layer를 사람 아이콘 중간에 넣고 싶으면, Layer의 위치를 그림처럼 바꿔 주기만 하면 됩니다.
13. Spline 속성은 자동으로 Keyframe이 Animation된 상태로 초기에 나타납니다. 이것이 하는 역할은 바로 정렬되는 Layer들의 간격 조정입니다. 그런데 자세히 보면 마치 Motion Path의 점이 찍힌 것처럼 Layer들이 배치되어 있음을 알 수 있습니다.
4. Field
01. 이제 방금 전에 만든 정렬된 상태의 Layer들을 모두 선택하고, Field를 적용해보겠습니다. 아이콘의 컬러는 분홍색입니다. Layer들을 선택하고 Field 아이콘을 클릭하면, 사각형 모양과 흰색의 화살표가 함께 나타납니다. Field의 모양은 사각형과 원형으로 표현할 수 있습니다.
02. Field를 왼쪽에서 오른쪽으로 움직이면, 각 Layer들의 포지션이 영향을 받습니다. 이펙트 패널 하단의 Transform-Position에 있는 Influence 값을 확인해보면 됩니다. 현재 각 축들이 100으로 설정되어 있습니다. 딱 그만큼만 Field의 영향을 받는 것입니다.
가이드라인을 해제하고 렌더를 하였습니다.
01. 이번에는 Noise를 알아보겠습니다. 그림처럼 여러 개의 Layer들을 정렬시켜 놓은 상태에서 Noise를 적용합니다.
02. 쉽게 말해서 정렬된 것들을 난장판을 만들거나 어지럽힌다고 생각하면 됩니다. 반대로 흩어져 있는 것들을 정렬시켜줄 때도 사용할 수 있습니다.
03. Select에는 2가지 기능이 있습니다. Noise Layer를 선택한 상태에서 Select 버튼을 클릭하면, Noise가 적용된 모든 Layer들이 자동으로 선택됩니다.
04. 두 번째 기능은 적용된 모든 Layer가 선택된 상태에서 1개 Layer의 속성을 함께 선택한 후에 Select 버튼을 누르면, 모든 Layer의 같은 속성들만 선택이 됩니다. 정말 편한 기능입니다.
05. 그런 다음에 Noise 옆에 있는 링크 버튼을 클릭하면, Scale도 Position처럼 제어가 가능해집니다.
6. Step
01. 이번에는 Step에 대해서 설명하겠습니다. 정렬된 여러 개의 Layer를 선택한 다음, Step 아이콘을 클릭하면 앞서 Noise와 비슷하게 Layer들의 정렬이 바뀝니다. Noise는 정렬된 것을 흩어지게 한다면, Step은 마치 군인들처럼 정렬되는 모양을 갖춥니다. Step의 포지션 값을 움직이면 재미난 정렬도 가능합니다.
7. Target
01. Target을 살펴보겠습니다. 여러 개의 Layer들을 정렬해 놓고 Target을 클릭합니다.
02. 약간 Field와 비슷한 면이 있습니다. 큰 차이점은 각 Layer들의 회전 값을 조절하여 생성된 Target을 마치 쳐다보는 것처럼 만들 수 있습니다.
8. Inheritance
01. Inheritance는 상속이라는 뜻입니다. 바꿔 말하면 물려받는다는 것입니다. 하나에서 다른 하나로 형태가 몰핑된다고 이해하면 될 것 같습니다. Layer 몇 개를 랜덤하게 배치합니다.
02. Layer들을 선택하지 않은 상태에서 Grid 버튼을 눌러서 Controller Layer를 하나 만들고, Array Controller Layer도 하나 만듭니다.
03. 이제 Layer들을 모두 선택한 다음에 Inheritance 아이콘을 클릭합니다.
04. Inheritance 옵션에서 Morph Target 1 > Cloner Type이 Grid로 된 것을 확인하고, Morph Progress의 Keyframe을 만들어줍니다. 0초에 0으로 입력하고, 1초에 360을 입력합니다.
05. Grid Controller Layer의 옵션에서 조절하여 Layer를 정렬합니다.
06. Inheritance Layer의 옵션 중에서 Morph Target 2를 Array로 설정합니다.
07. 이번에는 Array Controller Layer에서 옵션을 조절하여 원하는 대로 배치를 합니다. 이제 Inheritance > Morph Progress를 Animation합니다. 0, 1, 1, 2로 Keyframe을 만들어줍니다.
08. Animation을 만들어보면 원래 흩어진 상태에서 Grid로 정렬되고, 1초 후에 다시 Array로 원형 모양이 됩니다.
09. 현재 Animation 작업을 한 것들은 모두 Expression으로 작업한 것입니다. 이것을 Keyframe으로 바꿔주는 것이 바로 Bake 버튼입니다. Animation된 Layer들을 선택한 다음, Bake 버튼을 클릭하면 그림처럼 Expression으로 적용된 것들을 모두 Keyframe으로 바꿔줍니다. 한 Frame에 하나씩 Keyframe이 생성되어서 정신없이 보이긴 합니다.