-
Hola.
-
Me llamo Natalie
y soy ingeniera de Google Web Designer.
-
En este video,
explicaremos cómo crear animaciones
-
con el cronograma
en modo avanzado.
-
El panel del cronograma
está en la parte inferior.
-
Esta es una de las dos herramientas
de cronograma.
-
La otra es el cronograma
de modo rápido.
-
Muchos archivos
se abren en el modo rápido
-
y puede alternar entre ambos
con este botón de la derecha.
-
Este es el modo rápido
y este, el avanzado.
-
Hay otro instructivo
que abarca el modo rápido.
-
En este nos centraremos en el avanzado
-
que es mucho más complejo,
pero también más eficaz que el otro.
-
Para este instructivo,
tengo este pequeño anuncio animado
-
con una imagen que se desliza
-
dos textos que aparecen
y desaparecen, y un logotipo al final.
-
Vamos a ver
cómo crear este anuncio paso a paso
-
en Google Web Designer.
-
Primero, nos encargaremos de la imagen.
-
La arrastramos hasta la etapa
y la colocamos como queramos
-
que aparezca
al principio de la animación.
-
Justo aquí.
-
Más tarde,
la pondremos por aquí.
-
Vemos que apareció
una pista en el cronograma.
-
Es una capa del cronograma.
-
Es la IU en la que distribuiremos
la animación de este objeto.
-
La creación de animaciones
consiste en definir fotogramas clave
-
puntos de referencia que marcan
cuándo un elemento tiene valores concretos
-
y en definir cómo
y cuánto tiempo duran las transiciones
-
entre esos valores.
-
Para que la imagen se deslice,
crearemos varios fotogramas clave.
-
Queremos que no se mueva
durante un segundo.
-
Pongo el fotograma en el segundo uno,
hago clic con el botón derecho
-
y elijo "Insertar fotograma clave"
-
otro medio segundo después.
-
Y, en este fotograma,
deslizo la imagen
-
hacia donde quiero
que esté en este segundo.
-
Y quiero que esta
no se mueva durante otro segundo.
-
Por último, medio segundo después
quiero que salga completamente.
-
Si movemos esta marca,
nos movemos en el cronograma
-
y tenemos
una vista previa de la animación.
-
También puede hacer clic
en el botón "Reproducir" de la izquierda
-
para ver lo mismo.
-
Queda bien.
-
Luego…
-
Vimos en el modelo acabado
que la imagen aparece al comienzo
-
además de deslizarse más tarde.
-
Vamos a hacer eso.
-
Selecciono todos los fotogramas
-
con la herramienta de marquesina
-
y hago lugar
a la transición del final.
-
Inserto un nuevo fotograma
en el segundo cero.
-
Y definimos
la opacidad de este elemento en cero.
-
Para el resto de los fotogramas,
será cien.
-
Ahora, vamos con el texto.
-
Como vimos,
hay dos cuadros de texto.
-
Aparecen uno detrás del otro,
mientras las imágenes se deslizan.
-
Vamos a crear el primero.
-
El primer cuadro debería aparecer,
mantenerse durante este tiempo
-
y desaparecer cuando la imagen se desliza.
-
Primero hay que poner en cero
-
la opacidad del cuadro,
porque aquí es cuando empieza.
-
Después, creamos
un fotograma clave al medio segundo.
-
Ponemos la opacidad al 100%.
-
Al segundo y medio,
queremos que siga siendo 100%.
-
Y, a los dos segundos,
que vuelva a ser 0%.
-
Puede insertar un fotograma clave,
como lo hemos hecho antes
-
o aprovechar
la duplicación de fotogramas clave.
-
Si mantiene presionado Alt,
puede clonar un fotograma
-
y arrastrarlo a otro punto.
-
Así puede ahorrar tiempo
con algunas animaciones.
-
Y agregamos el último
donde el texto desaparece por completo.
-
Puede obtener una vista previa.
-
Perfecta.
-
Muy bien.
-
Y el segundo cuadro de texto
es igual al primero.
-
Solo cambia el texto.
-
Aparece cuando desaparece el primero.
-
Voy a ahorrar tiempo y duplicaré
esta capa de la animación
-
haciendo clic derecho
y seleccionando "Duplicar capa".
-
Una vez más, con la marquesina,
selecciono todos los fotogramas clave
-
y los muevo
hasta donde debería estar la animación.
-
Ajusto estos fotogramas clave
donde el primer cuadro de texto
-
desaparece y el segundo aparece
para que no se crucen.
-
Cuando tenga
los fotogramas así de juntos
-
use el zoom para tener
una vista más clara de la animación.
-
Ahora vamos a actualizar el texto.
-
Ahora tengo los dos cuadros de texto
uno encima del otro.
-
Si hago clic con el botón derecho ahora,
podría editar el de arriba.
-
Voy a bloquearlo.
-
Así no lo activaré sin querer
y podré editar el de abajo.
-
Nuestra animación ya está casi acabada.
-
Veamos lo que ocurre
entre los fotogramas clave.
-
Vemos que, entre cada par
de fotogramas, dice "Lineal".
-
Se refiere a la función de aceleración CSS
-
usada para calcular valores intermedios
entre cada par de fotogramas clave.
-
Lineal significa que los valores
cambian a un ritmo constante.
-
Tenemos otras opciones.
-
Si hace clic con el botón derecho,
verá disponibles
-
las funciones estándar de aceleración
en las especificaciones de CSS.
-
Para esta transición
-
en la que la imagen
se desliza de una mitad a la otra
-
puede elegir
otra función de aceleración
-
como "ease-in-out",
que acelera un poco el movimiento.
-
Después, desacelera antes de detenerse
-
simulando un movimiento
un poco más real.
-
Voy a limitar la vista previa
-
arrastrando estos indicadores amarillos
a esta transición.
-
Reproduzco en Bucle
y previsualizo este segmento.
-
Así depuro la transición.
-
Así está bien.
-
Otra cosa que podemos hacer
en vez de usar una función predefinida
-
es crear una propia.
-
Con el botón derecho
elijo "Opciones de aceleración...".
-
Podemos personalizar
esta curva de Bézier
-
para que sea lo que quiera y guardarla
como nuevo ajuste predeterminado.
-
Hacemos clic para aplicar.
-
Así termina este instructivo
-
Si le interesa, hay otros
-
que profundizan más
en otras funciones para crear animaciones.
-
Eso es todo.
Gracias por su atención.
