Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
States are an essential part of creating interactive mockups. They allow you to display different states of an application. For example, you could have an application design that contains an empty search results field in one state and the second state that shows that search field filled with results. States are also commonly used for creating rollover effects, such as the different states of a navigation button: Normal, Over, Overall Down and Down. We're going to take a few minutes here to explore the States panel a bit and give you a chance to create a state that would be used for a rollover effect in a final Web site mockup.
So, we're going to switch over to our States panel here, see we only have currently one state. Now what I want to do is I want to create a different state that allows me to show the sidebar navigation with a different color, so that if we were to create rollover effects through slices, we'd actually be able to see a difference between each of the individual buttons as the user moused over those individual text areas. We're just going to keep it simple right now. We'll be getting into this kind of thing in much more detail in future movies. So what we're going to do is create a duplicate state.
Now, I'm just going to zoom out for a minute here, so you can see the whole thing. There is our overall layout, and the easiest way to start this process off is to go into the States panel, go to the States Options and choose Duplicate State. Now you'll see other options in here. You can choose to add states, which means you'll basically add an empty states. There will be no content in them whatsoever. You can obviously Delete States as well. Our main goal here is to create a duplicate of what we see currently on the Main State, or State 1, of our Index page.
So I'm just going to choose Duplicate State. I get a little dialog box coming up, and I can choose where I want the state to appear inside the States panel: at the beginning, before the current state, after the current state, or at the end. Now we only have one state to work with at the moment, so I'm just going to choose After current state. I'll click OK. As soon as I do that, you'll see I now have State 1 and State 2, and much like layers and Pages, you can double- click on States and rename them as well. So we'll just name this. We'll name this as Up, and we'll name State 2 as Over, makes a little more sense than State 1 and State 2.
As I mentioned, what we want to do is create an effect here that's going to be used for rollovers down the road. So I'm going to zoom in again. I'll grab my Zoom tool from my Tools panel, and I'm going to draw around my Sidebar navigation, zoom in nice and close. All I really want to do with this is change the color. So I'm going to grab my Pointer tool. I'm going to move my mouse over my text. Now the text you see here is actually no longer text anymore. I can't actually edit the individual letters. This was at one point flattened down and sort of basically locked in as a bitmap.
So all I'm going to do here is add a Filter to change the color of the text, so we can get a slightly different look here. So with that text area selected, I'm going to go down to my Properties panel, and I'm going to go into the Filters section here. This gives me the ability to add editable filter to a selected object on the canvas. Click on the Plus sign, and I'm going to choose to adjust a color. The option I'm going to pick here is called Color Fill. Now I'll get ready, because the default color here is pretty vibrant. It's a bright, bright red, and we're not actually going to work with that color.
We're going to change that from the default red. I'm going to click on little red color box in my Options for this filter, and I'm just going to pick gray, something that's just a little bit different from my original text color, which was more of a deep blue. Now, done that, I'm just going to hop over to my States panel here and let's see what happens. I'm going to click on my Up state. There's my original text. You can see it's that dark navy blue. I click on my Over state, and you can see that I've got a different condition for the text.
So if I was to add in Web objects here to make each of these different elements interactive or clickable, I could actually create a series of rollover effects for each one of these text areas. So I'll just go back to my Up state. So there's a brief overview of the States panel. Now you might be thinking that Pages and States are somewhat similar. But think of them this way: Pages describe the major screens the user will experience and States are all the major State changes in each screen, so things like tooltips or Button rollovers, things along those lines.
Unlike Pages, States can also be used for creating frame-based animations. We'll be looking at States a lot more in upcoming lessons.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.