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.
Published 5 years ago
Version 1.0
Blog Post
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 :)