Lottie tutorial?



  • 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



  • @dustbro
    Create An Empty Tab
    Then Right Click And Select Lottie Dev Panel 🙂
    829d1d73-8ff2-47d5-92ed-22aeba59b531-image.png



  • 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:



  • Rlottie.jpg rlottie_64.dll missing....how to get it?



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

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



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



  • @Natan Ok... i'll try.



  • 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.



  • @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



  • 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!!!



  • @Natan Hi
    Found the file but I don't know in which specific file to place (there are a lot of "lib" folders)Screen Shot 2021-02-15 at 16.06.12.png



  • @nesta99 Any hint please?



  • @nesta99 There should be only one in your computer called /usr/local/lib/ 😉

    Untitled.png



  • @ustk Thanks man!

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



  • @nesta99 Try copy paste instead.

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



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

    Screen Shot 2021-02-17 at 10.58.06 PM.png

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



  • @d-healey Working now. Ahaha don't know how/were to start tho.
    Screen Shot 2021-02-18 at 11.04.15.png



  • 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.



  • Hi everyone. Screen Shot 2021-02-20 at 18.34.26.png

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

    Any help is appreciated. Thanks



  • @nesta99 please guys, any idea?


Log in to reply
 

5
Online

1.3k
Users

4.1k
Topics

36.5k
Posts