11034 Suscriptores al Feed del Blog
80 Suscriptores al Feed de Anotaciones Breves
45 usuarios online
Javi en YourFonts: convierte tu letra en una fuente personalizada
BlurFilter Parte III
0 COMENTARIOS - Publicado hace 42 meses - Clasificado en: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:
- 101 fuentes para diseñadores
- Silk Companion II Icons
- sub()
- Pentagram
- Cargar Google Analytics al final y Google Maps de forma asíncrona
- Sarah Joncas
- Links 25-01-2007
También te puede interesar:
|
|
|
|
|
