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.

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

Desde aquí podeis [2] 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 [3] 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