State changes are sometimes overlooked by many new users in Storyline, mainly because they are apprehensive about how they can be used. A question was asked in one of my recent courses about how one might get buttons or other items to disappear when they were clicked. A specific use case might be if you are using a button to start the motion path of another object, but you do not want the button to distract the learner or be “in the way” of the object that is moving, or you don’t want them to click the button again to move the object again.
The following steps will focus on utilizing change of state triggers to make that happen. Keep in mind, these steps will work for most items on a slide, but we will use a button for purposes of this discussion.
Make the Image Disappear Using a Hidden State
On this example slide, I have a button that is moving a picture to the other side of the slide. Remember, this action could be anything! Maybe you have a button to show a layer, or a button to play media, or maybe it’s even a picture they’re clicking on to make something happen! (Don’t forget to name your objects!)
Next, with the clickable object selected, build a new trigger in the trigger panel that will change the state of the image to be hidden when the user clicks it.
Tip: We do not need to build an actual state, since all objects really have two natural states: normal and hidden. It might help to think of normal as being “on” and hidden as being “off.”
Preview the slide. The button will disappear when the user clicks it!
Discovery Point
What if you want the learner to leave the slide and then return to the slide. If your clickable object has a Visited and/or Selected state and they leave the slide and return, by default the slide will “Resume saved state” which means the button will still be hidden. That may be exactly what you’re looking for, so there is nothing further for you to do.
However, what if you want the button to return back to normal, and everything on the slide to be just as it was when they first arrived at that slide? Changing the slide property to “Reset to initial state” will restart the slide from the beginning!
Summary
This is a great example of how state changes really are changing how an object on your slide looks. It is sometimes helpful to think about state changes as changing an object’s appearance. Sometimes, changing the appearance of an item can be just the thing to create that additional interactivity that the learner needs!
See the completed example or download a copy of the .story file.
~John
Update: Please note that the interface of the faster new trigger workflow (in Storyline 360 update 3.33.20625.0 or later) will appear slightly different! While the process is the same, this article uses screen captures from the classic trigger workflow.
Hello,
Is there anyway to drag and drop my video anywhere I need around the slide/ layer in articulate, in other words I have interactive button when I clicked the video ( sign language) will be shown but I want to move it anywhere I want so I can read everything on screen?
Hi, Ann!
Hope all is well.
Where there’s a will, there’s a way in Storyline 360!
One method (and there could be variations) would be: Insert a hotspot and enlarge the size of the hotspot so the hotspot is the size of the entire slide, then insert your video (important that the video is not behind/being covered by the hotspot) and shrink the video to the size you prefer, and finally, add the following trigger: “Play media [the video] when the user drops the object on the target [video being the object], [the hotspot being the target].”
This “when the user drops” trigger is typically used to create drag-and-drop interactions, but can be utilized to make just about any item draggable!
Here’s a preview of the build.
One caveat here would pertain specifically to the use case of your video; you’ll notice that as you drag the video, it provides opportunity for the video to pause long enough to become out of sync with with the narration, and the sign language potentially not being in time with the narration and slide content may be a side effect that you weigh before implementing this solution into your trainings.
That being said, it could prove less effort for your development and potentially on the learner to set aside an area on the slide that your video will always remain and build your template or content around that, if possible.
There is also Storyline 360’s Closed Caption feature!
Another recommendation is to provide the narration script in the Notes panel for the learners to read along/re-read the voiceover transcript. In the Player settings, under Text Labels, you can also rename the Notes panel to something that makes more sense in that usage, such as naming the tab “Narration.” The Notes panel is great in this sense in that the narrative script will always be available on screen.
Let us know if you have thoughts or further questions!