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.
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.
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.
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.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.
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.
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.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.
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.
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.