17 Replies
OWEN HOLT

He blogged about it, but basically...

  1. You need a background image that will be either your before or after. It doesn't matter which.
  2. You need an image for the opposite state that you will slice vertically into a bunch of smaller pieces. I believe Michael used 50(ish).  This is your masking image that you will change as a slider is moved, hiding or revealing slices based on which direction the slider is moving.
  3. You will need a number of states for the masking image. Start with one that contains all of the slices assembled as a whole picture. This will help maintain alignment and make creating additional states easier. Don't put this as your "normal" state, be sure it is something else.
    1. Duplicate the state, rename it, and delete the right most slice of the image in the new state.
    2. Duplicate the state you just created, and delete the right most slice.
    3. Repeat until you reach the last state that should have 1 slice remaining.
    4. Delete everything out of the Normal state. The Normal State is now a layer that is empty that will show the whole base image.
  4. Insert a slider.
    Make the total steps in the slider equal to the number of states for your masking image.
  5. Add conditional triggers:
    Change state of (image) to (masking image state corresponding to slider's position) when the slider moves IF (Name of Slider's variable) is equal to (position corresponding to the desired state).

Sorry for the delayed response but I hope you (and others) find this useful.  

OWEN HOLT

👍

Pro-Tip for anyone that doesn't want/know how to make all the slices or doesn't have the software for it... Instead of creating a number of slices and grouping them to form an image, you can instead use the crop tool to "remove" equal slices from the image.

On the image you want to "slice":

  1. Select the picture and click edit states.
  2. In the "Normal" state, insert a vertical line extending from above the picture to below it and align it to the left side of the picture. 
  3. Copy and paste it a number of times. How many lines will you need? One more than the number of "image slices" that you want. 
  4. Move the last copied line to align to the far right of your picture.
  5. Select all of your lines and use the alignment tools to align them to top and then distribute horizontally. 
  6. Duplicate the state and name it (something like state 1).
  7. Delete the line on the far right.
  8. Duplicate the sate and name it (something like state 2)
  9. In the new state, use the crop tool and crop the right hand side to the guide line you inserted. Tools like to align to other shapes so the crop tool will kind of snap to the line when you get there. 
  10. Delete the right most guide line and duplicate this State... repeat step 9. Keep repeating until you've created enough states that to slowly crop the image down to one slice.
  11. Go back to each state and remove all remaining guidelines.
  12. Go to the normal state and delete everything.

You now have an empty state (normal) and x number of states that are each missing one more "slice" than the prior one and you've achieved it using the crop tool and equally distributed lines as guides for cropping.

Russell Killips

Hello Moriah,

I took a different approach to creating this type of Before & After image slider.

I didn't like having to crop an image into a bunch of strips. I found it too time consuming.

In this example project, I set the after image as the slide background.

Then I added the before image onto the slide.

On top of the before image, there is a Reveal rectangle. I set the fill of this rectangle to: Slide background fill.

Then for each state of the Reveal rectangle, the width of the rectangle is increased.

With this approach, I no longer have to do any cropping. I use it as a template where all I have to do is swap out the slide background image (after image) and the before image.

Moriah Kent

Hi Russell, 

Thank you SO MUCH for sharing that with me. After working with Articulate, there is a bug that is crashing Storyline when I use my crop tool, so that option wasn't even on the table for me anymore. I so, so, so appreciate that you took the time to answer my question and show me how to do this in the future. I'm very grateful. Thank you! 

Sincerely, 

Moriah

Martin Tuttle

I really wanted to be able to recreate this. I tried Michael Hinze's approach and I got some glitchy flashes that occur, like the base image is showing through unexpectedly as the slider moves. I tried Russel's approach but when I add my image to the slide background and shape it deteriorates. I tried editing the size of the image in photoshop following Articulate's best practice for adding images. 

attempt

Any thoughts on how I can fix either?