Cómo animar alertas de multistream en SleepyChat

Dos formas de animar

Animación rápida

Utilice la pestaña Animar cuando desee un movimiento rápido y limpio sin perder mucho tiempo. Esta es la forma más sencilla de agregar un simple desvanecimiento, revelación, zoom, rebote u otro efecto de entrada/salida.

Animación de línea de tiempo

Utilice la línea de tiempo cuando desee tener más control sobre exactamente cuándo se mueven las cosas, cuánto tiempo permanecen en la pantalla o cómo deben ocurrir múltiples cambios a lo largo del tiempo.

Si eres nuevo en el editor, comienza primero con una animación rápida. Vaya a la línea de tiempo cuando desee un control más preciso.

Paso 1: Selecciona el elemento que deseas animar

La animación se aplica al elemento seleccionado, no a todo el Widget de forma predeterminada. Haga clic en el texto, imagen, forma u otro elemento que desee mover. Si le resulta difícil hacer clic en el lienzo, selecciónelo en el panel Capas.

Paso 2: abre la pestaña Animar y elige un movimiento.

La pestaña Animar le ofrece opciones de movimiento listas para usar. Elija el estilo que desee, obtenga una vista previa y decida si debe suceder cuando el elemento entre, salga o ambas cosas.

Un buen punto de partida es un simple desvanecimiento, revelación o zoom. Son fáciles de leer en la transmisión y generalmente funcionan mejor que algo demasiado ocupado.

¿Qué significan Entrada, Salida y Combo?

• En: el movimiento que se reproduce cuando el elemento aparece por primera vez.
• Out: el movimiento que se reproduce cuando el elemento sale.
• Combo: un par combinado que le ofrece un estilo de entrada y de salida juntos.

Si no está seguro de qué elegir, comience solo con una animación In. Es la forma más sencilla de hacer que una alerta parezca pulida sin complicar demasiado la sincronización.

Paso 3: abre la línea de tiempo cuando quieras tener más control

La línea de tiempo es donde controlas cuándo suceden las cosas. Si su alerta necesita más que una entrada o salida rápida, abra la línea de tiempo y úsela para decidir cuándo comienza el movimiento, cuánto dura y cómo se alinea con el resto del Widget.

Posicionar sonidos en la línea de tiempo.

Los sonidos se ubican en la línea de tiempo como clips visuales. Mueva un clip de sonido antes si desea que suene justo cuando comienza la alerta, o arrástrelo más tarde si debe aparecer después de que ya haya aparecido el texto o la imagen.

Esto es útil para cosas como un silbido en la entrada, un sonido de golpe cuando cae una insignia o un aguijón que suena después de que la imagen principal se haya asentado. Si no es el momento adecuado, normalmente no es necesario reconstruir nada. Simplemente deslice el clip hacia adelante o hacia atrás hasta que quede alineado.

Los clips de sonido habituales también se pueden recortar en la línea de tiempo. Eso hace que sea fácil usar sólo la parte que desea en lugar de todo el archivo.

Cómo funciona Text-To-Speech en la línea de tiempo

Text-To-Speech también aparece como su propio clip en la línea de tiempo, por lo que puedes colocarlo antes o después dependiendo de cuándo quieras que comience la voz. Eso facilita alinear palabras habladas con texto, imágenes u otros sonidos en la misma alerta.

La principal diferencia es que un clip de Texto a voz no es algo que se recorta o divide manualmente. SleepyChat mide el audio de vista previa sintetizado y lo utiliza para establecer la duración del clip.

En la práctica, eso significa que la duración se actualiza cuando cambia el resultado hablado, como cuando edita el mensaje, cambia la voz o ajusta la velocidad de conversación. Principalmente eliges cuando comienza el clip, y SleepyChat maneja cuán largo debe ser.

¿Qué es un fotograma clave?

Un fotograma clave es solo un momento guardado en el tiempo. Le dice a SleepyChat cómo debería verse una propiedad en un momento dado, luego el editor completa el movimiento entre esos puntos guardados.

Por ejemplo, puede guardar un punto donde el texto es pequeño y otro punto donde es más grande. SleepyChat luego crea el crecimiento entre esos dos puntos.

Cómo agregar un fotograma clave

Mueve el cabezal de reproducción en la línea de tiempo hasta el momento que deseas guardar. Luego vaya a la sección de propiedades que desea animar e inserte un fotograma clave para esa sección. Una vez que exista el fotograma clave, cambie el valor que desee en ese momento.

Por ejemplo, puede mover el cabezal de reproducción al inicio de la alerta y guardar un fotograma clave donde el elemento sea más bajo y transparente. Luego mueves el cabezal de reproducción más tarde y cambias el mismo elemento para que esté más alto y completamente visible. SleepyChat intercalará entre esos dos puntos guardados.

La parte importante es esta: mueva el cursor de reproducción primero, luego guarde o edite el fotograma clave de la sección que le interese.

¿Qué propiedades pueden controlar los fotogramas clave?

Cualquier sección que admita fotogramas clave puede guardar sus valores con el tiempo. En la práctica, esto significa que puedes animar las propiedades que marcan la mayor diferencia visual:

• Posición: mueve elementos hacia la izquierda, derecha, arriba o abajo.
• Rotación: gira texto, imágenes o formas mientras se reproduce la alerta.
• Escala y tamaño: hace que algo crezca, se encoja o se estire.
• Opacidad: desvanece algo dentro o fuera.
• Filtros y distorsión: cambia el desenfoque, el brillo, la inclinación y efectos similares con el tiempo.
• Propiedades de audio: cuando sean compatibles, cambia elementos como el volumen a lo largo del tiempo para que el sonido o el texto a voz entren o salgan con mayor fluidez.

Los controles exactos dependen del tipo de elemento que hayas seleccionado, pero el flujo de trabajo es el mismo: elige un momento, guarda el fotograma clave para esa sección y luego cambia los valores que desees.

Usar fotogramas clave en los paneles Inspector y Efectos

Piense en cada sección habilitada para fotogramas clave como su propia pequeña línea de animación. Si estás trabajando en Transform, estás animando cosas como la posición, el tamaño y la rotación. Si estás trabajando en Filtros o Distorsión, estás animando el aspecto del elemento.

Un patrón común es combinarlos. Por ejemplo:

• Utilice Transformar fotogramas clave para deslizar el texto hacia arriba.
• Utilice fotogramas clave de opacidad para desvanecerlos al mismo tiempo.
• Utilice fotogramas clave de filtro para enfocarlo o desenfocarlo a medida que llega.

Así es como creas movimientos más ricos sin necesidad de una herramienta de animación independiente. Cada sección controla sus propias propiedades y todas pueden trabajar juntas en la misma línea de tiempo.

Paso 4: mover, copiar y reutilizar fotogramas clave

Una vez que existen fotogramas clave, puede moverlos en la línea de tiempo para cambiar cuando suceda algo. Arrastrar un fotograma clave antes hace que el cambio se produzca antes. Arrastrarlo más tarde retrasa ese cambio.

También puedes copiar fotogramas clave cuando quieras reutilizar el mismo tiempo o cambiar el valor en otro lugar del clip. Esto es útil cuando desea un ritmo de entrada y salida coincidente, o cuando varios elementos deben moverse de manera similar sin reconstruir el movimiento desde cero cada vez.

Trabajar en pequeñas pasadas. Inserte uno o dos fotogramas clave, muévalos a su lugar, obtenga una vista previa del resultado y luego refine desde allí. Esto es mucho más fácil que intentar crear la animación perfecta de una sola vez.

Usa la línea de tiempo para alinear todo

El verdadero poder proviene de combinar estas piezas. Es posible que primero se deslice el texto, se escuche un sonido un momento después y luego comience un clip de texto a voz una vez que el espectador haya tenido un segundo para ver la alerta en la pantalla.

Piensa en la línea de tiempo como el lugar donde escenificas todo el momento. No es necesario que los clips visuales, los sonidos y el audio hablado comiencen al mismo tiempo. Escalonarlas a menudo hace que las alertas parezcan más claras y más fáciles de seguir.

¿Qué significa la interpolación en la práctica?

La interpolación es el movimiento que ocurre entre fotogramas clave. Guarda los valores inicial y final, y SleepyChat crea el movimiento intermedio por usted.

Eso significa que no es necesario crear un fotograma clave para cada pequeño paso. Si la posición, rotación, opacidad u otra propiedad cambia entre dos puntos guardados, el editor animará la transición automáticamente.

Paso 5: vista previa de la animación

Utilice los controles de reproducción del editor para observar el movimiento antes de guardar. Esto le ayuda a detectar momentos incómodos, overlays o momentos en los que algo se mueve demasiado rápido para leerlo con claridad.

Si el movimiento se ve bien en el editor, pruebe el Widget completo en el Overlay para poder verlo en un diseño más realista.

Paso 6: enviar un evento de prueba

Un evento de prueba es lo más parecido a una ejecución real antes de su lanzamiento. Le permite ver la animación en Overlay y comprobar que todo el Widget se siente bien en contexto, no solo en el editor.

Esto es especialmente importante cuando tienes texto, sonido y varias piezas en movimiento juntas.

Hábitos de animación útiles

• Comienza simple. El movimiento limpio generalmente se lee mejor en la transmisión que algo demasiado ocupado.
• Previsualice con frecuencia. Las pequeñas comprobaciones de vista previa ahorran tiempo y evitan que se acumulen errores de sincronización.
• Proteger la legibilidad. Si el texto es difícil de leer mientras se mueve, ralentícelo o simplifique el efecto.
• Anima solo lo que importa. La posición, la rotación, el tamaño y la opacidad suelen aportar más claridad que aplicar todos los efectos a la vez.

Volver a la configuración

Si aún necesita una visión más amplia de cómo encajan Widgets y Overlays, vuelva a la guía de configuración. Esa guía cubre el flujo de trabajo completo, desde la creación de un Widget hasta su colocación en un Overlay y su adición a OBS.