• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

HTML Canvas / Easel.js - Frosted glass effect

Engaged ,
Mar 03, 2022 Mar 03, 2022

Copy link to clipboard

Copied

How would I create a dynamic frosted glass effect? 

 

This is for a lens on an optometry trial frame. 

 

The lens is frosted, so that the object behind the lens is more or less depending on the distance between the object and the lens. 

 

It needs to be a dynamic effect simualting a real frosted lens.

 

IMG_4960.JPG

Views

922

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
community guidelines

correct answers 1 Correct answer

Engaged , Mar 14, 2022 Mar 14, 2022

@kglad   JC solved this for me while helping on the lens magnify effect.

 

https://community.adobe.com/t5/animate-discussions/magnifying-lens-html5-canvas/m-p/12800595

Votes

Translate

Translate
Community Expert ,
Mar 04, 2022 Mar 04, 2022

Copy link to clipboard

Copied

start with a blur filter

Votes

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
community guidelines
Engaged ,
Mar 04, 2022 Mar 04, 2022

Copy link to clipboard

Copied

@kglad   Thanks.  Would that work dynamically??  Also I don't think the blur would be consistent across, say a white filled circle with say 50% alpha.   The blur would graduate from the centre to the edge.

Votes

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
community guidelines
Community Expert ,
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

yes, you can use a filter dynamically, but for a uniform look, just import a frosted glass image.

Votes

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
community guidelines
Engaged ,
Mar 05, 2022 Mar 05, 2022

Copy link to clipboard

Copied

quote

yes, you can use a filter dynamically, but for a uniform look, just import a frosted glass image.


By @kglad

 

Not sure what you mean by import a frosted glass image. 

 

Frosting or blur would only be apparent when another image is behind the frosted or blured image. 

 

If you export just the element that has the frosted/blurred filter applied say in Illustrator (the whole project is vector graphics), then it would just be opaque in Animate.

 

The frosting/blur needs to be dynamic in Animate, and uniform, so that the frosting/blur is apparent when an element is moved behind the frosting/blured lens.

Votes

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
community guidelines
Community Expert ,
Mar 06, 2022 Mar 06, 2022

Copy link to clipboard

Copied

i don't see how to do this: The frosting/blur needs to be dynamic in Animate, and uniform, so that the frosting/blur is apparent when an element is moved behind the frosting/blured lens.

Votes

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
community guidelines
Engaged ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

@kglad   JC solved this for me while helping on the lens magnify effect.

 

https://community.adobe.com/t5/animate-discussions/magnifying-lens-html5-canvas/m-p/12800595

Votes

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
community guidelines
Community Expert ,
Mar 14, 2022 Mar 14, 2022

Copy link to clipboard

Copied

LATEST

good to know.  thank you! and especially @JoãoCésar 

Votes

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
community guidelines