I saw this interactive graphic on a US government website (FDA). It shows a "before and after" version of an edited photo (picture of a retail counter, with "old" and "new" signage). The reader uses a little slider control that appears in the middle of the photo, and slides from one side to the other to see the "before" and "after" version. The slider button can also be controlled by keyboard letters (A and D), which nudge the button left or right.
Can anyone explain how this was done? Is there a template for this?
Not sure how it was done exactly but that's javascripting and image layers. I don't know how to translate that to Articulate other than finding out the specific javascipt package, coding it for your images and then web-object it to your Articulate page. Other than that, you are looking at creating a flash movie to insert. I'll look a little further later on.
Here's an attempt at creating a slide effect in PPT and Articulate Presenter. If this interests you, I'll put together a Screenr tutorial showing how I built it.
Thank s y'all for such an interesting discussion! Didn't realize I would stir up so much interest....
Bryan Jones, I was not able to access the dropbox link you posted in your comment (might be blocked by our corporate security), so yes, I would like to see a Screenr version, when you have the time (Screenr is OK, so far). Thank you!
I thought I would take a power point approach with a semi controllable slider. I wanted to see if I could control the wipe effect with an activeX object such as the text box slider but I couldn't come up with the VBA script. Anyway this was just something I came up with. It has the power point flaw of not reloading the custom animation if you click back and fourth in the slide show but I wanted to give you just another idea on how to accomplish the before and after effect without anything else. BTW - Flash actually has a slider component and what I would have done is created a mask and used the slider to apply or turn off the mask. Not sure if you can do this within articulate but since the finish product is Flash I think it may be possible without using Javascript.
16 Replies
Not sure how it was done exactly but that's javascripting and image layers. I don't know how to translate that to Articulate other than finding out the specific javascipt package, coding it for your images and then web-object it to your Articulate page. Other than that, you are looking at creating a flash movie to insert. I'll look a little further later on.
RK
Hi Joanne! Greg Friese and Mark Burke had a good discussion about a similar idea not too long ago. Check out their screencasts in this thread: http://community.articulate.com/forums/p/3564/19023.aspx
Joanne,
Here's an attempt at creating a slide effect in PPT and Articulate Presenter. If this interests you, I'll put together a Screenr tutorial showing how I built it.
http://dl.dropbox.com/u/2332114/eLearningArt.com_Articulate_Community/Slider2/player.html
Cheers,
Bryan
Great example, Bryan!
Playing around a bit with the Wipe animation and Presenter's seek bar, I came up with this little idea:
PowerPoint Image Slider
The main thing is to set the duration of the slide to something like 30 seconds and use With Previous so the file auto-plays.
PowerPoint file
Very cool examples, Bryan & Montse! I especially love the pregnancy one Montse's slide 3!
Thank you, Jeanette!
Here's a quick Screenr on the before-after effect:
Hi Montse and Bryan,
Thank you very much for sharing the ideas. It has helped me get around the brick wall blocking inspiration for a current project.
Kind regards
Danny
Thank s y'all for such an interesting discussion! Didn't realize I would stir up so much interest....
Bryan Jones, I was not able to access the dropbox link you posted in your comment (might be blocked by our corporate security), so yes, I would like to see a Screenr version, when you have the time (Screenr is OK, so far). Thank you!
Joanne
Check this out http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/
Thank you Bill Beyer for sending the definitive answer & a link with code & instructions!
Joanne
The only other method I could imagine would be coding something in flash using motion tweens but you came up with a very nice power point solution.
I thought I would take a power point approach with a semi controllable slider. I wanted to see if I could control the wipe effect with an activeX object such as the text box slider but I couldn't come up with the VBA script. Anyway this was just something I came up with. It has the power point flaw of not reloading the custom animation if you click back and fourth in the slide show but I wanted to give you just another idea on how to accomplish the before and after effect without anything else. BTW - Flash actually has a slider component and what I would have done is created a mask and used the slider to apply or turn off the mask. Not sure if you can do this within articulate but since the finish product is Flash I think it may be possible without using Javascript.
Saw a cool post on making a postage stamp so I added some graphics to my title slide. Again, this solution sort of mirrors a partial reveal effect.
I like this interaction!
Is it possible to create it in Storyline where the user actually drags the slide bar left or right to see the before and after shots?
n/m
This discussion is closed. You can start a new discussion or contact Articulate Support.