I Need a Hero for a Slider Interaction

Hi Heroes,

 

I would appreciate any advice on this.

A couple weeks ago in ELC #205 Aman Vohra posted a slider example that showed the cross section of a fish--as you moved the slider it showed the inside of the fish (http://bit.ly/2BIeaSt) .  It moved smoothly back and forth almost like a curtain was revealing the inside of the fish.   Several people asked how he did it but he didn't respond or share the file. I've been trying to figure out how to do it  and I think I have the basic principles down (using state changes), but I can't get my example to transition smoothly.   When my slider moves back and forth the base and top visual have a jerky effect. I looked at ELC #100 and got some ideas for how to transition using a fade (from Alexander Salas, thank you) but I really liked Aman's example and can't recreate the effect.  Can someone take a look at my file and make some suggestions? 

16 Replies
Tom Kuhlmann

Michael Hinze has a post where he does something similar but you don't get the transition between two images. 

In this case, the slider is made of two images (1 and 2) and and isn't created in Storyline. One clue is that the images are in the webobject folder. Another is that when you inspect the page it shows that it's using an "Xray slider"

It's a cool effect, though.

Jodi Sansone

Wow, thank you to all of you!  I think in my example I used 35 different states and thought that was enough.  I was just curious about how it might work.  If one of you could just clarify this for me I would appreciate it.  If I understand what you are saying, that fish visual, then, is not created in storyline.  It's a web object that Vohra embedded from somewhere else. That's a feature I don't often think of using.   Thank you!  You are heroes to me!

Jodi Sansone

Michael, thanks for posting your berlin wall.  It took me a little bit to see how you created your states for your before picture.  It looks like you sliced up your picture and used the slices to create the top picture.  I was just cropping my top picture.  I'll try your technique and see what happens.  I have time in the next couple days.  The hurricane is coming our way so if have power I'll have the time. :)

Richard Hill

hi Jodi, I'm a fan of your Metamorphosis story, and although it's probably too late, I was thinking how elegant it would be to just fade in your cat organs linearly left right like you did with the butterfly.  You'd just have to add triggers to remove the layers when sliding backwards, and the file size would be waaaaay smaller.   Lovely work.

Jodi Sansone

Hi Richard,

Thank you for the idea.  I started playing around with it just so I could master the fade.  I did a little demo and think it just needs a few more states to make it transition more smoothly.  Eventually I'll find an application for this in one of my projects--this one was just for fun.  Below is how it turned out:

https://360.articulate.com/review/content/fa968000-5dcb-47cb-9775-7ae66482079a/review