HTML5 canvas mask animation

Forum|Forum|9 years ago
December 12, 2016
3 replies
3329 views

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.

This topic has been closed for replies.

Correct answer Colin Holgate

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.

Colin HolgateCorrect answer

Inspiring

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.

L

ludovicbarbotAuthor

Participant

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

Inspiring

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.