Customising Button Graphics

Hi,
How can I change the graphics of a button with mine?
At the moment, I saw that I can change shape, colors, fill, lines, etc, but I cannot use my own graphics.
The max result I obtained is using my graphics as background image of the shape, but it’s not the same.
Suggestions?

Thank you

Stefano

Hi Stefano,

Do you mean that you want to change the appearance of a button when users press or hover over it? If so, you need to edit states of the button.

To do that, please prepare image for each state, and use Image Fill in the Style & Effects tab of the Properties pane to add background image for each state as you wish. You may want to take a look at this tutorial to know how to work with object states.

Regards,

Thank you for your answer.
It’s not about states.
It’s about the possibility to create my own button with its states using my graphics, for example a .png picture normal, hover, ecc.
The only way seems to use that png as image fill of a shape.
Isn’t it?

Thank you

Hi Stefano,

If you just need to handle On Click event, you can use your graphics directly. Image elements support this event.
If you want to create a button with pressed and hover states from your graphics, the only way is using Image Fill for each button states.

Regards

Thank you.
It has to be a button since I need the option “Pause presentation to wait for user input”.

@Stefano_Trillini I am trying to do the same thing. Maybe its possible to create an animation as an html element with js such that onMouseOver (or on hover) the button is highlighted, and onMouseDown (or on click) a built-in script will take you to the next slide or another action occurs. Might have to be created outside AP and imported. I will see if this works and report back.

Hi downstream,

You can import your button (created by HTML/CSS/JavaScript ) into ActivePresenter through a web object: https://atomisystems.com/tutorials/ap8/embed-html-package-in-activepresenter-8/

To trigger an action, you need to use JavaScript in your button to get access to ActivePresenter presentation object. For example:

// in your button click event
var parentPrez = parent.AtomiAP.presentations[0];
parentPrez.nextSlide();

Regards

1 Like

thanks @ToanLS, I also realize I can import any custom object with its states by using image in an AP button. Also works well!

1 Like