Forum Discussion
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
- VictorienRami-5Community Member
I have a hard time getting my Rive web object scaling with my slide. Even though my canvas dimensions are the same as the Storyline slide, my Rive animation appears larger when I publish, and has scroll bars on the side and bottom. The "Scale with slide option" seems to not be working at all. Any tips? Thank you!
- MathNotermans-9Community Member
Hi Victorien,
Thanks to ZevanRosser from Articulate i have a piece of code that will fix this.
You find it here.
https://zapp.codes/?share#rivesize
You basically need to add this part to your index.html of your Rive.onresize = () => { const size = Math.min(innerWidth, innerHeight) - 20 canvas.width = canvas.height = size console.log('reszie') r.resizeToCanvas(); } onresize()
And then it will fit and resize nicely.
- VictorienRami-5Community Member
It seems it is working quite well. It will do for the moment. Tank you for you help!
Is it normal that Storyline does not play the Rive web object's sound events? My sounds are working just fine when I test my html file, but not in Storyline. Do you know if the Rive sound events have to be fired from JavaScript to work inside Storyline?
- MathNotermans-9Community Member
I guess you have to be a bit patient till the new Advanced Javascript API for Storyline is public available. In there a lot of improvement on scaling of Javascript triggered elements in the SL player. Im gonna do some tests with WebObjects, Rive and JS to doublecheck this will work properly.
- MathNotermans-9Community Member
Attachments are apparently hard to attach in the new forum. In the above Review its added as project.
- KarenTaylor-c19Community Member
Thanks for this! Just getting into Rive.
- MathNotermans-9Community Member
Somehow the attachment failed. So here it is again.