エクスプレッション制御を使用したテキストスタイルおよびテキストプロパティの編集。
エクスプレッションを使用して、任意のテキストエクスプレッションまたはモーショングラフィックステンプレートのテキストスタイル設定を制御します。 エクスプレッションを使用して、次の操作を行うことができます。
- 複数のタイトルをリンクし、それらのスタイルを一度に更新する(タイトルをデザインする場合に便利です)。
- フォント、サイズ、スタイルを複数のテキストレイヤーにわたって同期させておく。
- テキストプロパティのグローバル変更を行う。
これをテキストレイヤーに設定した後は、そのレイヤーのプロパティを参照して、コンポジション全体に簡単に変更を適用できます。
After Effects では、「get」および「set」関数を使用して、テキストプロパティの値をエクスプレッションエンジンに対して読み書きできます。 エクスプレッションを使用して、テキストレイヤーをまたいでテキストプロパティなどのフォントスタイルを設定します。
テキストプロパティのこれらの機能にアクセスするには:
- テキストレイヤーの「ソーステキスト」プロパティにエクスプレッションを追加します。 詳しくは、エクスプレッションの基本を参照してください。
- エクスプレッション言語ポップアップメニューから、テキスト/プロパティ/プロパティを選択します。
エクスプレッションが追加されているソーステキストプロパティを選択します。次に、アニメーション/アニメーションプリセットを保存を選択して、他のプロジェクトでエクスプレッションを再利用します。アニメーションプリセットは、「エフェクト&プリセット」パネルに保存されます。
詳しくは、エフェクトおよびアニメーションプリセットの概要を参照してください。
エクスプレッションでフォントを参照する場合は、特殊な「システム名」(または同様のもの)を使用する必要があります。エクスプレッションエラーを防ぐには、テキスト/フォント/フォントを選択ダイアログからこの特殊な名前を挿入することをお勧めします。
- エクスプレッション言語のポップアップメニューを開き、 テキスト/フォントを選択します。これによりダイアログが表示されるので、エクスプレッションに挿入する書体やフォントをドロップダウンメニューから選択できます。
エクスプレッションエディターで参照されているだけのフォントは、プロジェクトで使用されているフォントとして記録されません。 エクスプレッションエディターで参照されているすべてのフォントが自動的に同期される、またはフォントを解決ダイアログに表示されるようにするには、レイヤーのソースが非表示の場合でも、そのレイヤー上でそれらのフォントをすべて使用してください。
テキストレイヤーのスタイルプロパティはすべて style オブジェクトに存在します。このオブジェクトには、ソーステキストプロパティで次のようにしてアクセスします。
// ソーステキストプロパティへのパス全体を使用します text.sourceText.style // 現在のプロパティの汎用名を使用します thisProperty.style
スタイルを単独で使用することは、上記の 2 つの例のいずれかを使用したのと同じですが、複数のテキストレイヤーのスタイル属性が組み合わされる場合は紛らわしい可能性があります。
他のテキストレイヤーのスタイル属性も読み取ることができます。 ピックウイップを使用して、上記の最初の例の先頭に、他のテキストレイヤーへのリンクを作成します。
// 特定のテキストレイヤーのスタイルオブジェクトにアクセスします thisComp.layer(“Other Layer Name”).text.sourceText.style;
スタイルオブジェクトを使用して、次のテキストスタイル属性を読み取りおよび設定できます。
- フォント
- フォントサイズ
- 太字
- 斜体
- オールキャップス
- スモールキャップス
- 字送り
- 行送り
- 自動行送り
- ベースラインシフト
- 塗り(有効/無効)
- 塗りのカラー
- 線(有効/無効)
- 線のカラー
- 線幅
テキストレイヤーのソーステキストプロパティは、エクスプレッションで JavaScript 文字列として扱われます。テキスト自体は、sourceText で読み取ることができますが、スタイル属性が変更される場合は、setText メソッドを使用してスタイルオブジェクトに設定する必要があります。 以下の例を参照してください。
スタイルと実際のソーステキストの両方の値を返すには、getStyleAt 関数と setText 関数を組み合わせる必要があります。この式を記述する方法の例を 2 つ、次に示します。
// スタイルと実際のソーステキストの両方の値を一度に返します(簡易版)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」からテキストプロパティを取得します。ただし、フォントサイズと塗りのカラーはオーバーライドされます。
複数のテキストレイヤーをメインのフォントコントローラーにリンクして、一度に複数のレイヤーのテキストスタイルを制御できます。 2 つのテキストレイヤーを作成し、その中の 1 つのソーステキストに次のエクスプレッションをペーストします。
// テキストレイヤーからすべてのテキストプロパティを取得します thisComp.layer(“Text Layer 1”).text.sourceText.style;
テキストレイヤーからスタイルを取得しつつも、set 関数で値を追加することで特定のテキストプロパティをオーバーライドすることができます。 塗りのカラーとフォントサイズを使った 2 つの例を次に示します。
// 「Text Layer 1」からすべてのテキストプロパティを取得しますが、ハードコードされた値で塗りのカラーとフォントサイズをオーバーライドします var newStyle = thisComp.layer(“Text Layer 1”).text.sourceText.style; newStyle.setFillColor(hexToRgb(“FF0000”)).setFontSize(100);
// 「Text Layer 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]); // 0〜1.0 の RGB 配列を、16 進値でカラー値を定義する 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]); // 0〜1.0 の RGB 配列を、16 進値でカラー値を定義する 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」関数。これらの関数は、それぞれソーステキストプロパティの style オブジェクトに対して呼び出されます。
// 使用するフォントを 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);
次の例に示すように、テキストスタイルのすべての set 関数をつなげて使用すれば、毎回新しいスタイルを宣言しなくても、複数の属性を簡単に設定することができます。
最後の属性が設定されるまで、セミコロンは使用されません。属性ごとに別個の行に記述すると、チェーン全体が読みやすくなります。
// 塗りを有効にし、塗りの色を設定し、ベースラインを設定し、トラッキングを設定し、自動行送りを有効にします text.sourceText.style .setApplyFill(true) .setFillColor(hexToRgb(“FFFFFF”)) .setBaselineShift(10) .setTracking(25) .setAutoLeading(true);
文字列エクスプレッションで新しい行を開始するには「¥r」を使用します。例えば、レイヤー上のテキストをコピーし、すべて大文字に変換してから同じレイヤー上の次の行に追加するには、次のようにエクスプレッションを記述します。
text.sourceText + “\r” + text.sourceText.toUpperCase()
ソーステキストに対するエクスプレッションのその他の使用法
コンポジションにテキストレイヤーを追加し、その「ソーステキスト」プロパティにエクスプレッションを追加すると、他のレイヤーのプロパティ値が確認できて便利です。例えば、「ソーステキスト」プロパティに次のエクスプレッションを記述すると、すぐ次のレイヤーの「不透明度」プロパティの名前と値が表示されます。
var nextLayer = thisComp.layer(index + 1); nextLayer.name + “\rOpacity = ” + nextLayer.opacity.value;
以下の例では、ビデオスイッチが設定されている現時点で最上位の画像レイヤーのソースとして使用されているフッテージアイテムの名前が表示されます。
// sourceFootageName を空白の文字列として作成します var sourceFootageName = “”; // コンポジション内のすべてのレイヤーをループ処理します for (var i = 1; i <= thisCompumLayers; i++) { // このレイヤーのインデックスと一致する場合は、次のループに進みます if (i == index) { continue; } // ループの現在の反復に myLayer を設定します var myLayer = thisCompayer(i // myLayer にビデオがないかアクティブでない場合は、次のループ/レイヤーに進みます if ( !myLayerasVideo || !myLayerctive ) { continue; } // myLayer が現時点でアクティブな場合 if ( myLayerctive ) { try { // sourceFootageName を myLayer のソース名に設定します sourceFootageName = myLayerourceame; } catch ( err ) { // myLayerにソースがない場合、// sourceFootageName を myLayer の名前に設定します sourceFootageName = myLayerame; } // ループを停止します break; } } // sourceFootageName を表示します sourceFootageName;