Interactions
FlairBuilder supports a wide range of interactions for simple to advanced prototyping.
Adding interactions
To add interactions to a component use the Interactions Panel. If the selected component supports interactions, you’ll see a list of specific events in the panel, such as mouse click, double click, mouse enter/over, mouse out. Move the mouse cursor over one of the events in order to show the list of available actions.
To add an action, simply click on one of the buttons in the the actions toolbar. Here are the actions available, briefly described:
Link to page
Creates a link to another page in the project.
Show/Hide components
Use this action to show/hide components on page. The configuration panel for this action lets you pick a list of components for which you want to change the visibility.
Show layer
Use this action in conjunction with page layers.
The Close layer action lets you close either the currently displayed layer or all opened layers.
Browse Tabs/Cards
This action lets you browse or flip the tabs/cards of components like Tabs, Accordion or Card Stack. You have several options that cover most, if not all common usages. You can flip to the next or previous card, first or last card, or to a specific card index.
Enable/Disable components
This action lets you enable or disable components. For instance, a common usage, is to enable certain elements on page only a check box is selected. Just like in the case of Show/Hide (see above) action, you can pick a list of target components easily.
Move/Resize components
This is a very powerful action. It lets you both move and resize components. Plus, you can also add animation to it. Just like in the case of Show/Hide action (see above), you can simply pick the list of target components. More than that, you can also move and resize the components to their final position and FlairBuilder will record that. You don’t need to input the new coordinates yourself.
Update styling
This action makes it easy to change the styling of a component upon a certain event. For instance, you can create hover effects for buttons or links.
Update variable
Sometimes you need to update the value of a project variable. This action lets you do just that. And you quite a few options to. You can simply specify the new value, or choose to increment/decrement it by a certain step value. Mix this with the ability to resize a component and you can prototype really fancy stuff.
If…Else… conditions
This action lets you put a condition for the execution of following actions in the behavior stack. It’s simple and intuitive to use. If you put more than one If… conditions in the stack, only the first one which yields true will be executed. This makes it easy to prototype complex conditional interactions.
Trigger custom events
It is possible to trigger a custom event upon an user interaction event. For instance, when user clicks on a button, you can explicitly trigger an event like “FORM SUBMIT”, “USER LOGIN”, or something similar.
If you choose the corresponding option, events will be triggered at a project level. This means that all pages will be notified and you’ll get the chance to take further actions on those pages by adding interaction to “On Custom Event” for those pages.
Otherwise, custom events will be handled by the containing group or custom component.
Browse the file system
This is a simple action that requires no configuration. Use it to mimic interactions like opening or uploading a file.
Go to URL
Another very simple action that lets you open a page in the browser with the given URL.
