Forum Discussion
Import animation
Hello, My concern is the following: When I make an animation in After Effects and I want to import it into StoryLine, the Alpha layer is not taken into account. I usually use Photoshop to make my G...
You need several tricks to use spritesheets in Storyline. The added sample shows a few of them to get started.
https://360.articulate.com/review/content/c0bbc119-10c0-422b-9808-b629d67f296f/review
First of all you need to understand 'clip-path'. Here is a good explanation of what it does.
https://css-tricks.com/almanac/properties/c/clip-path/
As you cannot set an image to the background of a Storyline element, and you need control over the position of the background...you need clip-path.
In the added sample you see a single spritesheet ( one long image with multiple states... in this case just images of food ;-)
Then on start of the Storyline a javascript trigger is executed, setting the clip-path of the image only showing part of it.
Do use Sublime Text or Atom to code your Javascript. Alas Storyline's editor lacks lot of needed functionality to script easily. See the difference in coding inside Storyline and using a professional editor. Just the color coding makes understanding and fixing code easier.
And finally the Javascript on the button makes your clippath animate. Using the stepped-ease of the GSAP link will make it work as a frame by frame animation.
Adding the spritesheet sample.
Good luck
