첫 번째 애니메이션인 튀어 오르는 공으로 넘어가기 전에 먼저 기술적인 과제를 해보고 싶습니다: 텍스트는 손으로 쓴 것처럼 그려야 합니다. 무화과나무 잎 걸레는 마지막에 악센트가 있는 아름다운 도입부가 있으며 느낌표의 포인트를 배치할 것입니다.

상황에 따라 어느 정도 좋은 방법이 몇 가지 있습니다. 저는 그래픽 태블릿으로 작업하고 있으므로 글꼴을 그리고 애니메이션을 적용하는 방법을 보여 드리겠습니다. 하지만 그 전에 제가 가장 좋아하지 않는 방법을 보여드리겠습니다:


1-10단계

1단계

텍스트 레이어를 없애고 대신 그림을 그릴 수 있는 일반 픽셀 레이어인 컴포지션 레이어를 사용하고 싶습니다. 텍스트는 레이어에 있어야 합니다. 그래서 Ctrl+Shift+C를 사용하거나 레이어> 하위 컴포지션 만들기를 통해 하위 컴포지션을 만듭니다. 저는 이것을 "Typo_Intro"라고 부릅니다.

간편한 애니메이션: 라인 애니메이션

2단계

난기류 오프셋을 포함한 모든 속성이 포함되었습니다.

이것을 원하지 않기 때문에 Turbulent Offset을 클릭하고 Ctrl+X를 누른 다음 전체를 한 컴포지션 더 위로 다시 삽입합니다("Fig Leaf Rag").

간편한 애니메이션: 라인 애니메이션

3단계

"Typo_Intro" 컴포지션으로 돌아가 보겠습니다. 여기서 우리는 텍스트를 드러냈고 전체에 애니메이션을 적용할 수 있습니다.

첫 번째 옵션은 경로를 이용하는 것입니다. 펜 도구를 사용하여 글꼴에서 문자 A의 첫 번째 줄을 추적합니다. 그런 다음 Ctrl 키를누른 상태에서 검은색 어딘가를 클릭하여 현재 경로를 끝낸 다음 문자 A의 두 번째 줄을 추적합니다.

다시 내려놓고 Ctrl 키를누른 상태에서 검정색 부분을 클릭한 다음 전체 글꼴이 추적될 때까지 다음 줄을 그리는 식으로 반복합니다.

간편한 애니메이션: 라인 애니메이션

4단계

이제 효과를 추가하겠습니다. CC 버전에서는 생성 아래에서 윤곽선으로 찾을 수 있습니다. CS6까지는 스트로크 효과라고 불렀습니다.

마스크를 선택하거나 모든 마스크 상자를 선택하면 이러한 마스크를 그릴 수 있습니다.

간편한 애니메이션: 라인 애니메이션

5단계

이 작은 기호로 마스크를 숨기고 경로를 빨간색으로 색칠합니다. 크기를 변경할 수도 있지만 모든 마스크에 대해 전역적으로만 변경할 수 있습니다.

마스크를 다시 표시할 때도 개별 점을 이동하고 조정하여 아래의 흰색 텍스트가 모두 가려지도록 할 수 있습니다.

간편한 애니메이션: 라인 애니메이션

6단계

좋은 점은 여기에 시작종료 슬라이더가 있다는 것입니다. 슬라이더를처음부터 끝까지 끌어서 전체 텍스트를 그릴 수 있습니다.

이것은 매우 잘 작동하지만 정확한 제어가 불가능합니다. 예를 들어 항상 같은 선 너비를 사용해야 하므로 더 얇거나 두꺼운 선을 그릴 수도 없습니다.

간편한 애니메이션: 라인 애니메이션



그렇기 때문에 모든 것을 개별적으로 추적하는 것보다 조금 더 빠른 다른 방법을 보여 드리고자 합니다 ...

7단계

이 경우에는 브러시를 사용하는 약간 더 빠른 방법을 선호합니다 .

그러나 이 브러시는 텍스트 레이어에는 사용할 수 없습니다. 따라서 다른 하위 컴포지션을 만들고 이름을 "Typo_Static"으로 지정해야 합니다. 이 하위 컴포지션에서 바로 작업할 수 있습니다.

간편한 애니메이션: 라인 애니메이션

8단계

브러시로 작업하고 브러시 모드에서 두 번 클릭하면 레이어 탭이 열리고 여기에서 브러시로 작업할 수 있는 유일한 곳입니다.

두 개의 새 패널도 만들어졌습니다: 브러시와 페인트입니다. 브러시 패널에서는브러시의 크기, 경도 등을 설정할 수 있습니다.

그리고 페인팅 패널에서는페인팅 유형을 선택할 수 있습니다. 처음에는 지속 시간이 상수로 설정되어 있지만 이를 애니메이션 페인팅으로 변경합니다.

한 획을 그리고 또 다른 획을 그리고 또 다른 획을 그리지만 한 획을 마치자마자 이상하게 사라집니다.

간편한 애니메이션: 라인 애니메이션

9단계

다른 탭으로 돌아가 타임라인을 따라 스크롤하면 모든 스트로크가 있고 모두 자동으로 그려지는 것을 볼 수 있습니다.

간편한 애니메이션: 라인 애니메이션

10단계

변경된 모든 속성에 대해 UU를 누르면 여기에 많은 하위 속성이 표시됩니다.

시작과 끝도 각각에 대해 표시됩니다.

또한 획이 그려진 후에도 개별 간격, 경도 및 각 획의 위치까지 변경할 수 있습니다.

간편한 애니메이션: 라인 애니메이션

계속하기: 11~20단계

11단계

더 나은 개요를 볼 수 있도록 모든 것을 다시 삭제합니다.

새 획을 하나 더 그리고 레이어 보기에서 경로를 볼 수 있습니다. 이것이 저장될 것입니다.

그린 획이 마음에 들지 않으면 해당 획을 선택한 다음 다시 칠하면 됩니다. 업데이트되고 간단히 덮어쓰기만 하면 됩니다.

간편한 애니메이션: 라인 애니메이션

12단계

이와 같은 애니메이션을 가장 빠르게 만들 수 있는 방법이기 때문에 같은 방법으로 텍스트를 추적하고 싶습니다.

그래서 지름을 조금 더 작게 만들고 그래픽 태블릿으로 텍스트를 추적하여 여기에 그립니다.

간편한 애니메이션: 라인 애니메이션

13단계

모든 획을 그렸는데 타임라인에서 전체를 다시 재생하면 모든 획이 있는 것을 볼 수 있습니다.

U를 누르면 모든 키프레임이 다시 표시됩니다.

간편한 애니메이션: 라인 애니메이션

14단계

Ü 키를 누르면 현재 마우스가 이동 중인 창이 최대화됩니다. 이 경우에는 타임라인입니다. 이렇게 하면 공간이 더 넓어지고 눈에 띄는 요소를 더 쉽게 알아볼 수 있습니다. 모두 거의 같은 시간이 걸리도록 조금 뒤로 물러나 있습니다.

간편한 애니메이션: 라인 애니메이션

15단계

재생해 봅시다.

참고로 실수로 Caps Lock 키를 누르면 After Effects가 더 이상 업데이트되지 않습니다. 보기를 새로 고치려면 캡스 잠금을 비활성화하라는 메시지가 표시됩니다.

지금 재생하면 After Effects가 모든 글자를 동시에 그리기 시작합니다. 하지만 앞쪽에서 시작하여 뒤쪽으로 이동해야 합니다. 이것이 문제의 핵심입니다. 제가 원하는 대로 하려면 한 번에 한 획씩 손으로 전체 타이밍을 맞춰야 합니다. 꽤나 많은 작업이죠. 더 빨리 하고 싶어요.

다음 단계에서 정확한 방법을 설명하겠지만 먼저 모든 스트로크를 표시하겠습니다.

간편한 애니메이션: 라인 애니메이션

16단계

그래서 저는 이러한 키 프레임을 차례로 설정하는 스크립트를 사용합니다.

스크립트는 제가 직접 작성했으며 물론 여러분에게도 제공했습니다. 스크립트 폴더에서 시퀀스 스트로크라는 이름으로 찾을 수 있습니다. "After Effects의 시퀀스 레이어"라는 영화에 익숙한 사람이라면 스크립트가 무엇을하는지 잘 알 것입니다.

스크립트 확장에서 스크립트를 열고 실행합니다.

간편한 애니메이션: 라인 애니메이션

17단계

이제 키 프레임의 계단이 있고 텍스트가 단계별로 그려집니다. 하지만 여전히 하품이 나올 정도로 느립니다.

속도를 높여야 합니다. 이를 위해 모든 것을 선택하고 마지막으로 찾은 키 프레임을 가져와 Alt 키를누른 다음 실행을 5초로 드래그합니다.

이렇게 하면 속도가 상당히 빨라집니다.

간편한 애니메이션: 라인 애니메이션



마지막 지점은 여전히 약간 지연되어야 하지만 잠시 후에 처리하겠습니다.

18단계

오프셋 값에대해 이야기하고 싶습니다. 이것은 키프레임 전환에 영향을 줍니다:

현재 키프레임 전환을 보면 다음 키프레임은 항상 이전 키프레임이 끝나는 지점(a)에서 정확히 시작됩니다.

이를 원하지 않고 두 스트로크 사이에 두 프레임의 일시 정지를 원한다면, 예를 들어 오프셋에 2를 입력합니다.

물론 스크립트를 활성화하기 전에 모든 브러시를 다시 선택해야 합니다. Ctrl+A를 사용하면 한 번에 모두 선택할 수 있습니다.

간편한 애니메이션: 라인 애니메이션



또는 프레임이 겹치도록 하려면 오프셋을 -2로 설정합니다. 그러면 항상 실제 프레임보다 두 프레임 뒤로 이동합니다. 하지만 여기처럼 빠르게 단축했다면 말이 안 되죠. 저는 이 정도면 만족하고 2로 놔둡니다.

19단계

제가 꼭 바꾸고 싶은 것은 느낌표의 타이밍입니다. 음악에 더 잘 배치하고 싶습니다.

따라서 작곡에 음악도 필요합니다. 그래서 "무화과 잎 걸레" 탭으로 이동하여 파일을 복사합니다.

그런 다음 필요한 경우 컴포지션을 다시 Alt+클릭하고여기에 붙여 넣습니다.

간편한 애니메이션: 라인 애니메이션

20단계

이제 필요한 두 위치가 어디에 있는지 봅시다. 이를 위해 숫자 패드를 사용하고 쉼표 키를눌러 미리보기를 만듭니다. 숫자 패드에서 별표 키 *를 눌러 마커를 설정합니다. 숫자 패드가 없는 디바이스, 특히 Mac에서는 미리 보기를 만들려면 cmd+쉼표, 마커를 만들려면 cmd+8을 입력합니다.

이제 음악을 재생하고 느낌표의 대시와 점이 나타나야 하는 위치에 마커를 정확히 배치합니다(1). 즉, 멜로디의 두 악센트에 정확히 배치합니다.

그래서 두 개의 마커를 설정했습니다: 첫 번째는 느낌표의 획이 끝나야하고 두 번째는 점이 배치되어야합니다.

첫 번째 마커에 가이드 라인을 배치하고 "Typo_Static" 구도로 전환합니다. 느낌표(2)의 선을 표시하는 가이드 위로 프레임을 이동합니다.

점의 위치를 나타내는 두 번째 마커에 대해서도 동일하게 수행합니다: 마커에 가이드를 놓고 구도로 전환한 다음 그에 따라 프레임을 이동합니다.

간편한 애니메이션: 라인 애니메이션

마지막 단계

21단계

느낌표의 획을 그 앞의 글꼴보다 더 천천히 그려서 전체가 느낌표 (1)로 더 강조되도록하고 싶습니다.

그리고 글꼴은 전체적으로 조금 더 빨리 완성되어야 합니다. 그래서 그 앞에 있는 모든 것을 표시하고(2) 약간 앞으로 드래그합니다(3).

타이밍이 완벽합니다.

간편한 애니메이션: 라인 애니메이션

22단계

텍스트 위에 글꼴을 그렸으므로 이제 글꼴을 약간 변경합니다.

먼저 "Typo_Static" 레이어를 복제하고 아래쪽 레이어에서 페인트 효과를삭제합니다.

간편한 애니메이션: 라인 애니메이션

23단계

이제 상단 레이어에는 흰색 원본 아래에 페인트 칠한 텍스트가 있습니다.

하단 레이어에는 일반 흰색 텍스트가 있습니다.

상단 레이어에서 "투명도로 페인트 " 상자를 선택하면 페인트된 빨간색 선만 남게 됩니다.

간편한 애니메이션: 라인 애니메이션

24단계

위쪽 레이어는 아래쪽 레이어의 마스크로 사용됩니다.

마스크가 표시되지 않으면 하단의 스위치 모드 활성화/비활성화를 클릭하기만 하면 움직이는 마스크 BewMas가 표시됩니다.

그런 다음 알파 마스크를 선택하면 원하는 결과를 정확하게 얻을 수 있습니다. 즉, 이 선이 그려지는 곳마다 제 원래 글자가 표시됩니다.

간편한 애니메이션: 라인 애니메이션



그러나 A가 이미 처음에 있기 때문에 실수를 했습니다.

25단계

이제 아래에서 위로 직사각형 선택(1)으로 모든 브러시를 다시 선택한 다음 Shift+선택(2)으로 느낌표의 두 프레임을 제거해 보겠습니다. 두 프레임은 이미 시간 측면에서 완벽하게 배치되어 있습니다.

그런 다음 맨 아래 첫 번째 프레임을 오른쪽으로 약간 이동하여 맨 처음의 A가 아직 보이지 않도록 합니다.

이제 맞습니다.

간편한 애니메이션: 라인 애니메이션

26단계

하위 컴포지션에서 이 작업을 수행했으며 여기에는 여전히 난기류 오프셋 효과가 있습니다.

이 구도에서 전체를 보면 노란색으로 표시되고 색상이 변할 뿐만 아니라 흔들림도 있습니다.

간편한 애니메이션: 라인 애니메이션

27단계

멋지고 완벽하게 맞지만 색상은 나중에만 변경되거나 전혀 변경되지 않아야 합니다. 따라서 색상 변경은 당분간 사용하지 않습니다.

간편한 애니메이션: 라인 애니메이션



이제 트레일러의 첫 4초 분량을 마쳤으며 튜토리얼의 다음 부분인 튀는 공으로 다시 만나 뵙겠습니다.