Often when we talk about our work, we talk in terms of ‘what’ we did. The Showing My Work series of posts aim to also capture the ‘how’ something was done.

E-Learning Heroes Challenge #89 – Creative Button Styles and Effects. The brief: This week, your challenge is to have fun with buttons! Play with different shapes, styles, and effects to show how you can use buttons creatively in e-learning. Be sure to include the Normal, Hover, and Selected states in your work.

In this challenge from a few months ago, we had to design some buttons. I came a little late to the party with this challenge and lots of great ideas had already been shared so I thought I’d try something a little different. I was on the train on my way back to Newcastle from Sydney so, with some time to kill I played around with some ideas. The brief was straightforward, our buttons had to have at least three states:

• Normal (how it appears on-screen)
• Hover (how it looks when you hover your mouse over)
• Selected (how it looks when it’s been clicked or pressed)

As usual I sketched my initial ideas on paper:

I had an idea (from the imaged used in the challenge that week) that maybe the buttons could react to each other based on what was happening at the time i.e. being hovered over and being selected. The illustrated characters in Storyline have in-built expressions and I thought that I could use these for the different states for each character.

So I opened up my laptop and began to experiment with my ideas in Storyline 2.

The design itself is pretty simple – a plain background, a headshot of my three characters (to do this I inserted each character and cropped them) and a rounded rectangle shape with a light fill and a thick border.

In Storyline, ‘states’ allow you to the alter the appearance of an object – think the Incredible Hulk is the angry state of Dr Bruce Banner – and by default when you insert an object onto a slide in Storyline, how it looks is called its ‘normal’ state. So for my buttons, the normal state has each character with a neutral expression:

Note: I couldn’t group the character and the rounded rectangle shape together because grouped objects don’t have a state.

For my hover state, I changed the expression of my character to ‘thinking’ like it’s getting ready to be chosen. I also thought it would be fun to have the other two buttons react because the mouse wasn’t hovering over them, so I created a state where they have a ‘worried’ expression on their face and they also look towards the button being hovered. To cater for the different combinations, my first guy would need to look to the right, my middle guy would need to look left and right and my third guy would need to look towards the left. So I created a left and/or right state for my characters.
Because I added the in-built hover state to each character, no trigger was needed. But I needed to add triggers to the characters for their left/right states when one of the other characters was being hovered over. Here’s an example:

I also thought I’d like to change the colour of the border when the mouse is hovering over the character. I couldn’t use the in-built hover state here because I didn’t want the state to change when I hovered over the shape so I created a state for it called ‘roll over’ and added another trigger:

All I had left to do was the selected state and unexpectedly, this took this longest to figure out. The way I wanted the buttons to work was that once a button was selected, it stopped reacting with the other ones. I created a selected state where the character looked happy because he’d been chosen. It worked in that it changed state (to looking happy) but it also continued to react when it was hovered over or one of the other buttons was hovered over.

I tried adding disabled state with a happy expression on my character but that didn’t work.

I tried using a button set on the characters and that didn’t work either.

Finally I tried adding a layer with a new rounded rectangle (with a green frame) and a copy of my character with a happy expression and success! The only thing I had to then do go into the slide layer properties and untick the ‘Hide other slide layers box’.

Whilst I probably won’t ever use buttons like this in a project, this was yet another example of how participating in a weekly challenge can help build your skills in using Storyline. All up this demo was pretty much done on the two and a half hour trip home (it was probably closer to 90 mins). You can see it for yourself by clicking on the image below to launch the demo:

Let me know what you think and you can see all of my ELH Challenge entries on My Portfolio page.