Forum Discussion
Lottie files
Hi everyone!
I want to insert lottie files into my Rise 360 content, but I'm not sure if it can be done. A Lottie is a JSON-based animation file format that enables designers to ship animations on any platform. They look like gifs (and you can download them as such), but you can also download the json file that weights almost nothing and loads instantly on a web. Currently Rise doesn't seem to support such files, and I was wondering if any of you found some sort of workaround or solution to this.
Thanks, Anita
I second what @Dillon Wood said. I've been able to download them as a GIF and insert them into rise as an image
I second what @Dillon Wood said. I've been able to download them as a GIF and insert them into rise as an image
Has anyone been able to improve the quality (sharpness) of Lottie-as-gif files?
No. And this is my biggest issue. Right now, I'm still getting an off-white background on the lottie image, and it's driving me nuts! Would be nice if there was an update to support the JSON file extension in Rise and Storyline.
Could you create the Lottie in a 2x or 4x scale and then size it down in Rise to improve apparent resolution?
This works for GIF files, I've done this. Lottie doesn't need to be rescaled, as it's vector based which is why they are superior to GIF files.
Lets make this happen. This would be a big win.
I would also like to see Lottie integration in Storyline. Thanks.
I've managed to make lottie files that I created in aftereffects to work with storyline by importing them as web objects. I've had to create a index.html file with my json file to work. The issue I'm facing is to make them available offline. Our LMS offers offline download which many of my learners use with their company issued iPads. I've been racking my brain to get it to play. I've even downloaded the lottie player code put in its own .js file and redirected the index file to the local file. It still works online but not offline even though I've got everything local.
You cannot import a local json file. This is a browser security restriction unfortunately.
So I’ve used custom Lottie files I created in aftereffects in storyline, using the steps shared here https://designdebt.club/using-lottie-animations-in-storyline-360/
Downfall, is you can only see it when you publish to review 360 or a finished scorm in LMS. It just shows as that grey box that says WebObject otherwise. This can be a challenge for timing them, but instead of previewing, I just keep publishing to review after each tweak.
Also note that it can’t be viewed if your users have the option to “download” and play offline. At least I haven’t been able to get it to work. I think the Lottie player is hosted only I’ve tied to add code to the HTML file in the WebObject I creat but I know just a little to get me in trouble. I am no advanced code writer.
So my next try would be to create my into with Lottie’s that I want to do for my rise in a storyline block. Im pretty sure this will work as I’ve used storyline blocks in rise to show my course survey slide at the end, and it uses a WebObject for the survey form.
just thought I would share this idea!
