Cómo construir un preloader propio

En este mi primer post en MadeInFlex voy a tratar un tema del que ya se han visto algunos ejemplos en los blogs de la comunidad Flex, el preloader o la precarga de las aplicaciones Flex.

En la mayoría de las aplicaciones que vamos a realizar, el cliente nos va a pedir traducir el mensaje del preloader o mejor aún, que lo personalizemos con la imagen de su empresa.

A parte de poner un ejemplo, y mejor que explicar paso a paso lo que hace, he considerado mejor hacer una traducción de la parte del manual de Adobe que hace referencia a este tema, pienso que explica bastante bien cual es el proceso a seguir.

Aquí teneis la traducción del capítulo correspondiente del manual de usuario de Adobe Flex.

Desde aquí podeis ejecutar el ejemplo. Puesto que cuando lo ejecutas el SWF es caheado por el navegador, para volver a verlo correctamente es conveniente vaciar la caché.

Desde aquí podeis descargar el archivo comprimido del ejemplo.

En el ejemplo he hecho una subclase de DownloadProgressBar, esta clase se la asigno a la propiedad preloader del contenedor Application. He insertado cuatro imágenes embebidas que pesan lo suficiente como para ver correctamente la barra de progreso.

He fabricado una subclase de MovieClip para pintar un simple rectángulo con el progreso de la carga, así como el texto que indica el porcentaje cargado. Esta es la clase "subclassOfMovieClip":

Esta es la clase "subclassOfDownloadProgressBar", la que es asignada a la propiedad "preloader" de Application, notar que se crea una instancia a la clase "subclassOfMovieClip" y se añade (addChild) como hija de ésta.

Una nota más: en todo este proceso podemos modificar el color de fondo, simplemente tenemos que modificar la propiedad "bgcolor" del cargador html de la aplicación.

Creo que el ejemplo es bastante simple y aclaratorio, ya no tenemos excusa para no hacer nuestros propios preloaders, solamente hay que echarle un poquito de imaginación.

Salu2
Raúl Díaz

* * * * ½ 15 votos

Acerca de esta entrada

Usted está leyendo “Cómo construir un preloader propio,” una entrada de MadeInFlex

Autor: Raul Diaz: Actualmente trabaja en Comisiones Obreras como analista-programador de la intranet de gestión interna a nivel nacional así como la extranet para los afiliados.

URL del Autor:: http://blog.diaztorres.com

Ver: otras entradas del autor

Publicada:: 14.05.07 / 4pm

Categorías:: Tutoriales

Entradas relacionadas:: Sistema de ventanas
Nuevos proyectos Flex en Adobe Labs
Made In Flex cumple un año
Riawave, una nueva aproximación al desarrollo rápido.

Número de visitas:: 5062

Imprimir esta entrada:

Edgar Rivera 14.05.07 / 4pm

Muy buen artículo Raúl, es muy útil y además has traducido mucho contenido. Estos aportes a la comunidad si que merecen la pena.

Un saludo

Edgar Rivera

rdiaz 14.05.07 / 5pm

Muchas gracias Edgar, se agradede el comentario.

Carlos Rovira 14.05.07 / 7pm

Totalmente

Creo que este post refleja uno de los principales motivos de abrir MIF a la comunidad.

Enhorabuena Raúl!, espero que este sea el comienzo de una larga lista de entradas como esta

Raul Diaz 14.05.07 / 9pm

Gracias Carlos, intenaré seguir en esta línea.

Joan Garnet 14.05.07 / 10pm

Alguna vez había pensado en que tenía que personalizar la barra de pregarga inicial, pero nunca me había puesto a ello.
Después de ver este ejemplo ya no tengo excusa…
Gracias

dersteppenwolf 15.05.07 / 1am

hace rato me preguntaba como se podría realizar esa personalización..

saludos

eldervaz 15.05.07 / 2am

ah carambas!!!! esto ya motiva a escribir aqui :D, muy bien MIF

Alberto Albericio 17.05.07 / 5pm

Enhorabuena Raúl!

Una recomendación.. creo que el artículo quedaría redondo si activas la opción de View Source de la aplicación ejemplo.

Es sólo un consejo

Bienvenido a MIF!

Alberto

Raúl Díaz 22.07.07 / 11am

Otro tutorial de preloaders por Jesse Warden en:
http://jessewarden.com/2007/07/making-a-cooler-preloader-in-flex-part-1-of-3.html

Omar Guevara 12.03.08 / 11pm

Muy buen artículo, lo probé y funciona bien, pero tengo un pequeño problema, cuando coloco un Accordion con 3 pestañas, y dentro de cada uno de ellas cargo una imagen y texto, al ir a la segunda o tercera pestañas me sale el siguiente error

TypeError: Error #1009: No se puede acceder a una propiedad o a un método de una referencia a un objeto nulo.

at clases::subclassOfMovieClip/moveGraphics()
at clases::subclassOfMovieClip/showProgress()
at clases::subclassOfDownloadProgressBar/::FlexInitProgress()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.preloaders::Preloader/::appProgressHandler()
at flash.events::EventDispatcher/flash.events:EventDispatcher::dispatchEventFunction()
at flash.events::EventDispatcher/dispatchEvent()
at mx.core::UIComponent/dispatchEvent()
at mx.managers::LayoutManager/::doPhasedInstantiation()
at Function/http://adobe.com/AS3/2006/builtin::apply()
at mx.core::UIComponent/::callLaterDispatcher2()
at mx.core::UIComponent/::callLaterDispatcher()

Creo q es porque la clase de preloader se llama de nuevo al cargar la imagen y el texto, soy nuevo en este cuento, espero que me colaboren… Gracias…

Raul Diaz 13.03.08 / 10am

Omar, por lo que cuentas estás utilizando componentes mx: como el mx:accordion en el preloader, mira la documentación, no se deben utilizar estos tipos de componentes en los preloaders.

Omar Guevara 13.03.08 / 10pm

Gracias por la pronta respuesta pero, yo utilice las dos clases para el preload, solo action script 3, nada de componentes mx, el error me sale después de cargar la aplicación en un accordion que tengo dentro de la aplicación, el preload lo hace bien, aquí dejo la url para q vean el error, el caso es que con algunos navegadores sale el error en otros no, tengo el Mozilla Firefox 2.0.0.12

http://www.tree-technology.com/nueva/

En la pestaña de nosotros esta el accordion al que me refiero, gracias por la ayuda…