Curso Básico De Flash 8 (Animación Con Máscaras) Parte 22

Animación con máscaras convertidas

Las animaciones que involucran la intervención de capas convertidas en máscaras, son de suma importancia en animaciones básicas tanto de forma como de movimiento. Las animaciones de máscaras muestran solamente una parte de una imagen, texto  o forma vectorial. En el ejemplo que a continuación se te presenta trabajaras con una combinación de animaciones de movimiento y forma en una misma capa, posteriormente esta capa será transformada en una capa de máscara. La capa máscara estará aplicara a una imagen importada a la Escena.

• El total de la animación como en el caso anterior se trabajara en la Escena. Crear un documento de Propiedades ctrl. + J, las dimensiones son 500 * 400 píxeles de ancho y alto, color de fondo #FFFFFF, velocidad de fotogramas 12 fps.

• A la primera capa de la Escena cambiarle el nombre por el de imagen. Después importar ctrl. + R una imagen de dimensiones 500 * 400 píxeles de ancho y alto, colocar la imagen importada en coordinadas X: 0.0 y Y: 0.0.

• Insertar una segunda capa y cambiarle el nombre a esta por el de máscara. Aquí es en donde se trabajara propiamente con la combinación animada de movimiento y forma. Dibujar en el primer fotograma un Rectángulo R, presionar el icono de Dibujo de objeto o simplemente la letra J en el teclado. El rectángulo carecerá de borde y no importa el color de relleno porque este no se observara en la presentación del archivo swf final. Las dimensiones son 40 * 400 píxeles de ancho y alto. Colocar esta forma vectorial en coordenada X: -40.0 y Y: 0.0.

• Seleccionar el frame número 20 e insertar un fotograma clave F6. Seleccionar el rectángulo de este fotograma y cambiarlo a nuevas coordenadas X: 500.0 y Y: 0.0.

• Seleccionar un fotograma entre el número 1 y el número 19, en el Panel de Propiedades seleccionar la opción Animar Movimiento.

• Insertar un fotograma clave F6 en el frame número 40, seleccionar el rectángulo de este fotograma y luego cambiar las dimensiones a 500.0 * 400.0 píxeles y las nuevas coordenadas son X: 0.0 y Y: 0.0.

• Crear ahora la animación de tipo Forma, seleccionar un fotograma entre el número 20 y el número 39. en el panel de Propiedades seleccionar la opción de Animar Forma. De esta forma el rectángulo crecerá hasta cubrir por completo la imagen.

• Para finalizar la animación insertar un fotograma clave F6 pero ahora en el frame número 60. Seleccionar el rectángulo del fotograma 60 y cambiarlo a coordenadas X: -500.0 y Y: 0.0.

• Seleccionar un fotograma entre el número 40 y el número 59. En el Panel de Propiedades optar por la opción Animar Movimiento, con esta animación el rectángulo se desplazara al lado izquierdo y al mismo tiempo la imagen se estará ocultando.

• Lo único que falta por hacer es transformar la capa en donde esta insertada la animación a Capa de tipo máscara. Hacer clic con el botón derecho del ratón sobre la capa máscara, en el menú emergente seleccionar la opción de Máscara.

• Cuando cambias una capa a la opción de máscara los iconos de estas cambian a un color y de aspecto. Finalmente insertar un fotograma F5 en el frame número 60 de la capa imagen. Ahora ya esta lista la animación y puedes presionar sin ningún inconveniente ctrl. + Enter y ver como trabaja la animación final.

Hasta aquí quedan concluidas las explicaciones sobre las Herramientas Básicas de trabajo en Macromedia Flash 8, también se dan por concluido las Animaciones Básicas que NO involucran Código ActionScript.

Curso Básico De Flash 8 Parte 1

Curso Básico De Flash 8 Parte 2

Curso Básico De Flash 8 Parte 3

Curso Básico De Flash 8 Parte 4

Curso Básico De Flash 8 Parte 5

Curso Básico De Flash 8 Parte 6

Curso Básico De Flash 8 Parte 7

Curso Básico De Flash 8 Parte 8

Curso Básico De Flash 8 Parte 9

Curso Básico De Flash 8 Parte 10

Curso Básico De Flash 8 Parte 11

Curso Básico De Flash 8 Parte 12

Curso Básico De Flash 8 Parte 13

Curso Básico de flash 8 Parte 14

Curso Básico De Flash 8 Parte 15

Curso Básico De Flash 8 Parte 16

Curso Básico De Flash 8 Parte 17

Curso Básico De Flash 8 Parte 18

Curso Básico De Flash 8 Parte 19

Curo Básico De Flash 8 Parte 20

Curo Básico De Flash 8 Parte 21

Artículos relacionados:

• Curso Básico De Flash 8 (Animación Con Imágenes Importadas) Parte 19
• Curso Básico De Flash 8 (Animación De Formas Vectoriales) Parte 20
• Curso Básico De Flash 8 (Interpolación De Movimiento) Parte 16
• Curso Básico De Flash 8 (Edicón De Movimiento) Parte 13