Skip to main content
n_ckLav_s
n_ckLav_s
Participant
May 1, 2018
Answered

Masking bugs & browser support

  • May 1, 2018
  • 1 reply
  • 451 views

I use GWD and Animate to make Display ad's, Ill start with the question then an explanation of why I'm asking.

Question: What technique of masking does Animate use and how buggy (if thats a word) is it?

Why I ask: GWD doesn't have any masking support built-in:  "While we found many options, all of them turned out to have big flaws with fidelity or browser reach"

Link to full article: Google Web Designer Blog: Masking in Google Web Designer

Basically is it worth steering away from masks in animate, or does adobe know something GWD doesn't

This topic has been closed for replies.
Correct answer Colin Holgate

A regular mask layer in an Animate timeline does work in HTML5 Canvas, but as with ActionScript, it normally doesn't do alpha. Anywhere that the mask layer has a pixel will reveal the layer underneath, at 100%.

In ActionScript you can work around that using code, and it seems you could do the same with CreateJS:

EaselJS v1.0.0 API Documentation : AlphaMaskFilter

But, for normal timeline animation you would not expect to get an alpha transparency as part of the mask, and that may be what Google are expecting to be standard in a mask.

There is another restriction with HTML5 Canvas over ActionScript. In ActionScript you can have an animated symbol in the mask layer, with its own timeline of changing shapes. That doesn't work in HTML5 Canvas, you either have to use shape tweens, or have. the animated shapes in the mask layer, and not inside a symbol.

So, short answer is that you can use masks, but expect those limitations.

1 reply

Colin Holgate
Colin HolgateCorrect answer
Inspiring
May 1, 2018

A regular mask layer in an Animate timeline does work in HTML5 Canvas, but as with ActionScript, it normally doesn't do alpha. Anywhere that the mask layer has a pixel will reveal the layer underneath, at 100%.

In ActionScript you can work around that using code, and it seems you could do the same with CreateJS:

EaselJS v1.0.0 API Documentation : AlphaMaskFilter

But, for normal timeline animation you would not expect to get an alpha transparency as part of the mask, and that may be what Google are expecting to be standard in a mask.

There is another restriction with HTML5 Canvas over ActionScript. In ActionScript you can have an animated symbol in the mask layer, with its own timeline of changing shapes. That doesn't work in HTML5 Canvas, you either have to use shape tweens, or have. the animated shapes in the mask layer, and not inside a symbol.

So, short answer is that you can use masks, but expect those limitations.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices