Zoom and Unzoom image
My teacher has gone to bed, but I thought I would try and move ahead. I have come a bit stuck though. I have an image gallery which loads images into thumbnail sized holders. When one of the images is clicked, I darken the background, and use Tween Lite to zoom the image. To do this, I basically clone the bitmap of the original image, place it in the exact location of the original image, and use this as my zooming tool. My method is
private function modelClicked(e:MouseEvent):void
{
stage.addChild(screen);
var item:ModelsItem = e.currentTarget as ModelsItem;
var originalBitmap:Bitmap = item.bitmap;
clonedBitmap = new Bitmap(originalBitmap.bitmapData.clone());
stage.addChild(clonedBitmap);
var rect:Rectangle = originalBitmap.getBounds(stage);
clonedBitmap.x = rect.x;
clonedBitmap.y = rect.y;
clonedBitmap.width = rect.width;
clonedBitmap.height = rect.height;
TweenLite.to(clonedBitmap, 2, { x: (stage.stageWidth - originalBitmap.width) / 4, y: (stage.stageHeight - originalBitmap.height) / 6, onComplete:zoomInFinished, scaleX: 1, scaleY: 1 });
}
This works well. I added an event for when the zoom is finished. The reason for this is that if the user clicks their mouse anywhere on the screen, the image should unzoom and all appropiate actions taken. So I do
private function zoomInFinished():void
{
trace("Zoom In Finished");
stage.addEventListener(MouseEvent.CLICK, mouseClicked);
}
And then
private function mouseClicked(e:MouseEvent):void
{
trace("Mouse Clicked");
stage.removeChild(screen);
stage.removeChild(clonedBitmap);
}
I am having trouble figuring out what to remove and what to add. I currently remove the darkened background (screen) and the clonedBitmap (as I dont want loads and loads of bitmaps if the small image is clicked several times). I think I should also be removing the MouseEvent.
What happens at the moment is you click on the small image it zooms to a bigger image. When you click on the bigger image, it goes away and your back to the original gallery. However, if you try to click on another small image, nothing happens. The method I originally put a MouseEvent on the small images is
private function populateItems():void
{
for (var i:int = 0; i < Math.min(COLS * ROWS, data.picture.length()); i++)
{
var item:ModelsItem = new ModelsItem();
item.data = data.picture;
item.x = PADDING_LEFT + (i % COLS) * (ModelsItem.ITEM_WIDTH + GAP_HORIZONTAL);
item.y = PADDING_TOP + Math.floor(i / COLS) * (ModelsItem.ITEM_HEIGHT + GAP_VERTICAL);
item.addEventListener(MouseEvent.CLICK, modelClicked);
itemsHolder.addChild(item);
sp.source = itemsHolder;
items.push(item);
}
sp.verticalScrollPolicy = "on";
sp.horizontalScrollPolicy = "off";
sp.update();
}
So I am not sure if I need to somehow invoke this EventListener on all items again?
Any advise appreciated,
Nick
