Prototype Event Settings

What Is Prototype Event

A full prototype event combines the trigger, operation, target and animation. Here are what each element means:

• Trigger: Under what circumstances will the event occur.
• Operation: What happens after the event.
• Target: Who is the target of the action.
• Animation: Enrich the whole process.

Trigger

The trigger determines when the action will be activated.

1. Single-click and double-click: As the name suggests, click or double click the layer. Tip: They are always for common use, like opening the link or clicking the button.
2. When hovering: Trigger the operation when hovering mouse on the hot spot. Tip: It is always used for displaying the prompt of a button’s function. It can also be used to notify users that the zone is interactive via the status change when hovering.
3. Drag: Click the hot spot and drag it to a certain direction. Tip: It is usually used for a carousel or a drawer sidebar.
4. When pressing: Trigger the operation when users click and press the hot spot. Tip: It is always used in situations for mobile devices. For example, use 3D Touch on iOS devices.
5. Mouse over: Trigger the operation when the mouse enters the hot zone. Tip: It is always used to notify users that this hot zone is interactive. It can also be used to switch information without clicking. For example, when checking the date, details about each date are displayed in real time when moving the mouse on it.
6. Mouse out: Triggle the operation when the mouse leaves the hot zone. Tip: Its usage situation is similiar to that of mouse over. Generally, they will be used together.
7. Press: Trigger the operation when pressing the hot point. Tip: It is always used for the changing hot zone. For example, when clicking any app icon on the Windows computer, you will enter the selection mode.
8. Release: Trigger the operation when releasing the mouse. Tip: It is always used together with pressing. For example, users sometimes may need to drag the scroll bar for certain purposes. After that, they need to release the mouse to leave the selection mode.
9. Time-lapse: It is like a timer. However, when the countdown goes to zero, the event will be automatically triggered.

Operation

The operation determines what behavior the event will perform when it is triggered.

1. Redirect to: Redirect to the certain frame when triggering the event.
2. Open the window: The certain frame will be opened as a popup window in the current page.
3. Switch to the window: Switch from popup 1 to popup 2. It is generally used together with opening the window.
4. Close the window: Close the current window.
5. Return: Back to the previous frame.
6. Open the link: Open a new window and access the entered URL.

Target

The target determines the target object and the final destination of the event.

Only frames on the current page can be displayed. You can not set cross-page target.

Animation

The animation is used to enrich the event.

The animation is set as instant by default. However, Pixso supports various animation effects and you can combine different animation effects to achieve better interactive performance.

Tip: There is a dynamic preview of each animation effect, which will help you better know the actual effect.

Reset the target frame's state

For supported actions and target layer types, you can reset state when the interaction reaches its target:

• Scroll position: return the target frame to its initial scroll position.
• Component state: return components inside the target frame to their initial states.
• Video state: return video in the target frame to its initial playback state and position.

Choose the resets that match the intended journey. Returning to the beginning of a page needs different behavior from returning to the point where a user left it. The reset options available depend on the action and target you select.

Add multiple actions to one trigger

1. Create an interaction and configure its initial trigger, action, and target.
2. Open that interaction's settings.
3. Select the + above the existing action to add another action.
4. Configure the additional action as you would a normal prototype action.
5. Play the prototype and activate the trigger to check the combined result.

Multiple actions let one trigger produce more than one response. Review every target and reset setting together so that the combined behavior matches the flow you want to demonstrate.

Prototype targets are frames on the current page. Keep connected targets on that page when configuring these interactions.