Este documento presenta tres ejemplos de animaciones básicas en Flash: 1) Hierba creciendo mediante la repetición y variación de una animación de hoja, 2) Puesta de sol usando el movimiento y cambio de color de un sol, montañas y fondo, 3) Mariposa volando a lo largo de una guía de movimiento con batido de alas. Explica los pasos para crear cada animación con imágenes y descripciones.

1. PRACTICASFLASH
 Foros
 Blog
 Tutoriales
 Cursos
 Videotutoriales
 Comic
 Publica un tutorial
 ¿Qué es Cristalab?
 Tags
 Ejemplos
 Contáctanos
 Anime

¿Olvidaste tu usuario o clave? « Recordarme
registrate
Nombre de usuario
Email
Contraseña deseada
Aceptas los terminos
Cerrar
 Tutoriales
 Interpolación de movimiento y guias en Flash

2. Interpolación de movimiento y guias en
Flash
Por Zarzamora el 16 de Septiembre de 2005 con 627,483 visitas
Flash Básico Otros tutoriales por Zarzamora.
Nota: Los Archivos del Tutorial están en formato Flash MX 2004, de modo que si tienes el
Flash MX no podrás abrirlos .
1. Hierba Creciendo
Una de las animaciones con las que comencé fué ésta, se trata de crear el efecto de la hierba
creciendo, realmente es muy sencillo y según la complejidad que le pongas se puede lograr
un buen efecto.
Para comenzar dibujaremos una de las hojas con nuestra herramienta preferida, yo lo he
hecho con la herramienta línea y luego le he dado curvas a los lados obteniendo esto:
Imágen 01
Luego, este dibujo lo convierto en Movie Clip (F8)
Imágen 02
Dentro del MovieClip hago la siguiente animación:
En el primer Frame dejo la hierba en su ubicación original, en el último la pongo más arriba
y finalmente en el último KeyFrame, en las acciones de este le pongo un stop (Esc+ST).

3. Imágen 03
Imágen 04
Listo, ya tenemos nuestra hoja base para hacer "crecer la hierba". Después de tenerla lista
creamos otro Movie Clip para poder insertar ésta animación cada vez que lo necesitemos
dentro de nuestras películas.
Dentro del Movie Clip lo que hacemos es arrastrar la hoja que ya creamos (hierba01) todas
las veces que necesitemos, para crear un efecto interesante podemos cambiarles el color
haciendo un clic en el Movie Clip y cambiándole el Tinte en el Panel de Propiedades
Imágen 05
También podemos cambiarle el tamaño a cada una de ellas y alinearlas de diferentes formas
para que se vea que unas crecen más que otras.
Imágen 06
Y este es el resultado final:

4. Hierba.swf
Ver ejemplo
2. Puesta de Sol
Para hacer una puesta de sol trabajaremos con tres elementos, el primero es el fondo, el
segundo son las montañas y el tercero es el sol.
Para hacer el sol, primero dibujamos un círculo, el cual le daremos relleno radial, para el
primer color le damos un amarillo bien intenso, y para el segundo, elegimos el mismo
amarillo pero le damos una transparencia cero (alpha = 0)
Imágen 07
Para el Fondo elegimos varias tonalidades de azules para hacer un cielo en un día soleado
Imágen 08

5. Finalmente dibujamos las montañas, el resultado final de la imágen sin animación es este.
Hay que recordar que el orden de las capas es montañas, sol, fondo (de arriba hacia abajo)
ver imágen 11, ésto para que se vea que el sol se oculta detrás de las montañas.
Imágen 09
Listo, ahora si a animar nuestro paisaje. Lo primero que hay que hacer es mover el sol, para
ello podemos también convertirlo en un MovieClip y darle a éste el movimiento de tal
forma que en el KeyFrame éste no se vea es decir, que quede oculto tras las montañas.
Luego, al fondo le vamos a cambiar el color, entonces tenemos que en el primer Frame es
azul claro, insertamos un KeyFrame (éste debe terminar en el mismo Frame en el que el sol
se movió tras las montañas) y allí cambiamos el relleno a uno de azules más obscuros.
Luego vamos al Panel Propiedades y en Tween seleccionamos Shape.
Imágen 10
Para finalizar y darle un mejor efecto, a las montañas también le cambiamos el relleno, en
el primer frame el color más claro está ubicado a la izquierda donde está el sol, como este
ya se oculto, pondremos un verde más obscuro, e igual que en el fondo, vamos al Panel
Propiedades y en Tween seleccionamos Shape.
La línea del tiempo se verá algo así:

6. Imágen 11
Y el resultado final es éste:
PuestaSol.swf
Ver ejemplo
3. Mariposa Volando
Y para finalizar con estas animaciones, la última y la más sencilla, una mariposa volando,
para iniciar dibujamos una mariposa, yo utilice una fotografía como base.
Imágen 12
Luego se convierte en un Movie Clip (F8), una vez dentro de éste, se hace una pequeña
animación para dar el efecto del movimiento de alas, para ello insertamos un KeyFrame
más o menos en el frame 5 (las mariposas baten las alas rápidamente y por eso la animación
debe ser corta) y allí cambiamos el tamaño horizontal de la mariposa para que quede de la
siguiente forma.

7. Imágen 13
Y la línea del tiempo se ve así:
Imágen 14
Después de tener listo el Movie Clip, vamos a la escena, allí lo que hacemos es crear una
línea guía para que la mariposa se desplace por ella, ésto se logra haciéndo clic en el ícono
de Add Motion Guide ubicado en la parte inferior del panel de los layers.
Imágen 15
Una vez allí dibujamos una línea por la cual se desplazará la mariposa.
Imágen 16

8. Para hacer la animación, en el primer frame ubicamos la mariposa al comienzo de la línea,
y en el último KeyFrame, ubicamos la mariposa al final de la línea, finalmente al hacer el
Motion Tween chequeamos la opción Orient to Path y listo, éste es el resultado:
Mariposa.swf
Ver ejemplo
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el
Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Descargar Archivo
Envia un comentario (0)
 Animación con easing y sin código en Flash 8
 Crear una animación de forma con guía de movimiento en Flash
 Animación usando rotoscopia con Flash
Publica tu comentario
El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios,
puedes hacerlos en el foro
Entra al foro y participa en la discusión
o puedes...
¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

9. Inicia sesión
¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?
Registrate