Modified on: Wed, 14 Sep, 2016 at 11:04 AM
Buttons enable your users to express decisions and preferences that control the IntuiFace experience. There are three kinds of buttons in IntuiFace:
Simple button: use to run any action. You can modify its visible text and overall appearance like color and size.
Image button: use to run any action. Replaces the Simple button style with any image of your choice. (In fact, you assign two images: one image for when the button is untouched, another for when it is touched.) Can also have a label.
Toggle button: has two states: checked and unchecked. Each state can trigger its own set of actions.
This article covers the Simple and Image Button styles. See this article for more about the Toggle Button style.
Using Buttons in your Experiences
Use the Simple and 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
Buttons can be placed into the scene either as a standalone control or 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 insert a button, either use the menu item Insert -> Button or select the Button icon in the quick action toolbar to the left of Composer. Buttons are always inserted with the Simple style.
To switch between the Simple and Image styles, open the Properties panel for a selected button and modify it by clicking on the button icon displayed on the panel.
To change the button 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
Enabled: disabled buttons will not respond to interaction
Fill color: color of the interior of the button. Setting the Opacity to 0 will eliminate all color.
Outline color: color of the outline of the button. Setting the Opacity to 0 will eliminate all color.
Pressed color: color of the pressed state of the button. Setting the Opacity to 0 will eliminate all color.
Radius: roundness of the corners. A radius of 0 will square the corners
Flat: toggle whether fill color should have a gradient effect
Shadow: toggle whether the button is given some three dimensional depth
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 forReleased image. However, making the Pressed image - for example - a darker version of the Released imageprovides the user with helpful visual feedback.
Text: Visible text in the button. Leave blank if you don't want to display any text.
- Font size
- Font color
- Line wrap
Horizontal alignment: Horizontal placement of text: Left, Center, or Right
Vertical alignment: Vertical placement of text: Top, Center, or Bottom
Margin: Margin width in pixels
Is pressed: Raised when the button is pressed.
Is released: Raised when the button is released.
Disable: Disable the button
Enable: Enable the button
Simulate a tap: Simulate a single tap on the button.
When a Countdown Interface Asset reaches 0 Then Enable the button.
When a gesture is performed, Then simulate a tap on the button. This will give the user 2 choices (gesture or tap the button) to perform the same actions.
Did you find it helpful?
Sorry we couldn't be helpful. Help us improve this article with your feedback.