Upload con barra de progreso sin programar un carajo… es un flash

Junio 14, 2007 at 12:46 am (Delirios de Grandeza)

Para que programar cuando lo puede hacer otro ¿no? En este caso el otro soy yo, y este es un pequeño avance de algo en que estoy trabajando. El preview es un release especial para que una compañera de facultad disponga de una herramienta para upload de archivos con barra de progreso sin tener que poner un solo if de código. Esta herramienta, en forma de clases en ActionScript 2.0, permite tomar un movieclip con diseño a piacere, y convertirlo en un componente Flash donde su piezas, correctamente identificadas, empiezan a actuar como una barra de progreso botones de upload o cancelación y/o un campo de texto con información en vivo del upload.

El proceso es un poco distinto de lo usual con respecto a componentes de Adobe Flash, pero de esta manera permite al diseñador editar el diseño del componente en el lugar de implementación, sin tener que recurrir a engorrosos skins, themes o lo que sea. El archivo zipeado con todo lo necesario y un .fla de ejemplo están para bajar acá:

http://www.martinalterisio.com.ar/imf/imf-uploader.zip

En la brevedad subiré a youtube, o semejante, un video mostrando paso a paso la mecánica para convertir un movieclip cualquiera en un uploader. Los videos resultaron no ser el mejor medio para mostrar como usar estas clases. Acá hay un link a una presentación de diapositivas con la explicación paso a paso para hacer un uploader con solo la barra de progreso:

Veamos ahora un poco de como debe ser creado este movieclip:

Si se quiere una barra de progreso, se debe incluir un movieclip con nombre “progressbar_mc” cuyo _xscale variara de 0 a 100 según el porcentaje de completitud. Con hacer una barra horizontal, convertirla a símbolo, y ponerle ese nombre, alcanza (OJO con el punto de origen, según donde esté la barra va a crecer para la derecha, la izquierda o desde el centro).

Si se quiere un botón para iniciar la busqueda del archivo a “uploadear”, se debe incluir un boton o movieclip de nombre “browse_bt”. También se puede llamar a la función “browse()” dentro del componente.

De la misma manera un boton de nombre “cancel_bt” funcionara como cancelación del upload. Al igual que antes la función “cancel()” cumple la misma función que el botón.

Finalmente, para visualizar información relacionada con el upload, se puede incluir un textfield dinámico de nombre “progress_field”. Para customizar el mensaje se puede cambiar la propiedad del componente “formatProgress”. Este campo indica como sera el contenido y utiliza ciertos textos especiales para indicar valores a incluir: {bytesLoaded} bytes cargados, {bytesTotal} total de bytes, {kbytesLoaded}, {kbytesTotal} lo mismo en kilobytes, y {name} para el nombre del archivo.

No olvidarse de setear la propiedad del componente “url”, que indica a que url se enviara el upload.

Permalink 2 comentarios