viernes, mayo 22, 2009

Conociendo Flex IX: Galería de imágenes

.
Galería de imágenes de construcción sencilla. Se puede observar como se generan los efectos de transición de fotos utilizando la orden "sequence". Este es un ejemplo adaptado de Fabían, gracias por compartir. En un próximo post modificaré el código para tomar los datos de la galería desde una ubicación remota.


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<!-- Estructura de datos que define los metadatos de las imágenes -->
<mx:XML id="misimagenes">
<imagenes>
<imagen>
<title>"Silencio!, Burgués"</title>
<source>imagen/1.jpg</source>
</imagen>
<imagen>
<title>"Terror en la guerra"</title>
<source>imagen/2.jpg</source>
</imagen>
<imagen>
<title>"Que nos está pasando"</title>
<source>imagen/3.jpg</source>
</imagen>
</imagenes>
</mx:XML>

<!-- Imágenes en la galería -->
<mx:Number id="cantidad">2</mx:Number>
<!-- Número de imagen inicial -->
<mx:Number id="actual">0</mx:Number>

<mx:VBox horizontalCenter="0">
<mx:Canvas width="500" height="550" clipContent="true">
<!-- Se muestra la imagen -->
<mx:Image id="galeria" data="{misimagenes.imagen.source[actual]}"/>
</mx:Canvas>
<!-- Se muestra el título de la foto -->
<mx:Text text="{misimagenes.imagen.title[actual]}"/>
<mx:HBox>
<!-- Se habilitan los botones de navegación, bajo condiciones -->
<mx:Button id="prevBtn" label="Anterior"
click="{previousImage.play(); prevBtn.enabled = false; nextBtn.enabled = false;}"
enabled="{actual > 0}"/>
<mx:Button id="nextBtn" label="Siguiente"
click="{nextImage.play(); prevBtn.enabled = false; nextBtn.enabled = false;}"
enabled="{actual < id="previousImage" target="{galeria}" alphafrom="1" alphato="0" duration="100" effectend="{actual = actual - 1}" alphafrom="0" alphato="1" duration="100" id="nextImage" target="{galeria}" alphafrom="1" alphato="0" duration="1000" effectend="{actual = actual + 1}" alphafrom="0" alphato="1" duration="1000">


No hay comentarios.: