How To Hide and Reveal Objects in Articulate Storyline 2
It’s been quite a while since I’ve had a chance to jump in and play with the Articulate Storyline community, but I’m happy to report that time has granted me a few weeks to stretch my creative muscles and take a stab at some of the e-learning challenges that Dave Anderson has posted over at E-Learning Heroes. This past week’s challenge (#116) was to design an e-learning game, quiz, or interaction for the food and beverage industry.
For this week’s challenge I wanted to show how a simple little feature in Storyline can be used in creating some pretty engaging effects. Many Storyline users aren’t aware of the ability to hide and reveal objects on screen (complete with animations) without resorting to using layers–but Storyline can do it.
Instructions for Hide and Reveal Interaction:
- Select a shape or image and click the “State” tab in the timeline.
- Click the “Initial State” drop-down menu (next to “Edit States”) and select “Hidden”.
3. If you’re including an enter/exit animation, make sure the object exists on the timeline long enough to complete the animation(s).
4. Set up a trigger to show the object (change the state to “Normal”).
5. Optional: Set up a trigger to hide the object (change the state to “Hidden”)
6. Required: Rejoice in your mastery of another Storyline feature.
Isn’t that cool? By setting up a simple set of triggers you can create toggling effects without having to resort to layers. I used it in this week’s e-learning challenge to slide objects on and off the screen along the bar in my “hipster pub”, and to bring up a new speech bubble when the user was ready to continue. Even minor enhancements like this can add loads of visual appeal and charm to help keep the learner interested in what’s happening onscreen.
What are some other ways to exploit this Storyline feature in your e-learning projects?
Please share your ideas below in the comments section. Happy building!
Loved your example, Ian. And thanks a lot for sharing this tip. I will definitely give it a try.
Thanks, Punam! I’m glad you liked the example. It’s one of those easy tips that can save a lot of dev time. Thanks for taking a look.