SCRIPT굴리는 것들은 내게로 오라. Roll it ! 스크립트

motionlab
조회수 6747

심플하지만, 작업 시 상당히 편리한 Script들을 알려드리는 두 번째 시간입니다. 이번에는 오브제를 리얼하게 굴릴 수 있는(?) Roll it이라는 Script를 소개해 드리겠습니다.



1. Roll it


01. https://aescripts.com/roll-it/ 사이트에 들어가서 확인해보면 상당히 재미나는 애니메이션들을 만들 수 있습니다. 일반적으로 이런 스타일의 애니메이션은 Newton 같은 시뮬레이션 플러그인이나 3D 프로그램 같은 곳에서 만들어야 했지만, 이제 간단하게 만들 수 있습니다.
541173e8b20f2.jpeg

 


02. 일단 Roll it Script가 어떤 결과물을 가져오는지에 대해서 알아보기 위해서 그림처럼 같은 애니메이션을 2개 만들어 보았습니다. 삼각형 오브제가 회전하면서 이동하는 애니메이션입니다.

5560151a1be1a.png



03. 상단에 있는 삼각형2 Layer를 선택한 다음, Roll it Script를 실행하여 Roll it! 버튼을 누릅니다. Script는 Program Files > Adobe > Adobe After effects > Support Files/Scripts/ScriptUI Panels 안에 넣어주면 됩니다. 그런 다음, After Effects를 실행해서 Window 메뉴 하단부분에서 찾으면 됩니다.

abdcd8d982511.png

 

04. Roll it을 적용한 삼각형2 Layer를 살펴보면, Position에 Expression이 적용된 것을 확인할 수 있습니다.

1f855d9a102a0.png



05. 사실 Roll it Script를 잘못 적용한 것입니다. 지면상으로 보여 드리기 위해서 같은 2개의 삼각형의 Position 애니메이션을 만들고, 그 중 하나의 삼각형에 Roll it을 적용한 것입니다. Roll it Script가 Position에 Expression을 주는 것이기 때문에, Position 애니메이션을 미리 만들 필요가 없습니다. 이 부분은 뒤에서 다시 설명 드리겠습니다. 적용한 삼각형2 Layer와 삼각형1 Layer의 Position 부분을 비교해 보면 확실히 차이가 나는 것을 알 수 있습니다.

9b65e81606b59.png



06. 아래 그림은 Roll it을 적용하지 않은 삼각형1의 애니메이션입니다. 일반적으로 삼각형의 중앙에 중심축을 두고 Position과 Rotation 애니메이션을 주면 이렇게 움직입니다.

495e8ade04ec8.png



07. 이번에는 Roll it Script를 적용한 삼각형2 Layer의 애니메이션입니다. 한눈에 봐도 차이점을 느낄 수 있을 것입니다. 마치, 삼각형이 진짜로 바닥을 인지하면서(?) 회전하고 이동하는 것을 알 수 있습니다.

3adc0dc00a0e1.png

 

08. 이제 제대로 애니메이션을 만들어보겠습니다. Layer를 선택한 다음, Roll it Script를 적용합니다. 그림처럼 Position에 Expression이 적용되었습니다. 그런 다음, Rotation에 키프레임을 만들어 주기만 하면 됩니다. Rotation의 0초에 0, 타임마커를 2초로 이동시킨 다음 2를 입력합니다(360도로 2번 회전하라는 뜻입니다).

e58f77eb8264f.png

 

09. 이제 애니메이션을 시켜보면, 그림과 같이 회전되면서 자동으로 움직이는 애니메이션을 볼 수 있을 것입니다. 아래 그림이 Roll it Script를 제대로 적용한 것입니다. 애니메이션을 자세히 보면, 삼각형 Layer의 각 꼭지점 및 라인들을 모두 인식하여 완벽하게 오브제가 바닥에서 굴러가는 애니메이션이 만들어졌다는 것을 알 수 있습니다.

ce4804ce2c163.png




2. Mask에 적용하는 Roll it


01. 앞서 보여드린 것은 Shape Layer로 만든 오브제에 Roll it을 적용한 것입니다. 이번에는 Mask에 적용해보겠습니다. 사실 Shape Layer와 Mask에서 사용되는 Path는 모두 같은 개념입니다. Solid Layer를 하나 만든 다음에 그림처럼 각이 많은 형태의 Mask를 하나 만들어줍니다. 이것을 선택하고, Roll it Script를 적용합니다.

949aae1df2e53.png



02. 앞서 작업한 것과 동일하게 Position 속성에 Expression이 적용되었습니다. 어떤 Expression이 적용되었는지 확인해보겠습니다. 정말 장난이 아닙니다. 거의 하단 부분은 암호화 수준입니다.

87c446477ff8c.png

 

03. 애니메이션을 만들어 보면, Shape Layer를 적용했을 때와 동일하게 움직이는 것을 볼 수 있을 것입니다.

7f88c6acd97c3.png



04. 이처럼 Roll it Script는 Shape Layer와 Mask에만 적용이 되는 Script입니다. Roll it Script 버튼에 커서를 올려놓으면, 간략한 설명이 나오는 것을 볼 수 있습니다. Shift 키를 누른 상태에서 Roll it 버튼을 클릭하면, Shape Layer에만 적용이 되고, Ctrl 키를 누른 상태에서 클릭하면, Mask에만 적용이 됩니다.

8b4dc88bfd001.png

 

05. 이제 어떤 방식으로 애니메이션이 되는지에 대해 알아보겠습니다. 같은 Layer를 복제하여 사이즈를 그림처럼 크게 만들어줍니다. 구별하기 쉽게 컬러를 Blue로 바꿔주었습니다.

876aa67146170.png

 

06. 2개의 Layer 모두 똑같은 Roll it Script와 Rotation 키프레임을 가지고 있지만, 애니메이션을 시켜보면 그림처럼 굴러가는 거리가 확연히 다릅니다. 결론적으로 Roll it Script는 오브제가 가지고 있는 크기, 다시 말해서 각 Path의 좌표 값에 따라서 자동으로 Position을 계산하는 방식입니다. 똑같은 회전 값을 가지고 있더라도 큰 물체가 더 멀리 가는 이치와 같다고 보면 됩니다.

633759b2dca20.png




3. 트랙터 애니메이션 만들기


01. 웹에 있는 튜토리얼을 보고 조금 변형하여 만들어 본 예제입니다. 다른 사이즈의 바퀴를 가지고 있는 트랙터의 움직임을 애니메이션으로 만들어보겠습니다. Illustrator에서 만든 소스를 After Effects로 가져옵니다. 물론, Illustrator에서 Layer들을 정리하여 분리해 놓았습니다.

d588bda718158.jpeg


 


02. 불러들인 파일이 Illustrator 파일이기 때문에, 이것들을 Shape Layer로 바꿔줍니다. Illustrator Layer를 선택한 다음, 마우스를 우 클릭하여 Create Shapes from Vector Layer를 선택해주면 됩니다. Roll it Script는 Shape Layer 또는 Mask에만 적용되기 때문에, 반드시 바꿔줘야 합니다.

f6c7e3023bc3f.png

 

03. 이제 바퀴에 Roll it Script를 적용하겠습니다. 앞바퀴와 뒷바퀴 모두 Roll it Script를 적용시켜줍니다. 의자는 몸체와 Parent를 시켜줍니다. 이 부분은 나중에 해도 상관없습니다.

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