Taller Webmaster

Tutoriales para Webmasters

Bienvenido a Taller Webmaster, donde encontrarás la mejor información sobre tutoriales y recursos para webmasters!

Ingreso de Usuario

Recuperar contraseña

Registro de Usuario

Publicidad

Descubrir Contorno de Imagen con Mascara Adobe Flash

Mascara con Adobe Flash Contorno de Imagen

 

Tutorial por JMX

Veremos como utilizar una mascara para descubrir una imagen partiendo desde un trazado lineal de la misma.

En el siguiente tutorial flash aprenderás hacer una animación de una mascara la cual descubrirá la silueta de una imagen. También se explicara como sincronizar la animación de la máscara con la animación de un símbolo el cual contendrá el relleno de la silueta (alfa de 0% a 100%), el total de la animación se llevara a cado en la Escenas aunque también se puede realizar en un Clip de película. Sin más ¿comenzamos? Good luck!!.

1-. Primero hacer un documento (ctrl. + J), con las siguientes propiedades.

a)-. Dimensiones del documento 300 * 310 píxeles de ancho y alto.

b)-. Color de fondo #FFFFFF.

c)-. Usar como velocidad de fotogramas 15 fps.

Propiedades del Documento Flash

2-. Crear el primero de dos símbolos (ctrl. + F8).

a)-. Nombrarlo imagen silueta.

b)-. Seleccionar en la opción Tipo Gráfico.

Crear Grafico Silueta

3-. Ubicado en el símbolo dibujar la silueta de una imagen. En este caso la silueta es de la sirenita.

a)-. Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.

Colocar la Imagen en 0,0

4-. Caer el segundo símbolo (ctrl. + F8).

a)-. Nombrarlo imagen relleno.

b)-. Seleccionar en la opción Tipo Gráfico.

Crear Grafico de Relleno de Imagen

5-. Rellenar con color el símbolo imagen silueta y copiar este relleno y pegarlo en el símbolo imagen relleno.

a)-. Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.

Colocar Imagen Relleno en 0,0

6-. Regresar a la Escena para comenzar propiamente con la animación. Primero hacer la animación del color alfa.

a)-. Cambiar el nombre de la capa por el de imagen.

b)-. Seleccionar el frame # 27 e insertar un fotograma clave vacío (F7).

c)-. Arrastrar desde la biblioteca el símbolo imagen relleno.

d)-. Colocar el símbolo en coordenadas X = 17.0 y Y = 15.0.

Colocar Animacion Alfa

7-. Este paso es básico solamente insertar un fotograma clave (F6)

Crear Fotograma Clave

8-. Seleccionar el fotograma 27 y luego en la barra de propiedades Animar Movimiento.

Animar Movimiento

9-. Tener cuidado en este paso, seleccionar la imagen del fotograma 27 (no el fotograma).

a)-. El la barra de propiedades seleccionar Color Alfa 0 %.

Seleccionar Color Alfa 0%

10-. Insertar una segunda capa y nombrarla silueta.

a)-. Arrastrar desde la biblioteca el símbolo imagen silueta.

b)-. Colocar el símbolo en coordenadas X = 17.0 y Y = 15.0.

Colocar Solueta

11-. Insertar una tercera capa y cambiar el nombre por el de máscara.

a)-. Dibujar una forma de Óvalo (herramienta O), sin borde y usar cualquier color de relleno #FF0000.

b)-. Tamaño del óvalo 20.0 * 20.0 de ancho y alto.

c)-. Colocar esta forma en parte inferior pero fuera de la imagen coordenadas X = 7.0 y Y = 280.0.

Colocar Coordenadas en Mascara

12-. Insertar un fotograma clave (F6) en el frame # 30.

a)-. Seleccionar el óvalo y deformarlo de tal forma que cubra por completo la imagen (sirenita).

Mascara en Sirenita

13-. Seleccionar el fotograma 1 de la capa máscara, y luego hacer la animación de Forma en la barra de Propiedades.

Animar Forma

14-. Por último seleccionar la capa máscara, hacer click con el botón derecho del ratón.

a)-. En el menú desplegado seleccionar la opción Máscara.

Con este paso queda concluido el tutorial, well done!!.

Aplicar Mascara

P.D. Presionar ctrl. + Enter para visualizar el resultado del trabajo realizado, como te pudiste dar cuenta los pasos son bastante básicos.

El resultado final es el siguiente:

Puedes descargar el archivo Adobe Flash acá: Archivo Flash 8 zipeado

:) Hasta muy pronto :) !!

Comentarios de Descubrir Contorno de Imagen con Mascara Adobe Flash

↑ Tutorial

  • iris

    iris

    2008-08-08 11:15

    Muy interesante y practico