Tutorial > Mockplus RP > Interactions > Interaction Types

Interaction Types

Page Interactions

Web or app interactions in Mockplus RP can be used on a whole page so that you can click anywhere on the page to trigger the interaction. This is how it works: 

  • Select a page/component and open "Interactions" panel at the right side. Click "Add interaction" to start defining. 

  • Click "Select target" to select/search for a target page under the "Pages" tab.

  • Add a trigger, command, duration or delay time according to you need. 

Please note: 

  • The "Home" page listed under the "Pages" tab above is the first page on the left Project Tree. ( Even when you've reordered them, it will also be the first page.)

  • The following "Back link" means to create a back link that can take you back to the page involved in your last operation.

There is one more way for you to quickly create page interactions. Simply drag and drop the link point (a circle spot in the top right corner of the selected component ) to the target page on the left Project Tree.

Command Interactions

You can create smart command interactions between components and components:

  • Select a page and open the "Interactions" panel on the right side. Click "Add interaction" to start defining. 

  • Click "Select target" to select/search for a target page under the "Components" tab.

Then you can choose an interaction command from the following option:

  • Move: Move a component to a desired location on the page. 

  • Resize: Change the width and height of a component based on your settings. (When your component has been defined with borders, shadows and other properties, these properties will be resized as well. )

  • Zoom: Zoom in/out at a set ratio. (When your component has been defined with borders, shadows and other properties, these properties will be resized as well. )

  • Rotate: Rotate a component at a desired angle. 

  • Show/Hide: Change the visibility of a component.

  • Switch content: Switch contents of different panels.  It only applies to Content Panel.

  • Switch state: Switch states of a component when you've added custom states to it.


There is one more way to define a UI interaction between components and components. Just drag and drop the link point (a circle spot in the top right corner of your selected component ) to the target component on the page.

State Interactions

Mockplus RP provides a special "State panel" to help you create different states on a component, such as "Mouse Hover", "Pressed", "Selected", "Focused" and "Disabled", etc. You can also customize a state accordig to your needs. 

Check some examples of these states: 

Mouse Hover

This state helps present the different style effects of a component when the cursor hovers over or out of the component. 

Two steps to create it: 

Step1. Select a component and click "+" (on the poping out State Panel), then select "Mouse Hover". 

Step2. Switch to the "Mouse Hover" state and set a fill color for the component. 

You will see the color change when hovering over or out of the object in preview mode. 

Pressed

This state is often used on buttons to let the user know if the button is pressed down or released. 

Two steps to create it:  

Step1. Select a component and click "+" (on the poping out State Panel), then select "Pressed". (Skip to step 2 if you have Pressed state by default)

Step2. Switch to the "Pressed" state and set a fill color for the button. 

You will see the color change when the button is activated in preview mode. 

Selected

This state is often used on Checkboxes and Radio Buttons. It's used to indicate the selected item in preview mode. 

This effect is done in a one single step: select a component and choose "Selected" on the right State Panel, then you will see this item selected by default in preview mode. 

Focused

This state is often used on a "Input Field" component to help indicate input and non-input states of the component.

This effect is done in one single step: select an object and switch to "Focused", then you will see the effect in preview more. You can also set a different border color or fill color for input and non-input states.

Disabled

This state is widely used to indicate unavailable component. 

To create disabled state, you can easily select a component and check the "Disabled" item on the right State Panel.

Custom State

You can create custom states to enhance visual appeal of a component.

Here is a guide to help you customize a mouse hovering and leaving state: 

Step1. Select a component and click "+" (on the poping out State Panel), then select "Custom state". 

Step2. Switch to the newly created "State 1" and set a different fill color for it. 

Step3. Drag the link point to the component itself, add a "Mouse Enter" trigger and a "Switch state" command, and select "State 1" in the state column of the popping out dialogue. 

Repeat this step, choose a "Mouse leave" trigger and a "Switch state" command, and select "Normal" in the state column of the popping out dialogue. 

Clone States

You can clone custom states in one click. Just hover on a custom state and you will see three icons labeled as "Rename", "Clone" and "Delete". Click "Clone" to create an identical state. 

External Link

An external link can take you to another external page in preview mode. To add an external link, you should select a component and fill "External URL" field on the right Property panel with an external web address. You can also name it if necessary.

Next Icons