Animación de escritura de video de pizarra - Bezier Path

• Mayo 2, 2024

En este tutorial, continuaremos creando un simple video de pizarra en Motion^R. El siguiente paso es dibujar el camino de Bezier que es la base de la animación.

Dibujarás un camino de Bezier que controlará el movimiento de la mano. Se usará un duplicado de este camino de Bezier para crear la máscara que ocultará el gráfico que se está dibujando en la pantalla y lo revelará cuando el brazo pase. Debido a que la máscara se crea a partir de un duplicado del camino de Bezier que seguirá la mano, el resultado es una simulación del dibujo de la mano en la pantalla.

Antes de dibujar el camino de Bezier, debemos ajustar el punto de anclaje del gráfico Mano. Por defecto, Motion coloca el punto de anclaje en el centro del gráfico. Pero este punto de anclaje será lo que siga el camino. No queremos que el centro del brazo se dibuje en la pantalla. Queremos que la punta del lápiz se dibuje en la pantalla. Vamos a arreglar esto.

1. Seleccione el gráfico Mano y luego seleccione la herramienta Punto de anclaje. Usa las flechas roja y azul para colocar el punto de anclaje sobre la punta del lápiz.
   
   Ahora llegamos a esa buena parte.
   
   
2. Seleccione la capa gráfica Mano y luego seleccione la herramienta Bézier. Coloque el primer punto Bezier sobre la punta del lápiz. A continuación, vaya al logotipo y dibuje un camino en zigzag sobre el logotipo. Finalmente, regrese a la Mano y agregue el último punto. No cierres el camino.
   
   
3. Para decirle a Motion que ha terminado de dibujar la ruta de Bezier, seleccione la herramienta Seleccionar / Transformar. Obtendrá una nueva capa Bezier en el panel Capas. Arrastre esta nueva capa debajo de la capa Mano y cámbiele el nombre por "Bezier_Logo" porque esta es la ruta de Bezier para dibujar la imagen del logotipo.
   
   Ahora que tenemos la ruta Bezier, podemos agregar el comportamiento de la ruta de movimiento al gráfico de la mano. Este comportamiento es lo que hará que la mano se anime. Pero queremos que la mano siga el camino Bezier_Logo. Entonces le diremos a Motion que use la ruta Bezier_Logo para este comportamiento de Motion Path.
   
   
4. Para agregar el comportamiento al gráfico Mano, seleccione la capa del gráfico Mano en el panel Capas. En el menú Comportamientos en la esquina inferior derecha, elija Ruta de movimiento. Verá una nueva capa de ruta de movimiento agregada debajo de la capa de mano.
   
   
5. Seleccione la capa Ruta de movimiento y vaya al Inspector (Inspector - Comportamientos - Ruta de movimiento). Establezca el menú Forma de ruta en Geometría. Desmarca la opción Adjuntar a forma. Regrese a la capa Bezier_Logo en el panel Capas y haga clic / arrastre hasta el pozo Fuente de forma. Cuando vea la flecha pequeña, suelte el mouse.
   
   Con Playhead todavía en el primer fotograma, pruebe la animación. Si el lápiz no sigue directamente el camino, realice ajustes en el punto de anclaje en la punta del lápiz según sea necesario.
   
   ¿La mano parece dibujar un poco demasiado lento para una animación de pizarra? Bueno, podemos acelerarlo acortando las rutas Motion Path y Bezier_Logo en la línea de tiempo.
   
   
6. Vaya a la línea de tiempo y encuentre la pista de Motion Path de color púrpura. Arrastre el borde derecho a la pista de ruta hacia la izquierda hasta que esté en la posición de dos segundos en la línea de tiempo (02:00). Repita esto para la pista Bezier_Logo.
   
   

Bien, es hora de un descanso para tomar café. En el próximo tutorial, crearemos la máscara que revela el logotipo.

← Volver | Siguiente →

Ejemplo de tutorial:


Apple, Motion, iBooks Author, GarageBand, TextEdit, Pages, iMovie y Mac son marcas comerciales de Apple Inc., registradas en los EE. UU. Y otros países.
CoffeBreakBlog es una publicación independiente y no ha sido autorizada, patrocinada ni aprobada por Apple Inc. Capturas de pantalla utilizadas con permiso.
Derechos de autor 2018 Adobe Systems Incorporated. Todos los derechos reservados. Las capturas de pantalla del producto Adobe se reimprimieron con permiso de Adobe Systems Incorporated. Adobe, Photoshop, Álbum de Photoshop, Photoshop Elements, Illustrator, InDesign, GoLive, Acrobat, Cue, Premiere Pro, Premiere Elements, Bridge, After Effects, InCopy, Dreamweaver, Flash, ActionScript, Fireworks, Contribute, Captivate, Flash Catalyst y Flash Paper es / es [una] marca registrada [s] o una marca registrada [s] de Adobe Systems Incorporated en los Estados Unidos y / u otros países.

Instrucciones De Vídeo: Aprendizaje de programación Java desde 0 y para novatos #33: Dibujo Básico: Circulos y Arcos(1/2) (Mayo 2024).