사용 안내서 취소

표현식을 사용하여 모션 그래픽 템플릿에 드롭다운 목록 만들기

  1. After Effects 사용 안내서
  2. Beta 릴리스
    1. Beta 프로그램 개요
    2. After Effects Beta 홈
  3. 시작하기
    1. After Effects 시작하기
    2. After Effects의 새로운 기능 
    3. 릴리스 정보 | After Effects
    4. After Effects 시스템 요구 사항
    5. After Effects 키보드 단축키
    6. 지원하는 파일 형식 | After Effects
    7. 하드웨어 권장 사항
    8. Apple Silicon용 After Effects
    9. 계획 및 설정
  4. 작업 영역
    1. 일반 사용자 인터페이스 항목
    2. After Effects 인터페이스 알아보기
    3. 워크플로우
    4. 작업 영역, 패널, 뷰어
  5. 프로젝트 및 컴포지션
    1. 프로젝트
    2. 컴포지션 기본 사항
    3. 사전 구성, 중첩, 사전 렌더링
    4. 컴포지션 프로파일러를 사용하여 자세한 성능 정보 보기
    5. Cinema 4D 컴포지션 렌더러
  6. 푸티지 가져오기
    1. 스틸 이미지 준비 및 가져오기
    2. After Effects 및 Adobe Premiere Pro에서 가져오기
    3. 비디오와 오디오 가져오기 및 해석
    4. 3D 이미지 파일 준비 및 가져오기
    5. 푸티지 항목 가져오기 및 해석
    6. 푸티지 항목을 사용한 작업
    7. [장면 편집 감지]를 사용하여 편집 지점 감지
    8. XMP 메타데이터
  7. 텍스트 및 그래픽
    1. 텍스트
      1. 문자 서식 지정 및 문자 패널
      2. 텍스트 효과
      3. 텍스트 레이어 만들기 및 편집
      4. 단락 서식 지정 및 단락 패널
      5. 돌출 텍스트 및 모양 레이어
      6. 텍스트에 애니메이션 적용
      7. 텍스트 애니메이션 예제 및 리소스
      8. 라이브 텍스트 템플릿
    2. 모션 그래픽
      1. After Effects에서 모션 그래픽 템플릿을 사용해 작업하기
      2. 표현식을 사용하여 모션 그래픽 템플릿에 드롭다운 목록 만들기
      3. 기본 속성으로 모션 그래픽 템플릿 만들기
      4. 모션 그래픽 템플릿에서 이미지와 비디오 바꾸기 및 기본 속성
      5. 속성 패널로 보다 빠르고 간편해진 애니메이션 작업
  8. 그리기, 페인트, 패스
    1. 모양 레이어, 패스, 벡터 그래픽 개요
    2. 페인트 도구: 브러쉬, 복제 도장, 지우개
    3. 테이퍼 모양 선
    4. 모양 레이어의 모양 속성, 페인트 작업, 패스 작업
    5. 오프셋 패스 모양 효과를 통한 모양 변경
    6. 모양 만들기
    7. 마스크 만들기
    8. 내용 인식 채우기 패널로 비디오에서 개체 제거
    9. 로토 브러시와 매트 다듬기
  9. 레이어, 마커, 카메라
    1. 레이어 선택 및 정렬
    2. 혼합 모드와 레이어 스타일
    3. 3D 레이어
    4. 레이어 속성
    5. 레이어 만들기
    6. 레이어 관리
    7. 레이어 마커와 컴포지션 마커
    8. 카메라, 조명 및 관심 영역
  10. 애니메이션, 키프레임, 동작 추적, 키잉
    1. 애니메이션
      1. 애니메이션 기본 사항
      2. 퍼펫 도구를 사용한 애니메이션
      3. 모양 패스와 마스크를 관리하고 애니메이션을 적용하기
      4. After Effects를 사용하여 스케치 및 캡처 모양에 애니메이션 적용하기
      5. 종합 애니메이션 도구
      6. 데이터 기반 애니메이션 작업
    2. 키프레임
      1. 키프레임 보간
      2. 키프레임 설정, 선택 및 삭제
      3. 키프레임 편집, 이동 및 복사
    3. 동작 추적
      1. 동작 추적 및 안정화
      2. 얼굴 추적
      3. 마스크 추적
      4. 마스크 참조
      5. 속도
      6. 시간 스트레치와 시간 다시 매핑
      7. 시간 코드 및 시간 표시 단위
    4. 키잉
      1. 키잉
      2. 키잉 효과
  11. 투명도 및 합성
    1. 합성과 투명도 개요 및 리소스
    2. 알파 채널 및 마스크
    3. 트랙 매트와 이동하는 매트
  12. 색상 조정
    1. 색상 기본 사항
    2. 색상 관리
    3. 색상 교정 효과
    4. OpenColorIO 및 ACE 색상 관리
  13. 효과 및 애니메이션 사전 설정
    1. 효과 및 애니메이션 사전 설정 개요
    2. 효과 목록
    3. 효과 관리자
    4. 시뮬레이션 효과
    5. 스타일화 효과
    6. 오디오 효과
    7. 왜곡 효과
    8. 원근 효과
    9. 채널 효과
    10. 생성 효과
    11. 시간 효과
    12. 전환 효과
    13. 롤링 셔터 복구 효과
    14. 흐림 및 선명 효과
    15. 3D 채널 효과
    16. 유틸리티 효과
    17. 매트 효과
    18. 노이즈 및 그레인 효과
    19. 세부 사항-확대 유지 효과
    20. 더 이상 사용되지 않는 효과
  14. 표현식 및 자동화
    1. 표현식
      1. 표현식 기본 사항
      2. 표현식 언어 이해
      3. 표현식 컨트롤 사용
      4. JavaScript와 레거시 ExtendScript 표현식 엔진 간 구문 차이
      5. 표현식 편집
      6. 표현식 오류
      7. 표현식 편집기 사용
      8. 표현식을 사용하여 텍스트 속성 편집 및 액세스
      9. 표현식 언어 참조
      10. 표현식 예제
    2. 자동화
      1. 자동화
      2. 스크립트
  15. 몰입형 비디오, VR 및 3D
    1. After Effects에서 VR 환경 만들기
    2. 몰입형 비디오 효과 적용
    3. VR/360 비디오용 합성 툴
    4. 고급 3D 렌더러
    5. 컴포지션에 3D 모델 가져오기 및 추가
    6. Creative Cloud Libraries에서 3D 모델 가져오기
    7. 이미지 기반 조명
    8. 3D 모델에서 조명과 카메라 추출 및 애니메이션 적용
    9. 3D 카메라 움직임 추적
    10. 그림자 표시 및 허용
    11. 포함된 3D 모델 애니메이션
    12. 그림자 캐처
    13. 3D 심도 데이터 추출
    14. 3D 레이어의 질감 속성 수정
    15. 3D 디자인 공간에서 작업하기
    16. 3D 변형 기즈모
    17. 3D 애니메이션을 사용하여 더 많은 작업 수행
    18. Mercury 3D 엔진으로 3D 디자인 변경 사항 실시간 미리 보기
    19. 그래픽에 반응형 디자인 추가 
  16. 보기 및 미리 보기
    1. 미리 보기
    2. Mercury Transmit를 사용한 비디오 미리 보기
    3. 보기 수정 및 사용
  17. 렌더링 및 내보내기
    1. 렌더링 및 내보내기 기본 사항
    2. After Effects의 H.264 인코딩
    3. After Effects 프로젝트를 Adobe Premiere Pro 프로젝트로 내보내기
    4. 동영상 변환
    5. 멀티 프레임 렌더링
    6. 자동 렌더링 및 네트워크 렌더링
    7. 스틸 이미지와 스틸 이미지 시퀀스 렌더링 및 내보내기
    8. After Effects에서 GoPro CineForm 코덱 사용
  18. 기타 애플리케이션으로 작업
    1. Dynamic Link 및 After Effects
    2. After Effects와 다른 애플리케이션을 사용한 작업
      1. After Effects 프로젝트를 Premiere Pro 프로젝트로 내보내기
    3. After Effects의 설정 동기화
    4. After Effects의 Creative Cloud Libraries
    5. 플러그인
    6. Cinema 4D 및 Cineware
  19. 공동 작업: Frame.io, Team Projects
    1. Premiere Pro 및 After Effects의 공동 작업
    2. Frame.io
      1. Frame.io 설치 및 활성화
      2. Premiere Pro 및 After Effects에서 Frame.io 사용
      3. 자주 묻는 질문
    3. Team Projects
      1. Team Projects 시작 하기
      2. 팀 프로젝트 만들기
      3. Team Projects 공동 작업
  20. 메모리, 저장소, 성능
    1. 메모리 및 저장소
    2. After Effects가 미리 보기 시 메모리 부족 문제를 처리하는 방식
    3. 성능 향상
    4. 환경 설정
    5. After Effects의 GPU 및 GPU 드라이버 요구 사항
  21. 기술 자료
    1. 알려진 문제
    2. 해결한 문제
    3. 자주 묻는 질문
    4. After Effects 및 macOS Ventura
    5. 미리 보기를 하는 동안 After Effects에서 메모리 부족 문제를 처리하는 방법

Premiere Pro에서 수정할 수 있도록 드롭다운 목록이 있는 모션 그래픽 템플릿을 만듭니다.

드롭다운 메뉴 컨트롤

모션 그래픽 템플릿(MOGRT)을 작성할 때 속성을 수정 가능하게 유지하여 다른 편집자가 Premiere pro에서 수정하도록 허용할 수 있습니다. 한 방법은 슬라이더와 체크박스를 만드는 것입니다. 또한 다양한 옵션이 있는 드롭다운 목록을 사용하여 만들 수도 있습니다.

드롭다운 목록을 만들면 Premiere Pro 편집자에게 보다 많은 메뉴 컨트롤과 보다 간결한 편집 환경을 제공할 수 있어 유익합니다. 이 드롭다운 컨트롤 설정을 템플릿으로 저장하여 이후 다른 컴포지션과 프로젝트에서 사용할 수 있습니다.

After Effects의 드롭다운 목록을 사용할 때 표시되는 다양한 텍스트 옵션
After Effects의 드롭다운 목록을 사용할 때 표시되는 다양한 텍스트 옵션

드롭다운 목록을 만드는 이유

Premiere Pro를 사용하는 편집자에게 슬라이더와 체크박스를 편집 옵션으로 제공할 수 있지만, 이는 때로 직관적이지 못하고 시간이 많이 소요될 수 있습니다. 이 경우 드롭다운 목록이 유용합니다. 드롭다운 목록을 사용하면 Premiere Pro 편집자에게 다음 옵션 중 필요한 것을 제공할 수 있습니다.

색상 테마 선택 - 예: 영화 타이틀에 사용할 색상군에 대해 드롭다운 목록을 만들 수 있습니다.

 다양한 위치 또는 디자인 - 예: 왼쪽이나 오른쪽 하단 3분의 1 위치에 대해 드롭다운을 추가합니다.

 애니메이션 옵션 - 예: 다양한 애니메이션 지속 시간을 선택하여 드롭다운을 추가합니다.

텍스트 또는 에셋 옵션 - 예: 요일 드롭다운 목록을 추가합니다. 이렇게 하면 소스 텍스트를 다시 입력할 필요가 없으며, 생산 이후 작업에서 실수도 줄일 수 있습니다.

드롭다운 목록 컨트롤 설정

드롭다운 메뉴 컨트롤 효과를 사용하여 드롭다운 목록을 만듭니다. 이 기능의 작동 방식을 이해하려면 다음 단계를 따르십시오.

  1. 컴포지션을 만듭니다.
    프로젝트 패널 하단의 컴포지션 아이콘을 누르거나 홈 화면에서 새 컴포지션을 선택합니다.

  2. 텍스트 레이어를 추가하려면 레이어 > 새로 만들기 > 텍스트를 선택하고 추가하려는 텍스트를 입력합니다. 이 예에서는 아침(Morning)을 사용하겠습니다.

  3. [효과 및 사전 설정] 패널을 열고 [칠 색상]을 검색한 후 텍스트 레이어에 놓습니다.

  4. 모든 레이어를 배열했다면 효과 및 사전 설정 패널에서 드롭다운 메뉴 컨트롤을 검색한 후 레이어에 놓습니다. 효과 > 표현식 컨트롤 > 드롭다운 메뉴 컨트롤을 통해 액세스할 수도 있습니다.

    타임라인 패널에서 텍스트 레이어 속성을 돌리면서 열고 소스 텍스트 옆에 있는 초시계를 Alt 키를 누른 상태에서 클릭합니다.

    표현식 텍스트 필드에 소스 텍스트를 변경하는 다음 표현식 코드 조각을 복사합니다.

    var x = effect("Weekday")("Menu").value;

    if ( x === 1 ) {
    "Morning";
    } else if ( x === 2 ) {
    "Evening";

    } else if ( x === 3 ) {

    "Night";

    }

    뚝딱 도구를 사용하여 요일이라는 이름의 드롭다운 메뉴를 소스 텍스트 속성에 연결합니다.

    효과 컨트롤 패널에서 편집을 클릭합니다. [드롭다운 메뉴 컨트롤]에는 항목 1, 항목 2, 항목 3의 3가지 항목이 기본 메뉴로 제공됩니다. 이를 메뉴 옵션의 이름을 지정하는 데 사용합니다. + - 아이콘으로 더 많은 옵션을 메뉴에 추가할 수도 있습니다.

  5. 또 다른 드롭다운 메뉴를 추가하고 이름을 색상으로 바꿉니다. 다음으로, 칠 색상 레이어를 돌리면서 열고 Alt 키를 누른 상태에서 [색상] 속성을 클릭합니다. 텍스트 색상을 변경하려면 표현식 필드에 다음 텍스트를 복사합니다.

    dropDownIndex = effect("Color options")("Menu").value;

    switch ( dropDownIndex )
    {
    case 1: hexToRgb("FF3211");
    break;
    case 2: hexToRgb("CC1234");
    break;
    default: hexToRgb("BBB001")
    };

    뚝딱 도구를 사용하여 드롭다운 메뉴를 색상 속성에 연결합니다. 이 드롭다운의 이름을 [색상] 옵션으로 지정합니다. 색상 속성 옆에 있는 색상 차트에서 색상을 변경할 수 있습니다. 

  6. 드롭다운 메뉴 속성 두 개를 서로 연결하려면 색상 옵션 뚝딱 도구를 사용하여 요일 드롭다운 메뉴에 연결합니다. [색상] 옵션 드롭다운 메뉴는 요일 드롭다운 메뉴를 참조합니다. 즉, 선택한 요일도 텍스트 색상을 변경합니다.

  7. 계속해서 이 드롭다운 메뉴를 기본 그래픽 패널로 끌어와서 [모션 그래픽] 템플릿을 만드는 데 사용합니다.

프로젝트를 만들기 시작하는 데 도움이 필요하다면 이 샘플 파일을 다운로드하십시오.

다운로드

드롭다운 목록 컨트롤에 쓰이는 샘플 표현식

메뉴 값은 슬라이더 등 다른 표현식과 마찬가지로 표현식의 색인이라고 불립니다. 표현식 텍스트 영역에 아래의 샘플 표현식을 복사하여 드롭다운 메뉴에서 다양한 결과를 만들 수 있습니다.

참고:

메뉴 항목의 이름 자체는 표현식에서 읽지 않습니다. 대신 색인(목록에 잇는 메뉴 항목의 계층 위치)을 읽습니다.

예제 1: 레이어의 색상을 정의하고 드롭다운 컨트롤의 메뉴 항목에 참조합니다.

예제 2

dropDownIndex = thisComp.layer("Null 2").effect("Dropdown Menu Control")("Menu").value;

switch ( dropDownIndex )
{
case 1: hexToRgb("FF4678");
break;
case 2: hexToRgb("CC1234");
break;
default: hexToRgb("BBB007")
};

표현식 조각을 사용하여 색상 변경
표현식 조각을 사용하여 색상 변경

dropDownIndex = thisComp.layer("Null 2").effect("Dropdown Menu Control")("Menu").value;

switch ( dropDownIndex )
{
case 1: hexToRgb("FF3211");
break;
case 2: hexToRgb("CC1234");
break;
default: hexToRgb("BBB001")
};

예제 2: 소스 텍스트를 드롭다운 메뉴 컨트롤과 함께 사용

다음의 순서대로 메뉴 항목이 있는 드롭다운 메뉴의 경우:

  1. 월요일
  2. 화요일
  3. 수요일

목록의 두 번째 항목이면 월요일은 인덱스 1, 화요일은 인덱스 2입니다. 화요일의 이름을 다른 항목으로 바꾸는 경우 표현식은 여전히 인덱스 2에 있기 때문에 중단되지 않습니다.

다음은 드롭다운 메뉴 컨트롤에서 소스 텍스트를 사용하는 간단한 예입니다.

x = comp("CompName").layer("LayerName").effect("Dropdown Menu Control")("Menu");

if (x == 1) {

text.sourceText = ("Monday");

if (x == 2) {

text.sourceText = (“Tuesday");

}

if (x == 3) { 

text.sourceText = (“Wednesday");

}

예제 3: 텍스트 레이어의 소스 텍스트를 정의하여 드롭다운 컨트롤의 메뉴 항목에 참조합니다.

var listItems = [

"Lambs",
"Pups",
"Not a thing",
];
var dropDownValue = effect("Dropdown Menu Control")("Menu").value;
listItems[ dropDownValue - 1 ];

 

var x = effect("Dropdown Menu Control")("Menu").value;if ( x === 1 ) {
"Lambs";
} else if ( x === 2 ) {
"Pups";
} else {
"Not a thing";
}

 

x = effect("Dropdown Menu Control")("Menu").value;
switch (x) {
case 1 : "dog";
break;
case 2 : "cat";
break;
default : "default" }

드롭다운 목록 컨트롤을 사용할 때 염두에 두어야 할 사항

  • 항상 내용을 잘 반영하도록 드롭다운 목록 컨트롤의 이름을 바꿉니다.
  • 드롭다운 메뉴 컨트롤효과의 메뉴 옵션은 대소문자 또는 텍스트를 구분하지 않습니다. 즉, 메뉴 항목의 이름을 바꾸더라도 표현식이 손상되지 않습니다. 그러나, 위치는 구분하기 때문에 메뉴 옵션의 위치를 변경하면 표현식이 손상됩니다.
  • 모션 그래픽 템플릿에 사용되는 다양한 구성 요소 간에 균형을 유지합니다. 예를 들어 범위가 있다면 슬라이더를, 예 또는 아니요 같은 옵션이 있다면 체크박스를 사용합니다. 
  • 그 외 모든 드롭다운 메뉴를 연결하는 드롭다운 메뉴는 부모 메뉴가 됩니다. 컴포지션에 있는 드롭다운 메뉴는 부모 메뉴를 참조하고 그에 따라 실행됩니다.

드롭다운 메뉴 컨트롤 스크립팅 지원

SetPropertyParameters ()

메서드:

app.project.item(index).layer(index).propertySpec.setPropertyParameters([param-array])

설명:

속성의 매개 변수를 설정합니다.

참고

  • 드롭다운 메뉴 컨트롤 효과(또 다른 명칭: ADBE 드롭다운 컨트롤)는 매개 변수를 설정할 수 있는 유일한 속성입니다. 
  • 이 메서드가 실패할 때마다 예외가 발생합니다.
  • 속성에서 매개 변수를 설정할 수 있는지 확인하려면 이 방법을 호출하기 전에 isDropdownEffect를 확인하십시오(Property.isDropdownEffect 참조).

매개 변수세부 정보:

매개 변수 배열

문자열의 배열입니다. 이 메서드는 제공된 문자열 배열을 사용하여 기존 메뉴 항목 집합을 덮어씁니다.

메뉴 항목으로 지정하는 문자열에는 다음과 같은 몇 가지 제한 사항이 있습니다.

1.     빈 항목 문자열은 허용되지 않습니다.

2.     중복 항목 문자열은 허용되지 않습니다.

3.     항목 문자열에 문자 "|"를 사용할 수 없습니다.

4.     문자열만 사용할 수 있습니다.

5.     항목 문자열은 현재 코드 페이지에서 ASCII 또는 MultiByte 인코딩 할 수 있어야 합니다. 즉, 항목 문자열은 실행 중인 시스템의 스크립트에 제공 되어야 합니다. 예: 영어 시스템에서 스크립트를 실행하는 동안 일본어로 된 항목 문자열을 지정하면 항목 문자열에서 읽을 수 없는 문자로 드롭다운 효과가 생성됩니다.

참고 :- 문자열 "(-"-은 항목 문자열로 지정할 수 있습니다. 이는 드롭다운 메뉴에서 구분선으로 표시됩니다. 작성자는 구분선 하나마다 인덱스가 요청된다는 점을 기억해야 합니다.

예시:

Dropdowneffect  = Dropdowneffect.setPropertyParameters(["Monday", "Wednesday", "Friday", "Sunday"]);

위의 예시에서는 월요일, 수요일, 금요일, 일요일을 항목으로 편집하여 드롭다운 메뉴를 만들게 됩니다. 반환 되는 속성은 업데이트 된 것으로, 추가 용도로 사용할 수 있습니다.

반환:

업데이트 된 속성입니다. 이 메서드가 호출 되는 속성 개체는 내부 구현으로 인해 유효하지 않게 되며 반환된 속성을 사용하여야 합니다.

Property.isDropdownEffect

메서드:

app.project.item(index).layer(index).propertySpec.isDropdownEffect

설명:

속성이 드롭다운 메뉴 컨트롤 효과인 경우 true를 반환합니다.

예제:

appliedEffect.property("Menu").isDropdownEffect  // returns true

appliedEffect.property("Color").isDropdownEffect  // returns false  

appliedEffect.property("Feather").isDropdownEffect  // returns false

Return:

부울

질문이나 아이디어가 있으신가요?

질문이나 아이디어를 After Effects 커뮤니티에서 공유하십시오. 의견을 보내고 모션 그래픽 템플릿을 공유해주세요.

 Adobe

쉽고 빠르게 지원 받기

신규 사용자이신가요?