Copy link to clipboard
Copied
I created a layer mask using a rectangle symbol to hide the elements in the masked layer underneath. I made the rectangle just 20 px wide so that it doesn't cover the elements and the elements don't show up by default. My plan is to click a button on the web page to make the rectangle symbol 120 px wide so that it covers the elements and display them. I wrote the following code...
var _this = this;
_this.button1.on('click', function(){
/* button1 is a button symbol instance on stage)*/
_this.rectangle1.width = 120;
/* rectangle1 is a rectangle graphic symbol instance on the layer mask)*/
});
unfortunately, the elements didn't show up! Is my code wrong? Or the objects used as a mask can't be modified this way by an event handler after the HTML5Canvas got published? If I can modify any instance by button click action, why can't I do that to an instance located on a mask layer? Is it a bug or limitation? I have seen people using movieclips as a mask for a dynamic tween effect and it did its masking task perfectly.
Copy link to clipboard
Copied
A mask layer will REVEAL the objects it covers and mask anything it doesn't cover. It sounds like you may have done the opposite? As long as the mask is only clipped to the layer holding the relevant objects then it won't affect anything else. Perhaps I've misunderstood but I believe this may be your problem.
Copy link to clipboard
Copied
When a Canvas document is published, any symbol or symbols on a mask layer are flattened into a single shape object. If the symbols are tweened, they're turned into a sequence of shapes. Since shapes don't have names, there's no way to directly address them. There are ways to indirectly address them, but they're unofficial, undocumented, and really not recommended.
If you want to dynamically alter a mask, the correct way is to dynamically apply the mask at runtime.