The quickest and simplest interaction you can add to your wireframes is a link between two pages. This can be easily done with the 'quick link' shortcut in the interactions panel. Just select the component to which you want to add a link, and the click the 'Quick link...' shortcut. It will display the list of pages in your project, with the option to create a new page, and quickly link to the page you select/create.

After adding the link, you can also select a transition effect which will play when the user clicks on the linking component. The transition effects are particularly useful on mobile prototypes, such as when sliding pages left and right.

Of course, you can also add a link by using the 'Go to page' action from the actions dropdown which shows when you click on an event in the interactions panel.

Show or hide project layers

Layers can be displayed/closed using the 'Show layer' action. This action lets you select a target layer and a transition effect. As opposed to page transitions, the effects for showing/hiding a layer are much more diverse. The list is long, but when selecting one effect, a quick animation will preview the effect for you. By default, no effect is attached to this action.

Show or hide components

Showing or hiding components is also part of every interactive application. FlairBuilder lets you choose a set of components which can be hidden/shown or simple have their visiblity toggled on and off. You can, of course, also add transition effects to this action and a duration.

To select the target components for this action, just point and click them. For every target component selected, a toolbar will show in place, and you can fiddle with the options available there.

Move or resize components

Just as with changing the visiblity of one or more components, you can move/resize them and also do this in an animated manner. You can select the easing of the animation, the duration, but also the coordinate system relative to which the destination position will be computed.

You have three options for the relative position. One is the page coordinates system. This will make the action to always move the target components to the exact position you have chosen. If later one you move the component to a different place, the action, when triggered, will still move it targets to the same position.

A second option is the move target components relative to their initial position, that is, the position where they are at the time the action is triggered. Finally, you can move target components relative to the component that triggers the action. There are various use cases which demand for one option or the other.

Enable or disable components

Enabling or disabling components is very similar to showing or hiding components. Refer to the section above for details.

Trigger custom events

Custom events are a powerful mechanism which let you add custom options for group of components or symbols. They also make your prototype events more meaningful, and they look less 'programmerish'.

You can trigger a custom event such 'LOGIN', 'LOGOUT', 'ADD_USER', or whatever event name you want, and then handle it from upper containing groups or symbols. That is to say that you can add one or more actions to the 'On custom event' section in the interactions panel of a group or symbol. FlairBuilder will execute those actions when a component within the group or symbols fires the respective custom event.

If this sounds complicated, it's because it is. Kiddin', it's not, it just take a little bit of thought to get used with it. Think about custom events as the classic chinese whispers game. One component whispers an event into the ears of the containing group. If the group has actions attached to that event, FlairBuilder will execute them. Then, the group will whisper the same event to its containing group, if there is one, and so on, so forth. The same if the triggering component is in a symbol. Or in a group within a symbol. Or a symbol within a group.

Change components' styling

Sometime you need to change the styling of component, or a group of components, when the user does something. 'Update styling' action lets you do that. You can style one or more components any way you want, and, of course, animate the transition from one styling to another. You can change background, border, font colors, turn text into bold or italic. Any styling you can apply to a component, you can also change it dinamically in the prototype.

To select the components you want to style, do the same as with other actions. Just point and click them when editing the action. A toolbar will show up and let you change the styling, with changes taking places immediately, so you can preview your settings. When exiting the action editing mode, changes will be reverted.

Update the label or value of a component

Some other time, you need to change the contents of a component, such as a label, button, text input and what not, on an action taken by the user. This action help you do just that. Just select the components whose contents you want to change, and double click them to edit the content to the desired value. After existing the action editing mode, the content will be reverted back to its original value. Magic! Sort of.

Browse tabs

Yes, some user clicks will demand switching tabs or card views. Card views more probably than tabs or accordion tabs, but you have the options there. When editing this action, the browse tabs action, select a tabbed component and choose the target tab and desired transition effect. You can even select generic options such as move to the next, previous, first or last tab.

Insert timed delay

When prototyping things that supposedly take time, such a download, upload, sending an message, or any other kind of time consuming task, you can insert a delay between the execution of two different actions. For instance, you can open a layer that displays a progress message, wait for a second or ten, and then close that same layer.

Editing the delay period is as simple as introducing the number of milliseconds you want the delay to last.

Go to an external URL/webpage

No app stands on its own. Ok, maybe some do, but those which don't, will sometime need to open pages from a different place on the internet. Or a different FlairBuilder prototype shared in the online viewer? Up to you. Just input the URL of that page and there you go.