HTML5 canvas mask animation

[ludovicbarbot]

I did an animation on the html5 canvas setting. It is working fine on animate cc.

Only once i publish then it gets weird and does not hide the masked content.

it just plays the animation as it would without the mask layer.

[Sheena Kaul]

Moving to Adobe Animate CC - General​

[rezun8]

hard to say without seeing the file, if it works when published in Animate did you change anything post publishing?

[Colin Holgate · Accepted solution]

In HTML5 Canvas you can't have an animation in the mask itself. If you currently have a graphic or movieclip that is the mask, and inside that it's an animation (like, there's more than one frame), it will fail. Just copy those frames and paste them in at the same level that their movieclip was in. Then the animated mask will work.

[ludovicbarbot]

Hi Coline,

Thanks for your reply.

My mask animation was a frame by frame animation.

I had a handwritten text as my top layer. Then in the mask layer i painted it in frame by frame to make it look as if someone is drawing the name in.

it works perfectly previewed in animate but when i publish it it just shows my frame by frame animation without the mask.

preview in animate cc:

Preview in browser after publishing:

Regards,

Ludovic

[Colin Holgate]

It's when you run it in a browser that it will fail. What is inside the item in the mask layer? If it is the animation of the handwriting effect, then it's not going to work in HTML5 Canvas. If you take the contents of that movieclip, and paste them into the mask layer, it should work ok.

BTW, when I've done handwriting effects I've used a different approach. You start with the finished writing, then make a key frame and delete the last part of the writing. Make another key frame and delete some more. Eventually you have deleted all of the writing, from back to front. You then reverse the frames, and you get the handwriting effect without needing a mask.

[ludovicbarbot]

I found the problem. i had to break down the text to a graphic for it to work. But thanks for you tips Colin! Pretty sure will be using your methods from now on.