22
Views
9
Comments
Solved
Animations with Rive Files extension .riv
Question

Hello,

I am trying to use Rive animations in a mobile app.

I add the file extension .riv to the Resources of my app, but when I try to access the file URL  on the browser I get a 404 Not Found.

The 404 only occurs with .riv extension. If we use a know extension works ok.

It seems the resource extensions are restricted.

2022-10-30 15-16-24
Pedro Brandao
Solution

I managed to put the .riv files on a container in azure.

At first, I have CORS problems but was able to manage and now I can access the URL of the .riv file on the azure container with no problem. It should work on other cloud services too!

I am using this JS on screen action with a button or it can be on the on ready to work without a button:

new rive.Rive({        

src: $parameters.Url,        

canvas: document.getElementById($parameters.CanvasId),        

autoplay: true    

});

I pass the URL from azure and the Canvas ID by parameter to JS and works!

2022-08-03 04-32-50
Ravi Punjwani

Hi Pedro

Did you try to make your resource Public?

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

Why would that make a difference?

2022-08-03 04-32-50
Ravi Punjwani

I know it won't make much (if at all) difference, hence asked to "try". It gets bit of a challenge to understand and suggest a workaround with very little information on hand.

2024-07-05 14-16-55
Daniël Kuhlmann
 
MVP

How do you access the riv URL, through the resource URL property?

 

2022-10-30 15-16-24
Pedro Brandao

yes. 

but Outsystem Support has confirmed that the .riv extension is not supported.

2022-08-03 04-32-50
Ravi Punjwani

Now that they clarified it won't be supported, what would be your next attempt to achieve this? I'm sure there must be some way to have this sorted out, either from Outsystems end, or by having some alternative other than RIV file.

2022-10-30 15-16-24
Pedro Brandao
Solution

I managed to put the .riv files on a container in azure.

At first, I have CORS problems but was able to manage and now I can access the URL of the .riv file on the azure container with no problem. It should work on other cloud services too!

I am using this JS on screen action with a button or it can be on the on ready to work without a button:

new rive.Rive({        

src: $parameters.Url,        

canvas: document.getElementById($parameters.CanvasId),        

autoplay: true    

});

I pass the URL from azure and the Canvas ID by parameter to JS and works!

2022-10-30 15-16-24
Pedro Brandao

I was struggling with ios devices but was yet CORS issues on ios devices!

Working fine now.

2017-07-06 09-31-00
Jasper Oudenaarden

Just change your .riv file to something like .png and it also will work 😇.

Happy hacking 😜 !

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.