Mask with other movieclip

[unnurb99618889]

Hi

I have already made a mask. I want it to look like a magnifying glass. How can I make the handle and the mask move together?

[ClayUUID]

However you're currently moving the mask... do that for the handle too.

[unnurb99618889]

Thank you for nothing

[Colin Holgate]

The rim, handle, and mask would all be inside one movieclip. You then move that movieclip around the stage.

[unnurb99618889]

I have tried to make a movieclip with the handle and the mask,but the handle also becomes the mask.

[Colin Holgate]

The movieclip that includes the handle and the mask, that you drag around, would not be in a mask layer. Inside that movieclip the rim and handle would not be a mask layer, or masked, it would be on top. The mask layer would be the glass part of the magnifier, and under that mask layer would be the close up of the image you're trying to see.

[unnurb99618889]

I tried that but the bigger picture inside is a still picture when I put the movieclip in the scene

[Colin Holgate · Accepted solution]

You would select the bigger picture, convert to symbol as MovieClip (F8), then give the movieclip a name that can be used to control it with code.

Are you able to upload what you have so far? It might be quicker to fix what's wrong than to make a whole demo file for you.

[unnurb99618889]

I do not have any script in the movieclip, named allt.

On the scene I have this script:

allt.addEventListener(MouseEvent.MOUSE_DOWN, fl_ClickToDrag);

function fl_ClickToDrag(event:MouseEvent):void

{

allt.startDrag();

}

stage.addEventListener(MouseEvent.MOUSE_UP, fl_ReleaseToDrop_8);

function fl_ReleaseToDrop(event:MouseEvent):void

{

allt.stopDrag();

}

[Colin Holgate]

You wouldn't have any script in the movieclip. You could have a mouse move listener on the stage that is constantly updating the large image inside the movieclip, to move it into the right place. But that might end up with little twitches, where the large image is catching up with the magnifier position. I would not use startDrag/stopDrag, but use MouseEvent.MOUSE_MOVE instead. Then you can set the position of the magnifier and the large image at the same time.

Maybe I will make an example!

[unnurb99618889]

Can you show me the code fore that?

for dummies

[Colin Holgate]

I went ahead and made the whole thing. You can see it in action here:

http://colin.scienceninja.com/magnify.swf

and the files are here:

http://colin.scienceninja.com/magnify.zip

As it stands the magnifier glass is centered on the cursor, you could have an offset to make it be dragged by the handle.

The entire script, which does some things I hadn't mentioned too, is this:

import flash.events.MouseEvent;

var monascale:Number = magnifier.mona.width / littlemona.width;

magnifier.mona.x = magnifier.x * -monascale;

magnifier.mona.y = magnifier.y * -monascale;

magnifier.addEventListener(MouseEvent.MOUSE_DOWN, down);

function down(e: MouseEvent) {

  stage.addEventListener(MouseEvent.MOUSE_MOVE, move);

  stage.addEventListener(MouseEvent.MOUSE_UP, up);

}

function move(e: MouseEvent) {

  magnifier.x = e.stageX;

  magnifier.y = e.stageY;

  magnifier.mona.x = e.stageX * -monascale;

  magnifier.mona.y = e.stageY * -monascale;

}

function up(e: MouseEvent) {

  stage.removeEventListener(MouseEvent.MOUSE_MOVE, move);

  stage.removeEventListener(MouseEvent.MOUSE_UP, up);

}

[unnurb99618889]

Thank you but I cant see the zip file

[Colin Holgate]

Sorry, typo:

http://colin.scienceninja.com/magnifier.zip

[Colin Holgate]

I changed the example to 60 fps instead of 24, it's nicer:

http://colin.scienceninja.com/magnify.swf

[Colin Holgate]

Not that I don't have other things I should be doing, but I did a Canvas version:

magnify_Canvas

The math in Canvas is harder for various reasons, and I still didn't get it exactly right. It's close enough for now. It does at least show that all the masking side of things can work in Canvas ok.

[unnurb99618889]

Thank you for everything, but I am magnifying a gold coin, but I can´t get the magnifying centered, how can I do that?

[unnurb99618889]

the mask is named glass, the bigger picture in the movieclip is named big, and the smaller one in the scene small

[Colin Holgate]

One tricky part would be the moving around of the close up version of the image. It too would be in the same movieclip, and masked by the mask layer. As you move the whole movieclip around the stage you could make the close up image also be a movieclip, and you would move that in the opposite direction. The illusion would be that the close up isn't moving.

There are a lot of YouTube videos on how to make a magnifier effect. Do a search for:

how to do a magnifier in flash

that will show up quite a few.

[unnurb99618889]

I can not find any instructions on how to make mask with the handle