FAQ Submit a request Log in
  1. Moqups Help Center
  2. Working with Moqups
  3. Interactions

Articles in this section

    Object Interactions

    Also in this section

    Object Interactions

    Object Interactions are used primarily to create interactive prototypes. 

    This type of Interaction changes the state of an object on the page, and can be applied to a single object, a group of objects, or a Hotspot. 

    Object Interactions can be used to simulate:

    • Dropdown menus
    • Opening and closing a window or modal dialog in response to a button click
    • Revealing a context menu on right-click
    • Scrolling to a particular area, or element, on the click of a navigation link
    • A radio, checkbox, or switch control that can be toggled

    In this article, we’ll explain each part of an Object Interaction. You’ll also learn how to apply Object Interactions, and how to edit, duplicate and delete them.

    In this article

    Interactions Panel

    The Interactions Panel is located in the Right Sidebar and from this Panel you will be able to:

    • See all the Interactions that have been applied to an object
    • Build an Interaction
    • Create a Hotspot
    • Display tooltips that show interaction links in Preview Mode

    01._Interactions_-_Page_Interactions_-_Interactions-Panel.png

    Trigger, Action, and Target

    An Object Interaction is composed of three parts: a Trigger, an Action and a Target.

    Trigger

    A Trigger is the event that sets an Interaction in motion. In the ‘ON’ dropdown, you can choose from several triggers: Click or Tap, Double-Click, Right-Click, Mouse Over, Mouse Out.

    02._Interactions_-_Object_Interactions_-_Trigger.png

    Action

    An Action is the instruction that will run after a trigger is engaged. The ‘DO’ dropdown lets you choose Actions that apply to Object Interactions or Page Interactions.

    For Object Interactions you can choose: Toggle Visibility, Show Object, Hide Object and Scroll to Object.

    03._Interactions_-_Object-Interactions_-_Action.png

    Target

    A Target is the final outcome that’s visible at the end of an interaction. In the case of Object Interactions, the target section displays a blue target button. After clicking on that button, you will be able to choose a target object from either the page or from the Outline Panel.
     
    04._Interactions_-_Object_Interactions_-_Target.png

    Add Object Interactions

    To add an Object Interaction:

    1. Select the object or group to which you want to add the interaction
    2. Click the Interactions Tab to open the panel
    3. Go to the Add Interaction section
    4. Choose a trigger from the ON drop-down
    5. In the DO drop-down, select an action from the Object Interactions list
    6. Click the Target button to turn on Target Selection Mode
    7. To select your target, click on any object or group, either on the Page or in the Outline Panel
    8. Click Done to apply the interaction

    05._Interactions_-_Object_Interactions_-_Add_Object_Interactions_-_HQ_ver.gif

    Set Invisible State

    When you are building an interaction, you’ll often want to hide the target object so that it is invisible, in the initial state, and appears only after a trigger event – for instance, a dropdown menu that reveals itself only when the dropdown arrow is clicked.

    There are two ways to set an object’s state to invisible:

    From the Outline Panel

    1. Select the object that you want to make invisible
    2. Navigate to the Left Sidebar and click on the Outline Tab
    3. The tab will turn blue, and will open the Outline Panel
    4. In the Outline Tree, the object’s name will be highlighted in blue
    5. Hover over the object’s name and, just to the right, click on the Eye Icon to make the object invisible

    06._Interactions_-_Object_Interactions_-_Set_Invisible_State-From_the_Outline_Panel.png

    From the Format Panel

    1. Select the object you want to make invisible
    2. Navigate to the Right Sidebar and click on the Format Tab
    3. The tab will turn blue, and will open the Format Panel
    4. At the top of the Format Panel, you’ll see the object’s name in blue
    5. Click on the Eye Icon just to the right of your object’s name to make the object invisible

    07._Interactions_-_Object_Interactions_-_Set_Invisible_State_-_From_the_Format_Panel.png

    Edit, Duplicate, or Delete Object Interactions

    When you apply an interaction to an object, it immediately appears in the Interactions List at the top of the Interactions Panel. As you add more interactions to that same object, you’ll see them appear there as well. You can easily edit or delete any interaction from the list – or duplicate an interaction for quick reuse.

    Edit Interaction

    Editing an interaction is useful when you want to change parts of an already existing interaction. By using the editing function, you can update the Trigger, the Action, or the Target individually – without affecting the other parts of the interaction.  

    To edit an interaction:

    1. Select the object or group of objects whose interaction you wish to edit
    2. Click the Interactions Tab to open the Interactions Panel
    3. At the top of the panel, locate the interaction you want to edit
    4. Click the Tool icon
    5. Change the interaction in the Update Interaction section
    6. Click Update to save your changes
    7. Your updated interaction will flash yellow in the list for a few seconds

    08._Interactions_-_Object_Interactions_-_Edit_Interaction.png

     

    Duplicate Interaction

    Often, you may want to apply different variations of an interaction to the same object. The Duplicate function lets you duplicate an extant interaction, and then edit it’s Trigger, Action and Target to suit your needs.

    To duplicate an interaction:

    1. Select the object or group from which you want to duplicate an interaction
    2. Click the Interactions Tab to open the Interactions panel
    3. At the top of the panel, locate the interaction you want to duplicate
    4. Click the Duplicate icon and an identical interaction will appear in the Interactions List at the top of the panel
    5. To edit the new interaction, click on the Tool icon and follow the steps from the Edit Interactions section of this article
    09._Interactions_-_Object_Interactions_-_Duplicate_Interaction.png 
     

    Delete Interaction

    To delete an interaction:

    1. Select the object or group of objects from which you want to delete an interaction
    2. Click the Interactions Tab to open the Interactions panel
    3. At the top of the panel, locate the interaction you want to delete
    4. Click the Delete icon

    10._Interactions_-_Object_Interactions_-_Delete_Interaction.png

    Questions & Answers

    What interactions function in an exported PDF?

    All Page Interactions function normally, with the exception of Jump Back, which relies on your browser history for direction. Object Interactions do not function in PDFs. If you want to provide stakeholders a fully functional prototype, invite them as project guests, or share a project link. Learn how to do both of these in Sharing. You can also export a fully-interactive, offline HTML version of the Viewer itself.