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 GIF and import it but Photoshop does not support a 15-16 second GIF. What can I do to recover the alpha layer of my After animation? Export in MP4 of course.
MP4 videos are natively supported in Storyline 360, while other video file formats get converted to MP4 (you can see the list here).
Since MP4 doesn't accept alpha channels, this is not currently a feature supported in Storyline. We are tracking a feature request and will update this discussion when we have any news to share!
Sheetah is a free AfterEffects plugin to generate spritesheets. Spritesheets can be png's with transparancy. And with GSAP you can animate any spritesheet. https://codepen.io/GreenSock/pen/vLFmd?editors=0010
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.
6 Replies
Hi, Ben, and welcome to E-Learning Heroes! ✨
Thank you for reaching out!
MP4 videos are natively supported in Storyline 360, while other video file formats get converted to MP4 (you can see the list here).
Since MP4 doesn't accept alpha channels, this is not currently a feature supported in Storyline. We are tracking a feature request and will update this discussion when we have any news to share!
You could use Sheetah in AfterEffects to export a spritesheet and animate that with GSAP in Storyline.
Thank you for your answers.
Can Sheetah allow me to get the alpha layer of my animations?
Sheetah is a free AfterEffects plugin to generate spritesheets. Spritesheets can be png's with transparancy. And with GSAP you can animate any spritesheet.
https://codepen.io/GreenSock/pen/vLFmd?editors=0010
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
thank you very much for your explanations, I will try like that.