Creación de plantillas de gráficos animados con listas desplegables que permiten a los usuarios personalizarlos en Premiere Pro.
control del menú desplegable

Al crear una Plantilla de gráficos animados (MOGRT), puede mantener sus propiedades flexibles y permitir a los editores personalizarlas en Premiere Pro. Una forma de hacerlo es crear controles deslizantes y casillas de verificación. También puede crearlas utilizando listas desplegables con diferentes opciones.

La creación de listas desplegables resulta útil porque proporciona más controles de menú y una experiencia de edición más sencilla para los editores de Premiere Pro. Puede guardar estos ajustes de control del menú desplegable como plantilla y utilizarlos posteriormente en diferentes composiciones y proyectos.

Diferentes opciones de texto que se muestran al utilizar las listas desplegables de After Effects
Diferentes opciones de texto que se muestran al utilizar las listas desplegables de After Effects

Motivos para crear listas desplegables

Puede proporcionar reguladores de desplazamiento y casillas de verificación como opciones de edición para los editores en Premiere Pro, pero a veces pueden ser menos intuitivas y tardar más tiempo. En estos casos, los menús desplegables pueden ser útiles. Utilícelo para permitir que el editor de Premiere Pro elija entre:

 Selección de temas de color: Por ejemplo, puede crear un menú desplegable para un grupo de colores que desee utilizar para un título de película.

 Diferentes posiciones o diseños: Por ejemplo, añadir un menú desplegable para la posición de un tercio inferior, como el izquierdo o el derecho.

 Opciones de animación: Por ejemplo, añadir un menú desplegable para seleccionar las diferentes duraciones de la animación.

 Opciones de texto o de recursos: Por ejemplo, añadir una lista desplegable para los distintos días de la semana. De este modo, se evita tener que volver a escribir el texto de origen y también se reduce la posibilidad de errores en la postproducción.

Configuración de un control de lista desplegable

Utilice el efecto de control del menú desplegable para crear listas desplegables. Para entender cómo funciona esta función, siga estos pasos:

  1. Creación de una composición.
    Haga clic en el icono de la composición en la parte inferior del panel Proyectos o seleccione nueva composición en la pantalla de inicio.

  2. Para añadir una capa de texto, seleccione Capa > Nuevo > Texto y escriba el texto que desee añadir. En este ejemplo, vamos a escribir Morning.

  3. Abra el panel Efectos y ajustes preestablecidos, a continuación, busque Color de relleno y colóquelo en la capa de texto.

  4. Una vez que tenga todas las capas establecidas, en el panel Efectos y ajustes preestablecidos, busque el Control de menú desplegable y suéltelo en las capas. También puede acceder a él desde Efecto > Controles de expresión > Control del menú desplegable.

    En el panel Cronología, gire para abrir las propiedades de la capa de texto y, a continuación, pulse Alt y haga clic en el icono del cronómetro situado junto a Texto de origen.

    En el campo de texto de la expresión, copie el siguiente fragmento de la expresión que cambia el texto de origen:

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

    if ( x === 1 ) {
    "Morning";
    } else if ( x === 2 ) {
    "Evening";

    } else if ( x === 3 ) {

    "Night";

    }

    Utilice la herramienta pickwip y vincule el menú desplegable (Día de la semana) a la propiedad Texto de origen.

    En el panel Controles de efectos, haga clic en Editar. El control del menú desplegable incluye un menú predeterminado con tres elementos: elemento 1, elemento 2 y elemento 3. Puede usarlos para asignar un nombre a las opciones del menú. También puede añadir más opciones al menú con el icono + -.

  5. Añada otro menú desplegable y cambie el nombre a color. A continuación, seleccione la capa de Color de relleno, pulse alt y haga clic en Propiedad de color. Para cambiar el color del texto en el campo de expresión, copie el texto siguiente:

    dropDownIndex = effect("Color options")("Menu").value;

    switch ( dropDownIndex )
    {
    case 1: hexToRgb("FF3211");
    break;
    case 2: hexToRgb("CC1234");
    break;
    default: hexToRgb("BBB001")
    };

    Utilice la herramienta pickwip y vincule el menú desplegable a la propiedad Color. Escriba el nombre de esta lista desplegable como Opciones de color. Puede cambiar el color en función de la tabla de colores que aparece junto a la propiedad color. 

  6. Para enlazar las dos propiedades del menú desplegable unas con otras, utilice la herramienta pickwip de opciones de color y vincúlelas al menú desplegable Día de la semana. El menú desplegable Opciones de color hace referencia al menú desplegable Día de la semana, lo que significa que el día de la semana que seleccione cambia también el color del texto.

  7. Siga adelante y arrastre este menú desplegable hasta el panel de gráficos esenciales y utilícelos para crear plantillas de gráficos animados.

Para ayudarle a comenzar a crear un proyecto, descargue este archivo de muestra.

Descargar

Expresiones de ejemplo para controles de lista desplegable

Al igual que con otros controles de expresión, como los reguladores de desplazamiento, los valores del menú se denominan índices en expresiones. Puede copiar la expresión del ejemplo siguiente en el campo de texto de expresión para obtener resultados diferentes en el menú desplegable.

Nota:

La expresión no lee los nombres de los elementos de menú. En su lugar, lee el índice, es decir, la posición jerárquica del elemento de menú en la lista.

Ejemplo 1: Defina el color de una capa y haga referencia a los elementos de menú en el control desplegable

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

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

Cambio de colores mediante el fragmento de la expresión
Cambio de colores mediante el fragmento de la expresión

Ejemplo 2: Uso del texto de origen con un control de menú desplegable

Si tiene un menú desplegable con los siguientes elementos de menú en este orden:

  1. Lunes
  2. Martes
  3. Miércoles

Lunes es el índice 1 y Martes el 2, siempre que sea el segundo elemento de la lista. Si cambia el nombre de Martes a otro, la expresión no se rompe porque sigue estando en el índice 2.

Este es un ejemplo sencillo de uso del texto de origen con un control de menú desplegable:

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”);

}

Ejemplo 3: Defina el texto de origen de una capa de texto y referénciela en los elementos del menú en el control desplegable

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

Aspectos que se deben tener en cuenta al utilizar controles de lista desplegable

  • Cambie el nombre del control de lista desplegable a un valor que refleje mejor el contenido.
  • Las opciones de menú en el efecto Control del menú desplegable no distinguen entre mayúsculas o minúsculas o en el contenido del texto. Esto significa que, aunque cambie el nombre de los elementos de menú, la expresión no se romperá. Sin embargo, afectan a la posición, por lo que cambiar la posición de la opción de menú rompe la expresión.
  • Mantenga un equilibrio entre los distintos componentes utilizados en las plantillas de gráficos animados. Para instancias en las que haya intervalos, utilice controles deslizantes y, en el caso de las opciones de sí o no, utilice casillas de verificación. 
  • El menú desplegable que vincule a todos los demás menús desplegables se convierte en el elemento principal. Los menús desplegables de la composición hacen referencia al menú principal y se comportan en consecuencia.

Compatibilidad de scripts con el control del menú desplegable

Property.setPropertyParameters()

Método:

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

Descripción:

Establecer los parámetros de una propiedad.

Notas

  • Efecto del control del menú desplegable (nombre de coincidencia: ADBE Dropdown Control) es la única propiedad que permite la configuración de parámetros. 
  • Si este método falla, se crea una excepción.
  • Para comprobar si una propiedad permite la configuración de un parámetro, utilice isDropdownEffect antes de invocar este método (consulte Property.isDropdownEffect).

Detalles del parámetro:

param-array

Un conjunto de cadenas. Este método sobrescribirá el conjunto de elementos de menú actual con el conjunto de cadenas proporcionado. 

Hay varias restricciones respecto a las cadenas indicadas como elementos de menú:

1.     No se admiten cadenas de elemento vacías

2.     No se admiten cadenas de elemento duplicadas

3.     No se admite el carácter “|” en las cadenas de elemento.

4.     Solo se admiten cadenas.

5.     Las cadenas de elementos deben tener el código ASCII o MultiByte en la página de código actual. Es decir, las cadenas de elemento se deben indicar en el script del sistema en ejecución. Por ejemplo: Si se especifica una cadena de elemento en japonés y, a la vez, se ejecuta el script en un sistema en inglés, se creará una serie de caracteres ilegibles en las cadenas de elemento. 

Nota: La cadena “(-“ - se puede indicar como una cadena de elemento. Aparecerán como separadores en el menú desplegable. El autor debe tener en cuenta que las líneas separadoras requieren un índice para cada una. 

Ejemplo:

Dropdowneffect  = Dropdowneffect.setPropertyParameters([“Lunes”, “Miércoles”, “Viernes”, “Domingo”]);

La condición anterior editará el menú desplegable, de forma que los elementos que lo compongan sea Lunes, Miércoles, Viernes y Domingo. La propiedad obtenida está actualizada y se debe usar de ahí en adelante.

Valores devueltos:

La propiedad actualizada. El usuario debe tener en cuenta que el objeto de propiedad en el que se invoque este método quedará invalidado debido a la implementación interna y, por tanto, la propiedad obtenida se debe usar de ahí en adelante.

Property.isDropdownEffect

Método:

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

Descripción:

Devuelve el valor True si la propiedad es un efecto de control del menú desplegable.

Ejemplos:

appliedEffect.property("Menu").isDropdownEffect  // devuelve el valor True

appliedEffect.property("Color").isDropdownEffect  // devuelve el valor False  

appliedEffect.property("Feather").isDropdownEffect  // devuelve el valor False

Retorno:

Booleano

¿Tiene alguna pregunta o idea?

ask-the-community

Si tiene alguna pregunta o desea compartir una idea, participe en nuestra Comunidad de After Effects. Nos encantaría recibir noticias suyas y ver sus plantillas de gráficos animados.


Esta obra está autorizada con arreglo a la licencia de Reconocimiento-NoComercial-CompartirIgual 3.0 Unported de Creative Commons.  Los términos de Creative Commons no cubren las publicaciones en Twitter™ y Facebook.

Avisos legales   |   Política de privacidad en línea