Forum Discussion
Sliders and States
This is my first time participating in a challenge and this week's was a choose-your-own. I decided to utilize sliders and states to create an interactive short course on The Exposure Triangle.
My aim was to allow the user to manipulate an image to see the effect of shutter speed, ISO levels, and aperture. I used sliders and dials to create a fun interactive process. I set triggers to change the image's states based on the slider position.
- For shutter speed, I made different image states with varying levels of brightness.
- For ISO, I added a textured rectangle over the image and changed it's transparency across different states so it added more grain over the image when the slider was moved.
- For aperture I created different states for the backround image with increasing blur effect (completed outside of Storyline) and added a character on top so she stayed in focus while the background blurred. The aperture slider was the most complicated!
I think one way I could try to take it further is to figure out how to get multiple sliders to work together on the same image. For example, allowing the learner to have a shutter slider, ISO slider, and aperture slider on the same image to find the exact perfect settings.
Thanks for reviewing! Any feedback is helpful!
7 Replies
Finally found something that explains ISO etc. clearly! Loved the sliders and the dial on the camera. This has taught me something both as a learning designer and as a beginner photographer. What tools did you use outside of Storyline?
Thank you! It took me quite a while to understand them and how they work together so I'm so happy it seemed clear! I used a screen capture program called "Snagit" to edit the image in varying degrees using the "Blur" tool. Then I created different states for the original image and replaced the original image in each blurred state with the correct blurred version. I really like Snagit as it also makes it really easy to redact information, add arrows/visual cues, and make quick screen capture videos.
MaddieRich thanks so much for sharing your first challenge entry! I actually never knew that that's what "over-exposed" and "under-exposed" meant, even though I feel like I know what they mean colloquially!
I really like the way you used the slider & states to make this element of learning interactive, really creative application and I can see how it could really apply to any learning with a visual element and a more/less element.
Really cool share! JohnathanPoertn I feel like you would like this one :)Thank you! With concepts that have a visual nature I think it is really difficult to explain with words alone, and though I could have provided one image for slower shutter and one for faster shutter I thought it was more fun to be able to manipulate the image. I think there are lots of applications for this type of activity! I appreciate you taking the time to check it out :)
Hi MaddieRich, I'm so excited that you participated in your first challenge and came and shared it here! Welcome 🎉
I love how interactive this is. I agree with Noele, this is a great example of something people could adapt for lots of use cases, from compliance to accessibility and beyond.
Quick note: I added an image to your post to help it stand out more. Feel free to swap it for a different one if you'd like.
We'll also be featuring this in an upcoming community newsletter!
Thank you for adding the image and for taking the time to review my project! I'm excited to participate in more challenges moving forward, this was an excellent way to learn some new skills :)
Hey Maddie — fun build, and you ran into exactly why the multi-slider version is hard: combined states multiply fast. Three sliders with four positions each would mean 64 image states. The trick is to never combine them — give each slider its own object and let the effects stack on the image.
Here's the setup I'd use:
- Add three Number variables: Shutter, ISO, Aperture. Min 0, max 100.
- Add three sliders, and in each slider's properties bind it to its variable.
- Then each slider drives only its own layer:
- Shutter → a black rectangle over the photo. Trigger: Change state of ShutterRect when Shutter changes, with conditions like If Shutter is between 0 and 33, 34 and 66, 67 and 100.
- ISO → your grain rectangle, same pattern — states with increasing transparency triggered by ISO ranges.
- Aperture → swap your blurred background states based on Aperture ranges, character on top so she stays sharp.
Because each slider only touches its own object, you never build combined states. Nice learner-facing touch too: drop in three text boxes referencing %Shutter%, %ISO%, %Aperture% so they see their exact settings while they hunt for the perfect exposure.
One thing to watch: when the learner revisits the slide, the sliders pull their positions back from the bound variables automatically, so the settings stick — just keep the bindings in place.
