Updating colours of Lottie animations in a skin

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
daveosaurus
Posts: 6
Joined: Wed Feb 21, 2024 5:37 pm

Hi all. I'm trying to work out how to change the colour of some Lottie animations in the default material_index skin of Pano2VR 7.

In the screenshot below, you can see I've successfully changed the colour of the rollover icons to blue... all good... but the 'underlying' Lottie animations (elements with the Lottie icon and names ending in "_anim" in this first screenshot) don't have a colour component – if I select the element and click the colour palette icon in the skin editor, I get the error "Your current selection of skin elements has no colorizable properties!"

lottie-colours.png
lottie-colours.png (125.7 KiB) Viewed 285 times


Do I need to find the Lottie animation files that are used by this skin? If so, where are they? I can see e.g. a JSON file called "Menu to close A.json" in the component toolbox (Lottie tab, Materials folder) but I can't do anything with it and can't find it in the filesystem anywhere?

lottie-json.png
lottie-json.png (226.17 KiB) Viewed 285 times

TL/DR: How do I change the colours used in Lottie animations?

Thanks in advance!
David.
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

if I select the element and click the colour palette icon in the skin editor, I get the error "Your current selection of skin elements has no colorizable properties!"
Yes, because a lottie file isn't a graphic or HTML element it's a JSON-based animation file format. For example the Arrows A.json file in the Component Toolbox is actually this text file.
lottie.jpg
lottie.jpg (2.42 MiB) Viewed 256 times
can see e.g. a JSON file called "Menu to close A.json" in the component toolbox (Lottie tab, Materials folder) but I can't do anything with it and can't find it in the filesystem anywhere?
To use a Lottie just drag it from the Component Toolbox into the skin canvas. You can find the actual file by right-clicking on the Feather folder in the Component Toolbox and then clicking on the popup "Open Category Folder in Finder"
TL/DR: How do I change the colours used in Lottie animations?
Thats a bit of a longer conversation but it can be done. Here is an example where a single Lottie file is changed, by buttons in the skin from a single color for all elements to one where different elements have a different color: https://p2vr.s3.ap-southeast-2.amazonaw ... index.html

Cheers,

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
daveosaurus
Posts: 6
Joined: Wed Feb 21, 2024 5:37 pm

Hi Tony, thanks for the response and apologies for delayed reply (I didn't get an email from the forum notifying me of a response, despite seemingly being subscribed to this thread!)...

Thanks for showing me how to get to the file (by right-clicking the FOLDER... I didn't think to try that!).

In terms of editing Lottie animations, I've subsequently found the Lottie online editor on LottieFiles. This link gives more info, for anyone else finding this thread in future: https://photography.tutsplus.com/articl ... -cms-38695

There's also a "Bodymovin" plugin for AfterEffects (https://aescripts.com/bodymovin/) which I might have to start experimenting with that.

Down another rabbit-hole I go!... 😁

Appreciate the reply!
David.
User avatar
Tony
Posts: 1342
Joined: Mon Feb 15, 2010 6:54 am
Location: Adelaide, South Australia
Contact:

Hi David,

No problem.
In terms of editing Lottie animations, I've subsequently found the Lottie online editor on LottieFiles
This is good if you want to change the colors permanently. The example I posted changes the colors within Pano2VR, so you can have one lottie but present it in different colors based on a Pano2VR variable.
Down another rabbit-hole I go!.
I'm waiting for you at the bottom :-)

Tony
Tony Redhead | Panoramic Photographer | mobile: +61438501002 | website: https://tonyredhead.com - https://redsquare.com | Pano2VR Tutorials: https://tonyredhead.com/pano2vr | instagram: https://www.instagram.com/tonyredhead/
Post Reply