3 Circle Click and Reveal Interaction
Here is a cute circle interaction we built to enhance your elearning. The circles will spin around each other and show content, then the learner can click any of the circles to review the content.
To make this work, there are actually 4 slides here. The first slide contains the animations where the circles come onto the screen and show all the content one after each other. Each of the next three slides comprises one of the circles, rotated to the top, and its associated elearning.
This system works with the lesser known Storyline trigger When Animation Completes. Each circle has two animation paths, one that moves it one space, and one that moves it two spaces. If the learner selects the circle in the bottom left, that circle cycles to the top and jumps to the relevant slide once the animation completes. The same thing happens for the bottom right circle.
The triggers on Circle 2 look like this:
Circle 2
Change state of Line Callout 2 – “Lorem ipsum…”
to Hidden
When the user clicks
Move Circle 2 on Freeform Motion Path 2
When the user clicks
Move Circle 1 on Freeform Motion Path 1
When the user clicks
Move Circle 3 on Freeform Motion Path 3
When the user clicks
Jump to 1.3 Circle Interaction
When the Freeform Motion Path 2 animation completes
The triggers on Circle 3 look like this:
Circle 3
Change state of Line Callout 2 – “Lorem ipsum…”
to Hidden
When the user clicks
Move Circle 3 on Line Motion Path 3
When the user clicks
Move Circle 1 on Line Motion Path 1
When the user clicks
Move Circle 2 on Line Motion Path 2
When the user clicks
Jump to 1.4 Circle Interaction
When the Line Path 3 animation completes
These triggers apply for every slide, you just have to change the triggers for whichever circle is in the bottom left and right positions depending on which slide you are on.
For more on how to build great interactions for your elearning, please contact us at Pathways Training & eLearning.
You can also check out our other articles on ways to get the most out of Storyline here: How to make a Custom Drag and Drop Activity, Paper Animations in Storyline, Articulate Storyline Sliders, Time Saving Storyline Tips, and Adding Multiple Animations to an Element.
