Tutorial Adobe Flash CS3 Efecto De Transparencia Con Máscara. Hola nuevamente, en esta ocasión me encuentro ante ti con el fin de presentarte una divertida animación. Esta animación consiste en hacer que una imagen con una alfa inferior a la original sea descubierta por medio de una forma geométrica, hasta 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. Sin más preámbulos ¡comenzamos! 
Good luck:)
1)-. Comenzar por crear un documento con las siguientes propiedades (ctrl. + J), colocar como dimensiones 350 * 380 píxeles de ancho y alto.
a)-. Insertar en la opción de Color de fondo #FFFFFF.
b)-. Colocar como Velocidad de fotogramas 25 fps.
2)-. Crear el único símbolo (ctrl. + F8). Nombrar a este símbolo modelo.
a)-. En la casilla de Tipo seleccionar la opción Gráfico.
3)-. Ubicado en el símbolo Importar (ctrl. + R), una imagen de dimensiones 350.0*380.0 píxeles de ancho y alto.
a)-. Colocar la imagen importada en coordenadas X: 0.0 Y: 0.0.
4)-. Regresar a la Escena para continuar con la animación, la cual quedara establecida en tres diferentas capas. Cambiar el nombre a la capa 1 por el de imagen opaca.
a)-. Invocar el panel de Biblioteca (ctrl. + L), en este panel podrás 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 gráfico en el cual fue importada la imagen.
b)-. Arrastrar desde la biblioteca el símbolo gráfico, y luego colocarlo en coordenadas X: 0.0 Y: 0.0.
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 15%.
6)-. Insertar una segunda capa y cambiarle el nombre por el de imagen original
a)-. Volver arrastrar desde la biblioteca el símbolo gráfico, colocar el símbolo en coordenadas X: 0.0 Y: 0.0.
7)-. Insertar la 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 rectángulo (R), dibujar un rectángulo sin borde y usar como Color de relleno #0000FF, las dimensiones son 350.0 * 380.0 píxeles.
b)-. Este rectángulo colocarlo en coordenadas X: -350.0 Y: 0.0.
8)-. Insertar un fotograma clave (F6) en el frame # 50.
a)-. Seleccionar el rectángulo de este fotograma y colocarlo en coordenadas X: 350.0 Y: 0.0.
9)-. Para finalizar la animación solamente falta seleccionar algún fotograma entre el número 1 y el número 49 de la capa animación.
a)-. En el panel de Propiedades seleccionar la opción Animar: Movimiento.
10)-. En este punto insertaras fotogramas en el frame #50, primero seleccionar los frames #50 de las capas imagen original y la capa imagen opaca. Hacer clic con el botón derecho del ratón, después seleccionar la opción Insertar fotogramas.
11)-. Solamente falta crear a la capa animación en Máscara, hacer clic sobre el nombre de la capa animación con el botón derecho del ratón.
a)-. En el menú desplegado seleccionar la opción de Máscara.
12)-. Con la acción anterior la línea de tiempo tomara una apariencia como la que se muestra a continuación en la imagen.
De esta forma queda concluido el tutorial espero que no hayas tenido complicaciones para seguir a detalle este tutorial. ¡Well doney!
P.D. Presionar ctrl. + Enter y ver como que do la animación, el ejemplo SWF que te presento a continuación tiene una pequeña variante espero que no te moleste por no explicar esta parte. No dudes en dejar tus comentarios acerca de este y otros tutoriales que en esta página Web puedes encontrar, Hasta Muy Pronto:)
Descarga Archivo FLA De Este Tutorial
No hay comentarios:
Publicar un comentario