Highlighted

Creating a gradient transparency mask for movie clip in html5 canvas

Explorer ,
Apr 08, 2020

Copy link to clipboard

Copied

I have scrolling text in a movieclip that I want to fade in and out (top and bottom) using a gradient transparency mask. This has to be output as HTML5 canvas. How do you create a transparency mask with faded out edges? 

TOPICS
How to

Views

452

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Creating a gradient transparency mask for movie clip in html5 canvas

Explorer ,
Apr 08, 2020

Copy link to clipboard

Copied

I have scrolling text in a movieclip that I want to fade in and out (top and bottom) using a gradient transparency mask. This has to be output as HTML5 canvas. How do you create a transparency mask with faded out edges? 

TOPICS
How to

Views

453

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Apr 08, 2020 0
Adobe Community Professional ,
Apr 08, 2020

Copy link to clipboard

Copied

Hi.

 

You're gonna need an AlphaMaskFilter for this task.

 

Please see this answer:

https://community.adobe.com/t5/animate/how-to-do-make-a-working-gradient-mask-in-html5-canvas/m-p/10...

 

 

Regards,

JC

__________________________________________
HTML5, JSFL, and AS3 samples: http://bit.ly/2mJgDoG

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 08, 2020 0
Explorer ,
Apr 08, 2020

Copy link to clipboard

Copied

Thanks for your quick reply. Sorry, I can't work it out....

Here's an AS3 version of what I want to achieve in HTML5 canvas though. 

Thankyou.

Andy

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 08, 2020 0
Explorer ,
Apr 10, 2020

Copy link to clipboard

Copied

I'm struggling to get this to work in HTML5 canvas.

 

I realise that I'll need to use AlphaMaskFilter but it is above my skill level. I have had no luck with Adobe support but it may be to do with me trying to explain what I need to achieve. I'll take to blame for being an amateur but I'd really like someone to help.

There's a couple of solutions if you search "Gradient Transparency Mask" but hard for me to work out how to apply to my situation. The answer from Joäis much appreciated but hard for me to work out in my case as the .fla provided works on a shape not a scrolling movie clip (but then again it may be because of my skill level). Can anyone can help me?

I've made an example in AS3 and provided as a movie to show exactly the effect that I want to achieve (See the movie below of how I have set it up using AS3 which will not translate straight to HTML5).

Hopefully it helps to illustrate what I need to achieve.

Thanks, Andy

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Apr 10, 2020 0