Adding interactions to your experience is a great way to get users engaging with and exploring your content. With Ceros, you can customize the trigger, action and target of an interaction to produce nearly limitless interaction effects. In the sections below we have outlined the three steps for setting up an interaction and have also included an experience with a few common interactions already set up. Keep in mind, this article focuses on creating the core traditional On Click, On Hover, and On View, interactions in the Ceros Studio. These differ from individual Object States, which you can learn more about in our article on using Object States.
Step 1: Identify the trigger you want to evoke an action
The first step in setting up an interaction is to specify the action you want a user to take to trigger your interaction. Below we have identified the three different trigger options you can select from.
- On Click – when a user clicks on a hotspot specified by you, it will trigger an action of your choosing.
- On Hover – when a user mouses over, or hovers on a hotspot, it will trigger an action of your choosing.
- On View – when an object or hotspot of your choosing comes into the viewport (the portion of your experience that is currently viewable by the user) it will trigger an action of your choosing.
Hotspots can be used to trigger an interaction, rather than applying interactions directly to an object. Using hotspots enables you to increase the interactive area of an element. Reminder: Do not animate hotspots.
Step 2: Select the action to be taken as a result of the trigger
Once you have identified the trigger, you have to specify what you want to be triggered. In this menu there are 3 different sections, with numerous actions to choose from. We have defined these below.
Link
- Scroll to position – Use this action when you want to send the user to an anchor point or specific section of a page. The anchor needs to be set up prior to using this action.
- Go to next page – This action will send the user to the next page in the experience.
- Go to previous page – This action will send the user to the previous page in the experience.
- Go to page – This action will send the user to a page of your choosing.
- Go to URL – This action will send a user to a URL of your choosing. You can specify whether you want this URL to open in a new window.
Visible
- Show – This action can be used to turn the visibility of a hidden layer(s), object(s), to be visible. Note: the object or layer must first have the visibility toggled off in the layers panel. Additionally, you will also require a “Hide” action to reverse the above action.
- Hide – This action can be used to turn the visibility of a layer(s), or object(s), to be not visible.
- Toggle – This action switches the view state of a layer or object back and forth upon each interaction. E.g. if a layer is currently viewable, when the user clicks on your toggle interaction it will switch the state to be hidden.
- Open URL in lightbox – This action will present an external webpage of your choosing in a lightbox. You have the ability to customize the size and dimension of the lightbox.
- Fullscreen – This action will make the experience take up the entire screen.
Group-Based Visibility
- Show Target(s) & Hide Others – This action allows you to show a designated target* within a folder or group, and hide everything else in that folder or group.
- Hide Target(s) & Show Others – This action allows you to hide a designated target* within a folder or group, and show everything else in that folder or group.
- *Targets can be objects, groups, or entire folders.
- Cycle Next – This action allows you to cycle forward through the objects in a folder or group on click, which will only show the user one asset in a folder until they click to see the next.
- Cycle Previous – This action allows you to cycle backward through the objects in a folder or group on click, which will only show the user one asset in the folder until they click to see the previous again.
Note: Cycle Next indicates the immediate layer below in the layers panel, Cycle Previous indicates the layer above.
Share
- Email to a friend – This action will bring up the user’s default email platform and link to your experience.
- Post to Facebook – This action will bring up the user’s Facebook account and add a link to the experience in a post.
- Tweet on Twitter – This action will bring up the user’s Twitter account and add a link to the experience in a tweet.
- Pin to Pinterest – This action will bring up the user’s Pinterest account and add allow them to share the link to one of their boards.
- Share on Linkedin – This action will bring up the user’s Linkedin account and add a link to the experience in a post.
HOVER ONLY
- Show – When the user mouses over your hover area, make the selected layers or objects visible until user moves away from hover area.
- Hide – When the user mouses over your hover area, make the selected layers or objects hidden until user moves away from hover area.
- Show and Stay Visible – When the user mouses over your hover area, make the selected layers or objects visible.
- Hide and Stay Hidden – When the user mouses over your hover area, make the selected layers or objects hidden.
Step 3: Choose the target of your interaction
The final step to setting up an interaction is to specify what layer, object, anchor, or link will be the target of your interaction. Remember, if you are attempting to show a layer or object, it must start in a hidden state, and vice versa if you wish to use a hide interaction.
Once you have finalized your interaction, you have the option to add two additional interactions to the same hotspot or object. This allows you to combine multiple actions e.g. a hover and click interaction to the same hotspot. It also allows you to show certain layers and objects while also hiding other layers and objects on the same click.
Example
As you can see in the below experience, we have set up six basic interactions for you to explore. If you would like to take a look at the backend to see how these experiences were set up, click this link to upload to your studio.