🎓 Lesson 12: States — Your First Pillar of Interactivity
Interactivity in Storyline rests on three pillars: states, triggers, and variables. Today we lay the first and most approachable one. A state is simply a different look an object can wear — the way a button darkens when you hover over it. It's pure visuals, no code, and once you see it you'll spot states everywhere you click for the rest of your life.
📚 What You'll Learn
By the end of this lesson, you will be able to:
- Explain what a state is — a visual version of an object
- Name the built-in states (Normal, Hover, Down, Visited, Disabled, Selected, Hidden) and what each does
- Create a custom state with the States panel and Edit States
- Understand how states change — automatically or via a trigger (a teaser for Lesson 13)
⏱️ Estimated Time: 40 minutes
🎯 Project: Give a button a working Hover and Down look, add a "Visited" state, and create one custom state — then preview and watch it come alive.
In This Lesson
🎭 What Is a State?
A state is a different visual version of the same object. Picture a single actor with a wardrobe of costumes: it's still the same actor (the same button), but it can appear in its normal outfit, a highlighted outfit when you point at it, a pressed-in outfit when you click, a grayed-out outfit when it's disabled, and so on. The object is one thing; its states are the looks it can wear.
Every object in Storyline has at least one state — Normal, its default appearance. Most interactive objects can hold many more. Each state can differ in color, size, text, image, added highlights, checkmarks — anything visual. Switching between states is what makes an interface feel responsive and alive instead of static.
🧠 Mindset
Here's the reassuring truth about all three pillars, starting with this one: states are logic you can see, not code you have to write. You're literally drawing what an object looks like at different moments and giving each look a name. If you've ever picked out two outfits and labeled them "work" and "weekend," you already understand states. There is nothing here to be afraid of — only something satisfying to discover.
📋 The Built-In States
Storyline gives interactive objects a set of built-in states with special, reserved names. The names matter, because Storyline knows what some of them mean and switches to them automatically. Here are the ones you'll meet:
| State | When it shows |
|---|---|
| Normal | The default look. Every object has this one. |
| Hover | Automatically, while the learner's cursor is over the object. |
| Down | Automatically, while the object is being pressed/clicked. |
| Visited | Automatically, after the learner has clicked the object once. |
| Selected | When the object is chosen (great for toggle buttons and pick-one answers). |
| Disabled | A grayed-out, non-clickable look (often turned on/off with a trigger). |
| Hidden | Not visible on the slide (a clean way to show something later). |
The beautiful part: Hover and Down "just work." If you add a Hover state to a button, Storyline shows it automatically whenever the cursor is over the button — you don't wire up anything. The same goes for Down while it's pressed, and Visited once it's been clicked. That built-in behavior is free polish, and it's why even a plain button in Storyline can feel responsive with almost no effort.
Below is how the States panel looks, with a button's states shown as chips. The custom "Complete" chip is the one we'll build next; the rest are built-in.
Figure 1 — The States panel (a simplified mock-up, not a real screenshot): built-in state chips plus a custom "Complete" state, currently selected for editing.
🛠️ Creating a Custom State
Built-in states are great, but the real power arrives when you invent your own. A custom state is any look you name yourself — "Complete," "Correct," "Locked," "Answered." You create and edit states in the States panel using Edit States.
📖 The workflow, in plain steps
- Select the object on the stage.
- Open the States panel and click Edit States. You're now in a special editing mode, working on one state at a time.
- Click New State. To make a custom one, choose New State and give it a name (like "Complete"); to add a built-in one, pick it from the list (like Hover).
- With your new state selected, change how the object looks — recolor it, add a checkmark, swap the text. Whatever you draw is that state.
- Click Done Editing States to leave the mode. Your states are saved with the object.
Think of an object's states like a small wardrobe you can rearrange:
plain button"] --> H["Hover
highlighted"] H --> D["Down
pressed in"] D --> V["Visited
dimmed after click"] V --> C["Complete ★
custom: green + check"] style N fill:#f1f5f9,color:#1e293b style H fill:#bfdbfe,color:#1e293b style D fill:#c7d2fe,color:#1e293b style V fill:#fde68a,color:#1e293b style C fill:#bbf7d0,color:#1e293b
Figure 2 — One object, several states: from the plain Normal look through the automatic Hover and Down, to a custom "Complete" look.
💡 A tiny caution while editing states: when you're in Edit States mode you're changing only the selected state. If your edits seem to vanish, you were probably editing a different state than you thought. Always glance at which state chip is highlighted before you start restyling.
🔀 How States Change
A state is only useful if the object actually switches to it. There are two ways that happens, and knowing the difference is the bridge into next lesson.
1. Automatically. The built-in states with reserved meanings switch on their own. Add a Hover state and it appears on hover. Add a Down state and it appears while pressed. Add a Visited state and it appears after the first click. You do nothing but design the look — Storyline handles the switching. This is why beginners get satisfying results almost immediately.
2. With a trigger. For everything else — including your custom states — you tell Storyline to switch with a trigger: "change state of Button to Complete when the learner clicks it." That's a full sentence of interactivity, and it's exactly what Lesson 13 is about. States give you the looks; triggers give you the timing of when to wear them.
✅ The mental model to hold
States are nouns; triggers are verbs. A state is a thing the object can be (Complete, Selected, Hidden). A trigger is the sentence that makes it become that thing at the right moment. Today you build the wardrobe; next lesson you learn to tell the object when to change clothes.
✅ Selected & Visited in Practice
Two built-in states earn special mention because they power so many everyday interactions.
Visited is your quiet progress-tracker. Give a set of buttons or markers a Visited look — say, a faded color or a small checkmark — and learners can see at a glance which items they've already explored. It's the backbone of the classic "click each of these to continue" interaction, and because it's automatic, it costs you almost nothing.
Selected shines for choices that toggle. On a pick-one interaction, the chosen option wears its Selected look while the others stay Normal; on a set of filters or toggles, Selected shows what's currently on. Storyline can manage "only one selected at a time" for you with a button set, so the selection behaves like radio buttons without any wiring.
💡 Where this is heading
Hold onto the Visited idea. In Lesson 15 we'll build a full custom interaction where the learner must click every item before a Continue button unlocks — and Visited states, a trigger, and a variable will team up to make it happen. States are the first piece of that puzzle, and you're placing it right now.
🎯 Try It: Bring a Button to Life
🏋️ Activity: Give one button four looks Windows only
Objective: Experience automatic states, then create a custom one — all pure visuals, no triggers yet. (Storyline is Windows-only; Mac users use the VM from Lesson 2. This fits inside the Trial / Paid 30-day trial.)
Steps
- On a slide, insert a button (Insert → Button) and give it some text like "Get Started". (⏱️ 2 min)
- Open the States panel and click Edit States. (⏱️ 1 min)
- Add a Hover state and make it a slightly brighter color. Add a Down state and make it a touch darker. (⏱️ 4 min)
- Add a Visited state — maybe dim it a little or add a small checkmark. (⏱️ 3 min)
- Click New State, choose New State, and name a custom one Complete. Make it green with a ✓. (⏱️ 4 min)
- Click Done Editing States. (⏱️ 1 min)
- Preview the slide. Hover over the button, then click it, and watch Hover, Down, and Visited switch automatically. (⏱️ 2 min)
💡 Hint
Your custom "Complete" state won't appear on its own during preview — that's expected. Custom states need a trigger to switch to them, which is exactly what you'll build in Lesson 13. For now, just confirm it exists in the States panel and looks the way you want. The automatic ones (Hover, Down, Visited) are what you should see reacting in preview.
✅ Activity Complete When…
- Your button visibly changes on hover and while pressed in preview
- It looks different after you've clicked it (the Visited state)
- You've created and named a custom "Complete" state, even though it doesn't trigger yet
🎯 Quick Quiz
Question 1: What is a state in Storyline?
Question 2: Which of these states switches on automatically, with no trigger needed?
📓 Learning Journal
Keep your Learning Journal going — it's where you turn "I read that" into "I can do that." After each lesson, jot down:
- Key concepts you learned
- Things that clicked for you
- Questions or confusion points to revisit
- Ideas you want to try
- Your progress and how you feel about learning this
✍️ This lesson's prompt: Spend a day noticing states in the wild — buttons that highlight on hover, links that change after you've visited them, options that stay selected. Note two you encountered, and describe one custom state you'd want in your own capstone course (and what would trigger it).
📝 Lesson Summary
🎓 Key Takeaways
- A state is a different visual version of the same object — the first of Storyline's three pillars of interactivity, and pure visuals, not code.
- Built-in states have reserved names: Normal, Hover, Down, Visited, Selected, Disabled, Hidden. Hover, Down, and Visited switch automatically.
- Create custom states (like "Complete") in the States panel with Edit States, then restyle the object for that state.
- Automatic states switch on their own; custom states switch via a trigger. Remember: states are nouns, triggers are verbs.
🎉 What You've Accomplished
You've placed the first pillar of interactivity — and it turned out to be drawing, not coding. Your button now reacts to the cursor, remembers it's been clicked, and carries a custom look ready to use. That's real interactivity, built with nothing but your eye for how things should look. Well done.
❓ Common Questions at This Stage
Why doesn't my custom state show up when I preview?
Because custom states don't switch by themselves — only the built-in ones (Hover, Down, Visited) do that automatically. Your "Complete" state is waiting for a trigger to tell it "switch now." You'll build exactly that trigger in Lesson 13, and your custom state will spring to life.
Can any object have states, or just buttons?
Almost any object can have states — text boxes, shapes, images, characters, markers, and buttons. Some simple objects only start with Normal, but you can add more. Buttons and interactive objects come with a fuller set of built-in states out of the box because they're designed to be clicked.
Should I use states or separate objects for different looks?
Prefer states when it's genuinely the same object changing appearance — it's cleaner, easier to maintain, and works with the automatic behavior. Use separate objects when they're truly different things that appear at different times (that's a timeline or layer job, from Lesson 11 and Lesson 15).
🔭 Looking Ahead
In Lesson 13, we build the engine that drives all of this: triggers. You'll learn the anatomy of a trigger — action, event, and conditions — and finally make your custom "Complete" state switch on a click.
✅ Before the Next Lesson
- Keep the button with its states — you'll wire it up with a trigger next lesson
- Write this lesson's journal prompt: states you spotted in the wild, plus one you'd want to build
- Try adding a Selected state to a second button and notice how it behaves
📚 Additional Resources
- Course Glossary — state, Normal, Hover, Down, Visited, Selected, Disabled
- Quick-Reference Cheat Sheet — the built-in states list
- E-Learning Heroes — states tutorials and examples
🌟 Encouragement for the Journey
You just built interactivity out of nothing but visual choices — no code, no fear. That's the pattern for all three pillars: each one is a simple idea that combines into something powerful. One pillar down, two to go, and the hardest part (starting) is already behind you.