Skip to main content
November 11, 2011
Answered

Zoom and Unzoom image

  • November 11, 2011
  • 2 replies
  • 1135 views

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

This topic has been closed for replies.
Correct answer Peter Celuch

You should remove the eventListener in its handler function so it triggers exactly once.

private function mouseClicked(e:MouseEvent):void

{

    stage.removeEventListener(MouseEvent.CLICK, mouseClicked);

    trace("Mouse Clicked");

    stage.removeChild(screen);

    stage.removeChild(clonedBitmap);

}

2 replies

Peter Celuch
Peter CeluchCorrect answer
Legend
November 11, 2011

You should remove the eventListener in its handler function so it triggers exactly once.

private function mouseClicked(e:MouseEvent):void

{

    stage.removeEventListener(MouseEvent.CLICK, mouseClicked);

    trace("Mouse Clicked");

    stage.removeChild(screen);

    stage.removeChild(clonedBitmap);

}

November 11, 2011

Oh wicked, so that was the answer. You are basically doing a bit of recursion, whereby the method calls itself on a mouse click. Its looking good.

Once again thanks a lot.

Nick

Peter Celuch
Legend
November 11, 2011

It's not recursion - when you call

stage.removeEventListener(MouseEvent.CLICK, mouseClicked);

all you do is remove the association of click event and the function from the listeners table. The function mouseClicked doesn't execute at this line. Note that it's not mouseClicked(), but only a reference to the function mouseClicked.

Kenneth Kawamoto
Community Expert
Community Expert
November 11, 2011

I think I should also be removing the MouseEvent.

I think so too.

--

Kenneth Kawamoto

http://www.materiaprima.co.uk/