Using Rive in Storyline - States

On LinkedIN i allready posted how to get this done. Starting a series how to use Rive directly in Storyline here too.

All the interactive elements in Rive can be triggered by Javascript.

To get it working you need a proper Rive with named states. These you can trigger with Javascript.

Like this..
https://360.articulate.com/review/content/1ea72b55-9a69-4b0e-a8d2-a566e0c59ed1/review

Basically you add the Rive animation as a WebObject. The index.html used for the WebObject has a Canvas, the Rive Web runtime and specific code.

<canvas id="canvas" width="404px" height="332px"></canvas>
 <script src="https://unpkg.com/@rive-app/canvas@2.7.0"></script>

You have to replace the 'src' url for the Rive file with your own. Or add it somehow as file and target that.

src:"https://public.rive.app/hosted/204711/199760/iEdeOxzF3UinRiSlCE08yA.riv",

Using 'postmessage' to communicate with an iframe you can then trigger any state in the rive.

window.message = "";
window.addEventListener("message", function(event) {
    let data = event.data;
changeState(event.data); 
});

I am adding the .story and index file for anyone interested.

Rive does have a great new functionality, 'Layouts' that change animations based on screensize. For Storyline that is quite useless as Storyline isnot responsive but scales the view. For Rise360 however this can be great. Next step for me is discovering exactly how 'Layouts' work in Rive and getting that to work in Rise360.

#Rive #Interactivity