Tutorial Adobe Flash CS3 Preloader De Porcentaje (Bytes Totales Y Bytes Cargados). Hola que tal fanático del mundo Flash CS3, a continuación tengo para ti una explicación con la cual aprenderás a programar una barra de cargador con Código ActionScript 3. El diseño del cargador en esta ocasión no le di mucha importancia jajajajaja, sin embargo, se te dan las suficientes herramientas como para que diseñes el PRELOADER a la medida de tus necesidades. Lo importante en este tutoriales el código ACTIONSCRIPT 3, dicho código apenas rebasa las 10 líneas. El tutorial aunque se puede visualizare como complicado este es muy fácil de seguir, te ago una atenta invitación para que pongas en practica este trabajo y así te convencerás que fácil es jajaja. Sin más preámbulos ¿COMENZAMOS? J Good Luck J
1.- Comenzar por colocar las propiedades al documento ctrl. + J, las dimensiones del documento son 450 * 300 píxeles de ancho y alto.
a.- Establecer como color de fondo
b.- Colocar como velocidad de fotogramas 12 fps.
2.- Este cargador solamente consta de 2 símbolos de tipo Clip de prelícuala, crear el primer símbolo ctrl. + F8, colocarle como nombre barra preloader.
a.- Seleccionar en la opción Tipo Clip de película.
b.- En este símbolo se dibujara un rectángulo que servirá como barra de carga, a medida que el rectángulo se valla llenando de color esto indicara que se van cargando más Bytes del contenido a visualizarse.
3.- Una vez ubicado en el símbolo barra preloader seleccionar la herramienta de Rectángulo.
a.- Anular la casilla de Borde (no colocarle borde al rectángulo), Seleccionar algún color de relleno en esta ocasión yo coloque como color de relleno #0000FF.
b.- Las dimensiones del Rectángulo son 200.0 * 20 píxeles de ancho y alto respectivamente.
c.- Colocar el Rectángulo dibujado en coordenadas X=0.0 Y=0.0.
Nota: Selecciona el color que mas te guste para que le des un mejor diseño a esta barra de cargador
4.- Crear el segundo símbolo ctrl. + F8, colocarle como nombre preloader.
a.- Seleccionar en la opción Tipo Clip de película.
Nota: En este símbolo se crearan 3 Camps De Texto que servirán para que sean vistos el porcentaje de carga, los Bytes que se están cargando y el tercer campo de texto hace un calculo del total de Bytes. En este símbolo será creado propiamente el cargador
5.- Cuando te encuentres ubicado en el símbolo cambiarle el nombre a la capa por el de barra cargador, esto es por que el símbolo pose tres capas y es necesario identificar en donde esta ubicado cada uno de los elementos.
a.- Hacer visible el Panel de la Biblioteca ctrl. + L, arrastrar desde la biblioteca el símbolo barra preloader.
b.- Colocar a este Clip de película un Nombre de instancia cargador_mc.
c.- Las medidas del símbolo no son afectadas 200.0 * 20.0 píxeles, colocar el símbolo en coordenadas X=0.0 Y=0.0.
Nota: muy importante colocar cada Nombre de instancia tal y como este marcado si no lo haces así tendrás problemas con el funcionamiento del cargador.
6.- Insertar la segunda capa y cambiarle el nombre por el de borde.
a.- Seleccionar la herramienta de Rectángulo las propiedades Rectángulo son: color de trazo #000000, Tamaño de trazo 2 y tipo de Trazo Sólido. El Rectángulo no tiene color de relleno.
b.- Las medidas del rectángulo son 200.0 * 20.0 píxeles de ancho y alto, colocar este rectángulo coordenadas X=0.0 Y=0.0.
7.- Crear una nueva capa y cambiarle el nombre a esta por el de texto.
a.- Seleccionar la herramienta de Texto, hacer un campo de texto suficiente mente grande. Ya que en este campo de texto se cal calcularan los Bytes que se estarán cargando a medida que la barra se este rellenando de color.
b.- Seleccionar en la opción el Tipo de texto Texto dinámico.
c.- Colocarle como Nombre de instancia bytes_cargados_txt
d.- Dejo a tu elección el tipo, color y tamaño de fuente.
e.- Colocar el campo de texto un poco abajo del rectángulo.
Nota: puedes hacer varios tamaños de campos de textos y estarlos probando hasta ajustarlos a la medida requerida.
8.- Insertar otro nuevo campo de texto de tipo Texto dinámico, en este campo de texto se colocara el total de Bytes de que consta la película.
a.- colocarle a este nuevo campo de texto como Nombre de instancia bytes_totales_txt.
b.- colocar este campo de texto a un lado del anterior.
9.- Insertar un tercer campo de texto de tipo Texto dinámico, aquí estará colocado un contador de porcentaje que se ira incrementando de 1%, 2%, 3%…100%, hasta que sea completada la carda total del contenido de la película.
a.- Este campo de texto tendrá como Nombre de instancia porcentaje_txt.
b.- Este campo de texto colocarlo arriba del rectángulo.
Hasta este punto se puede decir que el preloader esta concluido, pues la barra del cargador así como también los tres diferentes campos de textos ya posen los nombres de instancia que serán escritos en el código ActionScript final. Unos cuantos pasos más y estará concluido el tutorial.
10.- Regresar a la Escena y cambiarle el nombre a la capa por el de contenido.
a.- Insertar un fotograma clave vacío presiona F7.
b.- En este paso Importar una imagen ctrl. + R la cual servirá como contenido.
c.- Navegar através de tus carpetas hasta donde tengas ubicada la imagen, seleccionar la imagen y luego simplemente Abrir.
Nota: la imagen deberá de tener como dimensiones 450.0 * 300.0 píxeles de ancho y de alto.
11.- Una vez que se halla insertado la imagen esta quedara posesionada en el fotograma número 2 de la capa contenido.
a.- Como la imagen pose las mismas dimensiones que el documento 450.0 * 300.0 pixeles, solo colocar esta imagen en coordenadas X=0.0 Y=0.0.
12.- Insertar una segunda capa y cambiarle el nombre por el de cargador.
a.- Hacer visible el Panel de Biblioteca ctrl. + L y arrastrar desde esta el símbolo preloader.
b.- Escribirle a este símbolo como Nombre de instancia preloader_mc, tratar de que el símbolo preloader quede centrado en relación a la Escena.
Nota: seguramente se insertaron dos fotogramas en la capa cargador, seleccionar el fotograma número dos y luego presionar la Shift + F5 con esta acción será borrado el fotograma que esta de más.
13.- Por último y para finalizar el tutorial del cargador solamente, insertar una campa más colocarle como nombre código AC.
a.- Abrir el Panel Acciones – fotograma e insertar el siguiente código:
stop();
addEventListener(Event.ENTER_FRAME,loaderF);
function loaderF(e:Event):void {
var toLoad:Number = loaderInfo.bytesTotal;
var loaded:Number = loaderInfo.bytesLoaded;
var total:Number = loaded/toLoad;
if (loaded == toLoad) {
removeEventListener(Event.ENTER_FRAME,loaderF);
gotoAndStop(2);
} else {
preloader_mc.cargador_mc.scaleX=total;
preloader_mc.porcentaje_txt.text=Math.floor(total*100)+”%”;
preloader_mc.bytes_cargados_txt.text=loaded+” bytes cargados”;
preloader_mc.bytes_totales_txt.text=toLoad+” bytes totales”;
}
}
Nota: en esta capa también se son insertados dos fotogramas, seleccionar el fotograma que esta en la posición número 2, presionar Shift + F5 con esta acción será borrado el fotograma que esta de más.
Con esta acción se da por concluido el tutorial, como puedes ver no es muy complicado de hacer este trabajo J WELL DONEJ.
Aquí te presento una imagen del cargador cuando esta trabajando en todo su esplendor.
P.D. Para poder visualizar el cardador es necesario presionar dos veces ctrl. + enter.
Si tienes alguna duda o sugerencia no dudes en dejar tu comentario. Hasta el próximo tutorial J
Descarga Archivo FLA De Este Tutorial
Visualizar Archivo SWF De Este Tutoria
Artículos relacionados:
hola, el preloader me funcionó perfecto, pero cuando lo pongo en la primera escena de la película flash no funciona y salen errores:
(escena=preloader,capa=ac, fotograma=1, linea5 se espera { function loaderF(e:Event)void{
(escena=preloader,capa=ac, fotograma=1, linea31 se ha detectado un } inesperado }
hay alguna forma de arreglar esto o es necesario hacer un actionscript para cada pelicula?
hay alg[un tutorial para crear un preloader para peliculas que ya esten hechas?
alguien me puede ayudar? muchas gracias!