Mask with other movieclip

Explorer ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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?

Views

431

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Adobe Community Professional , Jul 23, 2017 Jul 23, 2017
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.

Likes

Translate

Translate
Adobe Community Professional ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

Thank you for nothing

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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();

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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!

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

Can you show me the code fore that?

for dummies

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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);

}

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

Thank you but I cant see the zip file

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 24, 2017 Jul 24, 2017

Copy link to clipboard

Copied

LATEST

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Community Professional ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Jul 23, 2017 Jul 23, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines