Lottie tutorial?

[Dan Korneff]

I'm trying out Lottie animations for the first time and need some help with the basics.
Is this a separate app I need to install for PC/MAC? Or is the framework built into HISE?

I've downloaded a .json file to play with from here:
https://www.lottieflow.com/download/search-08#
The example in HISE manual says:

The string is a processed JSON file that was compressed with the Lottie Dev Panel.

How do I access this Developer Panel?

Any help is appreciated

[Natan]

@dustbro
Create An Empty Tab
Then Right Click And Select Lottie Dev Panel :)

[Natan]

In Case You Want To Start To Animate Your Own Stuffs,
You Need:

@Natan said in What's your vector UI design workflow?:

Here Is Some Useful Links For New Users

Tools :
You Need Bodymovin Plugin For After Effects To Export Your Project As Json:
https://aescripts.com/bodymovin/

To Install Bodymovin Extenstion / You Need ZXP Installer:
http://aescripts.com/learn/zxp-installer/

How To Export Json Files / After Effects:
https://www.youtube.com/watch?v=3PbUL3z9bIs

[Tania Ghosh]

rlottie_64.dll missing....how to get it?

[Natan]

@Tania-Ghosh
It's In The Hise Source Code / Lottie Folder.

You Need To Place It In System 32 On Windows :)
Search The Forum :)

[lalalandsynth]

I never had any real luck with this unless its very simple animations.
Mostly it crashes on converting the lottie file.

[Tania Ghosh]

@Natan Ok... i'll try.

[marcLab]

Hey @dustbro! First, you need to create a Hise snippet of your JSON string by using the rLottie demo app. But first you need to run the rLottie Demo projucer in the Tools/ rlottie/... rlottieDemo.

[marcLab]

@dustbro

:)

hope this will help. Don't forget to put the Lottie plugin in the right place on your computer.

HiseSnippet 1971.3ocsWszihicE1zcQqTLSMJSz7C.UqnC0XYy6JQQ8Xv1.FiMfMO2LxXeM9B1Wa7CJaZ0RYQ98j+.YQ9ajsYc1jEYex07ngNcMslojFVw4087ct93y4yC7c0AAAt9DYtUMwCPj4qypjfBsZYoAQDcYIx7MY6qEDB7yeTUyDOsf.fAQlLutcphL2dCwge+620TyVCoCtnhfXhKTGHBcfgWzN3G5Ass40L.pPmq7txOzU2E0x01MBimWmkhvSSei1JfjVpauJKQl2vY.Cc8UB0BAAXeZ5ZjnX49D5n+SfAvk1fTAZBE7AcTMQKKnswfy0Z.AQlaFboxe8wJ+6x1GZ.+n9K2.+1CFxeIhquCx7pOER27IPh9mBR7t1FoGvOA7xbE7t4H791rJ59PuvKVRw1WksKB+vwTCeseMrN5Kwq9auIaKWrGnPRGsM.dervGinPMJpGxWkh5s+w6xcWN7kePX9cZ948zP.67+o7mCUyvXPppB26Qe+CTObHfyFC.oXxC3GBAA3D3HnHKUH+AWy+96xkG+6936+C4od3jPx0BOAMBsvJRwxIUV.3JqPrNLztK2GNhtqvROj6xB2GbAJ2kKE01tgXHfg880erLIRsVuFs3Ck22lmb1xRy52TLXn7twyq2Qz8In.CTlRUmxYi7Hm9xkDGMLd8x0blKVfV2TvWtNKYOlcJjhy6JiFaL1OZvfgRkKwYX0UNlow7lcYiDBmOnY79U56FMilKTpg51XtdS1s0Z9VUVdSSaUGgndhqQ7AZSK2w5wkSm0sccupkB2oxW2a1lMZUJquZk4l0E8AiEjKWUyeRRICeZXPsmpB0r4cbWsJnu85N6mMXAJNBDmrMbMEhbZ2sKrfk1NabCe2oiqSMYbsYTtOVDDWqoLSjP4ZAKn2rPHxqaHq75klMSZ3OaO0N5jfENtUs3GMzdeyIbZM6oKUot+tQljsXGvxBhU3FEuaEybC+oMhDPwZTAkrJF2vbmQCoN1hhKkeRsc41cmCWTWeaaswQSV1HhesKp7DCRQ2JLiCUW3iJExHZf5aDIzYYEItsw.5XWD.sstw9ViEp.fPU0DV9l5wH9ttBkWSQCEp2cnyDtsPH+nQKXjks26xZXxTwZ39EEaLlSuc0sFiEi3HMYgKT6uwlAQ1rSGRD4.FyUBZcjX5vNZN4dycy5vPxRtScMZH6L6x7cLappJNgwrcmDgVUV4w0rZR35kUkcRLgyBnGJ0Zk1HOEO83GGUi0weGzo2Bx0N6bl5TwtHkGUo8EsDblqFy0dngQk10dbztpiIqAFLghIVtp.6V+sVJVH1dhMKkLp8lDWoZ.PiYq5EtcW6g9vlhdZbRiTrZ1S0wzj0IXaU5RqBpHMaCYM3zZfhLa1SJEvOuTkxiT627IeRgGCY5MDEaOlJZI2btUSGoTtRqgiGo5zRtcGWH8Syp2qab2tl6qNxgVM.HDEvaPJzu+B5AxqMlLNZsnl+7hw0Esh4Rrm2tX8ZUImtQ1u3vDNdFSogROFT4ojQS6WRvcY4dSaaqoHE6TYQqNRnGWtKnjXvj0k4fKgFyAvshEmVjb2x9i25Wzh6IRkdj8pGvCCcFN3Qa6Mc3gHSZomfMlVAUELYdsJqkjXWrtwpEAJ0AhJwn4LR8Z4Mmsirc4.Q4kc8YpQ2X9Fo46A58oJSKMbXI3Jx3c8VKzrDET0ZfjZMmflJhdaYa0s27QRLl8XaYpHTZqxbNe8IT8HMTkr2oLHQBWWIKsEaEGzh79CSNNLqKcHFCB5nEBcQENNHIcvxkwJrZgZ3QKG8d0UdmZnvwgP2kChrgHPdyHjdps73IpzoCt7csKn653k10G9.dFqcD3s2kCOc71OO+7938cEN3S9e+UomDE4bvVv2SmlvOb0PXLhZc97OLZ7soG4oT2Ry1dIdUZgqfyYDeWtq.qjaHPFU3s4detay8gb4++MYZ9r1Ncj1.+m0b5Vd+uTfEvE1Rf+46kyNhW88o6V+ped6V0OdmbkitntHXnrG3j7ksuo1NV0msRQ7wh8ZUWpwq0dnzdF2tn5yWtSb5YV5Z9SticM7vR9u4zRdEanAvm.hw3MYCnINbwbhoze9eM7e7NhwcSaINeF3i6xNXrNVvNLuqiDGtMKKHXSnqGlB0G6QvToNlw6NSqHsM7TB8nIhww8lyj3RtV3v95TEyd0QEG2Vmp4+j4jOWklu9KWX37jMyobb7OAgIoOReS1zs7DNPCCav.2.XZKyUjM+6XNodJv8GtUd+28Wa+O2+Wdmy07QIHbzhuldZPjoIL9.QRSnsSPHFPccv7KIx76xNN.j2.XpEYGlOXC9bvuHuAXn5dvehOmOFlUnqQjsV3mRULkS7ICo.9ZNYo7tP3BI4ZP8Kf+H0yxej94Zw9YB2uM6.Xnt0yi2W8L3E2u8qMdOwF+trbll.8vKf8lr7ydoTu+E.kQtQgPzp9Z31iztSoHGE7GjnCvHAgeGIHsQMs0+jL04FWE.x3fv+E+6jQ5T4LmLRe1HtwT228G0O9xeJe+eyAMXLgN7oN2h+lKrb9O9he1rTjTouL.+Qc8zqhumlf34iozKHlxufXp7Bho5KHlZufXp+BhowWLlzu.jIJz83FZ7Cz9C3NL.NSFNjFtK6PGIw+CfI5NF1

[Natan]

By Resizing The UI To X2 The Animation Looses The Quality!!!
But, What's Up, It Should Work As Animated SVG Files, Right? With No Fuzziness!!!

[Sawer]

@Natan Hi
Found the file but I don't know in which specific file to place (there are a lot of "lib" folders)

[Sawer]

@nesta99 Any hint please?

[ustk]

@nesta99 There should be only one in your computer called /usr/local/lib/ ;)

[Sawer]

@ustk Thanks man!

https://youtu.be/6DSd0dQIXkE

As you can see here, i cant drag and drop. Please do you know the reason?

[d.healey]

@nesta99 Try copy paste instead.

How do you add the rlottie library to your installer so that the end user can see the animations?

[d.healey]

I've added the library to packages as shown in the image, but it's not being installed, any ideas?

Is this one of those situations where I need to use a post install script?

[Sawer]

@d-healey Working now. Ahaha don't know how/were to start tho.

[d.healey]

I found a solution for the installer. I just added the library as a separate package and gave it "librlottie" as the identifier. I also set the package to be required. I'll add this to my exporter tool when I do the next round of updates.

[Sawer]

Hi everyone.

After having the desired animation and the compressed file, how can i Load it to the panel Please?

Any help is appreciated. Thanks

[Sawer]

@nesta99 please guys, any idea?