Forum Discussion
Storyline: Skeleton Reveal
When done well, the combination of images and illustrations can be quite powerful. In this great example built in Storyline 360, you can see how the illustrations displayed on top of the photo give you a peek at the inner workings of a person’s skeleton as you move the Xray up and down. Pretty cool, right?
And because Content Library 360 is embedded right into Storyline 360, you can easily make this type of interaction too! You have instant access to millions of photos, characters and illustrations—making the design process a breeze.
Want to try building something similar in Storyline 360, but don’t have Articulate 360? Start a free 30-day trial.
10 Replies
- Nice example, Preethi.
- Thanks, David!
- For the "Move Down" and "Move Up" buttons:
- Better experience would be to have the "Move Up" button be first, and "Move Down" button be 2nd (below). This mimics the keys on a keyboard and the "natural" way to navigate.
- Would consider moving the icons to the same side, either both ^v arrows are on the left or the right, the way you align them make the eye travel longer than needed to read them.
Also nice extra touch would be to have the skeleton actually line up with the person, adds that level of professionalism.
Just some suggestions, but overall love the concept! - Many Thanks to Chris Hodgson! This example was inspired by his idea of xray machine using scroll bar.
- This is a great image! How did you create the illusion of a scrolling mask? Several times I have wished for something like this!
- Thanks Glenda! Chris Hodgson has written a blog in detail about the steps to be followed to create this interaction. This might help you :-)
https://discoverelearninguk.com/dual-slider-controls-and-more-using-javascript-jquery-in-articulate-storyline/
- Nice done, Preethi. And I was inspired by your example and create a version with slider.
https://360.articulate.com/review/content/ad95ebc3-b3e7-47a1-891f-8fbc9e3ecf2f/review- Now that is excellent work Joanne! Nicely done. Good imagery and use of interactivity and user engagement.
- Thanks Preethi Ravisankar for sharing
- I took a different approach with the sample I did several years ago. It uses a draggable slider and hotspots to identify different types of bones. Go to Fractures > X Ray Scan.
https://360.articulate.com/review/content/28717f8c-1f12-43f2-bbcd-095c60c895e9/review
