Storyline 360: Interactive Infographics with Sliders - Downloads

Montse

3,268 Downloads

Download

This creative example combines multiple sliders and masking effects to create an interactive infographic.

View the project in action.

13 Comments

Montse
Author

over 4 years ago12/05/19 at 7:08 pm (UTC)

Hope you enjoy and let me know if you have any questions! Here's a simplified demo: https://360.articulate.com/review/content/a252222f-1718-4099-8a5f-593a75aaa163/review and the source file: https://articulateusercontent.com/review/uploads/TwqZ1Vgp5L2t8kvO/slider-mask-effect-montse.story

Sarah Hodge
Staff

over 4 years ago12/10/19 at 5:04 pm (UTC)

Ha! So clever and beautifully designed, Montse!

Myriam Kobtane

over 4 years ago12/18/19 at 12:40 pm (UTC)

Like it Montse! :) Thanks for sharing!!

Shirley Prieto

over 4 years ago12/18/19 at 12:50 pm (UTC)

Very nice. I hope to one day make such wonderful contributions.

CHRIS KDOJO

over 4 years ago01/04/20 at 4:54 am (UTC)

I just downloaded and played around with your file. It's absolutely brilliant. Thanks for the share. You make great e-learning.

Jaipal Negi

over 4 years ago01/07/20 at 10:09 am (UTC)

Very nice. thanks.

Learning Design

over 3 years ago12/05/20 at 8:31 pm (UTC)

Brilliant!

Terry Thomas

almost 2 years ago08/25/22 at 8:34 pm (UTC)

Very clever, love it! I'm intrigued, though... the transparent cut-out? Is that innately supported in SL somehow? Is this something i never new? Or did you bring it in from other software/format? The objects panel thinks it's a "freeform" and i can change fill and line properties ... soit behaves like a SL shape would. But there's no connecting lines from box perimeter to person outline, so it wasn't just drawn well as a single freeform in SL itself? Can you share the secret?

Brian Saxon

almost 2 years ago08/29/22 at 9:56 pm (UTC)

How did you get both sets of numbers to react in that way?? I've attempted to replicate it and can't figure it out. I'm new to articulate so if it's super simple, forgive the newbie.

Dr Victoria Sublette

13 days ago05/30/24 at 6:49 am (UTC)

I can't figure out how you "attached" the shape to the slider so they interact.

Montse
Author
Dr Victoria Sublette

12 days ago05/30/24 at 9:44 am (UTC)

Hi, Dr Victoria - Two main techniques are used to create this effect: 1) Create a custom slider by replacing the default slider thumb with your own image. Here's how that works: https://training.articulate.com/webinars/using-sliders-in-storyline-360#t=2259 2) Connect the sliders so they use the same variable. Here's how that works: https://training.articulate.com/webinars/create-parallax-effects-with-sliders-in-storyline-360#t=1144 Download this simplified version: https://articulateusercontent.com/review/uploads/TwqZ1Vgp5L2t8kvO/slider-mask-effect-montse.story. Let me know if you still have questions. I should probably make a quick video on this.

12 days ago05/30/24 at 11:12 pm (UTC)

Thank you so much, @Montse! I will try it out today and let you know how I go! I really appreciate the help :-)

Dr Victoria Sublette

2 days ago06/10/24 at 12:09 am (UTC)

Thanks for all of the resources! I have been using Storyline for years, but you have taught me a lot of new things! Thank you, Montse!!!!! :-)