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 :)
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... Expand
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.
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!
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?
I used assets from Shutterstock - here's link to plenty examples showing top view :) https://www.shutterstock.com/search/table-top-view-people?image_type=vector
29 Comments
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... Expand