Tutorial Flash CS3 (Transparencia Mascara)

Efecto Trasparencia con (Mascara)

Bienvenidos a mi tutorial acerca de un efecto sencillo en Flash para que se diviertan en casa. Es una divertida animación, consiste en hacr que una imagen con una alfa inferior a la original sea descubierta por medio de una forma geométrica. Ya sea un rectángulo, cuadrado o un circulo, como ustedes deseen. Con el fin que la imagen original sea visible por completo. Este tutorial no cuenta con una sola línea de código ACTIONSCRIPT de esta forma la explicación será más fácil de entender.

Para que te des cuenta de todo, Comencemos!! Espero te diviertas J

1 Paso

Comenzar por crear un documento con las siguientes propiedades (Ctrl +J), colocar como dimensiones 350*380 pixeles de ancho y alto.

a.       Insertar en la opción de Color de fondo #FFFFFF.

b.      Colocar como velocidad de fotogramas 25 Fps.

Paso 2

Crear el único símbolo (Ctrl +F8). Nombrar a este símbolo modelo.

a.       En la casilla de Tipo seleccionar la opción Grafico.

Paso 3

Ubicado en el símbolo Importar (Crtl +R), una imagen de dimensiones 350.0*380.0 pixeles de ancho y alto.

a.       Colocar la imagen importada en coordenadas X:0.0 Y:0.0

Paso 4

Regresar a la Escena para continuar con la animación, la cual quedara establecida en tres diferentes capas. Cambiar el nombre a la capa 1 por el nombre de Imagen Opaca.

a.       Invocar el panel de Biblioteca (Ctrl + L), en este panel podras observar que cuenta con dos diferentes símbolos uno es la imagen (GIF, JPEG O PNG) dependiendo de que tipo de imagen fue la que importaste. El segundo símbolo es el de tipo grafico en el cual fue importada la imagen.

b.      Arrastrar desde la biblioteca el símbolo grafico, y luego colocarlo en coordenadas X:0.0 Y:0.0.

Paso 5

Seleccionar la imagen (No seleccionar el fotograma), en el panel de propiedades seleccionar las casillas de Color: Alfa y después reducir el porcentaje a 28%.

Paso 6

Insertar una segunda capa y cambiarle el nombre por el de IMAGEN ORIGINAL.

a.       Volver arrastrar desde la biblioteca el Símbolo Grafico, colocar el símbolo en coordenadas X: 0.0 Y: 0.0.

Paso 7

Insertar las tercera capa sustituir este nombre por el de ANIMACIÓN. Como el nombre lo indica en esta capa quedara establecida una animación de movimiento.

a.       Seleccionar la herramienta de Rectangulo (R), O si deseas otra figura geométrica no interesa. Dibujar el rectángulo sin borde y usar como Color de relleno #0000FF, las dimensiones son 350.0 * 380.0 pixeles.

b.      Este rectángulo colocarlo en coordenadas X: -350.0 Y: 0.0.

Paso 8

Insertar un fotograma clave (F6) en el frame (Fotograma) #50.

a.       Seleccionar el rectángulo de esta forma y colocarlo en coordenadas X: 350.0 Y: 0.0

Paso 9

Para finalizar la animación solamente falta seleccionar algún fotograma entre el numero 1 y el numero 49 de la capa ANIMACIÓN.

a.       En el panel de Propiedades seleccionar la opción Animar: Movimiento.

Paso 10

En este punto insertaras en el frame (Fotograma) #50, primero seleccionar los frames #50 de las capas Imagen Original y la capa Imagen Opaca. Hacer clic con el botón derecho de tu mouse, después seleccionar la opción Insertar fotogramas.

Paso 11

Solamente hace falta crear a la capa de animación en Mascara, hacer clic sobre el nombre de la capa ANIMACIÓN con el botón derecho del mouse.

a.       En el menú desplegado seleccionar la opción de Mascara.

Paso 12

Con la acción anterior la línea de tiempo tomara una apariencia como la que se muestra en la siguiente animación..

De esta forma concluyó mi primer tutorial en Flash, Espero que no hayas tenido complicación alguna. MUCHAS GRACIAS! J

Para finalizar nuestro efecto en Adobe Flash CS3 y observar con detalle el efecto, haz lo siguiente:

• Presiona ( Ctrl + Enter ) Y carga de una.

Este es el resultado de mi efecto en Flash CS3:

Disculpen el color pero es que se distorsiona al pasarlo a GIF.

A continuación el link para que lo descarguen :

http://www.4shared.com/file/QSoEmZNQ/MascaraTrasparencia.html

Oscar Murillo Losada

Cod. 9010210088

Ing de Sistemas II Semestre

Informatica I

Universidad CORHUILA.