Created
April 18, 2013 14:34
-
-
Save fenixkim/5413205 to your computer and use it in GitHub Desktop.
Este es un complemento del ejemplo de Reel.as. pero se agrega un contenedor de imagen para mostrar la imagen grande. Cuando se hace click sobre una vista previa, el recurso de la imagen de la misma, se carga en el contenedor de la imagen grande.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import com.goto.display.ImageView; | |
import com.goto.display.layout.HLayout; | |
import com.greensock.*; | |
import com.greensock.easing.*; | |
import flash.events.Event; | |
import flash.events.MouseEvent; | |
// Creo un layout horizotal para agregar las imágenes | |
var layout:HLayout = new HLayout(); | |
// Agrego una separación de 10 px para cada objeto del layout | |
layout.gab = 10; | |
layout.y = 510; | |
// Agrego el layout al escebario | |
addChild(layout); | |
// Organizo las imagenes en un arreglo de objetos | |
var images:Array = [{URL:"images/tn/image1.jpg"}, | |
{URL:"images/tn/image2.jpg"}, | |
{URL:"images/tn/image3.jpg"}, | |
{URL:"images/tn/image4.jpg"}, | |
{URL:"images/tn/image1.jpg"}, | |
{URL:"images/tn/image2.jpg"}, | |
{URL:"images/tn/image3.jpg"}, | |
{URL:"images/tn/image4.jpg"}]; | |
// Creo una función que crea un ImageView para cada imagen | |
function createImage(index:uint) { | |
// Creo la instancia de image view y detecto cuando la carga termina | |
var img:ImageView = new ImageView(); | |
img.addEventListener(ImageView.LOAD_COMPLETE, onLoadComplete); | |
img.addEventListener(MouseEvent.CLICK, onClick); | |
// Use scaleMode para que ajuste todas las imágenes al mismo alto | |
// y decide el ancho automáticamente | |
img.scaleMode = "fitToHeight"; | |
// Espefico el alto para cada imagen | |
img.height = 100; | |
// Le digo al image view que carge la URL del arrelo de imágenes que esta | |
// en la posición 'index' | |
img.source = images[index].URL; | |
} | |
// Detecta cuando la imagen se completa de cargar | |
// y agrega el imageview al layout | |
function onLoadComplete(event:Event) { | |
var img:ImageView = event.currentTarget as ImageView; | |
layout.addChild(img); | |
// Creo una interpolación de entrada para cada imagen | |
TweenMax.from(img, 1, {alpha:0}); | |
} | |
// Creo un contador iniciando en 0 por defecto | |
var count:uint; | |
// Uso for each, para recorrer cada elemento del arreglo | |
// de imagenes automáticamente y evito llamar la función | |
// manualmente muchas veces | |
for each(var obj:Object in images) { | |
// Ejecuto la función que crea la imagen | |
createImage(count); | |
// Incrementa el contador en 1 | |
count++; | |
} | |
// | |
// Imagen Grande | |
// | |
var imgGrande:ImageView = new ImageView(); | |
imgGrande.addEventListener(ImageView.LOAD_COMPLETE, onLoadGrandeComplete); | |
imgGrande.width = 960; | |
imgGrande.height = 505; | |
imgGrande.source = "images/image1.jpg"; | |
imgGrande.scaleMode = "fitToWidthAndHeight"; | |
addChild(imgGrande); | |
function onClick(event:MouseEvent) { | |
var tn:ImageView = event.currentTarget as ImageView; | |
imgGrande.source = tn.source.replace("tn/", ""); | |
} | |
function onLoadGrandeComplete(event:Event) { | |
imgGrande.alpha = 1; | |
TweenMax.from(imgGrande, 1, {alpha:0, y:-100, ease:Expo.easeOut}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Mas tarde pongo el archivo