BlurFilter Parte III

Comentarios: 0
Tags:
Fecha: 27/09/2006

Esta es una aplicaciÃ³n prÃ¡ctica del filtro BlurFilter en un pequeÃ±o carrusel o slideshow en el que se muestran diversas imÃ¡genes cargadas desde un documento xml, del que se extrae tanto su ubicaciÃ³n como su tÃtulo.

NOTA: Dado que Ãºltimamente, y sobre todo en la categorÃa de fotografÃa, me estaba prodigando bastante en fotografÃas de chicas (lÃ³gico si me atengo a mis gustos), he decidido poner dos xml. Actor y actriz protagonistas de la pelÃcula Match Point. Las fotos estÃ¡n sacadas de bellazon.

1.- Creamos un clip de pelÃcula vacÃo (Insertar > Nuevo SÃmbolo), que serÃ¡ donde se van a ir cargando las distintas fotografÃas. Salimos del clip de pelÃcula puesto que no debe albergar nada, abrimos la biblioteca (CTRL+L) y arrastramos el clip al vertice superior izquierda del documento. Al clip de pelÃcula le asignamos como nombre de instancia "contenedor_mc".
2.- Para mostrar el tÃtulo he creado un clip de pelÃcula con nombre de instancia "Texto_mc", donde he colocado una barra roja que hace una pequeÃ±a animaciÃ³n y dentro de la que he creado una caja de texto dinÃ¡mico com nombre de instancia "Titulo_txt".
3.- Para detener el carrusel o iniciarlo de nuevo he creado un botÃ³n "Stop_btn", otro "Play_btn" y por Ãºltimo una caja de texto dinÃ¡mico con nombre de variable "Estado", que como su nombre indica nos mostrarÃ¡ el estado en el que se encuentra el slideshow o carrusel.
4.- Por Ãºltimo para mostrar una precarga de las imÃ¡genes, creamos una caja de texto dinÃ¡mico con el nombre de instancia "precarga_txt".

FaltarÃa crear alguna cosa mÃ¡s como unos botones de siguiente y anterior foto, o que incluso se pudiese utilizar las teclas del ratÃ³n para navegar por las distintas fotos, pero me quedaba un tutorial demasiado largo y creo que a partir desde el punto alcanzado con el ejemplo, no es muy complicado hacerlo.

Por otro lado tenemos un documento xml que tendrÃa un aspecto como el siguiente.




f1.jpg
Jonathan Rhys Meyers


f2.jpg
Otra foto de Jonathan Rhys Meyers 


f3.jpg
Tercera foto de Jonathan Rhys Meyers 


f4.jpg
Jonathan Rhys Meyers  4


f5.jpg
Jonathan Rhys Meyers  5

Nombramos el documento xml como datos.xml El cÃ³digo situado sobre un fotograma y serÃa algo asÃ:

stop();
import flash.filters.BlurFilter;
var bf:BlurFilter = new BlurFilter(14, 14, 3);

function cargarXML(cargado) {
if (cargado) {
xmlNodo = this.firstChild;
imagen = [];
titulo = [];
total = xmlNodo.childNodes.length;
for (i=0; i 0) {
 bf.blurX--;
 bf.blurY--;
 contenedor_mc.filters = [bf];
  }
}
};


////PRIMERA IMAGEN///////
//generamos la funcion
function  CargarPrimeraImagen()  {
//cargamos en el clip de pelÃcula "contenedor_mc"
//con el primer valor del array imagen
posarray=0
contenedor_mc.loadMovie(imagen[posarray],1);
 bf.blurX = 14;
 bf.blurY = 14;
 //Mostramos la barra de titulo
this.Texto_mc.gotoAndPlay(2)
//Cargamos el titulo
_root.Texto_mc.Titulo_txt.text = titulo[posarray];
Estado = "Activo";
Carrusel()
}
///SIGUIENTE IMAGEN////////
function  SiguienteImagen()  {
//Si al menos queda una imagen para llegar al total
if (posarray<(total-1)) {
//Sumo 1 a posarray
posarray++;
//Cargamos la imagen
contenedor_mc.loadMovie(imagen[posarray]);
 bf.blurX = 14;
 bf.blurY = 14;
 //Mostramos la barra de titulo
this.Texto_mc.gotoAndPlay(2)
//Cargamos el titulo
_root.Texto_mc.Titulo_txt.text = titulo[posarray];
Carrusel()
}
}
////CARRUSEL//////
retraso=4000
function  Carrusel()  {
		miIntervalo = setInterval(pararcarrusel, retraso);
			function pararcarrusel() {
			clearInterval(miIntervalo);
					if (posarray == (total-1)) {
					posarray = -1;	
					CargarPrimeraImagen();
					} else {
					SiguienteImagen();
}
}
}

El actionscript asociado al botÃ³n "Stop_btn":

on (release) {
	//Limpiamos el intervalo
	//para parar el slideshow
	clearInterval(miIntervalo);
	Estado = "Parado";
}

El actionscript asociado al botÃ³n "Play_btn":

on (release) {
    //Activamos el carrusel
	SiguienteImagen();
	Estado = "Activo";
}

Descargar archivo (Se necesita Flash 8):

Algunas entradas relacionadas: