Adobe Animate cc: Target child mask

[Salakala]

Hi!

 

How would one go about targeting a mask for animation that is nested inside a movieclip.

 

.from(this.movieclip.mask, 1, {x:"+=100"},"+=1")   does not work for me.

 

 

 

Thank You

 

Salakala

[GreenSock]

I'm not very familiar with Animate CC anymore, but back in the Flash days if I remember correctly, any mask you applied in the IDE wasn't accessible via scripting (weird, I know). Instead, you had to actually apply the mask via scripting itself in order to make it work. In other words, put that object (the mask) on the stage as a MovieClip/Sprite itself, then set it as the mask for the other object(s) using ActionScript/JavaScript, then you can animate it using ActionScript/JavaScript. Have you tried that? 

[Salakala]

Thank you for the suggestion Jack.  I remember similar issues and it might be a case of "ghost of Flash past"

 

However it's out of my scope of Javascript knowledge . I'll look in to it though.  

[Web Dizajner]

Try to get a answer at Adobe Animate forum https://forums.adobe.com/community/animate or http://stackoverflow.com/questions/tagged/createjs

 

You can ask how to targeting a mask for animation that is nested inside a movieclip with CreateJS and then you can use that for GSAP.

[davi]

What jack said, have to do it via code.

Now there may be a better way to do this (I didn't put a ton of thought into this) but this is how I do it (and i how I use to workaround Chrome's canvas mask bug, which they've recently fixed).

If you remember the good old Flash days and how you MANUALLY set up a mask using an Alpha Blending Mode by nesting the clip's content in a movieclip, and then had a movieclip on a layer above with the blend mode set to ALPHA; this is the same way except you don't have a dropdown menu where you can select a blending mode, plus you have to nest it one more time if you want to animate the movieclip as a whole, which I recommend doing just in case. The other issue that I had encountered was that if you wanted content to be animated underneath (i.e. like have the layer underneath the mask be animated on that layer within that timeline), then you had to continually apply the mask every frame. In any case, the mask is now created programatically and you can use code to adjust the mask to do whatever you want.

So, have your content as a movieclip, and the masking layer as a movieclip on a layer above, give both instance names (let's say 'content_mc' and 'mask_mc'). Then select both and turn those into another movieclip, nesting those items, distribute to layers and just make sure the mask layer is on a layer above in the main movieclip; give the main movieclip an instance name too, let's call it 'child_mc'. Then lets nest the clip again into another new movieclip, then give it an instance name of 'parent_mc'.

I'd personally make a function so you can reuse this, so on the first frame of the main timeline add this code >

root.addMask = function(maskClip, maskParent, cacheX, cacheY, cacheWidth, cacheHeight, maskingDuration) 
{

//Add initial mask
maskClip.compositeOperation = "destination-in";
maskParent.cache(cacheX,cacheY,cacheWidth,cacheHeight);

//Add mask every tick
maskParent.updateMaskCache = function(event) {
if(!event.paused) {
maskParent.uncache();
maskClip.compositeOperation = "destination-in";
maskParent.cache(cacheX,cacheY,cacheWidth,cacheHeight);
}
}
createjs.Ticker.addEventListener("tick", maskParent.updateMaskCache);

//Clear tick event after XX seconds
maskParent.maskTimeout = setTimeout(function() {
createjs.Ticker.removeEventListener("tick", maskParent.updateMaskCache);
}, maskingDuration * 1000);

}

Then inside the main movieclip on a blank layer, add this code >

root.addMask(root.parent_mc.child_mc.mask_mc, root.parent_mc.child_mc, 0, 0, 300, 200, 2);

The first thing you're passing in is the path to the mask clip, the second being the child clip or the name of the mask clip's parent moveclip (in our case child_mc), then the co-ords from where to start the mask (typically 0,0), the width of the area to be masked (not necessarily the content's width), the height of the area to be masked, and finally the duration for how long you want to apply the mask (if the content is animated).
 

Now, if your content is just static content that just needs a static mask, then you obviously don't need to continually apply the mask, you can just pass in a zero duration. But if the content that is being masked has animated content in it, then you need to continually apply the mask for the whole duration of that animation. In the example above I'm using 2-seconds. Again, there's probably a much better way to apply this

All that just to apply a mask programatically, meh. But now you can target the mask to do what you want >

.from(root.parent_mc.child_mc.mask_mc, 1, { x:"+=100" }, "+=1"); 
//Obviously, from an appropriate frame in the timeline

Just keep in mind that if you move the mask, then you need to continually apply it over that period of time as well as account for the area that gets affected.

Again, there might be a much better solution