Highlighted

Animate Masking bug/limitation?

Community Beginner ,
Nov 14, 2019

Copy link to clipboard

Copied

Hi,

 

I'm trying to mask a layer with another animated movieclip in a masking layer. The masking layer is made up of a number of concentric circles that are scaling in relation to each other. The problem is that animate doesn't seem to consider the outer outlined circles in the mask (I've converted the outlines to filled shapes rather than strokes so it's not that I'm trying to mask with a stroke). Instead, animate masks using only the center filled circle.

 

(I've attached an image to help demonstrate what's going on)

Is this a limitation or a bug in Animate or am I doing something wrong?

 

AdobeAnimateNonContiguousMaskProblem.png

My guess why after merging the layers it did not work straight away is that stupid Flash did not know what the shapes were because some were still selected.

 

All have to be broken apart and deselected.

 

You do this by choosing edit multiple frames, selecting everything, pressing Ctrl+B and then clicking outside to deselect.

There is no limitation on having mask that consists of unconnected shapes.

 

TOPICS
Error, Other, Product issue

Views

562

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

Animate Masking bug/limitation?

Community Beginner ,
Nov 14, 2019

Copy link to clipboard

Copied

Hi,

 

I'm trying to mask a layer with another animated movieclip in a masking layer. The masking layer is made up of a number of concentric circles that are scaling in relation to each other. The problem is that animate doesn't seem to consider the outer outlined circles in the mask (I've converted the outlines to filled shapes rather than strokes so it's not that I'm trying to mask with a stroke). Instead, animate masks using only the center filled circle.

 

(I've attached an image to help demonstrate what's going on)

Is this a limitation or a bug in Animate or am I doing something wrong?

 

AdobeAnimateNonContiguousMaskProblem.png

My guess why after merging the layers it did not work straight away is that stupid Flash did not know what the shapes were because some were still selected.

 

All have to be broken apart and deselected.

 

You do this by choosing edit multiple frames, selecting everything, pressing Ctrl+B and then clicking outside to deselect.

There is no limitation on having mask that consists of unconnected shapes.

 

TOPICS
Error, Other, Product issue

Views

563

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
Nov 14, 2019 0
Adobe Community Professional ,
Nov 14, 2019

Copy link to clipboard

Copied

Let me guess... HTML5 Canvas document?

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
Reply
Loading...
Nov 14, 2019 0
Community Beginner ,
Nov 14, 2019

Copy link to clipboard

Copied

How do I check the document type?

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
Reply
Loading...
Nov 14, 2019 0
Community Beginner ,
Nov 14, 2019

Copy link to clipboard

Copied

Ok, I can't find anywhere in the application where it explicitly states what kind of document it is, but when I go to publish settings, it all seems to be set to actionscript, and the "Convert to" menu offers HTML 5 as an option but not actionscript, so I'm assuming this is actually an AS3 canvas? Maybe?

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
Reply
Loading...
Nov 14, 2019 0
Adobe Community Professional ,
Nov 14, 2019

Copy link to clipboard

Copied

It is ActionScript 3.0, but wouldn't usually be referred to as AS3 canvas.

 

To set a movieclip to be a mask of something else you need to use code, and I imagine that doing that code every frame would make the animated movieclip be an animated mask.

 

I just tested that, and it seems to work. If 'circle' is a non-animated movieclip on the stage, and 'masker' is an animated movieclip that sits on top of 'circle', this would make it be an animated mask:

 

import flash.events.Event;

stop();
stage.addEventListener(Event.ENTER_FRAME,domask);

function domask(e:Event){
	circle.mask = masker;
}

 

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
Reply
Loading...
Nov 14, 2019 0
Guide ,
Nov 14, 2019

Copy link to clipboard

Copied

Hi mate,

 

Make sure that the shapes you use as a mask are not two separate Drawing Objects. Break them apart down to raw vector shapes and it should work.

 

- Nick: Character designer and animator, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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
Reply
Loading...
Nov 14, 2019 0
Community Beginner ,
Nov 15, 2019

Copy link to clipboard

Copied

I'm not sure exactly what you mean by "Separate Drawing Objects". The 3 circles are on separate layers, they're all shapes, and are animated using shape tweens. None of them are symbols.3 separate circles, all shapes, no symbols3 separate circles, all shapes, no symbolseach one is in it's own layer and animated using shape tweenseach one is in it's own layer and animated using shape tweens

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
Reply
Loading...
Nov 15, 2019 0
Guide ,
Nov 15, 2019

Copy link to clipboard

Copied

Hi mate,

 

You should have started with this screenshot and you would have gotten your answer right away.

 

Only one layer in a symbol can work as a mask and that is the bottom layer.

This is not a bug. It's by design and used widely in the animation industry in various situations.

 

Also on the one layer you can have multiple closed shapes, but they should either be raw vector or a single drawing object. If the individual shapes are each an individual Drawing Object only the first one works as mask (This is what I assumed you had as you omitted important information in your first post.)

 

In your case, you have to convert your ripple effect to frame by frame animation and merge those layers to be able to use as a mask. That's all.

 

Hope this helps!

 

- Nick: Character designer and animator, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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
Reply
Loading...
Nov 15, 2019 0
Community Beginner ,
Nov 15, 2019

Copy link to clipboard

Copied

Awesome, thank you. Making that change now, will let you know if it works 🙂

 

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
Reply
Loading...
Nov 15, 2019 1
Guide ,
Nov 15, 2019

Copy link to clipboard

Copied

ps. I should have also said: For retiming purposes, duplicate your layers first, guide the original 3 and flatten the copy; put the copy at the bottom of the layer stack.

 

- Nick: Character designer and animator, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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
Reply
Loading...
Nov 15, 2019 0
Community Beginner ,
Nov 15, 2019

Copy link to clipboard

Copied

Ok so, my flash lingo is a littl out of date, so let me see if I did this right:

 

1. I selected the frames in each layer individually and right click: Convert to frame by frame animation > Keyframe each frame

2. Select all layers right click: Merge layers

 

I now have a single layer in the movieclip that appears to have what I want as far as a mask, it shows up correctly when I drop it into a parent clip, but when I apply it as a mask, it still seems to just pick one of the shapes and use that as the mask at any given time during playback rather than using all shapes as the mask. first the thin circle until that disappears, then the thicker one, then the filled center one.

 

Is the problem that Flash can't do non-contiguous masking maybe?

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
Reply
Loading...
Nov 15, 2019 0
Guide ,
Nov 15, 2019

Copy link to clipboard

Copied

Hi mate,

 

I just replicated your situation and I found out that the behaviour of the Movie Clip and Graphic are not identical in this situation.

Whether it is a bug or a feature it's difficult to tell but it's present in CS6 as well.

 

When you turn the mask into a Graphic Symbol (you can switch it from the Properties panel) it works as expected.

Here is that working example FLA:  https://drive.google.com/file/d/1bVNLBLo85hlBuKoUnKFGTJIwWHDGYx9D/view?usp=sharing

 

Concentric_Circles_Mask.gif

 

Hope this helps!

 

- Nick: Character designer and animator, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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
Reply
Loading...
Nov 15, 2019 1
Community Beginner ,
Nov 15, 2019

Copy link to clipboard

Copied

Ok, so facepalm on my part.

I went to investigate how to change the movieclip to a graphic and realized that actually the matte symbol was a graphic all along.. So I'm guessing that's not the issue.

 

Thanks for your patience and help, sorry I got that wrong in my initial description.

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
Reply
Loading...
Nov 15, 2019 0
Guide ,
Nov 15, 2019

Copy link to clipboard

Copied

Would you put your file on g-drive or somewhere so that I can look into it, mate.

 

Let's get to the bottom of it.

 

- Nick: Character designer and animator, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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
Reply
Loading...
Nov 15, 2019 0
Community Beginner ,
Nov 15, 2019

Copy link to clipboard

Copied

I was actually able to get it to behave the way I expect by drawing a thin rectangle through the center of the clip intersecting all the circles and making them into a single contiguous shape. Obviously that's not ideal as it makes everything have a weirtd thin line through it, but may be a clue as to how to fix it?

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
Reply
Loading...
Nov 15, 2019 0
Guide ,
Nov 15, 2019

Copy link to clipboard

Copied

You don't need to do that.

 

Check the FLA that I posted.

 

- Nick: Character designer and animator, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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
Reply
Loading...
Nov 15, 2019 0
Community Beginner ,
Nov 15, 2019

Copy link to clipboard

Copied

I wish I could, but I don't think the studio I'm working for would allow me to do that unfortunately. Let me try doing the same thing in a clean file and see if I have the same problem.

 

Thank you again for all your help.

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
Reply
Loading...
Nov 15, 2019 0
Guide ,
Nov 15, 2019

Copy link to clipboard

Copied

My guess why after merging the layers it did not work straight away is that stupid Flash did not know what the shapes were because some were still selected.

 

All have to be broken apart and deselected.

 

You do this by choosing edit multiple frames, selecting everything, pressing Ctrl+B and then clicking outside to deselect.

There is no limitation on having mask that consists of unconnected shapes.

 

- Nick: Character designer and animator, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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
Reply
Loading...
Nov 15, 2019 1
Guide ,
Nov 15, 2019

Copy link to clipboard

Copied

Good luck, mate!

 

It will work out in the end. Can be done easily and you will find the right steps.

 

Sounds convoluted if one reads our discussion, but it actually is very straight forward.

 

If you want to see how I use this technique to mask irises for character animation you can download this sample rig: http://flash-powertools.com/kinefox-character-rig-free-download/

 

- Nick: Character designer and animator, Flash user since 1998
Member of Flanimate Power Tools team - extensions for character animation

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
Reply
Loading...
Nov 15, 2019 0
New Here ,
Apr 13, 2020

Copy link to clipboard

Copied

you, are a savior.

thank 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
Reply
Loading...
Apr 13, 2020 1