Get to Know Ceros: Object States

Transcript

Working off of our previous experience, let's go ahead and create some basic interactions for the second section of content. In this case, we’ve already included all of the necessary assets, and we’ll be focusing on using Object States to build out some interactivity. Object States give you the ability to assign various “states” to any asset on the canvas. Using Object States, you can easily change things like the location, opacity, size, rotation, image effects, and color of an object when a user interacts with it. While it’s perfectly acceptable to create interactions using Hotspots as we did in the previous video, applying object state to an object or a group of objects can save you time in the long run. 

Looking at the layers panel, you can see we have a group of assets that are hidden on the canvas. This is going to be our popup. Turning off the visibility of objects on your canvas enables you to create interactions for your users to be able to uncover them. So basically, if you don't want an object to be shown by default, it should be hidden in your Layers panel. Visibility can be toggled on and off using the eyeball icon next to the layer in your layers panel. 

Let’s start by adding an object state that will change the black and white tile image to be colorized when a user hovers over it. First, select the “Tile 1 image” in your layers panel. Make sure you are selecting the individual image and not the entire Tile 1 group. You’ll see in the design tab that this image has a saturation of -100, making the image appear black and white. So to start, let’s click the plus sign next to “States” in the Design tab to apply different states to this image. You’ll see that the current state of the image will be labeled as the Default state. We’ll add a transition here to make sure that when we add more states, they interchange smoothly. Now, click the drop-down and add a Hover State. Here, we’ll want to add another transition and change the saturation on the hover state from -100 to 0.

Before we take a look at our preview, let’s make a few more changes. We’re going to select the first 3 layers in our Tile 1 group, the two text layers as well as a play icon, and navigate to the “Design” tab. You’ll see that these 3 layers have an opacity of 0%. This is because, by default, we don’t want to see these assets. With those 3 assets selected, click once again on the plus sign next to the “States'' section. Let’s make sure to add a transition to our default state, and then we’ll add a hover state from the drop-down. On our hover state, we can change the opacity of these 3 layers from 0 to 100%. We’re also going to add a transition here to ensure our hover is smooth. Now, we can select the entire group and check “Use group as trigger, “ which will trigger all of the hover states in the group at the same time. 

Finally, to take this one step further, we can add our secondary interaction to show the popup when a user clicks. Select the Tile 1 Group, navigate to the “Interact” tab, and you’ll see here that a few interactions have been automatically generated from your object states. Our hover interaction looks great as is, but we’re going to update the Click interaction to show our popup instead. So here, expand the On Click interaction menu, change the interaction to Show, and then select the popup group as a target.

Also, note that in this example, we’re applying our interactions right to our group to save time, but you can also apply these through the use of hotspots if you’d like. If you choose to do so, make sure to include additional interactions to that hotspot to change the target state of your assets on hover.

Moving over to the preview, when we hover over the icon, we see our hover content, and when we click on it, we see our popup content.

We’re only scratching the surface of what's capable in the studio. But most interactions will work off of this same premise. In later lessons, we’ll build on this foundation to create even more advanced effects.