chofer@morainepark.edu

Embedding Flash (SWF) Animations in Canvas

Blog Post created by chofer@morainepark.edu Champion on Apr 21, 2015

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>

Outcomes