ユーザーが 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:レイヤーのカラーを定義し、ドロップダウン制御のメニュー項目として参照します

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")
};

例 2

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" }

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

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

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

ask-the-community

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


本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

リーガルノーティス   |   プライバシーポリシー