Play Canvas HTML file in other programs

[BioME]

Hello team. I’m a professor at a medical school. Starting this fall, our school is going to employ two new programs to deliver our handouts, ScholarRx and Canvas (not to be confused with the canvas function of Animate). I would like to get my Animate HTML files to play within one of these programs. I could also use Word documents or PowerPoints. I have heard that this can be done by converting the HTMLs into something called SCORM files. Does anyone know if this is possible with the HTMLs, and if so can you direct me to online instructions for doing so? If this isn’t possible with the HTMLs, can anyone suggest another method? Thanks so much, Thatch

[Mario_CR]

I think this task is more suitable to Adobe Captivate, not sure if it's possible or not but try asking in the Captivate community forum: https://community.adobe.com/t5/captivate/ct-p/ct-captivate?page=1&sort=latest_replies&lang=all&tabid...

[BioME]

Thanks for the advice Mario_CR. I just looked at an online description of Captivate and it seems promising. However, before I devote time into experimenting with it, I want to see if you can confirm it will do what I need. It would be suboptimal to use it as the primary authoring tool for my handouts. Our school is going to ScholarRx and Canvas (not to be confused with the canvas function of Animate), and we want to keep things as consistent as possible for our students. However, it looks like Captivate might provide a solution for embedding my HTM animations in ScholarRx and/or Canvas. So, it seems Captivate's output format is like a slide show. Moreover, you can publish Captivate files with the SCORM format (thanks to JoãoCésar explaining that SCORM isn't a format you convert to). It seems like I could import an HTML into a single Captivate slide, publish it with the SCORM format, then import that into ScholarRx or Canvas. I realize that you may not be familiar with ScholaRx or Canvas and so won't be able to answer this question. If so I will consult with the expert at my school. I just wanted to check with you first. Thanks again for your advice, BioME.

[kglad]

to confirm captivate's applicability, flag lilybiri in the captivate forum.

[JoãoCésar]

Hi.

The more common and eaiser way is to embed the outupt generated from Adobe Animate in an iframe tag.

And SCORM is not actually a format that you convert to. It's a set of technical standards or especifications commonly used in e-learning trainings, facilitating/handling/standardizing communication between LMS and content.

Regards,
JC

[BioME]

Thanks for the advice JoãoCésar, I just Googled descriptions of the iframe tag. It looks promising, but I’m not a programmer and I would have to do a great deal of research to learn how to implement it. Before I commit that much time I want to see if you can confirm that it will do what I need. One of the descriptions I found on the web described inserting code into the DOM that’s over the Abobe Animate HTML file. Is that correct? If I do that will it produce a file that can be embedding into an LMS program like ScholarRx or Canvas. As I just wrote to Mario_CR, I realize you may not be familiar with ScholaRx or Canvas and so won't be able to answer this question. If so I will consult with the expert at my school. I just wanted to check with you first. Thanks again for your advice, BioME.

[JoãoCésar]

Alright. Good to hear.

So Animate will genereate at least a .html and .js file for you. For example: index.html and index.js. Then you just need to go to the platform's HTML and add a tag like this:


And that's it. Your content should work out the box. You may need to apply some CSS to make it look better, but nothing too crazy.

As you said, I'm not familiar with those platforms, but if they support third party content, they should allow the usage of iframes. That's the standard for presenting content between different platforms in the web.

References:

https://support.google.com/youtube/answer/171780?hl=en

https://discord.com/build/embedded-app-sdk

[JoãoCésar]

Another reference:

https://github.com/joao-cesar/adobe/tree/master/animate%20cc/html5_canvas/iframes_as_popups