Button Behavior

SmartUI Button Behavior operation and ACEs.

Buttons are the foundation of every interation in SmartUI. Therefore all the button-like components inherit push buttons main features and ACE's. The behavior is applicable for any world object, but setting the animations automatically are only valid for the Sprite plugin. Nevertheless, the built-in animations that affect the object properties like: size, position and angle are still applicable for any world object. This gives you the possibility to add the behavior to objects like 9-Patches and Tiled-Backgrounds.

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.

Button behavior handles the following animations: Normal , Focused , Hover , Pressed , and Disabled .

Sample list fo animations in a Sprite

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.

Download

https://store.pixelperfectstudio.mx/product/smart-ui-ncbeta/

📺 Basic Setup - Tutorial Video

Properties

Property	Description
Enabled	Enables or Disables the button.
Index	Index of the element within a container. Used for focusing the elements in the sequence order.
Invisible Component	Turns the component opacity to 0 while rendering it to allow invisible interactions.
Automatic-Color	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.
Name	Unique name string for identifying the selected button
On Hover	Animations when hovering
Hover Time	Timelapse to complete the animation in seconds.
Hover Animation	Hover animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]
Hover Change Factor	Percentage to alter the object properties
On Press	Animations when pressing
Press Time	Timelapse to complete the animation in seconds.
Press Animation	Press animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]
Press Change Factor	Percentage to alter the object properties
On Restore	Animations when restoring the button properties
Restore Time	Timelapse to complete the animation in seconds.
Restore Animation	Restore animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]
Disabled Animation	Disabled animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]
Focusable	Marks if the component can have the focus.
On Focus	Animations when focusing the button
Focus Time	Timelapse to complete the animation in seconds.
Focus Animation	Focus animation Name. Case sensitive, must match the exact name of the animation. [Sprites only]
Focus Change Factor	Percentage to alter the object properties

---

Smart UI Button ACEs

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.

Download

https://store.pixelperfectstudio.mx/product/smart-ui-ncbeta/

Actions

---

Set Disabled Animation

Sets the animation when disabling the button

Parameter	Description
Animation name	Animation name. Only applicable for Sprite objects

Set Enabled

Disable/Enable the Button

Parameter	Description
Enabled	Enabled/Disabled

Set Focus

Sets the focus on the component, removing the focus from all the components within the same container.

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	Animation name. Only applicable for Sprite objects

Set Focus Change Factor

Sets the animation when focusing the button

Parameter	Description
Change Factor	Percentage to alter the object properties. Eg. 0.5 is 50%, 0.1 is 10%.

Set Focus Function

Sets the animation when focusing the button

Parameter	Description
Animation Function	Establishes the animation function when focusing.

Set Focus Time

Sets the animation duration when focusing the button

Parameter	Description
Duration	Animation duration in seconds

Set Focusable

Sets the component to be able to receive the focus

Parameter	Description
Focusable	Flag to allow the component to be focused.

Set Hover Animation

Sets the animation when hovering the button

Parameter	Description
Animation name	Animation name. Only applicable for Sprite objects

Set Hover Change Factor

Sets the animation when hovering the button

Parameter	Description
Change Factor	Percentage to alter the object properties. Eg. 0.5 is 50%, 0.1 is 10%.

Set Hover Function

Sets the animation when hovering the button

Parameter	Description
Animation Function	Establishes the animation function when hovering.

Set Hover Time

Sets the animation duration when hovering the button

Parameter	Description
Duration	Animation duration in seconds

Set Invisible Component

Turns the component opacity to 0 while rendering it to allow invisible interactions.

Parameter	Description
Invisible Component	Set if the component processed even if it's invisible: True/False

Set Name

Sets the name of the radio button.

Parameter	Description
Name	Name of the component

Set Normal Animation

Sets the animation when restoring the button to its normal state

Parameter	Description
Animation name	Animation name. Only applicable for Sprite objects

Set Press Animation

Sets the animation when pressing the button

Parameter	Description
Animation name	Animation name. Only applicable for Sprite objects

Set Press Change Factor

Sets the animation when pressing the button

Parameter	Description
Change Factor	Percentage to alter the object properties. Eg. 0.5 is 50%, 0.1 is 10%.

Set Press Function

Sets the animation when pressing the button

Parameter	Description
Animation Function	Establishes the animation function when pressing.

Set Press Time

Sets the animation duration when pressing the button

Parameter	Description
Duration	Animation duration in seconds

Set Restore Function

Sets the animation when restoring the button

Parameter	Description
Animation Function	Establishes the animation function when restoring the button to its original state.

Set Restore Time

Sets the animation duration when restore the button to its original state

Parameter	Description
Duration	Animation duration in seconds

Set Index

Sets the sequence index to influence the selection of components.

Parameter	Description
Index	Sequence index value. E.g. Indexes values of 0 are processed before indexes values of 1 and 2.

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.

Hover

Trigger the hover event of the plugin, simulating the interaction of the user.

Stop Hover

Stops simulating the hover state.

Conditions

---

Compare Name

Returns true if the button components name equals the parameter

Parameter	Description
Name	Name to compare with the component picked.

Is Enabled

Returns true if the Button is enabled

Is Focused

Returns true if the Button has the focus

Is Hovered

Returns true if the Button is hovering

Is Invisible Component

Returns true if the Button is configured as an invisible component.

Is Pressed

Returns true if the Button is being pressed

On Click

Triggered when the button is clicked

On Focus

Triggered when the button gets the focus

On Focus Lost

Triggered when the button loses focus

On Hover

Triggered when the button starts hovering

On Hover Lost

Triggered when the button ends hovering

On Pressed

Triggered when the button started pressing.

On Released

Triggered when the button is released.

Expressions

---

Name

Component name

(c) Pixel Perfect Studio 2024