Guía del usuario Cancelar

Uso de expresiones para crear listas desplegables en plantillas de gráficos animados

  1. Guía del usuario de After Effects
  2. Versiones beta
    1. Descripción general del programa beta
    2. Comunidad beta de After Effects
    3. Funciones de la versión beta
      1. Panel Propiedades (beta)
      2. Importación de modelos 3D (Beta)
      3. Gestión de color de OpenColorIO y ACES (Beta)
  3. Introducción
    1. Introducción a After Effects
    2. Novedades de After Effects 
    3. Notas de la versión | After Effects
    4. Requisitos del sistema para After Effects
    5. Métodos abreviados de teclado en After Effects
    6. Formatos de archivo admitidos | After Effects
    7. Recomendaciones de hardware
    8. After Effects para Apple Silicon
    9. Planificación y configuración
  4. Espacios de trabajo
    1. Elementos generales de la interfaz de usuario
    2. Familiarización con la interfaz de After Effects
    3. Flujos de trabajo
    4. Espacios de trabajo, paneles y visores
  5. Proyectos y composiciones
    1. Proyectos
    2. Conceptos básicos sobre composiciones
    3. Precomposición, anidamiento y preprocesamiento
    4. Ver información de rendimiento detallada con el Perfilador de composición
    5. Procesador de composición de Cinema 4D
  6. Importación de material de archivo
    1. Preparación e importación de imágenes fijas
    2. Importación desde After Effects y Adobe Premiere Pro
    3. Importación e interpretación de vídeo y de audio
    4. Preparación e importación de archivos de imagen 3D
    5. Importación e interpretación de elementos de material de archivo
    6. Uso de elementos de material de archivo
    7. Detección de puntos de edición con Detección de edición de escena
    8. Metadatos XMP
  7. Texto y gráficos
    1. Texto
      1. Formato de caracteres y el panel Carácter
      2. Efectos de texto
      3. Creación y edición de capas de texto
      4. Aplicación de formato a párrafos y el panel Párrafo
      5. Extrusión de capas de texto y formas
      6. Animación del texto
      7. Ejemplos y recursos para animación de texto
      8. Plantillas de texto interactivo
    2. Gráficos animados
      1. Trabajar con plantillas de gráficos animados en After Effects
      2. Uso de expresiones para crear listas desplegables en plantillas de gráficos animados
      3. Trabajo con propiedades esenciales para crear plantillas de gráficos animados
      4. Reemplazo de imágenes y vídeos en plantillas de gráficos animados y propiedades esenciales
  8. Dibujo, pintura y trazados
    1. Descripción general de las capas de forma, trazados y gráficos vectoriales
    2. Herramientas de pintura: Pincel, Tampón de clonar y Borrador
    3. Estrechar trazos de forma
    4. Atributos de forma, operaciones de pintura y operaciones de trazado para capas de forma
    5. Uso del efecto de forma Desplazar trazados para modificar formas
    6. Creación de formas
    7. Creación de máscaras
    8. Elimine objetos de sus vídeos desde el panel Relleno según el contenido
    9. Pincel tipo rotoscopia y Perfeccionar mate
  9. Capas, marcadores y cámara
    1. Selección y organización de capas
    2. Modos de fusión y estilos de capas
    3. Capas 3D
    4. Propiedades de capa
    5. Creación de capas
    6. Administración de capas
    7. Marcadores de capa y marcadores de composición
    8. Cámaras, luces y puntos de interés
  10. Animación, fotogramas clave, seguimiento del movimiento y efecto de clave
    1. Animación
      1. Conceptos básicos sobre animaciones
      2. Animación con herramientas de marioneta
      3. Administración y animación de trazados de formas y máscaras
      4. Animación de formas de Sketch y Capture con After Effects
      5. Herramientas de animación varias
      6. Trabajo con animación basada en datos
    2. Fotograma clave
      1. Interpolación de fotogramas clave
      2. Ajuste, selección y eliminación de fotogramas clave
      3. Edición, desplazamiento y copia de fotogramas clave
    3. Seguimiento de movimiento
      1. Seguimiento y estabilización del movimiento
      2. Seguimiento de caras
      3. Seguimiento de máscara
      4. Referencia de máscara
      5. Velocidad
      6. Ampliación del tiempo y reasignación del tiempo
      7. Unidades de visualización de tiempo y código de tiempo
    4. Incrustación
      1. Incrustación
      2. Efectos de incrustación
  11. Transparencia y composición
    1. Descripción general y recursos sobre composición y transparencia
    2. Canales alfa y mates
    3. Mates de seguimiento y mates móviles
  12. Ajuste del color
    1. Conceptos básicos sobre colores
    2. Gestión de color
    3. Efectos de corrección de color
  13. Ajustes preestablecidos de animación y efectos
    1. Información general de efectos y ajustes preestablecidos de animación
    2. Lista de efectos
    3. Efectos de simulación
    4. Efectos de Estilizar
    5. Efectos de audio
    6. Efectos de distorsión
    7. Efectos de perspectiva
    8. Efectos de canal
    9. Efectos de generación
    10. Efectos de transición
    11. El efecto Reparación de obturación de desplazamiento
    12. Efectos Desenfocar y Enfocar
    13. Efectos de canal 3D
    14. Efectos de utilidad
    15. Efectos mate
    16. Efectos Ruido y Granulado
    17. Efecto Mejora de conservación de detalles
    18. Efectos obsoletos
  14. Expresiones y automatización
    1. Expresión
      1. Conceptos básicos sobre expresiones
      2. Comprensión del lenguaje de expresión
      3. Uso de los controles de expresión
      4. Diferencias de sintaxis entre los motores de expresiones de JavaScript y ExtendScript heredado
      5. Edición de expresiones
      6. Errores de expresiones
      7. Uso del editor de expresiones
      8. Uso de expresiones para editar y acceder a las propiedades de texto
      9. Referencia del lenguaje de expresión
      10. Ejemplos de expresiones
    2. Automatización
      1. Automatización
      2. Scripts
  15. Vídeo inmersivo, RV y 3D
    1. Construcción de entornos de RV en After Effects
    2. Aplicar efectos de vídeo envolvente
    3. Herramientas de composición para vídeos de VR/360
    4. Seguimiento del movimiento de la cámara 3D
    5. Trabajo en espacios de diseño 3D
    6. Herramientas de transformación Gizmo 3D
    7. Haga más cosas con la animación 3D
    8. Previsualización de los cambios en diseños 3D en tiempo real con el motor Mercury 3D
    9. Adición de diseño interactivo a los gráficos 
  16. Vistas y previsualizaciones
    1. Previsualización
    2. Previsualización de vídeo con Mercury Transmit
    3. Modificación y utilización de vistas
  17. Procesamiento y exportación
    1. Principios básicos del procesamiento y la exportación
    2. Codificación H.264 en After Effects
    3. Exportación de un proyecto de After Effects como un proyecto de Adobe Premiere Pro
    4. Conversión de películas
    5. Procesamiento de varios fotogramas
    6. Procesamiento automático y en red
    7. Procesamiento y exportación de imágenes fijas y secuencias de imágenes fijas
    8. Uso del códec de GoPro CineForm en After Effects
  18. Uso de otras aplicaciones
    1. Dynamic Link y After Effects
    2. Uso de After Effects y otras aplicaciones
    3. Sincronización de la configuración en After Effects
    4. Bibliotecas Creative Cloud en After Effects
    5. Plugins
    6. CINEMA 4D y Cineware
  19. Colaboración: Frame.io y Team Projects
    1. Colaboración en Premiere Pro y After Effects
    2. Frame.io
      1. Instalar y activar Frame.io
      2. Utilizar Frame.io con Premiere Pro y After Effects
      3. Preguntas frecuentes
    3. Team Projects
      1. Introducción a Team Projects
      2. Creación de un proyecto de equipo
      3. Colaboración con Team Projects
  20. Memoria, almacenamiento y rendimiento
    1. Memoria y almacenamiento
    2. Cómo maneja After Effects los problemas de poca memoria durante la previsualización
    3. Mejora del rendimiento
    4. Preferencias
    5. Requisitos de la GPU y del controlador de la GPU para After Effects

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 temáticas 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ñada un menú desplegable para la posición de un tercio inferior, como el izquierdo o el derecho.

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

 Opciones de texto o de recursos: Por ejemplo, añada 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

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

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

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

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 = ("Lunes");

}

if (x == 2) {

text.sourceText = ("Martes");

}

if (x == 3) { 

text.sourceText = ("Miércoles");

}

Muestra 3: Defina el texto de origen de una capa de texto y haga referencia a ella 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 del 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?

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.

Logotipo de Adobe

Inicia sesión en tu cuenta