Cargador animado en Flash

Posteado el 01. Nov, 2010 por tuto in Flash

Este cargador en Flash es lo que aprenderás en este tutorial

PASO 1
Creamos un nuevo documento de Flash de 500 x 500 con un fondo de color negro.

Cargador animado en Flash

PASO 2
Ahora a nuestro documento arrastramos la imagen de una calabaza.

Cargador animado en Flash

PASO 3
Damos clic sobre la imagen vamos a la opción Convert to Symbol…

Cargador animado en Flash

PASO 4
En la ventana Seleccionamos la opción Movie Clip y le colocamos el nombre de máscara.

Cargador animado en Flash

PASO 5
Damos doble clic sobre la imagen para ingresar dentro del movie clip y ahora creamos una nueva capa dando clic en el botón Inser Layer.

Cargador animado en Flash

PASO +6
Dentro de la nueva capa dibujamos un rectángulo del tamaño de nuestra película y lo colocamos en la parte inferior.

Cargador animado en Flash

PASO 7
Seleccionamos el Layer de la imagen y vamos al frame 100 e insertamos un nuevo Keyframe.

Cargador animado en Flash

PASO 8
Ahora en el frame 1 de la capa del cuadrado vamos a darle clic derecho y seleccionamos la opción Create Motion Tween.

Cargador animado en Flash

PASO 9
Ahora vamos al frame 100 y presionamos la tecla F6

Cargador animado en Flash

PASO 10
Movemos el cuadrado sobre nuestra película.

Cargador animado en Flash

PASO 11
Creamos una nueva capa y dentro de esta con la herramienta Text tool creamos una caja de texto.

Cargador animado en Flash

PASO 12
Vamos a la ventana Properties y colocamos los valores que se ven en la imagen.

Cargador animado en Flash

PASO 13
Ahora seleccionamos la capa del cuadrado y le damos clic derecho y seleccionamos la opción Mask.

Cargador animado en Flash

PASO 14
Presionamos el boton Scene_1 para regresar a la Escena principal.

Cargador animado en Flash

PASO 15
Una vez en la Escena hacemos clic sobre el frame 1 y luego presionamos la tecla F9 y en la ventana Actions – Frame colocamos el siguiente código Action Script.

Code block

onClipEvent (load) {
	total = _root.getBytesTotal();
}
onClipEvent (enterFrame) {
	loaded = _root.getBytesLoaded();
	percent = int(loaded/total*100);
	txt = percent+" %";
	gotoAndStop(percent);
	if (loaded == total) {
		_root.gotoAndPlay(2);
	}
}

Cargador animado en Flash

PASO 16
En el frame 2 hacemos clic derecho e insertamos un Keyframe.

Cargador animado en Flash

PASO 17
Ahora en el frame 2 insetamos la imagen del logo de tutoriales y un texto que diga cargador en flash.

Cargador animado en Flash

PASO 18
Por ultimo hacemos clic sobre el frame 2 y luego presionamos la tecla F9 y en la ventana Actions – Frame colocamos el siguiente código Action Script.

stop();

Cargador animado en Flash

PASO 19
Listo ya tenemos nuestro cargador terminado.

Cargador animado en Flash

Descarga el editable de cargador en Flash