Embedding Flash (SWF) Animations in Canvas

[Chris_Hofer]

UPDATED ON 6/9/2015 DUE TO BETTER FILE BROWSING TURNED ON FOR ALL CANVAS USERS AS OF 6/6/2015.

In order to embed a Flash file (*.swf) in a Canvas course, you'll need to paste the following line of code into the WYSIWYG editor (the HTML side) of a Canvas course page and change some of the values based on the steps below.

<p><iframe src="/courses/[COURSEID]/files/[FILEID]/preview" width="###" height="###"></iframe></p>

1. Upload the Flash (*.swf) file to the root folder of Files in your Canvas course.
2. After the file has been uploaded, hover your mouse over the file name, and take note of file ID number in the URL (see example screen shot).
3. In the iframe code, replace [COURSEID] with the Course ID from your own course.  (Example: http://SomeSchoolName.instructure.com/courses/12345)
4. In the iframe code, replace [FILEID] with the number listed in the URL of the Flash (*.swf) file (from Step 2).  In this case, the economicsBanner2.swf file has the following value: [FILEID] = 516713.
5. Change the width and height of your Flash movie to match the dimensions of your Flash file.

The resulting code would look similar to this:

<p><iframe src="/courses/12345/files/516713/preview" width="600" height="300"></iframe></p>

[u0291895]

Here's a cool tool for iFraming. It's easy for those who are new to using code to use too.

Online iFrame Generator - iFrames Generator

[G_Petruzella]

 @Chris_Hofer , thanks for this! Would it make sense to tag this contribution with 'code-snippets' also? 🙂

[Chris_Hofer]

Done!  Thanks  @G_Petruzella ​!

[Ron_Bowman]

 @Chris_Hofer ​-

Thanks for a great short code snippet.  Now if I had some swf files that I wanted to add to my course I would be all set.

Ron

[Chris_Hofer]

You're welcome!  I just needed to update these directions because of the recent change to the "Files" area of Canvas.

[mike4017]

This is great.....one question....any way to modify this in order to be able to upload several .swf files to a folder rather than all in the root?  

[Chris_Hofer]

mike4017​...

There shouldn't be a lot of changes to what I've already provided.  All you would do is create a folder in your "Files" area of the course, and then you'd upload your *.swf files to that folder.  The process for finding the FILEID and COURSEID numbers is the same.  I just tried this in my sandbox course to confirm.

[mike4017]

thanks, Chris -- i guess i was just reverting back to the old days with the required "root" location of some files......   File numbers are, indeed independent of folder location....

[scott]

I put the code in listed above, but everytime I save the page, canvas automatically adds the code:

data-api-endpoint="https://schoolname.instructure.com/api/v1/courses/1234/files/56789" data-api-returntype="File">

after the code I have pasted from above.  When I save there is nothing there to click on. When I go back to edit, there is the gray box that indicates that something should be there.

Not sure what is going on.

[Chris_Hofer]

Hi  @scott ​...

Yes, it's true that Canvas will add some extra code after you save the page...specifically that "data-api" stuff.  Honestly, I'm not sure why it adds that or what it's for.  To be sure, you are pasting in this line of code to the HTML editor of you Canvas page and then changing the Course ID and File ID numbers (in bold) to reflect your own course and file, correct?

     <p><iframe src="/courses/12345/files/516713/preview" width="600" height="300"></iframe></p>

[scott]

Yes I put in the course ID the file ID and the “FileName”

[Chris_Hofer]

That might be the issue.  The only things you'll need to change in the sample code I provided above are numbers.  You won't actually be specifying a file name in that code...because the File ID number is a reference to the file name.  So, using the code I've got above, change only the Course ID number, the File ID number, and then the width and height of your Flash file (those values are in pixels, by the way).

[scott]

Ok made just those changes and I get a  embeded message "page not found" Getting farther tho!

[Chris_Hofer]

Can you paste in the line of code you are putting into the HTML editor of your Canvas page?

[scott]

I put this in:

<p><iframe src="/courses/3149/files/845820/preview" width="400" height="300"></iframe></p>

I get a blank screen when I save it, but when I got back into edit, I get a gray box, and the system gives me:

<p><iframe src="/courses/3149/files/845820/preview" width="400" height="300" data-api-endpoint="https://k-state.instructure.com/api/v1/courses/3149/files/845820" data-api-returntype="File"></iframe></p>

If I put [ ] around the numbers (courseID and fileID) I get:

[Chris_Hofer]

You definitely don't want to use the brackets around the numbers, so your line of code you've shared does look correct from what I can tell.  Is your Flash player (plug-in) version up-to-date?  That may be one of the issues why a Flash file might get a blank screen in your course.  Also, what browser are you using?  Have you tried either Mozilla Firefox or Google Chrome?

[scott]

Ahh it does work great in Chrome.  I was using firefox.  The flash player is up to date in Firefox.  So now I know where the problem is.  Thanks so much for all of your help.

[Chris_Hofer]

Cool!  My Flash file works in Firefox, so I'm not sure what is different about your browser compared to mine.  Glad you got it working in Chrome, though.

[ezaurova]

Thanks for the snippet.  The only issue for me is the lack of player controls and also that the size has to be manually set.  Do you have any workarounds to this?

[Chris_Hofer]

lack of player controls

This may be because of an outdated Flash Player plug-in on your computer.  Have you checked to make sure that your Flash Player is up-to-date?  Here is a link: Adobe Flash Player Install for all versions

The other thing you might try is using a different browser.  Have you tried Google Chrome or Mozilla Firefox vs. Internet Explorer?

the size has to be manually set

Unfortunately, I don't have any workarounds for this.  You need to include the width and height (in pixels) in the code snippet I've shared above.  If you leave the width and height out so the code looks like this:

<p><iframe src="/courses/[COURSEID]/files/[FILEID]/preview"></iframe></p>

...Canvas will make the size of your Flash movie 300 x 150 (I'm not sure if those numbers are for all Flash files no matter what the actual dimensions are of your Flash movie...or if it's just reducing the size of my example by half).

[ezaurova]

Thanks, Chris.  I was originally trying this in Firefox, but tried again now on Chrome too, with no change.  Both browsers are using updated versions of Flash.  I haven't tried IE, but would rather not since even if it worked there, I don't think it's a common browswer anymore.  I emailed the tech team for instructure and their only recommendation was converting the swf file to mp4 and uploading it via their media upload tool.  Anyway, I've found a workaround for me right now that I'm comfortable using, and hoping they include this functionality in a future update.

[bgrow_sales]

So Chris Hofer I just followed your instructions. But when I push play on the video the video box disappears and I am only left with audio. I tried playback on Chrome and Safari. Any ideas of what I have done?

[Chris_Hofer]

Hi  @bgrow_sales ​...

Hmmm...I am not sure.  I just tested this in my own sandbox course with a Flash animation (with a short video clip inside it) that I had made several years ago, and it worked perfectly.  I was using Firefox 43.0.4 and have Adobe Flash Player version 20 installed on my PC here at work.  Do you need to upgrade your Flash Player, by chance?

[bgrow_sales]

Thanks! Rookie mistake.

On Thursday, January 28, 2016, chofer@morainepark.edu <

[jmunoz1]

Hi Chris!

We've worked on this but when we try it on mobiles and tablets, it doesn't work. Any tips on that?

Also, have you worked something similar with HTML5 animation? We would like to create our course banners (which are usually just a jpeg) with some sort of animation integrated.

Any thoughts are welcome! Thanks!

[Chris_Hofer]

I can only speak for iOS (iPad, iPhone, etc.) because I've not used Android tablets/phones that much.  You're going to run into issues viewing Flash content on iOS devices.  That's been an issue for quite a while now.

As for HTML5, I don't have much experience with that, so I'm not sure if it would work on a mobile device.  Someone with more knowledge on this might be able to help you.

[jmunoz1]

Thanks!

[jordan]

 @Chris_Hofer ​ et el,

This is a fantastic blog post and discussion! I have a little bit of a different scenario where I'd like to embed a flash webpage (external site) within an iframe on a page.  Here's an example - http://www.starfall.com/n/level-k/letter-a/load.htm?

Can anyone give me some advice on how to embed that url in an iframe, on a Canvas Page?

[ajohnson]

The code we use is <p style="text-align: center;"><iframe src="[URL].html" width="380" height="265"></iframe></p> This is to embed a video, hence the fairly small width/height, but that of course should be whatever you need for the flash item.

AnnMarie

[lauramaewojo]

Deactivated user​ last summer one of the trainers I worked with came up with an alternate way to embed a flash page.  You can see if these directions work.

[jordan]

Thanks for the quick reply AnnMarie! Unfortunately it did not work for me! I can't figure out why. Can you try to embed the follow and see if it will work for you?

http://www.starfall.com/n/level-k/letter-a/load.htm?f

[jordan]

That is a fantastic idea Laura, but in this case I don't own the content so I don't think it would be appropriate for me to download off their servers and put it in my course

[ajohnson]

Nope, didn't work for me either. I also tried it as a link. There is didn't display either, possibly because it's http rather than https. However, it did work as a URL if opened in a new tab.