Rive

Rive is a real-time interactive design and animation tool used to create vector-based animations that can run natively in a Dise template.  

This app allows you to:

• Play Rive animations in Dise

• Create Dise templates in Rive, without any coding

• Create interactive experiences in Rive to be used in Dise

• Create experiences in Rive which react to triggers and dynamic attributes

• Trigger scenarios or change dynamic attributes in Dise when user interacts with your interactive experience

• Any combination of the above

The app provides a no-code approach and can be used out of the box.  For more advanced use cases, you may create your own app using the Dise Template SDK and integrate the Rive app runtime directly into your project.

The Rive app provides a number of configuration settings which allow you to tailor it to your specific needs.  

Below you will find some pre-configured app packages that are designed for specific use cases.  All packages contain the same app, but with different configurations.  

Installing and using the app

Play Rive animations in Dise

This app allows you to play any Rive animation - interactive or non-interactive - in Dise.

1. Download the app here (Portrait and Landscape versions provided for convenience):

   Rive Animation (L)

   262.15 KB
   Rive Animation (P)

   262.15 KB

2. Upload the zip as a template in the CMS

3. Upload a .RIV file to the CMS, create a message and select the file.  Set the desired duration.

If you need other resolutions than standard 16:9 portrait or landscape, you can change the resolution in the template.json file contained in the zip.

Create your own Dise template in Rive

The Rive app supports automatic data binding between View Model Properties in the Rive animation with template fields in Dise. This allows you to easily create templates - both interactive and non-interactive - in Rive.

1. Download the Sample Template here (Portrait and Landscape versions provided for convenience):

   Rive Sample Template (L)

   467.09 KB
   Rive Sample Template (P)

   667.66 KB

   (Feel free to upload the sample template to the CMS and try to create a message with it to see how it works)

2. Create your template in the Rive editor and create View Model Properties for each element you want to expose as a dynamic template field. Data bind each property to the respective object.  For example, the sample template defines three properties - a title, main text, and an image:

   

   Pay attention to how you name each property, as these will be mapped to the Dise template fields.

3. Export your template in the Rive editor as a .RIV file

4. Unzip the sample template to a folder on your PC.

5. Note that there is a file called template.riv. Replace this file with your own .RIV file, make sure it is named template.riv.

6. Edit the file template.json. You will want to change the template name, and possibly also the default duration and icon:

   "name": "Rive Sample Template (L)",
   "icon": "assets/icon.svg",
   "defaultDuration": 10,

7. Change the template fields in the template.json to match the View Model Properties of your Rive template.  It is the key of each field that must match the Rive property names. The template fields in the sample template look as follows:

       "fields": [
           {
               "type": "text",
               "key": "title",
               "caption": "Title",
               "default": "Enter your title",
               "required": true
           },
           {
               "type": "textarea",
               "key": "text",
               "caption": "Text",
               "default": "Enter your text",
               "required": true
           },
           {
               "key": "image",
               "caption": "Image",
               "type": "content",
               "required": false,
               "options": [
                   {
                       "path": "/Media"
                   },
                   {
                       "path": "/"
                   }
               ]
           }

   Please refer to the Field types documentation for more information about the available field types and their properties.  The following types are supported:

   Rive property type	Dise template field type
   string	text or textarea
   number	number
   boolean	checkbox
   image	content

8. Any other customizations can be done in the file config.json.  Refer to the section Customizing the app below

9. Create a new zip file and upload to the CMS as a template.

Binding Rive View Model Properties to Dise Triggers & Attributes

When you set the forwardExternal and/or receiveExternal settings to true in config.json, the app will automatically bind any View Model Properties to dynamic attributes / triggers in Dise.

Set forwardExternal to true if you want property value changes in your Rive animation to be forwarded to Dise.

Set receiveExternal to true if you want attribute value changes in Dise to be received by your Rive animation.

The automatic binding is done by naming convention in Dise:

rive.<type>.<propertyName>

The following View Model Property types are supported: boolean, color, enum, image, number, string, trigger

Triggers use a different naming convention:

When a trigger is fired in Rive (by click for example) this will directly fire a Dise trigger with the following naming convention:

trigger.<propertyName>

When a trigger is fired by another Dise app, the naming convention is:

rive.trigger.<propertyName>

Test Rive settings

The following app is provided as a tool to help finding the correct settings for your Rive template:

The Rive Tester template shows a helper panel in the preview area. It inspects the View Model Properties of your Rive file and suggests JSON template field definitions which you can copy into your template.json file.

The Screenshot delay time is used for thumbnail generation.  The default configuration is 1000 ms, which means that the thumbnail is created one second into the animation timeline. You can experiment with this setting if the default does not work well with your animation.  Once you have found the optimal delay time, you can then change the screenshotDelayMs setting in the config.json of your final template.

Customizing the app

Below is the full format of the Config.json file:

{
    "type": "AppConfig",
    "riveSrc": "template.riv",
    "receiveExternal": false,
    "forwardExternal": false,
    "showHelperPanel": false, 
    "screenshotDelayMs": 1000
}

riveSrc contains the name of the embedded Rive file

The other settings are described in the sections above