표현식에서 글꼴을 참조할 때 특수 "시스템 이름"(또는 이와 유사한)을 사용해야 합니다. 이 특수 이름은 표현식 오류가 발생하지 않도록 텍스트 > 글꼴 > 글꼴 선택에서 삽입하는 것이 좋습니다.
표현식 언어 플라이아웃 메뉴를 연 다음 텍스트 > 글꼴을 선택합니다. 그러면 표현식에 삽입할 서체와 글꼴을 선택할 수 있는 드롭다운 메뉴가 있는 대화 상자가 나타납니다.
글꼴 동기화
표현식 편집기에서만 참조되는 글꼴은 프로젝트에서 사용하는 글꼴로 기록되지 않습니다. 자동 동기화하거나 글꼴 확인 대화 상자를 채울 표현식 편집기에 참조되는 모든 글꼴을 확인하려면 해당 레이어 소스가 숨겨져 있더라도 레이어의 모든 글꼴을 사용합니다.
스타일 개체
텍스트 레이어의 모든 스타일 속성은 다음을 사용하여 소스 텍스트 속성에서 액세스하는 스타일 개체에 있습니다.
// 소스 텍스트 속성에 대한 전체 경로 사용
text.sourceText.style // 현재 속성의 일반 이름 사용
thisProperty.style
스타일 자체를 사용하는 것은 위의 두 가지 예 중 하나를 사용하는 것과 동일하지만 여러 텍스트 레이어의 스타일 속성을 결합하는 경우 혼동될 수 있습니다.
다른 텍스트 레이어의 스타일 속성도 읽을 수 있습니다. 뚝딱 도구를 사용하여 위에 표시된 첫 번째 예시 시작 부분에서 다른 텍스트 레이어에 대한 링크를 만듭니다.
// 특정 텍스트 레이어의 스타일 객체에 액세스
thisComp.layer(“Other Layer Name”).text.sourceText.style;
사용 가능한 텍스트 속성
다음 텍스트 스타일 속성은 스타일 개체를 사용하여 읽고 설정할 수 있습니다.
글꼴
글꼴 크기
포 볼드체
포 이탤릭체
모두 대문자
작은 대문자
자간
행간
자동 행간
기준선 이동
채우기(활성화/비활성화)
채우기 색상
선(활성화/비활성화)
선 색상
선 폭
텍스트 레이어의 [소스 텍스트] 속성은 표현식에서 JavaScript 문자열로 해석됩니다. 텍스트 자체는 sourceText로 읽을 수 있지만 스타일 속성이 수정되는 경우 setText 메서드를 사용하여 스타일 개체에 설정해야 합니다. 다음 예시를 참고하십시오.
스타일과 소스 텍스트 결합
스타일과 소스 텍스트 결합
스타일과 실제 소스 텍스트의 값을 동시에 반환하려면 getStyleAt 및 setText 함수를 결합해야 합니다. 다음은 이 표현식을 작성하는 방법에 대한 두 가지 예입니다.
// 스타일과 실제 소스 텍스트의 값을 동시에 반환하려는 경우(줄임)
var sourceTextProperty = thisComp.layer("MAIN TEXT").text.sourceText;
var newStyle = sourceTextProperty.getStyleAt(0,0);
newStyle.setText(sourceTextProperty);
// 레이어 스택 순서에서 이전 레이어의 실제 소스 텍스트와 스타일 값을 모두 반환하려는 경우
var sourceTextProperty = thisComp.layer(index - 1).text.sourceText;
var newStyle = sourceTextProperty.getStyleAt(0,0);
newStyle.setText(sourceTextProperty);
드롭다운 글꼴
드롭다운 메뉴에 글꼴 또는 스타일 연결
드롭다운 메뉴를 사용하여 텍스트 레이어를 특정 글꼴로 잠그는 것과 같은 텍스트 스타일을 제어할 수 있습니다 이는 브랜드 지침, 템플릿, MoGRTS 등에 유용합니다.
// 드롭다운 메뉴 컨트롤을 사용하여 텍스트 레이어를 특정 글꼴로 잠그려는 경우
var dropDownMenu = thisComp.layer("LayerName").effect("Dropdown Menu Control")("Menu");
switch (dropDownMenu.value) {
case 1 :
text.sourceText.style.setFont("Georgia");
break;
case 2 :
text.sourceText.style.setFont("Impact");
break;
default :
text.sourceText.style.setFont("Tahoma");
}
메인 텍스트 레이어
"텍스트 레이어 1"에서 텍스트 속성을 가져오지만 글꼴 크기 및 채우기 색상은 재정의합니다.
여러 텍스트 레이어를 기본 글꼴 컨트롤러에 연결하여 한 번에 여러 레이어의 텍스트 스타일을 제어합니다. 두 개의 텍스트 레이어를 만들고 이 표현식을 그 중 하나의 소스 텍스트에 붙여넣습니다.
// 텍스트 레이어에서 모든 텍스트 속성을 가져오는 경우
thisComp.layer("Text Layer 1").text.sourceText.style;
텍스트 레이어에서 스타일을 가져올 수 있지만 Set 함수로 값을 추가하여 특정 텍스트 속성을 재정의할 수 있습니다. 다음은 채우기 색상 및 글꼴 크기를 사용하는 두 가지 예입니다.
// “텍스트 레이어 1”에서 모든 텍스트 속성을 가져오지만 채우기 색상 및 글꼴 크기를 하드코드된 값으로 재정의하려는 경우
var newStyle = thisComp.layer("Text Layer 1").text.sourceText.style;
newStyle.setFillColor(hexToRgb("FF0000")).setFontSize(100);
// “텍스트 레이어 1”에서 모든 텍스트 속성을 가져오지만 채우기 색상 및 글꼴 크기를 레이어의 현재 텍스트 속성으로 재정의하려는 경우
var newStyle = thisComp.layer("Text Layer 1").text.sourceText.style;
var currentFillColor = thisProperty.style.fillColor;
var currentFontSize = thisProperty.style.fontSize;
newStyle.setFillColor(currentFillColor).setFontSize(currentFontSize);
예제
다음은 표현식을 사용하여 텍스트 속성 값을 액세스하고 사용하는 방법에 대한 예시입니다.
글꼴
다음은 텍스트 레이어의 글꼴, 글꼴 크기, 포 볼드체, 포 이탤릭체, 자간 및 행간에 액세스하는 예입니다.
// 텍스트 레이어 자체의 글꼴 이름을 반환하려는 경우 text.sourceText.style.font; // 다른 텍스트 레이어가 사용 중인 글꼴 이름을 반환하려는 경우 var otherLayer = thisComp.layer(“Other Layer Name”); otherLayer.text.sourceText.style.font; // 텍스트 레이어 자체의 글꼴 크기를 반환하려는 경우 text.sourceText.style.fontSize; // 다른 텍스트 레이어의 글꼴 크기를 반환하려는 경우 var otherLayer = thisComp.layer(“Other Layer Name”); otherLayer.text.sourceText.style.fontSize; // 레이어의 텍스트가 포 볼드체인지 여부(True 또는 False)에 대한 부울 값을 반환하려는 경우 text.sourceText.style.isFauxBold; // 레이어의 텍스트가 포 이탤릭체인지 여부(True 또는 False)에 대한 부울 값을 반환하려는 경우 text.sourceText.style.isFauxItalic; // 텍스트 레이어의 자간 값을 숫자로 반환하려는 경우 text.sourceText.style.tracking; // 텍스트 레이어의 행간 값을 숫자로 반환하려는 경우 text.sourceText.style.leading;
채우기
다음은 텍스트 레이어의 채우기 및 채우기 색상에 액세스하는 예입니다.
// 레이어의 텍스트에 채우기가 적용되었는지 여부(True 또는 False)에 대한 부울 값을 반환하려는 경우 text.sourceText.style.applyFill; // 텍스트 레이어의 채우기 색상 값을 반환하려는 경우 // 기본적으로 0 – 1.0 범위의 RGB 값 배열을 반환합니다 text.sourceText.style.fillColor; // setApplyFill 및 setFillColor를 사용하여 텍스트 레이어의 채우기 색상 설정 // setFillColor 값은 0 – 1.0 범위의 RGB 배열로 정의됩니다 var newStyle = style.setApplyFill(true); newStyle.setFillColor([1.0, 1.0, 1.0]); // 16진수 값으로 색상 값을 정의하기 위해 0 – 1.0 RGB 배열을 hexToRGB로 대체하는 텍스트 레이어의 채우기 색상을 설정합니다 var newStyle = style.setApplyFill(true); newStyle.setFillColor(hexToRgb(“FFFFFF”));
참고:
텍스트 레이어의 R, G 또는 B에 대한 채우기 색상 값을 반환하려면 대괄호 안에 각각 0, 1 또는 2를 추가합니다.
// 채우기 색상의 빨간색(R) 값을 반환하려는 경우
text.sourceText.style.fillColor[0];
선
다음은 텍스트 레이어의 선, 선 색상 및 획 너비에 액세스하는 예입니다.
// 레이어의 텍스트에 선이 적용되었는지 여부(True 또는 False)에 대한 부울 값을 반환하려는 경우 text.sourceText.style.applyStroke; // 텍스트 레이어의 선 색상 값을 반환하려면 // 기본적으로 0 – 1.0 범위의 RGB 값 배열을 반환합니다. text.sourceText.style.strokeColor; // setApplyStroke 및 setStrokeColor를 사용하여 텍스트 레이어의 선 색상 설정 // setStrokeColor 값은 0 – 1.0 사이의 스케일에서 RGB 배열로 정의됩니다. var newStyle = style.setApplyStroke(true); newStyle.setStrokeColor([1.0, 0.0, 0.0]); // 16진수 값으로 색상 값을 정의하기 위해 0 – 1.0 RGB 배열을 hexToRGB로 대체하는 텍스트 레이어의 선 색상을 설정합니다. var newStyle = style.setApplyStroke(true); newStyle.setStrokeColor(hexToRgb(“FF0000”)); // 텍스트 레이어의 선 너비 값을 숫자로 반환하려는 text.sourceText.style.strokeWidth;
참고:
텍스트 레이어의 R, G 또는 B에 대한 선 색상 값을 반환하려면 대괄호에 각각 0, 1 또는 2를 추가합니다.
// 선 색상의 녹색(G) 값을 반환하려는 경우
text.sourceText.style.strokeColor[1];
함수 가져오기
이 "get" 함수를 사용하여 특정 시간에 특정 문자의 스타일 값을 반환합니다. "index"는 숫자, 레터의 인덱스 또는 스타일이 필요한 문자여야 합니다. "atTime"도 숫자여야 합니다. 스타일이 키프레임되고 시간이 지남에 따라 변경되는 경우 스타일을 가져올 컴포지션 내 시간입니다.
text.sourceText.getStyleAt(index, atTime);
참고:
text.sourceText.style을 사용하는 것은 text.sourceText.getStyleAt(0,0)을 사용하는 것과 동일합니다.
// 타임라인 시작 부분의 첫 번째 문자 스타일을 가져옵니다.
text.sourceText.getStyleAt(0,0);
Set 함수
개별적으로 사용하거나 레이어 전체에 걸쳐 스타일을 구동하기 위해 서로 조합하여 사용할 수 있는 추가 함수 "세트"입니다. 이러한 각 함수는 소스 텍스트 속성의 스타일 개체에서 호출됩니다.
// Arial에 사용할 글꼴 설정 style.setFont(“ArialMT”) // 글꼴 크기를 80으로 설정 style.setFontSize(80); // 부울로 포 볼드체 활성화 style.setFauxBold(true) // 부울로 포 이탤릭체 활성화 style.setFauxItalics(true) // 부울로 모든 대문자 활성화 style.setAllCaps(true) // 부울로 작은 대문자 활성화 style.setSmallCaps(true) // 자간을 숫자로 설정 style.setTracking(10); // 행간을 숫자로 설정 style.setLeading(10); // 부울로 자동 행간 활성화 style.setAutoLeading(true); // 기준선 이동을 숫자로 설정 style.setBaselineShift(10); // 선을 숫자로 설정 style.setStrokeWidth(10);
다음 예제와 같이 매번 새로운 스타일을 선언할 필요 없이 텍스트 스타일에 대한 모든 함수 세트를 함께 연결하여 여러 속성을 쉽게 설정할 수 있습니다.
참고:
가장 마지막 속성을 설정할 때까지 세미콜론을 사용되지 않습니다. 각 속성을 한 줄에 나열하면 전체 연결을 더 쉽게 읽을 수 있습니다.
// 채우기 활성화, 채우기 색상 설정, 기준선 설정, 자간 설정 및 자동 행간 활성화 text.sourceText.style .setApplyFill(true) .setFillColor(hexToRgb(“FFFFFF”)) .setBaselineShift(10) .setTracking(25) .setAutoLeading(true);
단락 텍스트 표현식 팁
문자열 표현식에 "\r"를 사용하여 새로운 텍스트 줄을 시작할 수 있습니다. 예를 들어 원본 텍스트를 한 레이어에서 같은 레이어로 복사하고 해당 텍스트를 모두 대문자로 변환하여 새 줄에 나타내려면 다음 표현식을 사용합니다.
컴포지션에 텍스트 레이어를 추가하고 [원본 텍스트] 속성에
표현식을 추가하는 것은 다른 레이어의 속성 값을
검사할 수 있는 좋은 방법입니다. 예를 들어 [소스 텍스트] 속성의 다음 표현식은
레이어 겹침 순서상의 다음 레이어에 대해 [불투명도] 속성의
이름 및 값을 보고합니다.
다음 예제에서는 현재의 겹침 순서에서 맨 위에 있고 비디오 스위치 세트가 설정되어 있는 이미지 레이어의 소스로 사용되는 푸티지 항목의 이름을 보여줍니다:
// sourceFootageName을 빈 문자열로 생성 var sourceFootageName = “”; // (var i = 1; i <= thisComp.numLayers; i++)에 대해 컴포지션의 모든 레이어를 반복합니다 { // i가 이 레이어의 인덱스와 일치하면 다음 루프를 계속합니다. (i == index) { continue; } // 루프의 현재 반복에 대해 myLayer를 설정합니다 var myLayer = thisComp.layer(i); // myLayer에 비디오가 없거나 활성화되지 않은 경우 다음 루프/레이어로 계속 진행합니다 if ( !myLayer.hasVideo || !myLayer.active ) { continue; } // 현재 시간에 myLayer가 활성화되어 있으면 if ( myLayer.active ) { try { // sourceFootageName을 myLayer의 소스 이름으로 설정합니다 sourceFootageName = myLayer.source.name; } catch ( err ) { // myLayer에 소스가 없으면 // sourceFootageName을 myLayer의 이름으로 설정합니다 sourceFootageName = myLayer.name; } // 루핑 브레이크 중지; } } // sourceFootageName을 sourceFootageName으로 표시합니다;
표현식 리소스 더 보기
표현식 뒤에 숨은 개념 몇 가지를 이해했다면, 이제 커뮤니티에서 실제 사용 예시를 살펴보고 작업을 공유할 수 있습니다.