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:
no entiendo, no me sale, yo tengo un problemita con mi web, va en si muchos seguramente, bueno pero la cuestion es que quiero hacer un preloader porque la web cada ingresa a “seccion.swf” por decir cuando entra al index y apretas cualquier boton para entrar a las secciones de la web, tarda mucho en entrar, pero entra, ahi quiero que aparesca el preloader cargando la data, saludoss desde ushuaia, thx igualmente por el tutorial.
at preloader_fla::MainTimeline/loaderF()
TypeError: Error #1010: Un término no está definido y no tiene propiedades.
ESE error me sale en “SALIDA”: cuando hago crtl + ENTER (dos veces)
el codigo daba error… este es el correcto
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”;
}
}
Tengo el mismo problema.
Cita:
“no entiendo, no me sale, yo tengo un problemita con mi web, va en si muchos seguramente, bueno pero la cuestion es que quiero hacer un preloader porque la web cada ingresa a “seccion.swf” por decir cuando entra al index y apretas cualquier boton para entrar a las secciones de la web, tarda mucho en entrar, pero entra, ahi quiero que aparesca el preloader cargando la data, saludoss desde ushuaia, thx igualmente por el tutorial.”
como generar codigo html?
excelente, me quedo perfecto MUCHAS GRACIAS
!!!!
Estuve buscando de muchas formas arreglar el código, algo esta mal en la línea 3, abajo les indico el error que en mi caso aparece, si puedes ayudarme con la corrección esto quedará concluido y yo les recomendaré ampliamente!!!
GRACIAS!
**Error** Escena=Escena 1, capa=Código AC, fotograma=1:Línea 3: No se pudo cargar la clase o interfaz ‘Event’.
function loaderF(e:Event):void {
Total de errores de ActionScript: 1 Errores comunicados: 1
Hola… yo denuevo… primero que todo verifica en las propiedades de exportacion, que el as utilizado sea as3.
Segundo el problema no es del codigo, porque esta perfecto, sino del formato del codigo. Lo que hice fue bajar el archivo de ejemplo y copiar directamente del archivo fla el parrafo con el AS. Si lo copiaba del blog daba error.
Espero te sirva.
Hola, que tal, yo tengo un problema con el preloader.
Estoy haciendo un sitio donde mi pagina principal es un HTML que contiene un SWF animado con el boton “Entrar”. La barra preloader en este SWF contenido por el HTML me funciona a la perfeccion. Esto es porque primero se carga el HTML, y en el navegador se ve el fondo del HTML y el SWF cargando.
Pero cuando va al boton “Entrar” me dirige a una pagina SWF sola (no contenida por un HTML). El preloader no me funciona.
O sea, solo funciona el preloader cuando el SWF esta contenido en el HTML. Como puedo hacer para que me funcione el preloader del SWF directamente en el navegador?? Mi SWF es muy pesado y no quiero ponerlo en un HTML.
Si alguien me puedo decir como hacerlo, lo agarderia.
Si quieren ver la pagina, les paso http://www.symbiosis-studios.com
Saludos
Hola a todos! es la primera vez que escribo en el foro, el motivo es similar al planteado hace unos dias… les cuento mi caso particular.
Tengo una pelicula en flash, que es la intro de mi web, el tema que que necesito en otro flash poner un cargador que redireccione a esa primera pelicula… les copio el codigo que estoy usando
onClipEvent (enterFrame) {
loaded = _parent.getBytesLoaded();
total = _parent.getBytesTotal();
progress = Math.round((loaded/total)*100);
loaderInfo = Math.round(loaded/1000) + ” k loaded / ” + Math.round(total/1000) + ” k total”;
progressBar._width = progress;
if (loaded == total) {
_parent.nextFrame();
}
}
En otra capa tengo lo siguiente
loadMovie(“img/incio.swf”, “incio”);
Nosé si me estoy mandando cualquiera porque es la primera vez que lo hago y estoy como un barrilete.
Agradezco muchisimo su ayuda
Caro
we
no abre la descarga
como le ago
[...] P.D. Para poder visualizar el cardador es necesario presionar dos veces ctrl. + enter. FUENTE Descarga Archivo FLA De Este Tutorial Visualizar Archivo SWF De Este Tutorial [...]
El codigo esta muy mal, verifiquenlo por favor ya que es totalmente incorrecto, el principal y el luego corregido. Si van a hacer un tutorial de ello por favor verifiquen todo antes de subirlo. Gracias.
No me sale ese tutorial es confuso, no explicas bien hay pasos que no se entienden y mas bien te confundes.
Si te atreves a enseñar algo, tene la desencia de explicarlo bien si?
hola que tal, descargue el archivo y lo probe y cuanndo lo visualizo se ve la imagen y el preloader no carga. osea se ve la barra azul con el 100% y luego la imagen, y para visualizar la precarga debo presionar Ctrl + Enter y ahi se ve la precarga. es asi? ayuda…