Changing Opacity by Actions

Denilson_Reis · October 26, 2022, 5:48am

Hi Guys, is there a way to change opacity of an object using code or Actions?

Example: I want to be able to click an object (square Shape) and after releasing the click, I want the Object change its opacity. Is that possible? If so, how would I accomplish that?

Thanks in advance!

PhuongThuy_Le · October 26, 2022, 6:42am

Hi,

Please take a look at the attached sample to see if it is what you’re looking for.
change object opacity.approj (284 KB)

You can achieve that with the Change Object State action in ActivePresenter. Do as follows:

Insert a shape (Insert tab > Shape).
Add a new state for the shape (View tab > Object States > click Edit State > Add State > New State).
Change the opacity of the new state (Properties pane > Style & Effects tab > Fill section > Opacity).
Add event - actions to the shape (Properties pane > Interactivity tab > Events - Actions > On Click event > Change Object State action).

For more information about Object States in ActivePresenter, kindly refer to this article:

BR,
Thuy

Denilson_Reis · October 26, 2022, 7:54pm

Thanks my friend for the quicker re-ply. I tested and it really worked well. Appreciated it. But I should confess that this topic awoke me one more question…
What about if, for interactivity, I want to use a slider1 and make some dynamic modifications on the opacity of Object_A. How would be the Java Script code for writing something like that? In other words, in stead of creating many object states, could I make it dynamic according to the position of my slider and have the opacity on Object_A modified as the slider changes?

Thank you so much!

Deni

PhuongThuy_Le · October 27, 2022, 2:48am

Hi,

To do that, you can insert a slider and a shape into the Canvas first.
Then, select the slider > Properties pane > Interactivity tab > Events - Actions section > add On Changing event > Execute JavaScript action > use the JavaScript below:

var opacity = prez.object('Slider_4').value() / 100;
prez.object('Shape_5').node.style.opacity = opacity;

Note that you have to use the correct name of the slider and shape, Deni.
And take a look at this article to know more about Slider in ActivePresenter 9:

BR,

Denilson_Reis · October 27, 2022, 8:50am

Thank you so much! Your code worked like Ice cream!

Once I selected the slider, I used the “Size and Properties” tab to change the number of steps to any number bigger than 1 (in my case I used 7). This way I could perform smoother movements.
Following, I created the variable “Gradually” (by pressing the plus sign) and chose the option “After dragging Slider”. Now it is running greatly. I should add that the reading of the article you recommended me was a great help as well.

You guys rock! Really appreciated!

Deni