Tie visible area of a photo to a slider value

Hello,

Here's one I've been trying to figure out the best way to execute. In order to explain the Law of Large Numbers to our learners, I want to use a still image of a frequency graph that goes from left to right and that shows 10000 coin flips and how the variance decreases as the number grows larger. I have a slider with 9999 steps, which seems to be the max, and understand that I could show 9999 layers based on the slider value. I have also inserted the slider variable into a text box so the learner can visually see how many flips based on where they drag the slider. But I'm not about to make 9999 images- one for each data point. I'm not even going to reduce it by a factor of ten and make 999 images. What I need is a way to take the slider's value reveal the according amount of the frequency chart- basically a moving mask based on the slider's physical position on the bar, not so much it's value. Barring that, some sort of Drag to Reveal interaction would also work.

Thanks in advance.

7 Replies
David Schwartz

Hi Robert,

Here's a possible approach. I took a stock graph image and made a rough empty version of it, which sits at the start of the timeline.

The graph to be revealed is animated to wipe right in 20 seconds (the limit in SL is 59 seconds; 50 would have been more granular of course, but I was trying the concept.) You could do a more granular approach still if you manipulated the slider variable using Javascript; I just used the values of the slider.

Timeline is paused at 0.1 seconds, and then there are a bunch of triggers to jump to points on the timeline based on a change in the slider variable.

It may not be suitable for you, but it is one way to get at it.