Tutoriales en la Web

Efecto peelaway

Posteado el 04. Dec, 2010 por tuto in Flash

Esto es lo que aprenderás a realizar en este tutorial en Flash. Queremos agradecer a Edna Rheiner que una vez más nos hizo llegar un tutorial

PASO 1
Creamos un nuevo documento de Flash (ActionsScript 2.0)

PASO 2
Vamos a la ventana Properites y aplicamos los valores que se ven en la imagen.

PASO 3
Con la herramienta Elipse Tool creamos un círculo con un color gris oscuro.

PASO 4
Ahora vamos a modificar el círculo con la herramienta Subselect tool (puntero blanco) para que nos quede como se ve en la imagen.

PASO 5
Con la herramienta Pluma dibujamos la parte interna del Sticker.

PASO 6
Ahora le aplicamos algunas sombras y degradados para obtener un dibujo como el que se ve en la imagen.

PASO 7
Creamos una nueva capa y dentro de ella creamos un nuevo sticker solo que este con el doblez un poco más pequeño que en anterior.

PASO 8
Ahora creamos una última capa y en ella dibujamos un círculo completo que simulara el Sticker completo.

PASO 9
Creamos una nueva capa sobre todas las demás y con la herramienta rectangle tool dibujamos un rectángulo con un color de relleno celeste como se ve en la imagen.

PASO 10
Damos clic derecho sobre el rectángulo y vamos a la opción Convert to symbol…. Luego en la ventana seleccionamos la opción Button y le colocamos el nombre de botón.

PASO 11
Damos doble clic sobre el botón para entrar en el y con la herramienta Text Tool escribimos el texto Click Aquí.

PASO 12
Regresamos a la Scene 1 y vamos a la capa 1 y en el frame 1 damos clic derecho y vamos a la opción Create Motion Tween.

PASO 13
Vamos al frame 20 y presionamos la tecla F6 para crear movimiento.

PASO 14
El punto de inicio del Layer 2 lo vamos a mover hacia el Frame no 5.

PASO 15
Igual como hicimos con el layer 1 le aplicamos un Create Motion Tween y le aplicamos un movimiento hasta el frame No 15.

PASO 16
El punto de inicio del Layer 3 lo movemos hacia el frame 10.

PASO 17
Al Layer del botón le agregamos un Motion Tween del frame 1 al 20.

PASO 18
Por ultimo creamos una nueva capa y la nombramos actions.

PASO 19
Nos posicionamos en el frame 1 y presionamos la tecla F9 y en la ventana Actions agregamos el siguiente código Actions Script.

stop();

PASO 20
Agregamos Stops en los frames 10 y 20.

PASO 21
Seleccionamos el botón y presionamos la tecla F9 y en la ventana Actions agregamos el siguiente código Actions Script.

Code block

on (press) {
	gotoAndPlay(2);
}
on (rollOut) {
	gotoAndPlay(11);
}

PASO 22
Listo ya tenemos nuestro efecto terminado.

Descarga el editable de Efecto Peelaway en Flash

Articulos relacionados:

Tags: Flash, peelaway flash, Tutoriales Flash