Hola ínter-nauta el mundo Flash, gracias por segur visitando y comentando los tutoriales aquí publicados. En esta ocasión tengo para ti una animación que resulta vistosa una vez publicado el tutorial. El trabajo es muy sencillo y rápido de realizar si se tiene algo de experiencia en el manejo de capas jajajaj, el tutorial esta realizado en FLASH “8”. GOOD LUCK!! ¿Comenzamos?.
1-. Hacer un documento (ctrl. + J) de las siguientes propiedades.
a)-. 300 * 360 píxeles de ancho y alto respectivamente.
b)-. Usar como color de fondo #FFFFFF.
c)-. Velocidad de fotograma 30 fps.
2-. Crear un símbolo (ctrl. + F8).
a)-. Nombrarlo animación.
b)-. Dar como Tipo Clip de película.
3-. Realizar en este símbolo una pequeña animación.
a)-. Dibujar un rectángulo sin borde y utilizar como color de relleno #FF0000.
b)-. Las dimensiones son 80.0 * 1.0 píxeles de ancho y de alto respectivamente.
c)-. Colocar la figura en coordenadas X = 0.0 y Y = 0.0.
4-. Insertar un fotograma clave (F6) en el frame # 10.
a)-. Modificar las características del la figura en cuanto a sus dimensiones, estas tendrán que ser 80.0 * 80.0 píxeles de ancho y alto respectivamente.
b)-. Colocar la figura en coordenadas X = 0.0 y Y = 0.0.
5-. Seleccionar algún fotograma entre el 1 y el 9.
a)-. En la barra de propiedades seleccionar Movimiento en la opción Animar.
6-. Seleccionar el fotograma # 10.
a)-. Abrir la barra de Acciones – fotograma y escribir
stop();
7-. Crear un símbolo (ctrl. + F8).
a)-. Nombrarlo colocar animación.
b)-. Dar como Tipo Clip de película.
8-. Cambiar el nombre de la capa por el de animación-1.
a)-. Arrastrar desde la biblioteca varias veces el símbolo animación, y colocarlo en posiciones especificas.
b)-. La primer animación colocarla en coordenadas X = 0.0 y Y = 0.0.
c)-. La segunda animación en coordenadas X = 160.0 y Y = 0.0. La 3 en coordenadas X = 80.0 y Y = 80.0. La 4 en coordenadas X = 240.0 y Y = 80.0. La 5 en coordenadas X = 80.0 y Y = 160.0. La 6 en coordenadas X = 240.0 y Y = 160.0. La 7 en coordenadas X = 0.0 y Y = 240.0. La 8 en coordenadas X = 160.0 y Y = 240.0. La 9 en coordenadas X = 0.0 y Y = 320.0. Y la 10 en coordenadas X = 240.0 y Y = 320.0.
9-. Insertar una segunda capa y nombrarla Animación-2.
a)-. Ocultar la capa animación 1.
b)-. Arrastrar nuevamente desde la biblioteca el símbolo animación y colocarlo en lugares precisos.
c)-. La animación 1 colocarla en coordenadas X = 80.0 y Y = 0.0. La 2 en coordenadas X = 240.0 y Y = 0.0. La 3 en coordenadas X = 0.0 y Y = 80.0. Y la 4 en coordenadas X = 160.0 y Y = 80.0.
10-. Insertar una tercera capa y cambiar el nombre por el de animación-3.
a)-. Ocultar la capa animación-2.
b)-. Arrastrar de des la biblioteca nuevamente el símbolo animación y colocar lo en coordenadas especificas.
c)-. La animación 1 colocarla en coordenadas X = 0.0 y Y = 160.0. La 2 en coordenadas X = 160.0 y Y = 160.0. La 3 en coordenadas X = 80.0 y Y = 240.0. Y la 4 en coordenadas X = 240.0 y Y = 240.0.
11-. Insertar la ultima capa y nombrarla animación-4.
a)-. Ocultar la capa animación-3.
b)-. Arrastrar desde la biblioteca el símbolo animación y colocarlo en coordenadas especificas.
c)-. La primer animación colocarla en coordenadas X = 80.0 y Y = 320.0. Y la segunda en coordenadas X = 160.0 y Y = 320.0.
12-. Distribuir en diferentes frames cada una de las animacións.
a)-. La animación-4 colocarla en el frame # 15.
b)-. La animación-3 colocarla en el frame # 4.
c)-. La animación-2 colocarla en el frame # 9.
d)-. Seleccionar el frame # 15 de la capa animación-4 y en la barra de Acciones – fotograma insertar un stop();
Nota insertar fotogramas (F5) en el frame # 15 de las capas 1, 2 y 3.
13-. Regresar a la Escena y cambiar el nombre de la capa por el de imagen.
a)-. Importar (ctrl. + R) una imagen.
a)-. Colocar la imagen en coordenadas X = 0.0 y Y = 0.0.
14-. Insertar una capa y nombrarla máscara.
a)-. Ocultar la capa imagen.
b)-. Arrastrar desde la biblioteca el símbolo colocar animación.
c)-. Colocar el símbolo en coordenadas X = 0.0 y Y = 0.0.
15-. Convertir la capa en máscara.
a)-. Seleccionar la capa máscara y hacer clic con el botón derecho del ratón, en el menú desplegado seleccionar la opción Máscara.
Y con este paso se da por concluido el tutorial. Well done!!.
P.D. Presionar ctrl. + Enter para visualizar el resultado del trabajo. Se agradecerán y se tomaran en cuenta los comentarios y sugerencias emitidos sobre este y otros tutoriales. Hasta pronto.
Visualizar archivo swf de este tutorial
Descarga el archivo fla de este tutorial
Artículos relacionados:
Está de locos este tutorial, lo pude hacer rebien,lo único es que me queda una duda, puedo modificar lo que hice dentro de los clips de película?, lo digo porque haciéndolo, mi trabajo se muestra muy rápido y no se vuelven a repetir los cuadros
esta muy bien, pero puede hacerse que cargue varias imagenes aleatorias con el mismo efecto
Esta bien el efecto pero 2 cosas:
* No tiene el efecto completo (con el efecto alpha y la segunda parte que es el mismo efecto), ya que mis conocimientos de flash estan bajos y pensè que estaria completo o sea donde se colocaria: en una nueva escena o en la misma.
* es un error: Cuando dibujas el rectangulo que lo vas a convertir en una animacion pequeña, cuando seleccionas un fotograma del 1-9 y en propiedades colocas en movimiento, no sale la flecha sino rayas consecutivas (——–), en vez de movimiento coloquè de forma y si funcionò como debería, el de movimiento solo hacia que el rectangulo pequeño se moviera
Como hago para cargar varias imagenes con el mismo efecto? como dice Daniel
esta muy bien porqu yo no sabia nada de conocimientos sobr mascaras, muchas gracias
ESTA BIEN CHIDA LAS PAGINAS Y ESPERO Y ME ENVIEN MÀS EJEMPLOS A MI CORREO LES AGRADECERIA MUCHISIMO, YA QUE ESTOY LLEVANDO UN CURSO Y QUISIERA SABER MUCHISIMO HACERCA DE FLASH
gracias mano por ejemplo
garcias mano me salvaste en un examen sorpresa
Hola mira mandame tus tutoriales, esta bien la pagina sigue asi, estoy estudiando flas cs3 pero como soy nuevo, ya casi termino el curso pero necesito mucha practica para complementar con los otros programas de diseño web, bien te lo agradeceria. con gracias o con mi abuela latinoencanarias@gmail.com