Embedding Flash (SWF) Animations in Canvas

Chris_Hofer
Community Coach
Community Coach
33
22288

FlashFileIDNumber.jpgUPDATED 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>

33 Comments
u0291895
Community Novice

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
Community Champion

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

Chris_Hofer
Community Coach
Community Coach

Done!  Thanks  @G_Petruzella ​!

Ron_Bowman
Community Champion

 @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
Community Coach
Community Coach

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

mike4017
Community Novice

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
Community Coach
Community Coach

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
Community Novice

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
Community Explorer

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
Community Coach
Community Coach

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
Community Explorer

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

Chris_Hofer
Community Coach
Community Coach

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
Community Explorer

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

Chris_Hofer
Community Coach
Community Coach

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

scott
Community Explorer

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:

79014_pastedImage_0.png

Chris_Hofer
Community Coach
Community Coach

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
Community Explorer

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
Community Coach
Community Coach

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
Community Participant

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
Community Coach
Community Coach

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
Community Participant

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
Instructure Alumni
Instructure Alumni

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
Community Coach
Community Coach

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
Instructure Alumni
Instructure Alumni

Thanks! Rookie mistake.

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

jmunoz1
Community Participant

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
Community Coach
Community Coach

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
Community Participant

Thanks!

jordan
Instructure Alumni
Instructure Alumni

 @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
Community Contributor

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
Community Participant

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
Instructure Alumni
Instructure Alumni

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
Instructure Alumni
Instructure Alumni

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 Smiley Sad

ajohnson
Community Contributor

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.