Button Behavior
SmartUI Button Behavior operation and ACEs.
By design, each state of the object can have an animation. Thus, the sprite can be set to a nicely animated sequence. Nevertheless, all the images for all the animations representing each button state must be of the same size in the canvas to render correctly.
The animations work by delta, meaning they alter the object's properties by a percentage of their original state. For instance, when hovering, the button can move upwards by 5% of its height and then return to its original position.
All animations to represent each state are optional. If none are set, the object's default animation will always be displayed, but you can still apply easings to provide a polished UI.
The button also has simulation capabilities. You can simulate it being clicked or hovered, and the button will react to these actions. The conditions On-Hover and On-Click will also be triggered as a result of this simulation. This feature is particularly handy in contexts where you need to instruct users to interact with the UI or force an action if needed.
📺 Basic Setup - Tutorial Video
Properties
Property | Description |
| Enables or Disables the button. |
| Index of the element within a container. Used for focusing the elements in the sequence order. |
| Allows interactions for the component even if the object is invisible. It doesn't affect the visibility attribute of the object, you are responsible of turning it visible or invisible when needed. |
| Enables the component to darken a bit when its state is Disabled or when it's focused. Auto-Color is meant to provide a quick identification of the component state. For more specialized customizations, use the component events and disable this check. |
| Unique name string for identifying the selected button |
| Animations when hovering |
| Timelapse to complete the animation in seconds. |
| Hover animation Name. Case sensitive, must match the exact name of the animation. [Sprites only] |
| Percentage to alter the object properties |
| Animations when pressing |
| Timelapse to complete the animation in seconds. |
| Press animation Name. Case sensitive, must match the exact name of the animation. [Sprites only] |
| Percentage to alter the object properties |
| Animations when restoring the button properties |
| Timelapse to complete the animation in seconds. |
| Restore animation Name. Case sensitive, must match the exact name of the animation. [Sprites only] |
| Disabled animation Name. Case sensitive, must match the exact name of the animation. [Sprites only] |
| Marks if the component can have the focus. |
| Animations when focusing the button |
| Timelapse to complete the animation in seconds. |
| Focus animation Name. Case sensitive, must match the exact name of the animation. [Sprites only] |
| Percentage to alter the object properties |
Smart UI Button behavior covers all the basic functionality of a Push Button, handles event animations, provides built-in animations and easings, and triggers user event interactions.
Actions
Set Enabled
Set Enabled
Disable/Enable the Button
Parameter | Description |
| Enabled/Disabled |
Set Name
Set Name
Sets the name of the radio button.
Parameter | Description |
| Name of the component |
Set Index
Set Index
Sets the sequence index to influence the selection of components.
Parameter | Description |
| Sequence index value. E.g. Indexes values of 0 are processed before indexes values of 1 and 2. |
Set Invisible Component
Set Invisible Component
Sets whether the component should be processed when it's invisible. Opacity is not taken in consideration.It doesn't affect the visibility attribute of the object, you are responsible of turning it visible or invisible when needed.
Parameter | Description |
| Set if the component processed even if it's invisible: True/False |
Set Focusable
Set Focusable
Sets the component to be able to receive the focus
Parameter | Description |
| Flag to allow the component to be focused. |
Set Focus
Set Focus
Sets the focus on the component, removing the focus from all the components within the same container.
Simulate Click
Simulate Click
Trigger the click event of the plugin, simulating the interaction of the user. Button will be locked for interactions until the animation time is completed.
Simulate Hover
Simulate Hover
Trigger the hover event of the plugin, simulating the interaction of the user.
Set Hover Animation
Set Hover Animation
Sets the animation when hovering the button
Parameter | Description |
| Animation name. Only applicable for Sprite objects |
Set Hover Time
Set Hover Time
Sets the animation duration when hovering the button
Parameter | Description |
| Animation duration in seconds |
Set Hover Change Factor
Set Hover Change Factor
Sets the animation when hovering the button
Parameter | Description |
| Percentage to alter the object properties. Eg. 0.5 is 50%, 0.1 is 10%. |
Set Hover Function
Set Hover Function
Sets the animation when hovering the button
Parameter | Description |
| Establishes the animation function when hovering. |
Set Press Animation
Set Press Animation
Sets the animation when pressing the button
Parameter | Description |
| Animation name. Only applicable for Sprite objects |
Set Press Time
Set Press Time
Sets the animation duration when pressing the button
Parameter | Description |
| Animation duration in seconds |
Set Press Change Factor
Set Press Change Factor
Sets the animation when pressing the button
Parameter | Description |
| Percentage to alter the object properties. Eg. 0.5 is 50%, 0.1 is 10%. |
Set Press Function
Set Press Function
Sets the animation when pressing the button
Parameter | Description |
| Establishes the animation function when pressing. |
Set Normal Animation
Set Normal Animation
Sets the animation when restoring the button to its normal state
Parameter | Description |
| Animation name. Only applicable for Sprite objects |
Set Restore Time
Set Restore Time
Sets the animation duration when restore the button to its original state
Parameter | Description |
| Animation duration in seconds |
Set Restore Function
Set Restore Function
Sets the animation when restoring the button
Parameter | Description |
| Establishes the animation function when restoring the button to its original state. |
Set Disabled Animation
Set Disabled Animation
Sets the animation when disabling the button
Parameter | Description |
| Animation name. Only applicable for Sprite objects |
Set Focus Animation
Set Focus Animation
Sets the animation when focusing the button. Focus animation overrides the normal animation if the button has the focus.
Parameter | Description |
| Animation name. Only applicable for Sprite objects |
Set Focus Time
Set Focus Time
Sets the animation duration when focusing the button
Parameter | Description |
| Animation duration in seconds |
Set Focus Change Factor
Set Focus Change Factor
Sets the animation when focusing the button
Parameter | Description |
| Percentage to alter the object properties. Eg. 0.5 is 50%, 0.1 is 10%. |
Set Focus Function
Set Focus Function
Sets the animation when focusing the button
Parameter | Description |
| Establishes the animation function when focusing. |
Conditions
Is Enabled
Is Enabled
Returns true if the Button is enabled
Is Invisible Component
Is Invisible Component
Returns true if the Button is configured as an invisible component.
Compare Name
Compare Name
Returns true if the button components name equals the parameter
Parameter | Description |
| Name to compare with the component picked. |
Is Focused
Is Focused
Returns true if the Button has the focus
Is Hovered
Is Hovered
Returns true if the Button is hovering
Is Pressed
Is Pressed
Returns true if the Button is being pressed
On Focus
On Focus
Triggered when the button gets the focus
On Focus Lost
On Focus Lost
Triggered when the button loses focus
On Click
On Click
Triggered when the button is clicked
On Hover
On Hover
Triggered when the button starts hovering
On Hover Lost
On Hover Lost
Triggered when the button ends hovering
On Pressed
On Pressed
Triggered when the button started pressing.
On Released
On Released
Triggered when the button is released.
Expressions
Name
Name
Component name
(c) Pixel Perfect Studio 2024
Last updated