Forum Discussion
MichaelHinze
9 years agoCommunity Member
Freebie: `Before & After` Image Slider
I thought someone might be interested in this slider interaction.
The source file can be downloaded here.
Here is a brief blog post about the setup.
OwenHolt
Super Hero
👍
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":
- Select the picture and click edit states.
- 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.
- 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.
- Move the last copied line to align to the far right of your picture.
- Select all of your lines and use the alignment tools to align them to top and then distribute horizontally.
- Duplicate the state and name it (something like state 1).
- Delete the line on the far right.
- Duplicate the sate and name it (something like state 2)
- 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.
- 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.
- Go back to each state and remove all remaining guidelines.
- 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.
MoriahKent
5 years agoCommunity Member
I don't know about anyone else, but my crop function keeps crashing storyline. I've already submitted a ticket. But that would be so much easier to use the crop function. :)