Carousel de imágenes en Flex
- De Francisco
- 11 mayo, 2011
- 9 comentarios
En respuesta a un recién seguidor que se ha unido a Portalscreen, he querido traeros una aplicación muy sencilla pero a la vez ilustrativa y que seguro a muchos les interese conocer.
Se trata de un Carousel de imágenes automáticas, la cual carga imágenes dinámicamente a partir de los datos de un fichero XML y seguidamente proporciona un efecto Fade entre transición y transición.
En este ejemplo podréis encontrar la forma de crear imágenes a partir de la clase Image() y conocer como asignar un efecto desde código as3.
Desde aquí podéis descargar el código fuente del ejemplo: ps_banner_auto.rar
[Galería de imágenes en Flex]
Espero que os haya sido de ayuda, que lo disfrutéis.
Copyright © 2013
Buenas noches,, excelente post Francisco, gracias por ayudarnos con ello es bastante útil para los que nos estamos iniciando en el mundo Flex. Saludos, gracias.
Me alegra que te sea de ayuda, un saludo y gracias por comentar.
Queda actualizado con funcionalidades Slider sobre los controles.
ami no me funciona pues no me carga las imagenes una vez que lo subo a la web no tengo que embeber la imagen?
No hace falta embeber la imágenes, fíjate bien en las rutas. Un saludo.
Muchas gracias por el aporte Francisco, me ha venido de pelos! Saludos desde Argentina!
Hernán
Perfecto Hernán, me alegro que te sea de ayuda.
Saludos.
hola, me agrada tu ejemplo pero a la hora de implementarlo no se ven las imágenes, te agradeceria mucho si me orientaras un poco, no soy muy diestra en flex aún…
Me imagino que mi error debe estar por…
dataLoader.load(new URLRequest(“Bibliotecas\Imágenes”));
} SUPONGO QUE ESTE DEBE SER LA RUTA DONDE SE OBTIENEN LAS IMAGENES, NO?
// Método que obtiene y pinta las imagenes del carrusel
private function handlerCompleteLoad(event:Event):void
{
try{
datos = new XMLList(event.currentTarget.data);
for each(var item:XML in datos.image)
{
var img:Image = new Image;
img.width = 350;
img.height = 235;
img.maintainAspectRatio = false;
img.source = item;
img.buttonMode = true;
img.addEventListener(MouseEvent.CLICK, handlerClickImage);
lstImages.addChild(img);
}
}catch(er:Error){
trace(‘Error al parsear los datos desde xml’);
}
}
te agradecería mucho tu ayuda…
gracias
saludos
Hola Bertha, realmente con el elemento “Loader”:
dataLoader.load(new URLRequest(“Bibliotecas\Imágenes”));
se obtiene el XML donde están todas las rutas hacia las imágenes, simplemente es un xml de configuración en el cual debes poner las rutas hacia cada imagen que deseas cargar.
La propiedad que contiene la ruta a la imagen es:
img.source = item;
donde ‘item’ podría ser “path/imagenes/image.png”.
Espero haber despejado tu duda, y te invito a navegar y participar en mi blog cuando quieras.
Un saludo