Forum Discussion

MathNotermans-9's avatar
MathNotermans-9
Community Member
6 months ago

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




Articulate 360
community
e-learning development
General E-Learning
rise 360
storyline 360

10 Replies

Sort By
  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    6 months ago

    Attachments are apparently hard to attach in the new forum. In the above Review its added as project.

  • VictorienRami-5's avatar
    VictorienRami-5
    Community Member
    5 months ago

    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-9's avatar
      MathNotermans-9
      Community Member
      5 months ago

      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-9's avatar
      MathNotermans-9
      Community Member
      4 months ago

      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-5's avatar
        VictorienRami-5
        Community Member
        4 months ago

        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?

  • JosefinaPoventu's avatar
    JosefinaPoventu
    Community Member
    28 days ago

    MathNotermans-9​ I've been having a hard time trying to figure out how to use rive in storyline, but I have zero code knowledge. Is there a course or article you recommend for absolute beginners?

    • MathNotermans-9's avatar
      MathNotermans-9
      Community Member
      27 days ago

      Getting Rive to work properly in Storyline is tough without some experience in Javascript and debugging. The power of Rive is that it is interactive, and thus can do anything. Online there are tons of courses teaching Javascript for beginners. If you plan to focus on using it in Storyline you need a course that uses Storyline too. As the 'specifics' of using Javascript in rapid authoringtools like Storyline really has some drawbacks you need to know. Jett Batt is working on a Storyline/Javascript course and he clearly explains things. Here is his LinkedIN profile...
      https://www.linkedin.com/in/jeffbatt/

      Further more you really would need to know how to code things on the Rive end.
      For that this guy designcourse​ ( also on LinkedIN and YouTube ) has some great tutorials and courses upcoming.
      https://www.youtube.com/watch?v=djqNJaJzjks


      However what he teaches is pure webbased, so you need the knowhow how to get it working in Storyline too.

Related Content