AyudaDiseño de movimiento

Diseño de movimiento

Mira el ejemplo destacado de diseño de movimiento y aprende a definir, previsualizar, revisar y exportar un proyecto. La guía paso a paso utiliza un proyecto de práctica independiente llamado Focus.

Diseño de movimiento: ejemplo destacado, 37 segundos. Los pasos siguientes utilizan un proyecto Focus independiente para explicar el flujo de trabajo.

Empieza con uno de los cinco ejemplos integrados

En Home (Inicio), elige Motion design (diseño de movimiento) debajo del prompt. Se muestran cuatro filas a la vez. Desplázate por la lista de ejemplos para mostrar Product Promo en la parte inferior.

Captura continua con desplazamiento; la aplicación muestra cuatro filas a la vez.

Encuentra una dirección útil

  • Bring Ideas to Life: una historia de 20 segundos con recortes de papel para explorar la narrativa, los personajes y las texturas artesanales.
  • The Future Is Already Here: un reel tecnológico de 20 segundos para explorar la edición guiada por el ritmo, la tipografía cinética y las superficies cromadas.
  • Motion Designer Showreel: una muestra de movimiento de 15 segundos para portfolios y presentaciones.
  • One-Shape UI Motion: una transformación continua de interfaz de 14 segundos, desde botones y estados de carga hasta reproductores y gráficos.
  • Product Promo: una pieza de 15 segundos sobre un producto de pagos ficticio para presentar ventajas, demostraciones de la interfaz y un cierre de marca.

Abre primero Preview y después adapta el prompt

Haz clic en la miniatura para abrir Preview (vista previa). Ciérrala y, después, haz clic en el título o en el texto del prompt para colocar el encargo de ejemplo en el editor. Sustituye el producto, los textos, los tiempos y el estilo antes de enviarlo. Abrir una vista previa no crea un proyecto nuevo propio.

Antes de empezar

Completa una vez la configuración de la conexión de IA. Elige un proyecto lo bastante pequeño como para poder revisarlo: el ejemplo Focus utiliza un punto verde, una tarjeta de tarea, una marca de finalización y un mensaje de marca final. Utiliza animación y audio locales en lugar de un servicio externo de pago para generar contenido multimedia.

Paso 1: elige Motion design

En Home (Inicio), abre el menú de tipos de creación situado debajo del prompt y elige Motion design (diseño de movimiento). Debajo del editor aparecerán ejemplos de movimiento integrados. La lista muestra cuatro filas a la vez; desplázate dentro de ella para llegar a la quinta. Explora los cinco ejemplos si quieres un punto de partida.

Elige Motion design en el menú de tipos de creación de Home.

Paso 2: describe el resultado

Indica la duración, la relación de aspecto, el texto visible, la dirección visual, los tiempos de las escenas, el audio y los archivos finales. Si necesitas ambos, solicita una fuente editable y un MP4 reproducible.

Crea una película de movimiento de producto de 10 segundos llamada Focus, de 1920×1080 a 30fps. Usa blanco papel #fafafa, tinta #262626 y un discreto acento verde #63fe13. Haz que un único punto verde recorra de forma continua una tarjeta de tarea Collect, una marca de verificación Done y una marca final de Focus. Muestra Focus de 0–2s, Collect de 2–5s, Done de 5–8s y “Haz espacio para lo que importa.” de 8–10s. Añade música original suave y algunos efectos de sonido sutiles, sin voz en off ni servicios externos de pago para generar contenido multimedia. Crea en este proyecto la fuente editable y el MP4 real.
Un borrador de instrucciones en inglés en el editor de Home. Confirma el tipo de creación antes de enviarlo.

Paso 3: espera a que finalicen la producción y el renderizado

El agente crea los archivos fuente y los recursos y, después, renderiza el vídeo. Un plan o una previsualización animada de la fuente no demuestran que el MP4 exista. Espera a que aparezca el archivo de vídeo y a que el renderizado figure como completado.

La aplicación renderizando el vídeo real.

Paso 4: revisa el vídeo

Abre el artefacto MP4 y reprodúcelo. Comprueba el texto, la continuidad del movimiento, las transiciones, la pausa final, la música y los efectos de sonido. Recorre también la línea de tiempo, además de verlo de principio a fin. Revisa por separado la fuente editable cuando necesites seguir trabajando en ella.

Controles originales de la aplicación y posiciones de las operaciones. Para ilustrarlo, la imagen del reproductor está compuesta a partir de la película destacada.
La escena azul pintada a mano en el segundo 18 de la película destacada.

Paso 5: solicita una revisión concreta

Continúa en el mismo proyecto. Indica el cambio exacto y qué debe mantenerse sin cambios; después, solicita un nuevo renderizado. En la guía real, la segunda versión solo cambia el mensaje final. Abre el nuevo MP4 y confirma que la frase revisada sea visible. Actualizar la fuente no modifica retroactivamente un vídeo ya renderizado.

Cambia la frase final de “Haz espacio para lo que importa.” a “Céntrate en lo que importa.” Mantén las demás escenas, la duración de diez segundos, los colores y el audio. Renderiza focus-v2.mp4 y conserva el archivo focus.mp4 original para compararlos.
Controles originales de la aplicación y posiciones de las operaciones. Para ilustrarlo, la imagen del reproductor está compuesta a partir de la película destacada.

Paso 6: descarga la versión revisada

Abre el MP4 que quieres entregar y haz clic en Download (Descargar) en la barra de herramientas de la esquina superior derecha. Elige una ubicación y un nombre de archivo en la ventana de guardado del sistema. Confirma que el archivo local exista, se reproduzca y contenga la revisión más reciente. Si la ventana de guardado no puede completar la operación, conserva el proyecto e incluye el estado de error de la ventana cuando solicites ayuda al equipo de soporte. Hacer clic en el control Download no significa que el guardado haya terminado.

Controles originales de la aplicación y posiciones de las operaciones. Para ilustrarlo, la imagen del reproductor está compuesta a partir de la película destacada.

Conserva el proyecto editable

En este ejemplo, el archivo de entrada es motion-source/focus/index.html. Cuando muevas la fuente, conserva junto a él su archivo GSAP, las fuentes tipográficas y el audio. El MP4 es el entregable de reproducción; no contiene el proyecto fuente editable.

Controles originales de la aplicación y posiciones de las operaciones. Para ilustrarlo, la imagen del reproductor está compuesta a partir de la película destacada.

Haz que las instrucciones sean más fáciles de seguir

Especifica el texto visible en lugar de pedir al agente que lo adivine. Usa intervalos de tiempo para los momentos importantes e indica si el resultado debe ser una película o una animación interactiva. Menciona explícitamente la música y la voz en off. Para las revisiones, identifica la escena o el intervalo de tiempo y señala los elementos que deben permanecer sin cambios.