Looking for a fun, interactive way to present facts and figures? This interactive pie chart template I created in Storyline is exactly what you're looking for. Just click on the shape to watch the graphic change with a simple animation.
Hi Nicole,
Thanks for sharing your work! I love it!
Any particular reason you decided to use the cue point and pause/resume timeline instead of using change state from hidden to normal when the user clicks the image?
Thanks!
Hello Ana! That is a great question - thanks for asking that. The reason I didn't do it that way: I didn't think about it! Haha as usual, there's more than 1 way to do something with Storyline. The way you suggested does indeed work well, the only thing that doesn't work if you do it by changing states instead of using a cue point on the timeline, is that you can't have the text object appear only after the pie chart animation has completed. I had set it up on the timeline so that FIRST the animation on the pie chart happens, then when its done, the text fades in. But when you change from using the cue points to using states, when you click on the shape and trigger the state change (from hidden to normal), it happens right away, regardless of any timing adjustments on the timeline. Hope th... Expand
Hello Ana! That is a great question - thanks for asking that. The reason I didn't do it that way: I didn't think about it! Haha as usual, there's more than 1 way to do something with Storyline. The way you suggested does indeed work well, the only thing that doesn't work if you do it by changing states instead of using a cue point on the timeline, is that you can't have the text object appear only after the pie chart animation has completed. I had set it up on the timeline so that FIRST the animation on the pie chart happens, then when its done, the text fades in. But when you change from using the cue points to using states, when you click on the shape and trigger the state change (from hidden to normal), it happens right away, regardless of any timing adjustments on the timeline. Hope this makes sense! Let me know if you need me to elaborate a bit more.
Hi Nicole, thanks for your reply. Tinkering with the file a bit I found a way to fade in the text after the animation of the pie chart is complete. You can achieve this by setting the initial state of the text to hidden and adding a trigger to change the state of the text to normal when the pie chart animation completes. It's great to see different ways to achieve the same goal, in case one solution doesn't work for a specific project. Thanks!
I've only recently come across this example - any tips for when the percentage is less than 50% as the wheel animation doesn't quite work in the same way! Any tips on adjusting this interaction for smaller percentages would be appreciated.
I know it has been a while since the last post, but I had the same issue. Here is my solution, in case anyone else needs it: I used the pie shape to create 15%, but I removed the animation from it. I added a circle the same color as the background circle and used the wheel exit animation on it.
Hmm that doesn't really work for me Marnee, unless I'm following your instructions incorrectly.
I actually ended up using the 'wipe' entrance animation on the pie chart which works well for smaller percentages.
Maybe, I did not describe it well. Here it is:
https://1drv.ms/u/s!AjMEq4N57rjDi3V_Oes9JcOIYyAZ?e=WEeghI
https://360.articulate.com/review/content/391ecccf-d677-4ab0-bee9-4ea8786696a3/review
Good to know wipe works too.
44 Comments
Hello Ana! That is a great question - thanks for asking that. The reason I didn't do it that way: I didn't think about it! Haha as usual, there's more than 1 way to do something with Storyline. The way you suggested does indeed work well, the only thing that doesn't work if you do it by changing states instead of using a cue point on the timeline, is that you can't have the text object appear only after the pie chart animation has completed. I had set it up on the timeline so that FIRST the animation on the pie chart happens, then when its done, the text fades in. But when you change from using the cue points to using states, when you click on the shape and trigger the state change (from hidden to normal), it happens right away, regardless of any timing adjustments on the timeline. Hope th... Expand