컴포지션에서 레이어를 선택합니다.
- After Effects 사용 안내서
- Beta 릴리스
- 시작하기
- 작업 영역
- 프로젝트 및 컴포지션
- 푸티지 가져오기
- 텍스트 및 그래픽
- 그리기, 페인트, 패스
- 레이어, 마커, 카메라
- 애니메이션, 키프레임, 동작 추적, 키잉
- 투명도 및 합성
- 색상 조정
- 효과 및 애니메이션 사전 설정
- 표현식 및 자동화
- 몰입형 비디오, VR 및 3D
- After Effects에서 VR 환경 만들기
- 몰입형 비디오 효과 적용
- VR/360 비디오용 합성 툴
- 고급 3D 렌더러
- 컴포지션에 3D 모델 가져오기 및 추가
- Creative Cloud Libraries에서 3D 모델 가져오기
- 이미지 기반 조명
- 3D 모델에서 조명과 카메라 추출 및 애니메이션 적용
- 3D 카메라 움직임 추적
- 그림자 표시 및 허용
- 포함된 3D 모델 애니메이션
- 그림자 캐처
- 3D 심도 데이터 추출
- 3D 레이어의 질감 속성 수정
- 3D 디자인 공간에서 작업하기
- 3D 변형 기즈모
- 3D 애니메이션을 사용하여 더 많은 작업 수행
- Mercury 3D 엔진으로 3D 디자인 변경 사항 실시간 미리 보기
- 그래픽에 반응형 디자인 추가
- 보기 및 미리 보기
- 렌더링 및 내보내기
- 기타 애플리케이션으로 작업
- 공동 작업: Frame.io, Team Projects
- 메모리, 저장소, 성능
- 기술 자료
샘플 프로젝트 다운로드
다운로드
임의로 흔들기
흔들기 표현식은 가장 많이 쓰는 After Effects 표현식 중 하나입니다. 임의의 값에 걸쳐 개체가 흔들립니다. 이 표현식을 사용하여 장면을 보다 자연스럽게 보이도록 만들 수 있습니다. 이 표현식을 레이어의 위치 속성에 추가합니다.
-
-
타임라인 패널에서 P 키를 눌러 위치 속성을 표시합니다.
-
속성 이름의 왼쪽에 있는 초시계를 Alt+클릭(Windows) 또는 Option+클릭(macOS)합니다.
-
다음 코드 조각을 표현식 필드에 입력합니다.
흔들기(2,30)
이 예시는 흔들기(빈도, 양)로 첫 번째 숫자는 초당 흔들기 수이고 두 번째 숫자는 흔들기 값입니다. 따라서 흔들기(2,30)를 사용하면 레이어를 모든 방향으로 초당 2번씩 최대 30픽셀로 흔듭니다.
슬라이더 컨트롤로 흔들기 제어
값을 슬라이더 컨트롤 등 표현식 컨트롤에 대한 연결로 바꾸어 표현식에 키프레임을 지정할 수 있습니다. wiggle() 표현식의 두 번째 인수를 슬라이더 컨트롤에 대한 연결로 바꾸면 동작이 특정 시간에 시작하고 정지하도록 키프레임할 수 있습니다.
-
원하는 레이어에 슬라이더 컨트롤 효과를 추가하고 이름을 Wiggle Amount로 지정합니다.
-
동일한 레이어의 위치 속성에 다음 표현식을 적용합니다.
// 뚝딱 도구를 사용하여 슬라이더에 대한 “효과(...)” 연결을 만듭니다 var wiggleAmount = effect(“Wiggle Amount”)(“Slider”); // 슬라이더에서 설정한 양만큼 초당 4번 흔듭니다 wiggle( 4, wiggleAmount );
레이어는 원을 그리며 회전합니다.
다른 레이어의 속성을 사용하지 않고 표현식을 만들 수 있습니다. 예를 들어 레이어가 컴포지션의 중앙을 축으로 회전하도록 할 수 있습니다.
-
컴포지션에서 레이어를 선택합니다.
-
타임라인 패널에서 P 키를 눌러 위치 속성을 표시합니다.
-
속성 이름의 왼쪽에 있는 초시계를 Alt+클릭(Windows) 또는 Option+클릭(macOS)합니다.
-
다음 코드 조각을 표현식 필드에 입력합니다.
var centerOfComp = [ ( thisComp.width / 2 ), ( thisComp.height / 2) ]; var circleOverTime = [ Math.sin( time ) * 50, -Math.cos( time ) * 50 ]; centerOfComp + circleOverTime;
Overshoot
흔히 관성 바운스로 알려진 이 표현식은 레이어 자체 키프레임의 애니메이션을 사용하여 자연스러운 오버슛을 만듭니다. 속도를 기반으로 한 키프레임에서 다음 키프레임으로 매개변수의 바운싱 동작을 만듭니다. 바운스는 물체가 이동하는 방향에 관계없이 발생합니다. 이 애니메이션을 만드는 방법은 다음과 같습니다.
-
After Effects에서 그래픽을 만들거나 가져옵니다.
-
애니메이션을 적용할 레이어의 위치 속성에 키프레임을 추가합니다.
-
레이어의 위치 속성에 다음 표현식을 추가합니다.
// 오버슈트를 제어하기 위한 값을 설정합니다. // 이를 슬라이더 표현식 컨트롤에 연결하여 다른 설정을 빠르게 미리 봅니다. var amp = 40; var freq = 30; var decay = 50; // 가장 최근의 키프레임을 찾습니다. var nK = nearestKey(time); var n = (nK.time <= time) ? nK.index : --nK.index; var t = (n === 0) ? 0 : time - key(n).time; // 현재 시간이 키프레임보다 늦은 경우 오버슈트를 계산합니다. // 그렇지 않은 경우 원래 값을 사용합니다. if ( n > 0 && t < 1 ) { var v = velocityAtTime( key( n ).time - thisComp.frameDuration /10 ); value + v * amp * .001 * Math.sin(freq * .1 * t * 2 * Math.PI) / Math.exp(decay * .1 * t); } else { value; }
시간에 따라 회전
뚝딱 도구를 사용하여 레이어 간에 회전 값을 연결하여 개체에 애니메이션을 적용할 수 있습니다. 시계가 작동하는 방식은 이 세 개의 원을 시계의 세 바늘로 간주합니다. 시침은 시침으로 움직이고 분침은 시계판의 전체 둘레를 회전합니다.
-
세 개의 원형 단색 레이어를 가져오거나 만듭니다. 그 중 하나는 시침, 다른 하나는 분침, 세 번째는 초침처럼 작동한다고 가정해 보겠습니다.
-
레이어 끝에 고정점을 설정합니다.
-
레이어를 이동하여 고정점이 컴포지션 중심에 오도록 합니다.
-
시침의 회전 키프레임을 설정합니다. 분침의 회전 속성을 선택한 후 애니메이션 > 표현식 추가를 선택합니다.
-
뚝딱 도구를 가장 큰 원의 회전 속성으로 드래그합니다. 다음 표현식이 표시됩니다.
thisCompayer(“circle”)otation
-
두 번째 원이 첫 번째 원보다 12배 빠르게 회전하도록 하려면 다음과 같이 표현식 끝에 *12를 추가합니다.
thisCompayer(“circle”)otation*12
-
세 번째 원에 대해서도 동일하게 반복하고 표현식 끝에 *24를 추가합니다.
thisCompayer(“circle”)otation*24
반복
표현식을 사용하여 키프레임을 추가할 필요 없이 애니메이션을 반복하고 확장할 수 있습니다. 예를 들어 여러 모양을 컴포지션이 끝날 때까지 회전시키는 데 표현식을 사용할 수 있습니다. 이렇게 하려면 시작하는 회전을 위해 회전 속성에 키프레임을 하나 추가하고, 끝나는 회전을 위해 또 다른 키프레임을 추가합니다. 키프레임을 적용한 회전 속성에 loopOut() 메서드를 적용하면 레이어가 마지막 키프레임 이후 계속 돌도록 할 수 있습니다.
아래 loopOut() 예제에서 사용하는 인수는 반복 유형과 반복에 포함할 키프레임의 수를 설정합니다.
// 모든 키프레임을 순환하도록 loopOut 설정 loopOut(“cycle”, 0),
첫 번째 인수 “cycle”은 loopOut 메서드에 사용할 수 있는 네 가지 반복 모드 중 하나입니다. 나머지 세 가지는 “continue”, “offset”, “ping-pong”입니다. “cycle”은 마지막 키프레임에서 반복을 시작하여 두 번째 인수에서 정의한 범위 내에 있는 첫 번째 키프레임의 값에서 다시 시작합니다.
두 번째 인수는 반복에 포함할 키프레임의 수이며 마지막 키프레임에서 거꾸로 센 값입니다. 두 번째 인수를 입력하지 않거나 0으로 설정하면 마지막 키프레임 이후 속성의 모든 키프레임 애니메이션을 반복합니다. 인수가 1인 경우 마지막 키프레임과 바로 전 키프레임 사이에 있는 애니메이션을 반복합니다. 인수가 2인 경우 마지막 키프레임과 이전 두 키프레임 사이에 반복 애니메이션을 적용하며, 이 규칙으로 인수를 사용합니다.
상위 레이어의 실제 위치 가져오기
레이어에 상위 레이어를 지정한 경우 해당 레이어의 위치 속성에 표시되는 값은 컴포지션에서의 “실제” 위치가 아니라 상위 레이어의 위치에 따른 상댓값입니다. 상위 레이어의 실제 위치를 찾으려면 표현식을 사용하여 상위 레이어의 좌표 공간을 컴포지션의 좌표 공간으로 변환해야 합니다. 상위 레이어가 없는 레이어의 위치에 다음 표현식을 적용하여 상위 레이어가 있는 레이어의 위치에 연결합니다.
// 상위 레이어를 정의합니다 var targetLayer = thisComp.layer(“Parented Layer”); // 컴포지션에서 상위 레이어의 기준점을 찾습니다 targetLayer.toComp( targetLayer.anchorPoint );
상위에서 레이어의 위치 딜레이
지연과 오프셋은 애니메이션을 보다 역동적이고 자연스럽게 만드는 좋은 방법입니다. 여러 레이어를 하나의 상위 레이어에 대한 하위 레이어로 연결한 다음 각 하위 레이어의 위치에 표현식을 적용하여 상위 레이어에서 상속된 모션을 지연시켜 이러한 유형의 오프셋을 만들고 제어할 수 있습니다.
이 방법은 상위 레이어가 있는 레이어에만 적용된다는 점에 유의하세요.
// 프레임의 지연량을 설정합니다 var delay = 5; // 지연 시간에 따라 레이어의 위치를 오프셋합니다 parent.fromComp( toComp( anchorPoint, time - framesToTime( delay ) ) );
상위 레이어에 대한 하위 레이어의 인덱스를 기반으로 지연 정도를 조정할 수도 있습니다. 이렇게 하면 하위 레이어의 애니메이션 순서를 다시 정렬하기 쉬워집니다. 타임라인에서 상위 레이어 아래(또는 애니메이션이 상위 레이어보다 먼저 발생하도록 하려는 경우 위)에 다시 정렬하면 됩니다.
// 프레임의 지연 정도를 설정합니다. var delay = 5; // 이 레이어의 상위 레이어에 대한 인덱스를 기준으로 지연을 곱합니다. var multipleDelay = delay * ( index - parent.index ) // 지연을 기반으로 레이어의 위치를 오프셋합니다. parent.fromComp( toComp( anchorPoint, time - framesToTime( multiplyDelay ) ) );
표현식 예제: 지정된 시간에 흔들기 시작 또는 중지
요소의 위치 속성에 다음 표현식을 추가하면 애니메이션을 시작하고 2초째에 시작하는 흔들기 효과를 시작할 수 있습니다.
var timeToStart = 2; if (time > timeToStart) { wiggle(3,25); } else { value; }
요소의 위치 속성에 다음 표현식을 추가하면 애니메이션이 시작할 때 흔들기 효과를 시작하고 4초 후 중지합니다.
var timeToStop = 4; if ( time > timeToStop ) { value; } else { wiggle( 3, 25 ); }
요소의 위치 속성에 다음 표현식을 추가하면 애니메이션이 시작하고 2초 후에 흔들기 효과를 시작하고 4초 후에 중지합니다.
var timeToStart = 2; var timeToStop = 4; if ( ( time > timeToStart ) && ( time < timeToStop ) ) { wiggle(3,25); } else { value; }
표현식 예제: 다른 두 레이어 사이에 레이어 배치
이 예제 표현식에서는 다른 두 레이어 간의 중간점에 레이어를 배치하고 유지합니다.
-
먼저 레이어 세 개를 만듭니다.
-
타임라인 패널에서 처음 두 레이어의 위치에 애니메이션을 적용합니다.
팁:동작 패스를 사용한 작업에 대해 알아보십시오.
-
다음을 표현식 필드에 입력합니다.
( thisComp.layer(1).position + thisComp.layer(2).position ) / 2
이미지의 흔적 만들기
이 예제 표현식에서는 특정 레이어가 [타임라인] 패널의 바로 위 레이어와 같은 위치에, 지정된 시간만큼(여기에서는 0.5초) 늦게 나타나도록 지정합니다. 다른 기하 속성에도 이와 유사한 표현식을 사용할 수 있습니다.
-
컴포지션 크기의 약 30%로 조정된 모양 레이어로 시작합니다.
-
위치 속성을 열고 키프레임을 추가합니다. 레이어를 선택합니다. P 키를 눌러 위치 속성을 표시합니다. 속성 이름 왼쪽에 있는 초시계 버튼을 Alt+클릭(Windows) 또는 Option+클릭(macOS)합니다.
-
다음을 표현식 필드에 입력합니다.
thisComp.layer(thisLayer, -1).position.valueAtTime(time - .5)
-
마지막 레이어를 선택하고 Ctrl+D(Windows) 또는 Command+D(Mac OS)를 다섯 번 눌러 다섯 번 복제합니다. 모든 레이어는 같은 패스를 따르며 각 레이어는 이전 레이어보다 0.5초 지연됩니다.
표현식 예제: 두 레이어 간 돌출 만들기
이 예제 표현식에서는 한 레이어에 있는 돌출 효과의 돌출 중심 인수를 다른 레이어의 위치와 동기화합니다. 예를 들어 레이어 위로 움직이는 확대경 같은 효과를 만들어 렌즈(즉, 위에 있는 레이어)가 이동하면 확대경 아래의 내용이 돌출되도록 만들 수 있습니다. 이 표현식에서는 이동할 대상이 확대경 레이어인지 아니면 밑에 있는 레이어인지에 상관없이 표현식이 올바르게 작동하도록 fromWorld 메서드를 사용합니다. 표현식을 그대로 유지한 채 밑에 있는 레이어를 회전하거나 비율 조정할 수 있습니다.
또한 이 표현식으로 잔물결 등 다른 효과도 사용할 수 있습니다.
-
먼저 레이어 두 개를 만듭니다. 한 레이어를 돋보기나 이와 비슷하게 가운데에 구멍이 있는 물건 모양으로 만들고 Magnifier라는 이름을 지정합니다.
-
돋보기 레이어의 위치에 애니메이션을 적용합니다.
-
다른 레이어에 돌출 효과를 적용합니다.
-
기본 표현식 텍스트를 선택한 후 다음을 입력합니다.
fromWorld(thisCompayer(“Magnifier”)osition)
표현식 예제: 카메라로부터의 거리에 따라 3D 레이어의 불투명도 페이드
3D 레이어의 불투명도 속성에 다음 표현식을 적용합니다.
var startFade = 500; // 카메라에서 500픽셀 거리에서 페이드를 시작합니다. var endFade = 1500; // 카메라에서 1500픽셀 거리에서 페이드를 끝냅니다. try { // 카메라가 존재하는지 확인 var C = thisComp.activeCamera.toWorld([0,0,0]); } catch ( err ) { // 카메라가 없는 경우 50mm로 가정 var w = thisComp.width * thisComp.pixelAspect; var z = (w/2)/Math.tan(degreesToRadians(19.799)); var C = [0,0,-z]; } var P = toWorld( anchorPoint ); var d = length( C, P ); linear( d, startFade, endFade, 100, 0 );
페이드는 카메라로부터 500픽셀 거리에서 시작하여 1500픽셀 거리에서 완료됩니다. linear 보간 메서드는 거리 값을 불투명도 값에 매핑할 때 사용됩니다.
표현식 예제: 카메라에서 멀어지는 경우 3D 레이어 보이지 않게 하기
3D 레이어의 불투명도 속성에 다음 표현식을 적용합니다.
if ( toCompVec([0, 0, 1])[2] > 0 ) { value; } else { 0; }
표현식 예제: 카메라에서 멀어지는 경우 레이어 가로로 뒤집기
3D 레이어의 크기 속성에 다음 표현식을 적용합니다.
if ( toCompVec([0, 0, 1])[2] > 0 ) { value; } else { [ -value[0], value[1], value[2] ]; }
표현식 예제: 각 레이어 마커에서 비율에 애니메이션 적용
다음 표현식을 크기 속성에 적용하여 각 마커마다 레이어가 흔들리도록 합니다.
var n = 0; var t = 0; if (marker.numKeys > 0){ n = marker.nearestKey(time).index; if (marker.key(n).time > time) n--; } if (n > 0) t = time - marker.key(n).time; var amp = 15; var freq = 5; var decay = 3.0; var angle = freq * 2 * Math.PI * t; var scaleFact = (100 + amp * Math.sin(angle) / Math.exp(decay * t)) / 100; [value[0] * scaleFact, value[1] / scaleFact];
마커를 추가하려면 레이어 > 마커 > 새 마커를 선택합니다.
여기에서 사용된 wiggle 표현식 대신 다른 표현식을 사용하여 특정 시간에 다른 표현식에 의한 효과가 시작되고 종료되도록 할 수 있습니다.
표현식 예제: 다른 레이어에 카메라 초점면 일치
다음 표현식을 카메라 레이어의 피사체와의 거리 속성에 적용하여 피사체와의 거리가 ‘Targe’ 레이어의 기준점까지의 거리와 일치하도록 합니다.
var target = thisCompayer(“target” var V1 = targetoWorld( targetnchorPoint ) - toWorld( [ 0, 0, 0 ] var V2 = toWorldVec( [ 0, 0, 1 ] dot( V1, V2
표현식 리소스 더 보기
표현식 뒤에 숨은 개념 몇 가지를 이해했다면, 커뮤니티를 방문하여 실제 사용 예시를 살펴보고 작업을 공유할 수 있습니다.