TUTORIALES FLASH

DESVANECIMIENTO ALFA EN FLASH

Tutorial por Jmx de www.EstiloFlash.com

Antes de empezar con la explicación del tutorial, deseo expresar un cordial saludo a todos los visitantes a esta sección de flash.
En el siguiente tutorial veras la forma de cómo trabajar con la herramienta de color, en particular con el alfa de algunas imágenes, perdón el tuto es algo largo. Y sin más que agregar por el momento comenzamos.
Empezaremos por crear un documento de 250 x 250 de ancho y alto respectivamente, el color de fondo es #333333.

Si han practicado algunos de los tutoriales, estos pasos deberán de resultar sumamente fáciles. El siguiente paso es importar imágenes a la biblioteca en esta ocasión serán cuatro imágenes el tema es la naturaleza, la ruta para tal propósito es Archivo >> Importar >> Importar a biblioteca

Ahora insertar cuatro símbolos de comportamiento gráfico. Dichos símbolos albergaran a cada una de las imágenes importadas. La ruta para crear los símbolos es ctrl. F8 ó Insertar >> Nuevo símbolo. Al primer símbolo nombrarlo grafico_1 al segundo grafico_2 etc.

En este paso colocar la primera imagen en el símbolo de nombre grafico_1, colocar la imagen en coordenadas X=0 y Y=0

Repetir la acción anterior, pero ahora para la imagen dos en el símbolo grafico_2. Hacer la misma operación con la imagen 3 y la imagen 4 en los símbolos grafico_3 y grafico_4 respectivamente.

Una vez insertadas las imágenes en sus respectivos símbolos, trasladarnos a la escena ya que es en esta en donde se desarrollara la animación. Arrastrar de la biblioteca el símbolo grafico_1 y colocarlo en coordenadas X=0 yY=0.

Insertar fotograma clave en el frame 20, 25 y 45. Para realizar esta acción solamente seleccionar el frame indicado y presionar F6 ó Insertar >> Línea de tiempo >> fotograma clave

Seleccionar la imagen que esta en la escena del primer frame y en la barra de propiedades seleccionar color alfa y este reducirlo a 0%.

Repetir la misma operación pero ahora para la imagen del frame # 45 seleccionar color alfa y reducirlo a 0 %.

Los siguientes pasos están dedicados a explicar la afinación. Seleccionar el primer fotograma y en la barra de propiedades seleccionar Animar Movimiento.

El siguiente paso es seleccionar el fotograma # 25 y luego Animar Movimiento. Hasta este punto concluimos con la animación como ven no es nada complicado ¿o sí?

Insertar una segunda capa e insertar un fotograma clave (la ruta ya la saben presionar F6 ó Insertar >> Línea de tiempo >> fotograma clave) en el frame # 35 en este frame arrastrar desde la biblioteca del símbolo grafico_2 y colocarlo en coordenadas X=0 y Y=0.

En esta capa insertar fotogramas clave en los frames # 55, 60 y # 90

Para evitar algunas compilaciones ocultar la capa 1, ahora seleccionar la imagen del fotograma # 35 y en la barra de propiedades seleccionar Alfa y reducido 0 %.

Repetir la acción anterior pero ahora para la imagen del fotograma # 90.

El siguiente paso es crear la animación para la capa 2, seleccionar el fotograma # 35 y en la barra de propiedades seleccionar Animar Movimiento.

Repetir la acción anterior pero ahora para el fotograma # 60.

Insertar dos capas más, en la imagen se muestra como queda la animación final de estas dos capas. En la capa 3 a los fotogramas que se reduce el alfa son al # 70 y al # 115, y los fotogramas animados son el # 70 y el # 95. En la capa 4 los fotogramas que hay que aplicar el alfa de 0 % son al # 105 y al # 150 y los fotogramas animados son el fotograma # 105 y el # 130. Hasta este punto la animación puede darse por concluida, sin embargo, incluiré 3 pasos más para lograr un mejor resultado.

Ocultar las capas 2, 3 y 4, insertar un fotograma clave vacío presionando F7 ó Insertar >> Línea de tiempo >> Fotograma clave vacío en el frame # 46.

Seleccionar los fotogramas del 1 al 20 de la primera capa y copiarlos vía Edición >> Línea de tiempo >> Copiar fotogramas.

Insertar un fotograma clave vacío en el frame # 140 y en este pegar los fotogramas que fueron copiados. Y por ultimo seleccionar el fotograma # 159, en la barra de Acciones agregar gotoAndPlay(20);

Por fin se termino este tutorial el cual paresia hacerse eterno, espero que sea de ayuda. Envíen comentarios, sugerencias, reclamos de este y otros tutoriales. Este espacio es suyo utilícenlo.

P.D presionar ctrl. Enter para ver el resultado hasta pronto.

Descarga el Archivo Fla