Página inicial  

trans_770 trans_160

Unidad 19. Flash. Navegación (VII).


Cargando Información

En este apartado veremos cómo utilizar un cargador para recoger información de un archivo y mostrarla en una película Flash.

Nos basaremos en el siguiente ejemplo:

Observa la línea de tiempos:

Linea de tiempo de Presentación

En la capa de acciones escribiremos todo el código para que funcione la película. La capa diapositivas contiene el efecto que hace que la imagen se desvanezca para volver a aparecer.

Ahora explicaremos cómo lo hemos hecho.

Antes que nada añadimos un stop() en el primer fotograma para detener la acción y reanudarla más tarde con el botón al que le hemos añadido el siguiente código:

on (release) {

	gotoAndPlay (2);

}

Para que pase al fotograma dos y comience la transición. Igualmente hemos añadido un stop() en el fotograma 11 para que se detenga la transición y espere a que se pulse de nuevo el botón y vuelva al fotograma 2.

La transición es muy sencilla. En la capa diapositivas hemos añadido un clip de película llamado contenedor del tamaño de la película, que será donde carguemos las imágenes con la función loadMovie, y hemos incluido dos interpolaciones de movimiento. En el fotograma 6 bajaremos la propiedad Alfa al 0% en el Panel Propiedades. Así conseguiremos el efecto de la transición.

Mientras en el fotograma 6 añadiremos el código que hará que se cargue la imagen en contenedor y se actualicen los campos de textos descripcion_txt y titulo_txt incluidos en la capa area_texto en un clip llamado textoDiapositiva.

 

Ahora que conocemos el funcionamiento veamos el código que hemos añadido en los fotogramas 1 y 6.

Fotograma 1:

stop();



var archivo:String = "diapositivas.txt";



var total:Number = 4;

var imagenActual:Number = 1;



var matrizImagenes:Array = ["imagenes/imagen1.jpg", "imagenes/imagen2.jpg", "imagenes/imagen3.jpg", "imagenes/imagen4.jpg"];



// cargador del archivo .txt



var cargador:LoadVars = new LoadVars();

cargador.onLoad = function(exito:Boolean) {

	if (exito) {

		textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion" + imagenActual);  //recupera la descripción

		textoDiapositiva.titulo_txt.text = eval("cargador.titulo" + imagenActual);  //recupera el título

	}

	else {

		textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el texto";

		textoDiapositiva.titulo_txt.text = "Error";

	}

}



cargador.load(archivo); //carga del texto

loadMovie(matrizImagenes[imagenActual-1], contenedor);  //carga de la imagen

En las primeras líneas definimos las variables que vamos a utilizar.

  • En la variable archivo introducimos la ruta del archivo de tipo txt de donde sacaremos el texto asociado a las imágenes.


  • La variable total almacena el número total de imágenes que vamos a mostrar.


  • La variable imagenActual almacenará el número de la imagen que vamos a mostrar, la inicializamos a 1 para mostrar primero la primera imagen.


  • La variable matrizImagenes es una variable de tipo array y almacenará las rutas de las imágenes que vamos a mostrar.

 

Ahora declararemos el cargador que sacará la información del archivo txt y lo pasará a las cajas de texto.

Para ello utilizaremos el objeto LoadVars, este objeto permite enviar o recoger variables en forma de URL.

Expliquemos esto. El objeto LoadVars es capaz de recoger una cadena de texto en forma de URL como la siguiente:

var1=valor&var2=valor&var3=valor&var4=valor

Y sacar de allí las variables y sus valores.

 

La forma en la que lo hace es sencilla, a cada símbolo & que encuentre entenderá que lo siguiente que encuentre será el nombre de una variable (igualada a su valor).

De esta forma escribiremos en el archivo de texto diapositivas.txt lo siguiente:

titulo1=Los mejores sandwiches

&descripcion1=En sa cuina creamos los sandwiches mas originales y sabrosos de toda la ciudad.

&titulo2=Calidad Superior

&descripcion2=Nos cuidamos siempre de que nuestros platos ofrezcan la maxima calidad.

&titulo3=Productos seleccionados

&descripcion3=Seleccionamos los productos uno a uno y de distribuidores de confianza.

&titulo4=Nuestras especialidades

&descripcion4=No olvides probar nuestras especialidades en ensaladas y postres.

De esta forma cuando el objeto LoadVars cargue el archivo verá que hay 8 variables, y cada una de ellas con su respectivo valor.

 

Veamos, pues, cómo leer y manejar estas variables.

Para declarar el objeto sólo hace falta escribir:

var cargador:LoadVars = new LoadVars();

Una vez declarado el objeto podemos trabajar con él.

Lo primero que haremos será establecer unas cuantas líneas que se ejecutarán cada vez que intentemos cargar el archivo. Para ello aprovechamos el método onLoad del objeto:

cargador.onLoad = function(exito:Boolean) {

	if (exito) {

		textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion" + imagenActual);  //recupera la descripción

		textoDiapositiva.titulo_txt.text = eval("cargador.titulo" + imagenActual);  //recupera el título

	}

	else {

		textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el texto";

		textoDiapositiva.titulo_txt.text = "Error";

	}

}

Al invocar el método onLoad nos devolverá un valor (que nosotros hemos llamado exito). Esta variable de tipo booleano puede tomar dos valores, verdadero o falso.

Por tanto, si la carga se efectúa correctamente el valor de exito será true, y false si no pudo cargar el archivo.

Por ello el código que se ejecuta al cargar el archivo evalúa si la carga se realizó con éxito.

if (exito) {



}

else {



}

Si se pudo cargar, recuperamos las variables del archivo. Tendremos que acceder a ellas a través del cargador. cargador.titulo1 nos dará el valor de la variable titulo1.

Pero debemos de recuperar la variable correspondiente a la imagen que se está mostrando, ¿cómo lo hacemos? Muy sencillo, deberemos construir el nombre de la variable a recuperar.

Para el titulo el nombre de la variable es titulo más el número de la imagen que se muestra. Por lo que nos quedaría titulo+imagenActual. Pero, claro, no podemos escribir:

cargador.titulo+imagenActual //esto no es correcto

Para poder hacerlo deberemos utilizar la función eval(), que construirá el nombre y luego lo recuperará:

eval("cargador.titulo"+imagenActual)

Una vez hemos averiguado cómo sacar la variable la adjudicamos al campo de texto:

textoDiapositiva.titulo_txt.text = eval("cargador.titulo" + imagenActual);

Y hacemos lo mismo para la descripción:

textoDiapositiva.descripcion_txt.text = eval("cargador.descripcion" + imagenActual);

 

En principio habremos terminado. Optimizaremos el funcionamiento mostrando mensajes de error si el archivo no se pudo cargar:

textoDiapositiva.titulo_txt.text = "Error";

textoDiapositiva.descripcion_txt.text = "No se ha podido cargar el texto";

 

Cerramos todas las llaves y el evaluador de la carga onLoad ya estará preparado.

Ahora cada vez que intentemos cargar algún archivo con cargador se ejecutará todo este código, y si la carga se efectuó de forma correcta se asignarán las variables correspondientes a las cajas de texto.

Para cargar un archivo solo tendremos que escribir:

cargador.load(archivo);

Y como en la variable archivo habíamos guardado la ruta del txt donde están las variables necesarias habremos terminado.

 

Como puedes ver las últimas líneas que se ejecutan son:

cargador.load(archivo);

loadMovie(matrizImagenes[imagenActual-1], contenedor); 

Que cargarán por primera vez la imagen1 y el texto correspondiente.

En el cargador deberemos decir que cargue el contenido del array matrizImagenes de la imagen correspondiente. Pero como las matrices empiezan por 0 la ruta de la primera imagen estará almacenada en matrizImagenes[0].

Es por esto que al cargar la imagen la ruta que damos es:

matrizImagenes[imagenActual-1]

 

Ahora veremos que hemos escrito en el fotograma 6 para que se carguen las imágenes y texto que correspondan:

if (imagenActual >= total) {

	imagenActual = 1;

}

else {

	imagenActual++;

}

cargador.load(archivo); //carga del texto

loadMovie(matrizImagenes[imagenActual-1], contenedor);  //carga de la imagen

Este código se ejecuta en el momento en el que el contenedor tiene la propiedad Alfa al 0% por lo que es totalmente invisible. Aprovecharemos este momento para cambiar la imagen y el texto.

 

Lo primero que evaluamos es si la imagenActual es mayor o igual que el número total de imágenes. Si no lo es aumentamos el valor de imagenActual en 1:

imagenActual++;

En el caso contrario (que imagenActual fuera mayor o igual al total de imágenes) significaría que si aumentamos el valor de imagenActual en 1 nos pasaríamos y no exitiría ni imagen ni texto para esa posición, por lo que iniciamos de nuevo el contador a 1 para que vuelva a empezar.

Esta condición hará el efecto de que cuando se vea la última imagen y se pulse siguiente se visualice de nuevo la primera.

Una vez actualizada la variable imagenActual pasamos a cargar la imagen:

loadMovie(matrizImagenes[imagenActual-1], contenedor);

Y a actualizar el texto utilizando el cargador:

cargador.load(archivo);

  Ejercicios del Tema 19

  Prueba evaluativa del Tema 19.



     


© aulaClic. Todos los derechos reservados. Free Computer tutorials. Prohibida la reproducción por cualquier medio.
Septiembre - 2007.