Image Button

Table of Contents

    Image Buttons enables you to personalize the appearance of a button using images. Image Buttons can be used as controls for virtually any any action supported by IntuiFace . There are other three types of buttons in IntuiFace:

    • Button: use to trigger any action. You can modify its visible text and overall appearance like color and size.
    • Toggle Button: has two states: checked and unchecked. Each state can trigger its own set of actions.
    • Image Toggle Button: has two states: checked and unchecked. Each state can trigger its own set of actions and can be personalized with images.

    Using Image Buttons in your Experiences

    Use the Image Button to initiate any action supported by IntuiFace. Examples include:

    • navigation to a new space
    • start, stop, pause or rewind a video
    • turn a page
    • show/hide images
    • browse to a specific URL
    • open a map to particular coordinates

    Image Buttons can be placed into the scene either as a standalone control or they can be inserted into any type of collection. This latter method, when used with Image Buttons, can create very interesting display techniques for navigational control.

    To add an Image Button, either use the menu item Insert -> Assets -> Image Button or select the Image Button icon from the Assets Panel.

    You can switch at any time between Image Buttons to simple Button styles, open the Properties panel for the selected button and modify it by clicking on the button icon displayed on the panel.

    Image_Button_propertyswitch.png

    To change the button's text - or to delete the text entirely - you can either:

    • Double-click the button and edit text directly in the scene, or
    • Modify the Text property in the Properties panel.

    Properties, Triggers & Actions

    Properties

    See Common asset properties for details about common properties shared by all asset types

    Appearance

    You can change the label, position, orientation, colors and effects from here. For Image Buttons you can select the pressed and released images.

    State

    • Enabled: disabled buttons will not respond to interaction

    Images

    • Released image: Image displayed when the Image Button is not being touched.
    • Pressed image: Image displayed when the Image Button is being touched. Can be the same image as for Released image. However, making the Pressed image - for example - a darker version of the Released image provides the user with helpful visual feedback.

    The following image ilustrates the "Appearance" properties for Image Buttons

    image_button_Appearance_Properties.png

    Text

    Has the same Text properties as the Button asset

    Button_text_property.jpg

    Triggers

    See Triggers Overview to get details of common triggers shared by all assets or collections

    The Image Button asset has the same Triggers as the Button asset

    Actions

    See Actions Overview to get details of common actions shared by all assets or collections

    The Image Button asset has the same Actions as the Button asset