SCRIPTText Animation을 간편하게 만들 수 있는 AE Scripts, MoText

motionlab
조회수 7050

우리나라에서 몇 안되는 AE 스크립트를 만드는 모션니스트 코리아의 첫번째 유료 스크립트인 Motext 스크립트를 소개해 드립니다. 현재 무료 스크립트도 많이 만들어 주셔서 많은 모션그래퍼분들을 대신하여 감사드립니다. 



1. INSTALL

01. MoText v1.1.jsxbin과 (MoText Sub) 폴더로 이루어져 있고, 현재는 1.2 버전으로 업데이트되어 있습니다. Program Files > Adobe > Adobe After Effects CS6 > Support Files > Scripts > ScriptUI Panels 안에 넣어두면 됩니다.

a0fa6e56d46ea.png


52cf0d1938de2.png



02. After Effects를 실행하고 Window 메뉴를 보면, 하단에 MoText v1.1.jsxbin 스크립트가 보입니다. 클릭하여 실행하면 아래와 같이 MoText의 패널이 보이는데, 크게 4가지 파트로 나뉘어져 있습니다. 기본적인 In, Out 애니메이션의 정의를 해주는 것, 속성값들을 먼저 정해주는 파트와 텐션감 있게 출렁거리거나 통통 튀는 느낌을 낼 수 있는 Spring 기능도 있습니다. 그리고 스크립트에서 간혹 사용하는 Wiggle도 있습니다. Wiggle 값으로는 타이포가 흔들리는 효과를 낼 수 있으며, Correlation으로는 각각의 알파벳들이 흔들리는 정도를 컨트롤할 수 있습니다.

cf5beeb1d114b.png




2. 사용 설명서

01. 1280 x 720 사이즈의 컴포지션을 하나 만들고, 컴포지션의 이름을 MOTEXT로 입력합니다.

c74a5d4aac1bb.png



02. MoText 스크립트를 실행합니다. 앞서 설명한 루트대로 설치를 했다면, Window 메뉴의 하단에 있을 것입니다. 먼저, 텍스트 툴로 'MOTIONLAB'이라는 글자를 입력합니다. MOTIONLAB 레이어를 선택한 다음에 MoText 스크립트 상단의 In 부분이 체크되어 있는 상태에서 Control 버튼을 클릭합니다.

df2ed29320cca.png



03. 타임라인 윈도우를 확인해 보면, Control 버튼을 클릭하는 순간 자동으로 키프레임이 생성됩니다. 키보드 'U'를 누르면, 키프레임 애니메이션이 된 속성만 보입니다. 키프레임이 생성된 것은 바로 Weight라는 속성입니다. 이 속성은 앞으로 추가될 텍스트 레이어의 여러 가지 값들, 다시 말해서 포지션이나 스케일, 로테이션, 투명도 등과 연동되어 적용될 것입니다. 현재는 아무런 텍스트 레이어의 속성값을 지정해 주지 않았기 때문에, 컴포지션 윈도우를 봐도 아무런 변화가 없을 것입니다. 타임 마커의 위치도 신경 써야 하는데, 타임 마커가 위치한 부분부터 키프레임이 생성되기 때문입니다.

fc1fd0f8dfe7f.png



04. MOTIONLAB 레이어를 선택하고, Control 버튼을 누르면, 자동으로 이펙트 창에 총 5개의 이펙트가 자동으로 생성됩니다. 이것들은 Effect > Expression Controls에 있는 이펙트들을 프로그래머가 스크립트와 연동되게 만들어 놓은 것들인데, 그래야 사용자가 슬라이더로 편하게 조절할 수 있기 때문입니다.

3c75e083b72f9.png



05. 이제 텍스트 레이어의 위치가 움직이는 애니메이션을 만들어 보겠습니다. 여기서 꼭 잊지 말아야 할 것은 반드시 적용하고자 하는 레이어를 선택한 다음에 MoText에 있는 옵션들을 선택해야 한다는 것입니다. MOTIONLAB 텍스트 레이어를 선택한 다음에 MoText의 상단에 있는 (Properties)를 클릭하여 Position을 선택합니다. 선택하는 동시에 이펙트 창에 Position_In이 생겨나는 것을 알 수 있습니다.

c3531b9cb5be9.png



06. 이제 어떻게 컴포지션 안에서 애니메이션이 되는지를 확인해 보겠습니다. 타임 마커를 움직여보면, 화면 하단에서 원래 있었던 화면의 중앙으로 알파벳 하나하나가 움직여 이동하는 애니메이션이 보일 것입니다.

c4f7ee2d7399b.png

e750b5d710360.png



07. 이제 MOTIONLAB 텍스트 레이어가 완전히 화면 밖에서 화면 안으로 날라오는 애니메이션을 만들어 보겠습니다. Position_In 속성을 확인해보면, 현재 Y축의 값은 100입니다. 이 값을 조금 높여서 텍스트 레이어가 화면 밖으로 나가도록 조절합니다.

5e8d109bd8dbf.png

ee0b51298fd2f.png




08. 이제 애니메이션을 시켜보겠습니다. 아래와 같이 화면 밑 부분에서 중앙으로 한 글자씩 날아오는 애니메이션이 간단하게 만들어졌습니다.

1e6cc85b544cb.png




3. 간단한 클릭만으로 속성들 제어하기

01. MoText의 장점 중 하나는 기존의 효과에 계속 추가로 원하는 속성값들을 애니메이션 시킬 수 있다는 것입니다. 앞서 보여드린 대로 현재는 Position 값만 애니메이션이 된 상태입니다. 여기에 Random 이펙트를 추가해보겠습니다. 먼저, 텍스트 레이어를 선택한 다음에 Random 이펙트를 선택합니다. 이펙트 창에 Random_In과 Seed_In 슬라이더 바가 생겨났습니다. 컴포지션 윈도우를 확인해보면, 효과를 주는 동시에 실시간으로 변화된 것을 확인할 수 있습니다.

58bd72c605dec.png



02. 이번에는 여기에 Opacity 속성을 추가해 보겠습니다. Opacity를 적용한 순간 실시간으로 컴포지션 윈도우에서 확인할 수 있습니다. 투명도가 0에서 100으로 바뀌면서 알파벳들이 랜덤으로 나타나는 애니메이션입니다.

42cfd93b89dc0.png



03. 애니메이션을 만들어 보겠습니다. 현재 Position + Random + Opacity가 적용된 상태이므로 아래와 같이 보입니다. 사실 이 작업을 하나하나 수작업으로 진행하려면 생각보다 손이 많이 가는 작업입니다.

a0d37e1e637f5.png



04. 이제 여기에 Box Blur 이펙트를 적용해보겠습니다. 아래와 같이 좀 더 깊이감이 느껴지는 분위기로 바뀌었습니다. 이 안에 있는 Random, Tracking, Box Blur 등을 적용할 때는 반드시 더블 클릭을 해야만 적용이 됩니다.

40ea8a4eede95.png



05. Position + Random + Opacity + Box Blur가 함께 적용된 애니메이션은 아래와 같이 보여집니다. 간단한 클릭만으로 복잡해 보이는 텍스트 애니메이션을 만들 수 있게 되었습니다.

36a2bb5d4e09e.png




4. Type Mode 설정

01. 텍스트 레이어에 어떤 모드(?)로 스크립트가 적용되는지를 알아보겠습니다. 초기 기본값은 Characters이며, 알파벳 하나하나에 적용이 되는 방식입니다. 이번에는 약간 장문의 글을 테스트해보겠습니다.

892292207d55d.png



02. 앞서 작업한 것과 마찬가지로 In에 체크를 하고, Control 버튼을 누릅니다. 텍스트 레이어의 이펙트 창을 보면, Delay(Frame)이라는 것이 있습니다. 하나의 알파벳에 효과가 적용되고, 그 다음 알파벳의 몇 프레임 후에 적용되는지를 결정하는 것입니다. 철자가 너무 많기 때문에, 기본값인 2로 설정을 하면, 애니메이션이 너무 오래 걸립니다. 그래서 0.3으로 바꿔줍니다.

8b407dc546371.png



03. 앞서 작업한 것과 동일하게 Position 속성을 추가해 줍니다.

52792d7576507.png



04. 텍스트 레이어를 화면 밖으로 보내기 위해 Y축 값을 450 정도로 입력해 줍니다.

268c4b9af5963.png



05. 컴포지션 윈도우를 확인해보면, 첫 시작이 화면 밖에서부터 시작할 수 있도록 레이어의 위치가 이동되었음을 알 수 있습니다. 왜 이렇게 할까요? 컴포지션 윈도우에서 그냥 드래그해서 이동해도 되지 않을까요? 현재 MoText는 스크립트로 연동이 되고 있는 상태이기 때문에, 레이어가 가지고 있는 위치값은 변화가 없는 상태에서 움직임이 조정되어지는 것처럼 보일 뿐입니다. 그래서 추가한 속성, 즉 이펙트 안에 있는 위치값으로 조절을 해야만 합니다.

c3796fea76114.png



06. 애니메이션을 시켜보겠습니다. 워낙 글자가 많다 보니, 하나하나 화면상으로 들어오는 시간도 무시할 수가 없습니다. 그래서 시간이 꽤 걸리고 예뻐 보이지도 않습니다.

ef6e8a38a3dfd.png



07. 그래서 이번에는 Characters가 아닌 Lines으로 바꿔보겠습니다. 텍스트 레이어를 선택한 다음에 Lines을 선택해주면 됩니다.

fa4c7926cc489.png



08. 현재 써져 있는 텍스트는 총 3줄의 라인으로 구성되어 있습니다. 자세히 보면, 라인 별로 약간씩 행간의 차이를 느낄 수 있습니다.

fd85c60fb2cac.png



09. 이번에는 Words로 설정해 보겠습니다.

9eeccdd92a05e.png



10. 각 단락별로 애니메이션이 만들어집니다. Characters로 설정했을 때보다 훨씬 더 빠르게 애니메이션이 됩니다.

3970e05a2375f.png




5. Spring 기능

01. 새로운 컴포지션을 만들고 이름을 SPRING으로 입력합니다. 텍스트 레이어에 앞서 작업한 것과 동일하게 작업한 다음에 Position 속성을 추가합니다.

21af703b2fd8a.png



02. 그런 다음에 MoText 창에서 Spring l Properties에 있는 동그라미 모양의 아이콘을 클릭하여 체크합니다. 그리고 하단에 있는 Replace 버튼을 클릭합니다(반드시 레이어를 선택한 다음에 Replace 버튼을 눌러야 합니다).

56dc6192f1bd1.png



03. 그런데 컴포지션 윈도우를 확인해보면 아무런 변화가 없을 것입니다. 램프 리뷰를 시켜봐도 마찬가지입니다. 이유는 바로 Keyframe Velocity 때문입니다. 가속과 감속이 적용되게끔 기본 설정이 되어져 있어서 이것을 바꿔줘야만 합니다. 키프레임을 선택하고, 마우스 오른쪽을 클릭하면, 그림처럼 팝업 메뉴가 나옵니다. 여기에서 Keyframe Velocity 메뉴를 선택합니다.

e483d209a3723.png



04. 기본값은 아래와 같이 되어 있을 것입니다. 여기에서 Incoming Velocity의 Influence 값을 100이 아닌 0으로 입력하고, Outgoing Velocity의 Influence 값을 30정도로 입력합니다.

dc6cc9cce7683.png



05. 그런 다음에 애니메이션을 확인해보면, 텍스트가 멈출 때 출렁거리는 애니메이션이 만들어질 것입니다. 재미난 것은 Ctrl + Replace 버튼을 클릭하면, 출렁거리는 애니메이션이 아닌 통통 튀는 애니메이션이 만들어집니다. 적용 전으로 돌아가고 싶다면, Shift + Replace 버튼을 클릭하면 됩니다. 아마도 좀 더 버전 업이 되면 '?' 버튼을 하나 만들고, 거기에 간략한 Guide형식의 설명 글이 나오거나 다른 키보드 키와 함께 써야 하는 것들을 따로 버튼으로 만들 것 같습니다.

88f77cea83f5e.png




6. Text Animation에 이펙트 적용하기

01. 이번에는 텍스트의 컬러가 변화되는 애니메이션을 만들어보겠습니다. Position 속성까지 적용하여 움직이는 애니메이션을 만들어 놓은 상태에서 텍스트 레이어를 선택한 다음에 Instance Color를 선택하여 적용시킵니다.

3ea823640bbf5.png



02. 그런 다음에 애니메이션을 시켜보면, 기본 Instance Color 값이 Red라서 Red에서 White로 바뀌는 애니메이션이 만들어 집니다.

2dcf43519c135.png



03. 기본 Red 컬러를 바꾸고 싶으면, 이펙트 창에서 컬러 부분을 클릭하여 원하는 컬러를 지정해주면 됩니다.

8af1b3a80761c.png



04. 만약, 마지막에 끝나는 컬러를 White가 아닌 다른 컬러로 바꿔주고 싶다면, 원래 텍스트 컬러인 흰색을 바꿔줘야 합니다. 아래와 같이 Character의 Fill 컬러를 바꿔주면 됩니다.

736b6e46583cc.png



05. 애니메이션을 시켜보면, 그림처럼 자신이 원하는 컬러로 변화되는 것을 간단하게 만들 수 있습니다.

e1d6abc3d71bc.png



06. 이번에는 Stroke Color를 바꿔보겠습니다. 원리는 Instance Color와 마찬가지입니다. 그런데 적용을 시켜도 효과가 나타나지 않을 것입니다.

e87a11c42f745.png



07. 한가지 다른 점이 있다면, 현재 적용되어지지 않은 Stroke Color를 설정해줘야 컴포지션에서 볼 수 있습니다. Character팔레트에 들어가서 Stroke 옵션을 클릭하여 Stroke Over Fill을 선택하면, 자동으로 1픽셀로 설정되면서 화면에서 확인할 수 있습니다.

c52896819e015.png



08. 컬러를 바꾸는 것도 Instance Color를 바꿀 때와 동일합니다.

ef33e32d87761.png


337f02abfac81.png



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

6a8cd05458d80.png



10. 이번에는 Tracking 이펙트를 적용해보겠습니다. 텍스트 레이어를 선택한 다음, Tracking을 선택하면, 이펙트 창에 Tracking Amount_In이 생겨납니다. 이것을 조절하면, 자간이 벌어지거나 좁아지면서 애니메이션을 만들 수 있습니다.

206e69b569f9d.png



11. 아래와 같이 자간이 넓어졌다가 좁아지는 애니메이션을 간단하게 만들 수 있습니다.

37a48e810e34f.png



12. 여기에 Random 이펙트와 Opacity 속성을 추가해서 적용시켜 봅니다.

41a77fcf80cd4.png



13. 랜덤하게 투명도가 나타나면서 자간이 좁아지는 애니메이션을 간단하게 만들 수 있습니다.

27ca6634695dd.png



텍스트 애니메이션은 상당히 자주 사용되며, 생각보다 손이 많이 가는 작업 중에 하나입니다. 특히, 나만의 특별한 타이포 애니메이션을 만들 경우에 더더욱 신경을 많이 써야 합니다. 여기서 알려드리는 MoText의 기능대로만 사용한다면, 아마도 많은 사람들이 비슷한 애니메이션을 만들 수 밖에 없을 것입니다. 적절하게 사용하기 바랍니다. 영상을 보는 사람들은 어디에서든지 흔히 볼 수 있는 타이포 애니메이션에서 감동을 받진 않습니다.

MoText를 응용해서 타이포를 알파벳이 아닌 도형으로 만들어도 재미난 것들을 만들 수 있을 것입니다. 또한, 딩벳 폰트들을 찾아보면 재미난 것들이 많이 있을 것입니다. 아래 폰트 사이트에서 검색해보면, 재미난 딩벳 폰트들을 찾을 수 있습니다.


http://www.dafont.com/search.php?q=dingbats



http://www.myfonts.com/search/dingbats/fonts/

카카오톡 채널 채팅하기 버튼