Bluring slide background in JS

ActivePresenter Support Questions
1

Hi,

is it possible to blur the background image of a slide? I am trying to create a point-and-click adventure with AP and would like to have an effect that when people look at things from their inventory, the background gets blurry while the thing they look at remains in focus.

Is that possible through JS?

Thanks,

Rolf

Please choose an appropriate sub-category to post your question or topic.

2

@Rolf -
My approach here would be to create a blurred image with a third party tool.
I use SnagIt.
Have a normal image and the blurred image as states.
When the pop-up inventory window is opened call the blurred state.
When the pop-up inventory window is closed call the normal state.

Hope this helps.

3

You might also just bring up a semi-transparent black box between the stage and the pop-up window.

It is not a blur but it may have a satisfactory effect with minimal work.

4

Thanks, Greg,

in my project I have roughly 200 slides with their individual backgrounds and I’m a little reluctant to double the size of my project if the blurring can be done automatically.

At the moment I am using the semi-transparent solution - it’s okay but the blur would be much cooler :wink:

Best, Rolf

5

What if you always brought up the same blurred image?

Say like a blurred treasure chest background, backpack, or cabinet of sorts…?
Maybe leave it slightly smaller than the whole screen…

This way you can have a blurred background - it relates to the current task of checking inventory, and you only add one new image to the whole project.

6

Hi @Rolf,

As you are blurring the image with a shape overlay, you can adjust the following to blur:

  1. Set that image’s fill to No Fill
  2. Run the following script when you need to blur: $(prez.object('Shape_5').node).css('backdrop-filter', 'blur(15px)');
    You may need to update shape name (Shape_5), and update the blur radius (15px) if necessary. The higher the radius, the blurrier the effect.

Regards,

1 Like
7

Excellent Hang,

that’s exactly what I was looking for.

Thanks, Rolf

1 Like