02 Elabora un Display con máscaras en HTML5 con Adobe Animate (Minutado y con materiales)
En este segundo tutorial de nuestro curso de Adobe Animate, enfocado a la elaboración de Publicidad Display, partimos de un archivo PSD, cuyas capas exportamos como PNG para comenzar a trabajar. En esta ocasión, la principal novedad de este ejercicio radica en que trabajamos con máscaras.
Los contenidos se organizan en el tiempo del siguiente modo:
Pero antes, descárgate el archivo de Photoshop https://bit.ly/3jaMRnn
00:00:00 - 00:07:30 La primera dificultad nos la plantea el PSD que tenemos como archivo de partida. Vemos que es imposible importar de un modo satisfactorio el documento a Animate, ya que no reconoce el contenido de cada una de las capas de nuestro Photoshop. Es por eso, que te enseñamos a hacer una exportación rápida en PNG de cada una de las capas de Photoshop a una carpeta.
00:07:30 - 00:08:35 Importamos todas las imágenes a nuestro escenario y las distribuimos por capas.
00:08:35 - 00:13:35 Nos basamos en una capa guía para organizar todos los elementos que posteriormente vamos a animar. También ajustamos la capa que usaremos de fondo a la anchura y altura de nuestro escenario Animate.
00:13:35 - 00:15:27 Animamos el fondo con un alfa.
00:15:27 - 00:18:45 Animamos con un alfa tanto el Imac, como su teclado.
00:18:45 - 00:24:43 AQUÍ TIENES LA PRIMERA GRAN NOVEDAD, RESPECTO AL PRIMER EJERCICIO. Se trata del trabajo con máscaras. No olvides que para que funcione, la capa elegida para desempeñar el rol de máscara, debe contener las propiedades "máscara" y que la imagen que se verá a través de la máscara, deberá contener la propiedad "con máscara". Pero, ¿Cómo saco las propiedades de la capa? SOLO TIENES QUE PONERTE SOBRE LA CAPA Y USAR EL BOTÓN DERECHO DEL RATÓN.
00:24:43 - 00:32:40 En este intervalo de tiempo animamos la parte de las palomas. Son dos palomas. A una le aplicamos una máscara fija, donde es la paloma la que se dirige a ella. Y a la otra, sólo le aplicamos un alfa y un cambio de posición.
00:32:40 - 00:41:53 Es el turno del guepardo, sus salpicaduras y reflejo. Esta parte nos permite entender, que una máscara puede tener varias capas enmascaradas.
00:41:53 - 00:52:24 En este momento, es cuando entra en juego el caballo y sus salpicaduras. Se vuelve a trabajar una máscara para mostrar al caballo. Sin embargo, las salpicaduras las trabajamos de forma independiente y forzando un efecto rebote, ya que jugamos con la escala.
00:52:24 - 00:57:10 Es la última máscara de este ejercicio. En esta ocasión, para el chorro de agua que sube por el tronco del árbol. El proceso es siempre el mismo, pero lo volvemos a repetir por si no ha quedado claro aún.
00:57:10 - 01:04:08 Añadimos los textos y LO MÁS IMPORTANTE, CONFIGURAMOS NUESTRO PRIMER BOTÓN DENTRO DE ADOBE ANIMATE.
01:04:08 - 01:07:21 Animamos los textos.
01:07:21 - 01:08:11 Guardamos el documento y probamos la película, viendo como quedaría en un HTML.