Cargador Back to the Future

Posteado el 18. Oct, 2010 por tuto in Swishmax

En este tutorial aprenderemos a crear un cargador basados en la pelicula Back to the Future, espero los disfruten.

PASO 1

Creamos un nuevo documento de Swishmax en blanco (Blank Movie).

Back to the Future

PASO 2

Vamos a la ventana Properties – Botón Movie Properties y en la ventana Colocamos los valores que se ven en la imagen.

Back to the Future

PASO 3

Con la herramienta Rectangle tool creamos un cuadrado que cubra toda nuestra película.

Back to the Future

PASO 4

Ahora arrastramos a nuestro documento la imagen de una línea de llamas la cual creamos anteriormente en Photoshop.

Back to the Future

PASO 5

Vamos a la ventana Online y agrupamos el fuego en un Movie clip.

Back to the Future

PASO 6

En la ventana Properties Al movie Clip le colocamos el nombre de fuego y marcamos las opciónes Stop playing at end y Use bottom object as mask.

Back to the Future

PASO 7

Desplegamos nuestro movie clip y seleccionamos la imagen del fuego y con el comando Ctrl + C para copiar y Ctrl + Shift + V para pegar en el mismo lugar duplicamos la imagen del fuego.

Back to the Future

PASO 8

Ahora damos clic derecho sobre una de las imágenes y vamos a la opción Transform – Flip Horizontal.

Back to the Future

PASO 9

Vamos a la ventana Outline y seleccionamos las 2 imágenes del fuego y las agrupamos en un nuevo Movie Clip.

Back to the Future

PASO 10

Desplegamos nuestro Movie Clip y vamos a nuestra Timeline y a la primera imagen de fuego le agregamos un Fade Out en el frame 1.

Back to the Future

PASO 11

Ahora a la segunda imagen le agregamos también un Fade Out a partir del frame 7.

Back to the Future

PASO 12

En la Timeline en la línea de tiempo del Movie Clip en el Frame 13 hacemos clic derecho y vamos a la opción Movie Control – Goto and play – gotoAndPlay(FRAME).

Back to the Future

PASO 13

Automáticamente nos llevará a la ventana Scritp y debemos tener un script como el que se ve en la imagen.

Back to the Future

PASO 14

Contraemos el Movie clip y ahora dibujamos un rectángulo de color blanco al principio de nuestro fuego.

Back to the Future

PASO 15

En la ventana Outline movemos el rectángulo debajo del movie clip que contiene las imágenes de fuego.

Back to the Future

PASO 16

Ahora en nuestra Timeline le agregamos un movimiento de 100 frames.

Back to the Future

PASO 17

Con la herramienta Transform Tool vamos a estirar el cuadrado hasta que cubra todas las flamas.

Back to the Future

PASO 18

Dentro del movie clip arrastramos la imagen del carrito de Back to the future.

Back to the Future

PASO 19

Ahora al carro le agregamos un movimiento de 100 frames y lo movemos hacia la derecha.

Back to the Future

PASO 20

Contraemos nuestro Movie Clip y con la herramienta Text tool vamos a escribir el texto Cargando en el centro de nuestra película.

Back to the Future

PASO 21

Ahora en con la herramienta Text Tool vamos a escribir el texto 00% y ahora vamos a la ventana Properties y colocamos los valores que se ven en la imagen.

Back to the Future

PASO 22

Seleccionamos la Scene_1 y vamos a la ventana Script y copiamos el siguiente código Action Script dentro de la ventana.

Code block

onSelfEvent (enterFrame) {
myVar = percentLoaded();
porcentaje = myVar +"%";
tellTarget (bar) {
gotoAndStop(myVar);
}
if (myVar >= 100) {
gotoSceneAndPlay("Scene_1", 1);
}
}