Update 10/2011: The Planets example has been updated (almost completely rewritten) and no longer strictly adheres to the steps and screenshots in this tutorial. The general concepts are the same, but the project files have been substantially refined. To prevent confusion about which files to use, I have removed the original project files and replaced them with the updated version. Sorry for any inconvenience, and you’re welcome!
Here’s a quick tutorial for adding basic SCORM functionality to an existing Flash file. This tutorial aims to demonstrate just how easy it can be to add SCORM functionality to an existing Flash movie.
In this tutorial, we’re going to keep things very simple; our SCORM code will only check the LMS for a prior completion, and if no completion is found, will set the course to complete at the appropriate point in the movie.
Important note: This tutorial uses ActionScript 3 and SCORM 1.2, but the same principles apply for ActionScript 2 and SCORM 2004
- Add the SCORM wrapper to the head of the HTML file
- Import the SCORM class into the Flash file
- Add some variables and create a SCORM instance
- Initialize the SCORM connection and check for prior course completion
- Add the SCORM completion code
- Publish the FLA
- Modify the manifest
Open the index.html file in your HTML editor of choice. Note that we’re NOT using the standard HTML file produced by Flash’s publishing feature. It’s my opinion that the HTML produced by Flash is ugly, bloated, and doesn’t support standards well enough. We’ll roll our own using stripped-down markup, external CSS file for simple styling, and SWFObject for embedding (feel free to use another embedding method if you prefer).
Once you’ve opened the HTML file, add a link to the SCORM wrapper script in the document’s
Your HTML file should look something like this:
Update: This screenshot is slightly out-of-date; the SCORM wrapper file no longer includes the version number in the filename, and should just be SCORM_API_wrapper.js
Believe it or not, that’s the only change that needs to be made to the HTML file! Save and close the file.
Open the planets.fla file in Flash. Add the SCORM class to the Flash file using an
import statement in Frame 1’s frame script:
import fl.controls.Button; import flash.events.MouseEvent; import com.pipwerks.SCORM;Code language: CSS (css)
The file should look something like this:
Update: The latest version of the SCORM Wrapper for ActionScript uses a slightly different path than the one in the screenshot:
com.pipwerks.SCORM instead of
This is a good time to test the FLA to ensure you have the correct file path for the SCORM class (it should be in a folder named com, which is inside a folder named pipwerks; this pipwerks folder should be located in the same folder as the FLA file). To test the FLA, go to Control > Test Movie. If the movie plays without errors, your file paths are ok.
Declare the following variables in the first frame of your Flash file, after the
Next, you’ll need to create a new SCORM instance using the pipwerks.SCORM class. You can create a new SCORM object using the following code:
Update: The FLA’s ActionScript has been rewritten and has a slightly different structure than the code presented in the rest of this post, but the same principles apply.
scorm.connect() call, which returns a boolean indicating whether it succeeded or not.
If the connection was successful,
lmsConnected will evaluate to
true. That means we can start requesting data from the LMS. Start by requesting the current completion status.
A few things to note: If the course status is “completed” or “passed”, we won’t need to keep the LMS connection active — we need to be careful not to overwrite the previous completion by accident. So, if the course has already been completed, we’ll just disconnect and call it a day.
If the completion status isn’t “completed” or “passed”, we’ll need to explicitly set the course to “incomplete”.
Find the appropriate place in your movie to call the completion code. In this example, we’ll call the completion code when all four planets have been visited. There is already a ‘check’ for this condition in the function
resetPlanets, so we can just add the code there.
Publish the FLA. Be sure to turn OFF the “HTML” option since we’re using our own HTML file. You should also ensure the target Flash version is Flash 9, since the “Planets” movie uses ActionScript 3 and a few filters that are only supported by Flash 9+.
Save and close the FLA.
All SCORM-based courses require a manifest file (imsmanifest.xml) that contains important metadata about the course. For our example, we’ll simply grab an existing imsmanifest.xml file and update it to match our course.
- Open the imsmanifest.xml file
- Change the identifier attribute of the manifest element (at the top of the file) to something suitable for this course (no spaces):
- Find the
organizationchild element) starting at line 15. Change the “default” and “identifier” attributes to something suitable for your organization. I’ll use “pipwerks”. Be sure to avoid spaces and illegal characters, such as punctuation (other than the underscore _)
- Find the two
titleelements, starting at line 17. Change both of them to something suitable for your course. For this example, I’ll change them both to “Planets!”
- You’ll need to list the files used by this course in the
resourcenode. For this example, we need to make sure “href” is set to “index.html”, then we need to list the other files using
<resource identifier="SCO_Resource_01" type="webcontent" adlcp:scormtype="sco" href="index.html"> <file href="index.html"/> <file href="planets.swf"/> <file href="SCORM_API_wrapper.js"/> <file href="swfobject.js"/> </resource>
- Save and close the imsmanifest file
That’s all there is to it! As you can see, adding simple SCORM code is much easier than many people realize. It may seem daunting at first, but in reality all we’ve done here is:
- Added a few variables and functions to the ActionScript
- Edited a few IDs and file links in the imsmanifest.xml file
In my opinion, SCORM only becomes difficult if you try and use it to handle a course’s sequencing and navigation, which even SCORM experts are hesitant to do (it’s considered a “broken” feature by many key figures in the industry).
The bottom line is that if your existing FLA is self-sufficient before SCORM comes into the picture — it’s already set up to handle its own navigation internally via ActionScript and already has a mechanism for determining whether the user has ‘finished’ the movie, be it completing an activity or simply reaching the last frame of the SWF — SCORM becomes more of drop-in item, almost an afterthought. It doesn’t need to be a nightmare that scares developers away.
It’s my hope that my SCORM wrapper and ActionScript classes encourage more people to embrace SCORM as a simple, easy way to ensure their course(s) use standards and work in almost any LMS.