マニュアル キャンセル

エクスプレッションを使用した、モーショングラフィックステンプレートのドロップダウンリストの作成

  1. After Effects ユーザガイド
  2. ベータ版のリリース
    1. ベータ版プログラムの概要
    2. After Effects ベータ版ホーム
  3. はじめに
    1. After Effects の概要
    2. After Effects の新機能
    3. リリースノート | After Effects
    4. After Effects の必要システム構成
    5. After Effects のキーボードショートカット
    6. サポートされているファイル形式 | After Effects
    7. ハードウェアに関する推奨事項
    8. Apple シリコン対応の After Effects
    9. 計画と設定
  4. Workspaces
    1. 一般ユーザーインターフェイスアイテム
    2. After Effects インターフェイスについて
    3. ワークフロー
    4. Workspaces、パネルおよびビューア
  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. Live Text テンプレート
    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 を使用した Sketch と Capture シェイプのアニメーション化
      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 および ACES のカラーマネジメント
  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 ライブラリからの 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 ライブラリ
    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 でカスタマイズできるようにすることができます。1 つの方法として、スライダーとチェックボックスを作成することができます。様々なオプションを使用して、ドロップダウンリストを使用し作成することもできます。

ドロップダウンリストを作成すると、より多くのメニュー制御が提供され、Premiere Pro 編集者の編集操作が簡単になります。これらのドロップダウンメニュー制御の設定をテンプレートとして保存して、後で様々なコンポジションとプロジェクトで使用することができます。

After Effects でドロップダウンリストを使用したときに表示される別のテキストオプション
After Effects でドロップダウンリストを使用したときに表示される別のテキストオプション

ドロップダウンリストを作成する理由

Premiere Pro のエディターには、スライダーやチェックボックスを編集オプションとして指定することができますが、直観的にわかりにくくなり、時間もかかります。このような場合、ドロップダウンリストが役に立ちます。このオプションを使用すると、Premiere Pro 編集者が次のいずれかを選択できます。

カラーテーマの選択 - 例えば、ムービーのタイトルに使用するカラーグループのドロップダウンリストを作成することができます。

異なる位置またはデザイン - 例えば、下 3 分の 1 の位置(左または右など)にドロップダウンを追加します。

アニメーションのオプション - 例えば、様々なアニメーションのデュレーションを選択するドロップダウンリストを追加できます。

テキストまたはアセットオプション - 例えば、曜日ごとにドロップダウンリストを追加します。これにより、ソーステキストを再入力する必要がなくなり、ポストプロダクションでエラーが発生する可能性も低くなります。

ドロップダウンリスト制御の設定

ドロップダウンリストを作成するには、ドロップダウンメニュー制御エフェクトを使用します。この機能の動作については、次の手順を参照してください。

  1. コンポジションを作成する.
    プロジェクトパネルの下部にあるコンプアイコンをクリックするか、ホーム画面で「新規 Comp」を選択します。

  2. テキストレイヤーを追加するには、「レイヤー/新規/テキスト」を選択して、追加したいテキストを入力します。この例では、朝について記述します。

  3. エフェクト&プリセットパネルを開き、「塗りつぶしのカラーを検索」を選択して、テキストレイヤー上にドロップします。

  4. すべてのレイヤーを配置したら、エフェクト&プリセットパネルを使用して、ドロップダウンメニュー制御を検索してレイヤーにドロップします。エフェクト/エクスプレッション制御/ドロップダウンメニュー制御からアクセスすることもできます。

    タイムラインパネルで、回転前のテキストレイヤープロパティを開き、Alt キーを押しながらクリックして、「ソーステキスト」の横にあるストップウォッチアイコンをクリックします。

    エクスプレッションテキストフィールドで、ソーステキストを変更する次のようなエクスプレッションスニペットをコピーします。

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

    if ( x === 1 ) {
    "朝";
    } else if ( x === 2 ) {
    "夕方";

    } else if ( x === 3 ) {

    "夜";

    }

    ピックウィップツールを使用して、「平日」というドロップダウンメニューをソーステキストプロパティにリンクします。

    エフェクトコントロールパネルで、「編集」をクリックします。ドロップダウンメニュー制御には、Item 1、Item 2、Item 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. 2 つのドロップダウンメニュープロパティを互いにリンクするには、「カラー」オプションのピックウィップツールを使用し、「平日」ドロップダウンメニューにリンクします。「カラー」オプションドロップダウンメニューに「平日」ドロップダウンメニューが表示されます。つまり、選択した曜日によってテキストカラーも変更されます。

  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. Monday
  2. Tuesday
  3. Wednesday

「Monday」はインデックス 1 で、「Tuesday」はリストの 2 番目の項目である限り、インデックス 2 です。「Tuesday」を他の名前に変更しても、インデックスは 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" }

ドロップダウンリスト制御を使用するときの留意事項

  • ドロップダウンリスト制御の名前は、常に内容が最もよく反映する名前に変更してください。
  • ドロップダウンメニュー制御エフェクトのメニューオプションは、大文字と小文字を区別せずに表示されます。これにより、メニュー項目の名前を変更しても、エクスプレッションが壊れることはありません。ただし、これらは位置に依存するため、メニューオプションの位置を変更すると、エクスプレッションが壊れることになります。
  • モーショングラフィックステンプレートで使用される別のコンポーネント間のバランスを維持します。範囲が存在する場合はスライダーを使用し、「はい」または「いいえ」などのオプションがある場合は、チェックボックスを使用します。 
  • 他のすべてのドロップダウンメニューをリンクするドロップダウンメニューが親になります。コンプのドロップダウンメニューは親メニューを参照し、それに応じて動作します。

ドロップダウンメニュー制御のスクリプトサポート

Property.setPropertyParameters()

メソッド:

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

説明:

プロパティのパラメーターを設定します。

注意

  • ドロップダウンメニュー制御エフェクト(matchname : ADBEドロップダウン制御)は、パラメーターを設定できる唯一のプロパティです。 
  • 例外は、このメソッドが失敗したときに発生します。
  • プロパティでパラメーターを設定できるかどうかを確認するには、このメソッドを呼び出す前に isDropdownEffect を確認します(Property.isDropdownEffect を参照してください)。

パラメーターの詳細:

param-array

文字列の配列。このメソッドは、既存のメニュー項目のセットを、指定された文字列の配列に上書きします。 

メニュー項目として指定する文字列には、いくつかの制限があります。

1.空の項目の文字列は許可されていません

2.重複する項目の文字列を使用することはできません

3.項目の文字列で文字「|」を使用することはできません。

4.使用できるのは文字列のみです。

5.     項目の文字列は、現在のコードページで、エンコード可能な ASCII またはマルチバイトである必要があります。つまり、実行中のシステムのスクリプトには、項目の文字列が含まれている必要があります。例えば、英語のシステムでのスクリプトの実行中に、日本語で項目の文字列を指定すると、項目の文字列内に判読不可能な文字を含むドロップダウンエフェクトが作成されます。 

注意:「(-」という文字列は項目の文字列の時点で指定できます。ドロップダウンメニューには、区切り線として表示されます。作成者は、区切り線がそれぞれのインデックスを要求することを覚えておく必要があります。 

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

上記のステートメントによって、ドロップダウンメニューが編集され、項目として Monday、Wednesday、Friday、Sunday に設定されます。返されたプロパティはアップデートされたプロパティであり、他のすべての用途に使用されます。

戻り値

アップデートされたプロパティ。ユーザーはこのメソッドが呼び出されるプロパティオブジェクトは、内部実装によっては無効になり、返されたプロパティは、それ以降のすべての用途に使用されることに注意してください。

Property.isDropdownEffect

補間方法:

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

説明:

プロパティがドロップダウンメニュー制御に設定されている場合は true を返します。

appliedEffect ("Menu") isDropdownEffect  //true を返します。

appliedEffect ("Color") isDropdownEffect  //false を返します。

appliedEffect.property("Feather").isDropdownEffect  //false を返します

戻り値:

ブール関数

ご質問またはアイデアがある場合は、

ご質問または共有するアイデアがある場合は、After Effects コミュニティにぜひご参加ください。皆様からのご意見やモーショングラフィックステンプレートをお待ちしております。

ヘルプをすばやく簡単に入手

新規ユーザーの場合

Adobe MAX 2025

Adobe MAX Japan
クリエイターの祭典

2025 年 2 月 13 日
東京ビッグサイト