Create a multistate element to change an object's properties through an interaction.
- [Instructor] So far we have added navigation, and we've added a link to external sites, but you can also play with the stuff on the page, and actually make it interactive. You can put it in motion. You can make it bigger, make it smaller. These things are called states. So when you choose an item on the page, or on the canvas, and give it different states, you can actually make that interactive. So let's take a look at how all that works. So I'm on the CampChat page. I'm just going to add a new page.
And I'm going to call it States. And we've got a blank page. Come over to the Library. Do a search for the word like, and find a heart, and just drag it on. And let's make it bigger. Okay so here's the plan. When I roll over the heart, which is a hover, it's going to turn red. So its state is going to change from black to red. And then when I roll off, the state is going to change back to black. So how do we get that to happen? Well it's really not that difficult.
You select the object that you want to change, or turn in to what they call a multi-state element, and you'll see up here is a thing called State. And what you're looking at is what's stated here, the First state. We're going to add a new state. We click new, and we're going to call it Over. Press the return enter key to accept the change. And to see the Over state, what we do is we just select the radio button there, and we are now in the Over state.
Now, you would think that what you need to do here is to select this button in the state, in the Over state, and change its properties. And you'll notice, there's not many properties you can change. Now this is a really important concept inside of UXPin. Multi-state elements actually have their own windows. And you can see that this is a multi-state element just by simply looking at the color of the bounding box. So it's purple. So we can't change these general properties, but we can change the state properties by double clicking the element in its state.
See, there it is, right there. We're in the Over state, and it's telling me. It's a multi-state element, Over. And now I can come over here, and I can fill it with red. And when you click, it just returns back to the normal view. So I'm going to select this, and I'm going to go back to the First state. And what we're going to do is we're going to make it interactive. So there's that purple bounding box again that shows you, it's a visual clue, that it's a multi-state element.
So we're going to add an interaction. And the interaction we're going to add, is when we roll over it, which is a hover, we are going to change the state. And that is down here. Okay, so you see there's Set state, Next state, and Previous state. Well, we're just going to change the Next state, because there are only two here, black and reds. We're going to choose the Next state, and then it's going to ask you what element do you want to apply it to. And that's what this little gun sight here is. So you click on it, and then you roll over, and you notice it's got, almost like a hot spot over it? One click, and it tells me it's this item right here.
And then you click add, and you see the little lightning bolt there. That tells you there's an interaction attached to it. So let's check the preview. So preview window opens, and I roll over it, it's red. Roll off, it's black. Over, off. So there's a very simple example of multi-state elements. They are really kind of cool. There's all kinds of cool stuff you can do with it. This was just a straight state change.
In the next video, what we're going to actually do is put this thing in motion. I'll see ya there.
- Importing artboards from Photoshop and Sketch
- Adding interactivity
- Adding animations
- Designing responsive sites
- Sharing prototypes with stakeholders
- Creating image carousels
- Create slide-in menus