VideoArts 10월호 연재
www.motionlab.co.kr www.mg25.com 이병현 실장
사실 일본에서 만든 CuttanaNir 스크립트와 Exte 스크립트를 처음 접했을 때 “ 뭘 이런 것까지 만들었을까?” 라는 생각도 들었습니다. 하지만 작업을 하면 할수록 그 쓰임새가 놀라울 정도로 많다는 것을 느낄 수 있었습니다. 특히 CuttanaNir 스크립트 같은 경우는 딱 일본에서 만든 이유를 알 수 있을만큼 탁월한 아이디어이긴 합니다. 자음과 모음을 사용하는 한글을 사용하는 우리 입장에서도 상당히 편한 스크립트입니다.
Exte + CuttanaNir
01. Exte 스크립트는 Shape 레이어로 만들어진 오브제의 일정 부분을 자동으로 늘려줘서 애니메이션을 시켜주는 기능을 합니다. 일단 입력한 타이포를 Create Shapes from Text를 적용합니다.
02. Motion Tool2라는 스크립트에는 Extract라는 기능이 있습니다. Shape 레이어의 그룹들을 레이어로 만들어주는 기능입니다. 이 기능을 이용하여 타이포의 그룹들을 독립된(?) 레이어로 바꿔주겠습니다.
03. 레이어를 선택한 후 Extract를 적용하면 보시는 것처럼 알파벳이 각각의 레이어로 나누어졌습니다.
04. 이제 Exte 스크립트를 사용해보겠습니다. M을 가지고 먼저 해보겠습니다. Exte 스크립트에는 Sel Path라는 버튼이 항상 상단에 있습니다. 레이어를 선택한 다음에 Sel Path버튼을 클릭하면 Path들이 나타납니다. Shape 레이어 작업시 상당히 편리한 기능입니다.
05. M을 선택한 다음 Sel Path를 클릭한 뒤 길게 늘어뜨리고 싶은 부분의 Path를 2개 선택합니다. 그런 다음 Extend버튼을 누르기만 하면 됩니다.
06. 보시는 것처럼 선택된 Path가 연장되면서 길어집니다. 타임라인 윈도우를 보시면 새로운 레이어가 생겨났습니다.
07. 기본적으로 설정되어져 있는 시간 안에 자동으로 Path애니메이션이 되는 방식입니다.
08. 만약 애니메이션이 되는 시간을 조절하려면 보시는 것처럼 Path의 간격을 더 벌어지게 만들고 레이어 바의 길이를 조금 늘려주시면 됩니다. M 레이어의 오른쪽도 마찬가지로 Extend를 시켜줍니다.
BEND
01. 2번째로 만든 Extend된 라인을 선택하고 이번에는 이 라인을 구부려보겠습니다. Extend로 생성된 레이어를 선택한 다음에 Exte스크립트에서 상단에 있는 B를 클릭합니다. 그런 다음 Bend버튼을 클릭합니다.
02. bend를 적용하면 보시는 것처럼 중간에 라인이 만들어집니다. 정리해서 말씀드리자면 Exte적용시 직선적인 것들은 Fill을 이용한 Path애니메이션이며, 구부러진 애니메이션을 만들고 싶다면 Bend를 이용한 Stroke 애니메이션입니다. 라인부분을 선택하시려면 Set Path 버튼을 클릭하는 방법이 있습니다.
03. 펜툴을 사용하여 위치를 옮겨준 다음에 Stretch버튼을 이용하여 핸들러를 활용하는 방법도 있습니다. 아니면 Convert Vertex툴을 이용하여 직접 조절하시는 방법도 있습니다.
04. 곡선작업시 펜툴을 이용하여 Path를 하나 더 만들어서 늘려주는 방법도 가능합니다.
방향키 사용
01. 직선적인 것들은 생각보다 간단합니다. 어느 방향에서 라인이 들어올 것인지만 결정하여 Path를 선택하고 확장해 주시면 됩니다. 이때 상하좌우로 되어져 있는 화살표 방향키를 사용하시면 됩니다.
02. 항상 Path를 선택한 후에 어느 방향으로 라인이 확장될 것인지만 고민하시면 됩니다. 현재 선택한 Path는 위에서 내려오는 라인을 만들어주려고 합니다. 확장은 윗부분으로 되어야 함으로 상단 화살표를 클릭해주시면 됩니다.
03. 항상 Exte는 타임마커가 있는 부분에서 생성이 됩니다. Exte로 생성된 라인 레이어의 중앙부분에 레이어 마커가 있는데 그 부분과 타임마커가 있는 부분이 딱 맞게 생성됩니다. 그렇게 되는 이유는 생성된 노란색의 라인레이어의 레이어마커 왼쪽부분은 외부에서 라인이 들어오는 애니메이션이며, 레이어 마커가 있는 부분이 바로 기존 레이어의 Path와 딱 맞는 타이밍이기 때문입니다.
CuttanaNir
01. 이제 CuttanaNir에 대해 간략하게 알아보겠습니다. 알파벳 N에서 보시는 왼쪽 하단에서 라인이 올라오는 애니메이션을 Exte에서 만들었습니다. 그렇다면 그 후에 N을 만드는 애니메이션이 연결되어야 자연스럽게 보여질 것입니다.
02. CuttanaNir스크립트는 Shape레이어에서 원하는 부분을 자르기도 하고, 애니메이션까지 자동으로 만들어주는 기능을 합니다. N 같은 경우는 별도로 자를 필요가 없이 하나로 이어져 있는 형태라서 L 부분에 들어가서 설정만 해주면 됩니다.
03. 약간 복잡한 형태의 N 같은 경우는 애니메이션의 시작하는 부분과 끝나는 부분을 설정해 줘야 합니다. 단순한 형태 같은 경우는 Auto버튼만 누르면 됩니다. 일단 시작되는 부분의 Path를 2개 선택한 다음 F 버튼을 누릅니다. 끝나는 부분의 Path를 2개 선택한 다음 L 버튼을 누릅니다.
04. 그런 다음 하단에 있는 Create버튼을 클릭하면 보시는 것처럼 자동으로 애니메이션이 만들어집니다. 정말 편하죠?
05. 외부에서 라인이 들어와서 N 자를 만들어가는 애니메이션을 완성해보겠습니다. Exte로 만든 레이어의 중간지점에 있는 레이어 마커부분에 앞서 만든 N이 만들어지는 애니메이션의 첫부분을 맞춰야 합니다.
닫힌 패스를 애니메이션하기
01. 닫힌 패스의 애니메이션을 앞서 작업한 것처럼 하기는 어렵습니다. 그래서 면을 나눠야 합니다. 나누고자 하는 Path를 2개 선택합니다. 그런 다음 Cut버튼을 눌러서 나눠줍니다.
02. 잘린 Path가 현재 겹쳐져 있습니다. 앞서 작업한 것처럼 시작하는 Path와 끝나는 Path를 선택해야 하는데 겹쳐져 있기 때문에 선택하는 것이 쉽지 않습니다. 나눴던 Path를 선택합니다. 현재 4개의 Path가 선택된 것입니다. 그런 다음 Sep 버튼을 누릅니다. 그러면 자동으로 보시는 것처럼 잘라진 면들이 벌어집니다.
03. 시계방향으로 써지는 애니메이션을 만들기 위해 2개의 Path를 선택하고 F버튼을 누릅니다. ( First의 약자인가보네요. ) 혹시 사용자가 헷갈릴 수도 있어서 F버튼을 클릭하면 녹색으로 큰 모양이 생겨납니다.
04. 나머지 2개의 Path를 선택한 후 L버튼을 클릭합니다. ( Last 의 약자인가 봅니다. ) 주황색으로 선택된 버튼이 바뀝니다.
05. Create버튼을 클릭하시면 애니메이션이 만들어집니다. 앞서 설명드린 Exte로 작업한 후에 Bend를 적용한 것과 같다고 생각하시면 됩니다. 애니메이션을 시켜서 확인해보시기 바랍니다.
06. 나누어진 Path들을 선택한 다음 Patch버튼을 누르면 다시 원상태로 되돌아갑니다.
07. 앞서 작업한 것은 면을 나눌 때 Smooth를 체크한 후에 Cut을 한 것입니다. 이번에는 Smooth를 끈 후에 작업해보시기 바랍니다. 나눠진 면이 반듯하게 되어져 있습니다.
08. CuttanaNir에 있는 Sep버튼을 클릭하여 나눈 Path를 선택하기 쉽게 벌리고, Path 2개를 선택하여 Exte로 연장시켜보겠습니다.
09. 연장 라인으로 생긴 레이어를 선택한 다음 Bend 버튼을 클릭합니다.
10. 그런 다음 Stretch버튼을 클릭하여 베지어 곡선의 핸들러를 선택하여 원하는 모양으로 휘어지게 만듭니다.
11. 직선으로 만드는 것이 아니기 때문에 보시는 것처럼 아마도 두께 부분이 잘 맞지 않는 현상이 종종 발생됩니다.
12. 이런 경우는 타임라인 윈도우로 갑니다. 라인 레이어를 선택하여 그룹들을 확인해보겠습니다. Stt그룹과 Fill1그룹의 눈을 꺼버립니다. 이 두개의 그룹은 라인의 앞부분과 뒷부분의 Cap같은 역할을 합니다. 이 두개의 그룹을 꺼버리시면 Stroke의 두께를 조절하여 맞춰주실 수 있습니다.
13. Stroke의 cap을 Round Cap으로 바꿔주셔도 됩니다.
14. 애니메이션을 하여 확인해보셔요.
15. 이런 방법이 아닌 다른 방법도 있습니다. Exte를 이용하여 라인을 연장시키려고 할 때 선택하는 Path를 보시는 것처럼 중간 정도에 있는 Path로 선택하는 것입니다.
CuttanaNir + Exte
01. 이번에는 조금 복잡한 형태의 알파벳을 가지고 작업을 해보겠습니다. B 같은 경우 조금 복잡한 형태의 알파벳입니다. CuttanaNir로 작업하기 위해서 면을 조금 단순하게 나눠보도록 하겠습니다. 원하는 Path를 하나 선택한 다음 Slice 기능을 이용하면 상하좌우로 직선적인 라인으로 Path를 나눌 수 있습니다.
02. 같은 방법으로 Path를 선택하여 밑으로 잘라줍니다.
03. 두개의 Path를 선택한다면 Cut버튼을 이용하시면 됩니다.
04.직선이 아닌 대각선 방향으로 Path를 선택하여 잘라주셔도 상관없습니다.
05. 이렇게 총 3개의 그룹으로 B를 나누었습니다. S 탭을 누른 후 Sep버튼을 클릭하시면 각 그룹을 독립된 레이어로 분리해줍니다.
06. 이제 앞서 분리한 레이어들의 일부 Path를 선택하여 Exte로 확장시켜줍니다.
07. Exte로 확장시켜서 만든 라인들을 타임라인 윈도우에 배치합니다.
08. 이제 3개로 나누었던 B레이어들을 CuttanaNir를 이용하여 자동으로 애니메이션 시켜봅니다.
09. Exte로 만든 라인 레이어가 밖에서 들어오면서 방금 만든 레이어의 애니메이션과 이어지는 것처럼 보여지게 하려면 보시는 것처럼 레이어 바의 배치를 하셔야 합니다. Exte로 만든 라인 레이어의 레이어 마커가 있는 부분에서 시작할 수 있게 배치하시면 됩니다.
10. 다른 레이어들도 마찬가지로 애니메이션을 시켜줍니다. 이때 만약 애니메이션이 되는 방향이 맞지 않는다면 Rev버튼을 클릭하여 방향을 바꿔주시기만 하면 됩니다.
11. 라인들이 외부에서 B라는 알파벳 안으로 들어오는 애니이션을 하려면 레이어들의 배치를 보시는 것처럼 해주시면 됩니다.
12. 각 레이어들의 Mode는 자동으로 Alpha Add가 되어져 있습니다. 왜 그럴까요? 만약 Normal로 되어있다면 보시는 것처럼 나뉘어진 부분들의 엣지가 지금처럼 보기싫게 보여질 것입니다.
13. T 라는 글자도 마찬가지로 작업을 해줍니다.
14. A 알파벳도 보시는 것처럼 Path를 잘라줍니다. 그런 다음에 그룹을 Shape레이어로 만들어줍니다.
15. Exte를 이용하여 A 알파벳의 상단 부분을 연장시켜줍니다.
16. 하나의 레이어가 내려와서 양쪽으로 나뉘어지는 애니메이션을 위해서 다시 Path를 선택하여 Slice로 나눠줍니다.
17. 나눈 그룹을 다시 2개의 레이어로 만들어 줍니다.
18. Auto버튼으로 애니메이션을 줍니다.
19. 애니메이션을 만들어 확인해보시기 바랍니다.
20. M 알파벳도 2개로 나눈 다음에 Auto버튼으로 애니메이션을 주시면 됩니다. 앞서 이야기한 것처럼 Auto로 애니메이션을 했을 경우에 애니메이션의 방향이 맞지 않으면 Rev버튼을 클릭하여 방향성을 바꿔주시면 됩니다.
21. 애니메이션으로 확인해보시기 바랍니다.
모든 작업이 대략적으로 끝났습니다. 이런 저런 이야기들을 적어놔서 조금 복잡해 보일 수도 있겠네요. 하지만 스크립트를 사용하지 않고 만약 다른 방법으로 작업을 하신다면 훨씬 더 많은 시간과 노력이 들어갈 것입니다.
Exte로 만든 라인들 중에서 Bend를 적용한 라인들은 Stroke 애니메이션이 적용됩니다. 그래서 Taper를 간단하게 사용할 수 있습니다.
곡선 처리된 레이어들에서 보시는 것처럼 불필요한 그룹들은 눈을 꺼버리고, Line부분에 Taper를 적용해보겠습니다.
각 알파벳이 만들어질 때 Opacity값을 깜빡거리도록 100 - 50 - 100 - 0 - 60 - 100 으로 키애니를 주었습니다.
컴포지션을 2개 정도 복제하여 칼라를 오렌지와 레드로 바꿔주고, 시간 차 애니메이션을 주면 이렇게도 보여지겠죠.
VideoArts 10월호 연재
www.motionlab.co.kr www.mg25.com 이병현 실장
사실 일본에서 만든 CuttanaNir 스크립트와 Exte 스크립트를 처음 접했을 때 “ 뭘 이런 것까지 만들었을까?” 라는 생각도 들었습니다. 하지만 작업을 하면 할수록 그 쓰임새가 놀라울 정도로 많다는 것을 느낄 수 있었습니다. 특히 CuttanaNir 스크립트 같은 경우는 딱 일본에서 만든 이유를 알 수 있을만큼 탁월한 아이디어이긴 합니다. 자음과 모음을 사용하는 한글을 사용하는 우리 입장에서도 상당히 편한 스크립트입니다.
Exte + CuttanaNir
01. Exte 스크립트는 Shape 레이어로 만들어진 오브제의 일정 부분을 자동으로 늘려줘서 애니메이션을 시켜주는 기능을 합니다. 일단 입력한 타이포를 Create Shapes from Text를 적용합니다.
02. Motion Tool2라는 스크립트에는 Extract라는 기능이 있습니다. Shape 레이어의 그룹들을 레이어로 만들어주는 기능입니다. 이 기능을 이용하여 타이포의 그룹들을 독립된(?) 레이어로 바꿔주겠습니다.
03. 레이어를 선택한 후 Extract를 적용하면 보시는 것처럼 알파벳이 각각의 레이어로 나누어졌습니다.
04. 이제 Exte 스크립트를 사용해보겠습니다. M을 가지고 먼저 해보겠습니다. Exte 스크립트에는 Sel Path라는 버튼이 항상 상단에 있습니다. 레이어를 선택한 다음에 Sel Path버튼을 클릭하면 Path들이 나타납니다. Shape 레이어 작업시 상당히 편리한 기능입니다.
05. M을 선택한 다음 Sel Path를 클릭한 뒤 길게 늘어뜨리고 싶은 부분의 Path를 2개 선택합니다. 그런 다음 Extend버튼을 누르기만 하면 됩니다.
06. 보시는 것처럼 선택된 Path가 연장되면서 길어집니다. 타임라인 윈도우를 보시면 새로운 레이어가 생겨났습니다.
07. 기본적으로 설정되어져 있는 시간 안에 자동으로 Path애니메이션이 되는 방식입니다.
08. 만약 애니메이션이 되는 시간을 조절하려면 보시는 것처럼 Path의 간격을 더 벌어지게 만들고 레이어 바의 길이를 조금 늘려주시면 됩니다. M 레이어의 오른쪽도 마찬가지로 Extend를 시켜줍니다.
BEND
01. 2번째로 만든 Extend된 라인을 선택하고 이번에는 이 라인을 구부려보겠습니다. Extend로 생성된 레이어를 선택한 다음에 Exte스크립트에서 상단에 있는 B를 클릭합니다. 그런 다음 Bend버튼을 클릭합니다.
02. bend를 적용하면 보시는 것처럼 중간에 라인이 만들어집니다. 정리해서 말씀드리자면 Exte적용시 직선적인 것들은 Fill을 이용한 Path애니메이션이며, 구부러진 애니메이션을 만들고 싶다면 Bend를 이용한 Stroke 애니메이션입니다. 라인부분을 선택하시려면 Set Path 버튼을 클릭하는 방법이 있습니다.
03. 펜툴을 사용하여 위치를 옮겨준 다음에 Stretch버튼을 이용하여 핸들러를 활용하는 방법도 있습니다. 아니면 Convert Vertex툴을 이용하여 직접 조절하시는 방법도 있습니다.
04. 곡선작업시 펜툴을 이용하여 Path를 하나 더 만들어서 늘려주는 방법도 가능합니다.
방향키 사용
01. 직선적인 것들은 생각보다 간단합니다. 어느 방향에서 라인이 들어올 것인지만 결정하여 Path를 선택하고 확장해 주시면 됩니다. 이때 상하좌우로 되어져 있는 화살표 방향키를 사용하시면 됩니다.
02. 항상 Path를 선택한 후에 어느 방향으로 라인이 확장될 것인지만 고민하시면 됩니다. 현재 선택한 Path는 위에서 내려오는 라인을 만들어주려고 합니다. 확장은 윗부분으로 되어야 함으로 상단 화살표를 클릭해주시면 됩니다.
03. 항상 Exte는 타임마커가 있는 부분에서 생성이 됩니다. Exte로 생성된 라인 레이어의 중앙부분에 레이어 마커가 있는데 그 부분과 타임마커가 있는 부분이 딱 맞게 생성됩니다. 그렇게 되는 이유는 생성된 노란색의 라인레이어의 레이어마커 왼쪽부분은 외부에서 라인이 들어오는 애니메이션이며, 레이어 마커가 있는 부분이 바로 기존 레이어의 Path와 딱 맞는 타이밍이기 때문입니다.
CuttanaNir
01. 이제 CuttanaNir에 대해 간략하게 알아보겠습니다. 알파벳 N에서 보시는 왼쪽 하단에서 라인이 올라오는 애니메이션을 Exte에서 만들었습니다. 그렇다면 그 후에 N을 만드는 애니메이션이 연결되어야 자연스럽게 보여질 것입니다.
02. CuttanaNir스크립트는 Shape레이어에서 원하는 부분을 자르기도 하고, 애니메이션까지 자동으로 만들어주는 기능을 합니다. N 같은 경우는 별도로 자를 필요가 없이 하나로 이어져 있는 형태라서 L 부분에 들어가서 설정만 해주면 됩니다.
03. 약간 복잡한 형태의 N 같은 경우는 애니메이션의 시작하는 부분과 끝나는 부분을 설정해 줘야 합니다. 단순한 형태 같은 경우는 Auto버튼만 누르면 됩니다. 일단 시작되는 부분의 Path를 2개 선택한 다음 F 버튼을 누릅니다. 끝나는 부분의 Path를 2개 선택한 다음 L 버튼을 누릅니다.
04. 그런 다음 하단에 있는 Create버튼을 클릭하면 보시는 것처럼 자동으로 애니메이션이 만들어집니다. 정말 편하죠?
05. 외부에서 라인이 들어와서 N 자를 만들어가는 애니메이션을 완성해보겠습니다. Exte로 만든 레이어의 중간지점에 있는 레이어 마커부분에 앞서 만든 N이 만들어지는 애니메이션의 첫부분을 맞춰야 합니다.
닫힌 패스를 애니메이션하기
01. 닫힌 패스의 애니메이션을 앞서 작업한 것처럼 하기는 어렵습니다. 그래서 면을 나눠야 합니다. 나누고자 하는 Path를 2개 선택합니다. 그런 다음 Cut버튼을 눌러서 나눠줍니다.
02. 잘린 Path가 현재 겹쳐져 있습니다. 앞서 작업한 것처럼 시작하는 Path와 끝나는 Path를 선택해야 하는데 겹쳐져 있기 때문에 선택하는 것이 쉽지 않습니다. 나눴던 Path를 선택합니다. 현재 4개의 Path가 선택된 것입니다. 그런 다음 Sep 버튼을 누릅니다. 그러면 자동으로 보시는 것처럼 잘라진 면들이 벌어집니다.
03. 시계방향으로 써지는 애니메이션을 만들기 위해 2개의 Path를 선택하고 F버튼을 누릅니다. ( First의 약자인가보네요. ) 혹시 사용자가 헷갈릴 수도 있어서 F버튼을 클릭하면 녹색으로 큰 모양이 생겨납니다.
04. 나머지 2개의 Path를 선택한 후 L버튼을 클릭합니다. ( Last 의 약자인가 봅니다. ) 주황색으로 선택된 버튼이 바뀝니다.
05. Create버튼을 클릭하시면 애니메이션이 만들어집니다. 앞서 설명드린 Exte로 작업한 후에 Bend를 적용한 것과 같다고 생각하시면 됩니다. 애니메이션을 시켜서 확인해보시기 바랍니다.
06. 나누어진 Path들을 선택한 다음 Patch버튼을 누르면 다시 원상태로 되돌아갑니다.
07. 앞서 작업한 것은 면을 나눌 때 Smooth를 체크한 후에 Cut을 한 것입니다. 이번에는 Smooth를 끈 후에 작업해보시기 바랍니다. 나눠진 면이 반듯하게 되어져 있습니다.
08. CuttanaNir에 있는 Sep버튼을 클릭하여 나눈 Path를 선택하기 쉽게 벌리고, Path 2개를 선택하여 Exte로 연장시켜보겠습니다.
09. 연장 라인으로 생긴 레이어를 선택한 다음 Bend 버튼을 클릭합니다.
10. 그런 다음 Stretch버튼을 클릭하여 베지어 곡선의 핸들러를 선택하여 원하는 모양으로 휘어지게 만듭니다.
11. 직선으로 만드는 것이 아니기 때문에 보시는 것처럼 아마도 두께 부분이 잘 맞지 않는 현상이 종종 발생됩니다.
12. 이런 경우는 타임라인 윈도우로 갑니다. 라인 레이어를 선택하여 그룹들을 확인해보겠습니다. Stt그룹과 Fill1그룹의 눈을 꺼버립니다. 이 두개의 그룹은 라인의 앞부분과 뒷부분의 Cap같은 역할을 합니다. 이 두개의 그룹을 꺼버리시면 Stroke의 두께를 조절하여 맞춰주실 수 있습니다.
13. Stroke의 cap을 Round Cap으로 바꿔주셔도 됩니다.
14. 애니메이션을 하여 확인해보셔요.
15. 이런 방법이 아닌 다른 방법도 있습니다. Exte를 이용하여 라인을 연장시키려고 할 때 선택하는 Path를 보시는 것처럼 중간 정도에 있는 Path로 선택하는 것입니다.
CuttanaNir + Exte
01. 이번에는 조금 복잡한 형태의 알파벳을 가지고 작업을 해보겠습니다. B 같은 경우 조금 복잡한 형태의 알파벳입니다. CuttanaNir로 작업하기 위해서 면을 조금 단순하게 나눠보도록 하겠습니다. 원하는 Path를 하나 선택한 다음 Slice 기능을 이용하면 상하좌우로 직선적인 라인으로 Path를 나눌 수 있습니다.
02. 같은 방법으로 Path를 선택하여 밑으로 잘라줍니다.
03. 두개의 Path를 선택한다면 Cut버튼을 이용하시면 됩니다.
04.직선이 아닌 대각선 방향으로 Path를 선택하여 잘라주셔도 상관없습니다.
05. 이렇게 총 3개의 그룹으로 B를 나누었습니다. S 탭을 누른 후 Sep버튼을 클릭하시면 각 그룹을 독립된 레이어로 분리해줍니다.
06. 이제 앞서 분리한 레이어들의 일부 Path를 선택하여 Exte로 확장시켜줍니다.
07. Exte로 확장시켜서 만든 라인들을 타임라인 윈도우에 배치합니다.
08. 이제 3개로 나누었던 B레이어들을 CuttanaNir를 이용하여 자동으로 애니메이션 시켜봅니다.
09. Exte로 만든 라인 레이어가 밖에서 들어오면서 방금 만든 레이어의 애니메이션과 이어지는 것처럼 보여지게 하려면 보시는 것처럼 레이어 바의 배치를 하셔야 합니다. Exte로 만든 라인 레이어의 레이어 마커가 있는 부분에서 시작할 수 있게 배치하시면 됩니다.
10. 다른 레이어들도 마찬가지로 애니메이션을 시켜줍니다. 이때 만약 애니메이션이 되는 방향이 맞지 않는다면 Rev버튼을 클릭하여 방향을 바꿔주시기만 하면 됩니다.
11. 라인들이 외부에서 B라는 알파벳 안으로 들어오는 애니이션을 하려면 레이어들의 배치를 보시는 것처럼 해주시면 됩니다.
12. 각 레이어들의 Mode는 자동으로 Alpha Add가 되어져 있습니다. 왜 그럴까요? 만약 Normal로 되어있다면 보시는 것처럼 나뉘어진 부분들의 엣지가 지금처럼 보기싫게 보여질 것입니다.
13. T 라는 글자도 마찬가지로 작업을 해줍니다.
14. A 알파벳도 보시는 것처럼 Path를 잘라줍니다. 그런 다음에 그룹을 Shape레이어로 만들어줍니다.
15. Exte를 이용하여 A 알파벳의 상단 부분을 연장시켜줍니다.
16. 하나의 레이어가 내려와서 양쪽으로 나뉘어지는 애니메이션을 위해서 다시 Path를 선택하여 Slice로 나눠줍니다.
17. 나눈 그룹을 다시 2개의 레이어로 만들어 줍니다.
18. Auto버튼으로 애니메이션을 줍니다.
19. 애니메이션을 만들어 확인해보시기 바랍니다.
20. M 알파벳도 2개로 나눈 다음에 Auto버튼으로 애니메이션을 주시면 됩니다. 앞서 이야기한 것처럼 Auto로 애니메이션을 했을 경우에 애니메이션의 방향이 맞지 않으면 Rev버튼을 클릭하여 방향성을 바꿔주시면 됩니다.
21. 애니메이션으로 확인해보시기 바랍니다.
모든 작업이 대략적으로 끝났습니다. 이런 저런 이야기들을 적어놔서 조금 복잡해 보일 수도 있겠네요. 하지만 스크립트를 사용하지 않고 만약 다른 방법으로 작업을 하신다면 훨씬 더 많은 시간과 노력이 들어갈 것입니다.
Exte로 만든 라인들 중에서 Bend를 적용한 라인들은 Stroke 애니메이션이 적용됩니다. 그래서 Taper를 간단하게 사용할 수 있습니다.
곡선 처리된 레이어들에서 보시는 것처럼 불필요한 그룹들은 눈을 꺼버리고, Line부분에 Taper를 적용해보겠습니다.
각 알파벳이 만들어질 때 Opacity값을 깜빡거리도록 100 - 50 - 100 - 0 - 60 - 100 으로 키애니를 주었습니다.
컴포지션을 2개 정도 복제하여 칼라를 오렌지와 레드로 바꿔주고, 시간 차 애니메이션을 주면 이렇게도 보여지겠죠.