Highlighted

Convert AS3 Gradient Transparency Mask to HTML5 canvas

Explorer ,
Apr 13, 2020

Copy link to clipboard

Copied

I'm struggling to get a gradient transparency mask 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 so far but it may be to do with me trying to explain what I need to achieve, it's been Easter, there's a bad flu going round, all the above.

 

I'll take to blame for being an amateur but I'd really like someone to help. There's a couple of solutions to masking in HTML5 canvas if you search "Gradient Transparency Mask" in the community forum but hard for me to work out how to apply to my situation.

 

The answer from expert Joäo 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).

 

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).

 

see video of how I did it here: https://www.youtube.com/watch?v=DJvDcHsdhIE

 

When I convert this to HTML5 canvas type it comments out AS3 that wont work. But hopefully it helps to illustrate what I need to achieve. Thanks, Andy

Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
TOPICS
ActionScript, Code, How to, Other

Views

531

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

Convert AS3 Gradient Transparency Mask to HTML5 canvas

Explorer ,
Apr 13, 2020

Copy link to clipboard

Copied

I'm struggling to get a gradient transparency mask 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 so far but it may be to do with me trying to explain what I need to achieve, it's been Easter, there's a bad flu going round, all the above.

 

I'll take to blame for being an amateur but I'd really like someone to help. There's a couple of solutions to masking in HTML5 canvas if you search "Gradient Transparency Mask" in the community forum but hard for me to work out how to apply to my situation.

 

The answer from expert Joäo 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).

 

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).

 

see video of how I did it here: https://www.youtube.com/watch?v=DJvDcHsdhIE

 

When I convert this to HTML5 canvas type it comments out AS3 that wont work. But hopefully it helps to illustrate what I need to achieve. Thanks, Andy

Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
TOPICS
ActionScript, Code, How to, Other

Views

532

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 13, 2020 0
Adobe Community Professional ,
Apr 14, 2020

Copy link to clipboard

Copied

Hi.

 

Sorry for the long delay.

 

I'm investigating your issue.

 

I was able to create the mask. But I only succeeded when I placed the mask and the text in the main timeline and positioning the mask at 0,0.

 

I'm still trying to figure it out how to keep the correct position and size of both elements in any position or parent.

 

Hopefully someone will find out an answer before me.

 

 

Regards,

JC

 

P.S.: In the meantime... Are you able to fake the effect? For exemple inverting the mask using a dark shape with a gradient/hole where the text should be visible?

__________________________________________
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 14, 2020 0
Explorer ,
Apr 14, 2020

Copy link to clipboard

Copied

Hi JC. Thanks for getting back to me, I really appreciate it. This does seem to be a hard thing to achieve in HTML5 canvas. I've faked it for now using a solid mask with thin strips top and bottom. See video:

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 14, 2020 0
Explorer ,
Apr 22, 2020

Copy link to clipboard

Copied

Hi JC. I had trouble getting an answer from Adobe technical support. So we'll put this in the "too hard" basket. I really appreciate your looking into this. Would be cool to get it working but for now I have faked the gradient by using solid lines that make a crude fade... seems to make the client happy 🙂

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 22, 2020 0