Forum Discussion
Storyline: What's Their Role
Say goodbye to boring PowerPoint org charts and hello to this interactive dial. Spinning the dial lets employees get to know who's who on the team.
Explore this project.
Thanks everyone for your amazing feedback - I’m super happy you like the dial to reveal interaction.
I’m sorry - I can’t share the source file but of course I can write a quick step-by-step instruction. The basic idea is that the large image (the table and people around) is a dial as Storyline allows to convert any image to dial.
- Make sure the image which you convert into dial is a square and its center point matches the center of a table
- Set the dial rotation to 360 degrees to get 1 full spin
- The end value for dial depends on:
A) how many people/actions you’d like to trigger the info for,
B) how smooth the spin should be (the bigger the number the more smooth the turn is)
- Add layers with the info you’d like to display for every person by the table
- Add triggers on the base layer to show ID card layer depending on the value of the dial
- Add triggers on the ID card layer to show specific person layer depending on the value of the dial
- On a specific person layer add a trigger to hide the layer when the user clicks close button
- Make sure all the layers are hidden before going back to dial on the base layer.
That’s a rough tutorial on this interaction – I hope it helps if you#d like to recreate it.
I’m sorry - I can’t share the source file but of course I can write a quick step-by-step instruction. The basic idea is that the large image (the table and people around) is a dial as Storyline allows to convert any image to dial.
- Make sure the image which you convert into dial is a square and its center point matches the center of a table
- Set the dial rotation to 360 degrees to get 1 full spin
- The end value for dial depends on:
A) how many people/actions you’d like to trigger the info for,
B) how smooth the spin should be (the bigger the number the more smooth the turn is)
- Add layers with the info you’d like to display for every person by the table
- Add triggers on the base layer to show ID card layer depending on the value of the dial
- Add triggers on the ID card layer to show specific person layer depending on the value of the dial
- On a specific person layer add a trigger to hide the layer when the user clicks close button
- Make sure all the layers are hidden before going back to dial on the base layer.
That’s a rough tutorial on this interaction – I hope it helps if you#d like to recreate it.
- Thanks Joanna, I did a quick try. I am just not able to attain one thing. I believe you took the picture in which people are sitting at equal distance and probably mine is one where the distance between two people is not uniform. Is there a way to change the other dialer points? Glad if you can have a look : https://360.articulate.com/review/content/7b957801-688c-4534-adab-7b3642a05993/review
- Hi Rachna, yes, you're right - you need to work on the distance between the people so when you turn the table every person will be under the center pointer once you dial.
For example: if you'd like to show 6 people you'd have to sit them at 0/60/120/180/240/300° around the table.- Appreciate your explanation. Thanks :)
