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.
29 Replies
- Joanna, This looks superb. I love how you took care of the design. The navigation is so clear. It would be great if you can share more about how you created this :)
- Your creativity is a constant inspiration.
- This is awesome! I'm working on an org chart project right now, and something like this would be perfect!
- 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.- 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.
- love this!!!
- Beautiful design. This really romances the eye. So clean and inviting.
- This is fun and the small details are neat! Well done, Joanna!
- I agree with the comments above: this is a really great interaction. My only feedback for improvement is that it shows zero ethnic diversity. Representation matters!
- You're absolutely right, Gordon. We've made a massive improvement in presenting diverse ethnic characters since then :)
- Joanna, I just saw your work featured and have to ask, how did you achieve the horizontal scrolling on the ID cards. Did you use motion paths within a scrolling section?
- Hi Hianna, yes, I used motion paths moving right/left depending which circled button you select.
- Joanna, could you please share source file for the same. It's very amazing.
