Tutoriales en la Web

Efecto de flor abriéndose utilizando Swishmax

Posteado el 05. Mar, 2010 por Webi in Swishmax

En este tutorial en la web veremos como hacer este efecto en de flor abriéndose con Swishmax. Para ver el efecto pasa el mouse encima de alguna flor.

Al final podrás descargar el archivo editable es decir el .swi

PASO1

Abrimos nuestro documento de Illustrator con los dibujos de nuestra flor si se dan cuenta es una secuencia de una flor que esta cerrada y se va abriendo.

Descarga de aquí el archivo de Illustrator

Efecto de flor abriéndose utilizando Swishmax

PASO 2

Seleccionamos el primer dibujo y con el comando Ctrl + C copiamos, ahora vamos a PhotoShop y con el comando Ctrl + V pegamos.

Efecto de flor abriéndose utilizando Swishmax

PASO 3

Hacemos lo mismo con las otras dos flores.

Efecto de flor abriéndose utilizando Swishmax

PASO 4

Ahora con la herramienta Crop Tool vamos a realizar una selección que abarque solo a la primera flor una vez ya tenemos hecha la sección pulsamos la tecla Enter para que nos quede solo nuestra flor.

Efecto de flor abriéndose utilizando Swishmax

PASO 5

Desa la capa del fondo de nuestro dibujo y ahora Con el comando Alt + Shift + Ctrl + S vamos a guardar nuestro imagen Como PNG-24 y guardamos en el escritorio.

Efecto de flor abriéndose utilizando Swishmax

PASO 6

Realizamos el mismo procedimiento con las otras dos flores.

Efecto de flor abriéndose utilizando Swishmax

PASO 7

Creamos un nuevo documento de Swishmax

Efecto de flor abriéndose utilizando Swishmax

PASO 8

En la ventana Properites y al botón Movie Properties colocamos los valores que se ven en la figura.

Efecto de flor abriéndose utilizando Swishmax

PASO 9

Arrastramos nuestras 3 flores hacia nuestro documento de Swishmax.

Efecto de flor abriéndose utilizando Swishmax

PASO 10

En la ventana Outline seleccionamos nuestras 3 imágenes y vamos a darle clic derecho Grouping – Group as Movie Clip.

Efecto de flor abriéndose utilizando Swishmax

PASO 11

Ahora vamos a la ventana Properties y vamos a nombrar nuestro movie clip Flor y marcamos la opción Stop Playing at end.

Efecto de flor abriéndose utilizando Swishmax

PASO 12

Desplegamos nuestro movie clip y vemos que nuestras imágenes estan ordenadas de manera que la flor 1 es la flor mas cerrada, la flor 2 es la que le sigue y la flor 3 es la flor ya final. El orden es muy importante para lograr nuestro efecto.

Efecto de flor abriéndose utilizando Swishmax

PASO 13

Vamos a nuestra Timeline en el frame 1 en la linea de tiempo de la imagen Flor1 vamos a darle Clic Derecho y vamos a Fade – Fade In, esto nos agregara un efecto de entrada de 10 frames.

Efecto de flor abriéndose utilizando Swishmax

PASO 14

Haciendo Clic sobre el punto negro y sin soltar arrastramos hacia el número 5 para acortar el tiempo del efecto.

Efecto de flor abriéndose utilizando Swishmax

PASO 15

Hacemos el mismo procedimiento en las dos flores restantes.

Efecto de flor abriéndose utilizando Swishmax

PASO 16

Ahora haciendo clic sobre el efecto (no sobre el punto negro), con clic sostenido arrastramos hacia la derecha hasta el final del efecto de la primera flor como se muestra en la imagen.

Efecto de flor abriéndose utilizando Swishmax

PASO 17

Hacemos lo mismo con el efecto de la última flor.

Efecto de flor abriéndose utilizando Swishmax

PASO 18

Cerramos nuestro movie Clip y le damos clic derecho y vamos a Grouping – Group as Button

Efecto de flor abriéndose utilizando Swishmax

PASO 19

Vamos a la ventan Properties y renombramos al botón con el nombre de Flor y marcamos la opción Has Separate Over State y Use Bounding box for hit-state.

Efecto de flor abriéndose utilizando Swishmax

PASO 20

Desplegamos nuestro botón y nuestro gurpo Up/Down/Hi State y desplegamos nuestro Movie Clip y borramos las imágenes flor 2 y flor 3 con la tecla suprimir.

Efecto de flor abriéndose utilizando Swishmax

PASO 21

Seleccionamos la imagen Flor 1 y vamos a nuestra Timeline y seleccionamos el efecto y presionamos la tecla suprimir para borrar el efecto.

Efecto de flor abriéndose utilizando Swishmax

PASO 22

Cerramos nuestro botón y ahora vamos a arrastrar una imagen para nuestro fondo, la que ustedes deseen.

Efecto de flor abriéndose utilizando Swishmax

PASO 23

Ahora la arrastramos hacia el fondo en la ventan Outline.

Efecto de flor abriéndose utilizando Swishmax

PASO 24

Movemos nuestra flor hacia lo posición deseada y listo ya tenemos nuestro efecto terminado, podemos copiar la flor varias veces para darle un mejor acabado.

Descarga el .swi de Efecto de flor abriéndose utilizando Swishmax

Articulos relacionados:

Tags: Animaciones, Swishmax