ここまでで、エクスプレッションの背景となる概念を理解したので、今度はコミュニティにアクセスして実例を参考にしたり、自分の作品を共有したりしてください。
AE Enhancers フォーラムには、エクスプレッションとスクリプトやアニメーションプリセットの例や情報も多数公開されています。
エクスプレッション制御を使用したテキストスタイルおよびテキストプロパティの編集。
エクスプレッションを使用して、任意のテキストエクスプレッションまたはモーショングラフィックステンプレートのテキストスタイル設定を制御します。エクスプレッションを使用して、次の操作を行うことができます。
スタイルオブジェクトを使用して、次のテキストスタイル属性を読み取りおよび設定できます。
テキストレイヤーのソーステキストプロパティは、エクスプレッションで JavaScript 文字列として解釈されます。テキスト自体は sourceText で読み取ることができますが、スタイル属性を変更する場合は setText メソッドを使用してスタイルオブジェクトに設定する必要があります。一部の例については、こちらを参照してください。
文字列エクスプレッションで新しい行を開始するには \r を使用します。例えば、レイヤー上のテキストをコピーし、すべて大文字に変換してから同じレイヤー上の次の行に追加するには、次のようにエクスプレッションを記述します。
textourceText + “\r” + textourceTextoUpperCase()
テキストスタイル属性に加えて、段落属性もあります。これらは、テキストレイヤー全体にのみ適用できます。段落属性は、After Effects でのみ使用できます。
エクスプレッションでフォントを参照する場合は、特殊な「システム名」(または同様のもの)を使用する必要があります。エクスプレッションエラーを防ぐには、テキスト/フォント/フォントを選択ダイアログからこの特殊な名前を挿入することをお勧めします。
エクスプレッションエディターで参照されているだけのフォントは、プロジェクトで使用されているフォントとして記録されません。 エクスプレッションエディターで参照されるすべてのフォントが自動的に同期される、またはフォントを解決ダイアログに表示されるようにするには、レイヤーのソースが非表示の場合でも、そのレイヤー上でこのフォントをすべて使用します。
テキストレイヤーのスタイルプロパティはすべて style オブジェクトに存在します。このオブジェクトには、ソーステキストプロパティで次のようにしてアクセスします。
// ソーステキストプロパティへのパス全体を使用します text.sourceText.style // 現在のプロパティの汎用名を使用します thisProperty.style
スタイルを単独で使用することは、上記の 2 つの例のいずれかを使用したのと同じですが、複数のテキストレイヤーのスタイル属性が組み合わされる場合は紛らわしくなる可能性があります。
他のテキストレイヤーのスタイル属性も読み取ることができます。ピックウイップを使用して、上記の最初の例の先頭に、他のテキストレイヤーへのリンクを作成します。
// 特定のテキストレイヤーの style オブジェクトにアクセスします thisComp.layer(“Other Layer Name”).text.sourceText.style;
テキストエクスプレッションを使用して、テキストレイヤー全体のスタイル属性を設定するだけでなく、レイヤー内の個々の文字のスタイル属性を設定することもできます。この文字単位制御の利点は、文字の拡大・縮小、上付き文字の使用、別のフォントの使用などを行う際に、テキストが自動的にリフローされることです。文字パネルの部分文字列スタイルを使用する場合と同じです。
textourceTexttyle etFont(“Montserrat-Light”) etFont(“Gigantic”, 0, 6)etFont(“Gigantic”, 10, 6)etFont(“Gigantic”, 20)
text.sourceText.style.setFontSize(100, 0, 30).setFauxBold(true, 0, 30)
この文字列を使用するには、テキスト「1st and 2nd Place」を含むテキストレイヤーを追加し、ソーステキストに次を適用します。
textourceTexttyleetBaselineOption(“superscript”,1,2)etBaselineOption(“superscript”, 9, 2)
スタイルと実際のソーステキストの両方の値を返すには、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”); }
複数のテキストレイヤーをメインのフォントコントローラーにリンクして、一度に複数のレイヤーのテキストスタイルを制御できます。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)の値を返します text.sourceText.style.fillColor[0];
テキストレイヤーの塗りのカラーの R、G、B 値を返すには、それぞれ 0、1、または 2 を角括弧で囲んで追加します。
次の例は、テキストレイヤーの線、線のカラー、線幅にアクセスする方法を示しています。
// レイヤーのテキストにストロークが適用されているかどうかを示すブール値(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;
// 線のカラーの緑(G)の値を返します text.sourceText.style.strokeColor[1];
テキストレイヤーの線のカラーの R、G、B 値を返すには、それぞれ 0、1、または 2 を角括弧で囲んで追加します。
特定の時間における特定の文字のスタイル値を返すには、この get 関数を使用します。index には、スタイルが必要な文字のインデックスである数値を指定する必要があります。atTime も数値を指定する必要があります。これは、スタイルがキーフレーム化され、時間的に変化する場合に、スタイルを取得するコンポジション内の時間を表します。
text.sourceText.getStyleAt(index, atTime);
text.sourceText.style を使用することは、text.sourceText.getStyleAt(0,0) を使用することと同じです。
// タイムラインの先頭にある最初の文字のスタイルを取得します text.sourceText.getStyleAt(0,0);
個別に使用または互いに組み合わせて使用して、レイヤー全体にスタイルを適用できる追加の set 関数。これらの関数は、それぞれソーステキストプロパティの style オブジェクトに対して呼び出されます。
// 使用するフォントを Arial に設定します styleetFont(“ArialMT”) // フォントサイズを 80 に設定します styleetFontSize(80 // ブーリアンで太字を有効にします styleetFauxBold(true) // ブーリアンで斜体を有効にします styleetFauxItalics(true) // ブーリアンですべて大文字を有効にします styleetAllCaps(true) // ブーリアンでスモールキャップスを有効にします styleetSmallCaps(true) // トラッキングを数値として設定します styleetTracking(10 // 行送りを数値として設定します styleetLeading(10 // ブーリアンで自動行送りを有効にします styleetAutoLeading(true // ベースラインシフトを数値として設定します styleetBaselineShift(10 // 線の幅を数値として設定します styleetStrokeWidth(10 // テキストレイヤーの最初の行を太字に設定し、大きくします textourceTexttyleetFontSize(100, 0, 30)etFauxBold(true, 0, 30) // 文字の上付き文字を設定します textourceTexttyleetBaselineOption(“superscript”,1,2)etBaselineOption(“superscript”, 9, 2)
次の例に示すように、テキストスタイルのすべての set 関数をつなげて使用すれば、毎回新しいスタイルを宣言しなくても、複数の属性を簡単に設定できます。
最後の属性が設定されるまで、セミコロンは使用されません。属性ごとに別個の行に記述すると、チェーン全体が読みやすくなります。
// 塗りを有効にし、塗りの色を設定し、ベースラインを設定し、トラッキングを設定し、自動行送りを有効にします text.sourceText.style .setApplyFill(true) .setFillColor(hexToRgb(“FFFFFF”)) .setBaselineShift(10) .setTracking(25) .setAutoLeading(true);
コンポジションにテキストレイヤーを追加し、そのソーステキストプロパティにエクスプレッションを追加すると、他のレイヤーのプロパティ値が確認できて便利です。例えば、ソーステキストプロパティに次のエクスプレッションを記述すると、すぐ次のレイヤーの不透明度プロパティの名前と値が表示されます。
var nextLayer = thisComp.layer(index + 1); nextLayer.name + “\rOpacity = ” + nextLayer.opacity.value;
以下の例では、ビデオスイッチが設定されている現時点で最上位の画像レイヤーのソースとして使用されているフッテージアイテムの名前が表示されます。
// sourceFootageName を空白の文字列として作成します var sourceFootageName = “”; // コンポジション内のすべてのレイヤーをループ処理します for (var i = 1; i <= thisComp.numLayers; i++) { // このレイヤーのインデックスと一致する場合は、次のループに進みます if (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; } // ループを停止します break; } } // sourceFootageName を表示します sourceFootageName;
エクスプレッションが追加されているソーステキストプロパティを選択します。次に、アニメーション/アニメーションプリセットを保存を選択して、他のプロジェクトでエクスプレッションを再利用します。アニメーションプリセットは、エフェクト&プリセットパネルに保存されます。
詳しくは、エフェクトおよびアニメーションプリセットの概要を参照してください。
ここまでで、エクスプレッションの背景となる概念を理解したので、今度はコミュニティにアクセスして実例を参考にしたり、自分の作品を共有したりしてください。
AE Enhancers フォーラムには、エクスプレッションとスクリプトやアニメーションプリセットの例や情報も多数公開されています。