Hi,
Is there any tutorial on how to use the Noesis GUI Lottie Plugin?

Hi johnope,

To get Lottie files into Noesis, there are a couple of steps -- I will be covering what these steps look like for Windows specifically, using AfterEffects as the authoring tool/exporter for custom animations (optional).

Conceptually, what is important to understand in this process, is that in this context, animations can be exported as JSON files. (Lottie files are JSON-based)
These JSON files however are not directly compatible with Noesis, so they need to be converted into compatible XAML files.

So in essence, what we're looking at, is a two-step process, where the first step is that we need an animation as a JSON file (whether we, or someone else made it), and where the second step is converting the JSON files into XAML files.

So, with that in mind, let's get started!

----------------------------------------

1) Initial Setup
The very first step is that we will simply be creating a folder which will be our 'working folder' for the below. This is where the files that we'll be working with, will all live, at the root. This folder can be named anything you wish.

----------------------------------------

2) Getting the JSON to XAML Python Script
Next, we'll get the script configured that is responsible for converting JSON files into Noesis-compatible XAML files.

2.1) Download the json2xaml.py file from https://github.com/Noesis/Lottie-Noesis
The easiest way to download this is click on the green '<> Code' button in the upper-right of the page, then select 'Download Zip'.

2.2) Open the Zip, and extract the contents to your 'working folder'. Alternately, you can open the Zip, and either Copy-Paste, or Drag-and-Drop the json2xaml.py file to the directory on your machine that you selected in Step 1).

----------------------------------------

3) Installing Dependencies
Before we can use this script, there are two dependencies that we need to acquire for the script to work as expected: Python3 and the Colorama Module.
We will be using the Windows Command Prompt for this, which can be opened by pressing [WinKey]+[R], typing 'cmd' (no quotes) in the 'Open' field, and hitting [Enter].

3.1) To install Python3 , open the Command Prompt using the method above, and simply type 'python3' (no quotes), then press [Enter].
This will open the Python3 entry in the Microsoft Store, from which you can click the 'GET' button to complete its installation.
You can then verify the installation by opening the Command Prompt again, and typing `python3` (no quotes). If successfully installed, it will return a version number and a couple other details.

3.2) To install the Colorama Module, open the Command Prompt, and type 'pip install colorama' (no quotes).
You should then see 'Installation Successful' in the returned display of the Command Prompt.

----------------------------------------

4) The Bodymovin Plugin for AfterEffects (Optional)
If creating custom animations in AfterEffects to export to Noesis, we will need to acquire the BodyMovin plugin for AfterEffects. This is the plugin responsible for exporting AfterEffects content as JSON files that can then be converted into XAML files with the Python script above. If you are not planning on creating custom AfterEffects animations, you can skip to Step 5).

4.1) The easiest way to add Bodymovin is to grab it from Adobe Exchange: https://exchange.adobe.com/apps/cc/12557 . Clicking on the blue 'FREE' button on the Adobe Exchange page will install the plugin automatically via the Creative Cloud Desktop App. (Ensure that AfterEffects is closed before installing.)

4.2) Next, open AfterEffects, and create a Composition that will contain your animations. Be aware that not all AfterEffects features are supported .

4.3) Once your animation is ready to be exported, in AfterEffects' application menu bar, open 'Window', hover over the 'Extensions' entry, and then select 'Bodymovin' from the extensions list.
This will reveal a list of your Compositions.
On the desired Composition to export, click on the 'Destination Folder' path text. From here, you will want to select the folder created as our 'working folder' from Step 1).
Once the destination is selected, on the far-left of the Compositions list in the Bodymovin plugin panel, ensure that the Composition you want to export has its radio-button 'ticked'.
Then, click on the green 'Render' button in the upper-left of the plugin panel. This will generate a JSON file of your animation, in your 'working folder'.

----------------------------------------

5) Converting the JSON to a XAML
The following steps will be the same whether you created a custom animation in Step 4), or whether you download a pre-made JSON file from https://app.lottiefiles.com/ by finding an animation you want, 'downloading' it to your Lottie account, then downloading the JSON file to your machine.

The most important thing here is that your JSON animation file should be in the same folder as json2xaml.py (both in the 'working folder' created in Step 1).

We will be using the Windows Command Prompt for this, which can be opened by pressing [WinKey]+[R], typing 'cmd' (no quotes) in the 'Open' field, and hitting [Enter]

5.1) Open the folder in Windows Explorer in which both the JSON and json2xaml.py are contained. Click on the Windows Explorer address bar, and copy the entire path.

5.2) Open the Command Prompt, and type 'cd' (no quotes' followed by right-clicking in the Command Prompt window to paste the path from Step 5.1). The line of text in the Command Prompt should now read something along the lines of: Once this is input, press [Enter] to apply the command, which will change the Command Prompt's 'active directory' to the one where the JSON and json2xaml.py files are contained.
Do not close the Command Prompt window after this has been submitted.

5.3) Next, we will run json2xaml.py . To do so, in the Command Prompt window from step 5.2), input the following: Press [Enter] to then start the conversion.

This will then result in a XAML file being placed alongside your JSON file, and this XAML file can be copied to your Noesis project as a ControlTemplate which you can manipulate further.

Its important to note that if you close the Command Prompt Window from Step 5.2, and you wish to use the Script again, you will have to restart at the beginning of Step 5).

Let us know if this ends up working for you!

- Dorian