On Converting Flash to HTML

I received a question from Bob (no, really), who wrote:

I have a question about the newest version of Flash and its HTML publishing option using CreateJS. What do you think of that approach going forward?

I started to write an email response but figured I should probably post it here.

I haven’t been paying much attention to Flash, so I don’t know what the ‘HTML export’ is capable of these days. In general, I’m very wary of converting Flash-based projects to HTML. When Adobe Captivate first released a “publish to HTML5” feature, all it did was convert the SWF animation to a video file, losing all interactivity along the way.

The limitations of the browsers and the HTML5 spec mean you can’t expect a fully 1:1 conversion from Flash to HTML, regardless of libraries like CreateJS. Some of the features found in Flash are still not quite supported in browsers, or might not work quite the way you’d expect. For example, CSS transitions, CSS gradients, and SVG/Canvas support vary widely from browser to browser (though it’s getting better, and there are workarounds aka “polyfills”). Streaming video, which is a breeze in Flash, is not part of the HTML5 Video spec (yet) and is unsupported in browsers. Video and audio codec support is inconsistent. In some cases, devices add new limitations — last time I checked, iOS devices wouldn’t autoplay audio or video in Safari. ‘Play’ couldn’t be scripted, it required the user to press a button.

Publishing to HTML (with the aid of JavaScript libraries like CreateJS) is definitely the way of the future, but I would flip the workflow: use a tool that’s “HTML first”. For my workflow, I always start in HTML then only fall back to Flash if I absolutely have to. I hand-code, but if you want to stick to a WYSIWYG editor, maybe try some of the Adobe Edge products, or go with a third-party product such as Tumult Hype.

If you continue to use Flash as an HTML development tool, temper expectations and test widely, as some things might not work the way you expect when converted to HTML.

And regardless of whether you publish to Flash or HTML, always test the accessibility of your project. Just because it’s HTML doesn’t mean it’s accessible; HTML by nature is more accessible than Flash, but libraries like CreateJS add a lot of complexity to the page, which can easily impact accessibility.

Advertisements

Flash support is increasingly a minefield

Back in 2011, I mentioned that Microsoft was about to halt development of the Silverlight plugin, that Flash mobile was being discontinued, and that Adobe recommended HTML5 for enterprise RIA development instead of Flex, which was being open-sourced. My post was a little long-winded, but the short version was: whoa, the times-are-a-changin’, it’s getting dangerous to rely on browser plugins.

Over the last year, the situation has evolved in an interesting way — browser support for plugins (especially Flash Player) has been considerably restricted by browser vendors due to repeated security vulnerabilities in Flash Player and Java.

Automatically disabling Flash Player

In May 2012, Apple’s Safari browser began automatically disabling outdated versions of Flash Player: “Out-of-date versions of Adobe Flash Player do not include the latest security updates and will be disabled to help keep your Mac secure.” If a webpage contains a SWF but the installed edition of Flash Player is deemed out of date, Safari will display a “blocked plugin” message and inform the user they need to download the latest edition of Flash Player at adobe.com. This change came with Adobe’s blessing.

In January 2013, Mozilla introduced a global “click to play” mechanism that disables ALL plugins in Firefox by default, except the latest edition of Flash Player:  “Our plan is to enable Click to Play for all versions of all plugins except the current version of Flash.”

To Adobe’s credit, Flash Player updates are being released at a fast clip to address known security vulnerabilities. Unfortunately, this has a nasty side effect: you’re very likely to have an outdated edition of Flash Player when you try to view Flash content on a website. (By my unofficial count, there have been at least 13 updates over the past calendar year, averaging about once a month.)

At a recent job, I managed a small network of Macs in classrooms. The Macs were set up to use Adobe’s ‘automatic updates’ feature for Flash Player, but they never seemed to update fast enough — we received numerous complaints from classroom users who couldn’t view Flash content because Safari blocked it.

Internet Explorer’s on-again, off-again relationship with Flash Player

I previously mentioned that Microsoft’s Windows 8 ‘Metro’ mode disabled all plugins, including Flash Player; Microsoft said Internet Explorer in Windows 8 Metro mode “provides an add-on–free experience, so browser plugins don’t load and dependent content isn’t displayed“.

In May 2012 Microsoft changed their minds and enabled Flash in Metro mode. BUT… Microsoft will ship Flash Player as a component of IE 10 (much like Google Chrome does), and will restrict which sites are allowed to run Flash! “While any site can play Flash content in IE10 on the Windows desktop, only sites that are on the Compatibility View (CV) list can play Flash content within Metro style IE.”

In other words, if you don’t have Microsoft’s blessing, your Flash site will not work when viewed in Metro mode.

Update: @chris_sage pointed me to a post by Microsoft written just three days ago where they apparently changed their minds again — almost a year after saying they’d require a whitelist, they now say they support Flash Player by default in Metro mode without requiring sites to be whitelisted.

What it boils down to…

If you develop Flash-based content, it will be more and more of a challenge to provide a smooth, problem-free user experience. For e-learning developers, one of the original lures of Flash was the ubiquity of Flash Player; Flash made it easy to provide the same e-learning experience across browsers and platforms. Due to fragmentation in Flash support, this no longer appears possible.

  • Adobe says: No Flash Player for mobile devices.
  • Microsoft says: No Flash Player on Surface tablets (or other Windows 8/RT tablets) unless the user switches to desktop mode OR gets on our whitelist for Metro mode. We love us some Flash! But we’ll manage the security updates ourselves, thank-you.
  • Mozilla says: Only the latest edition of Flash Player for Firefox.
  • Apple says: No Flash Player on Apple iOS devices, and only the latest edition of Flash Player for desktop Safari.
  • Opera says: Flash Player on desktop editions of Opera? No problem. Flash Player in Opera Mobile? Don’t get mad at us, Adobe stopped providing Flash Player for mobile devices!
  • Google says: We control Flash Player for Chrome (desktop) ourselves. No worries. Flash Player in Chrome on mobile devices? Don’t get mad at us, Adobe stopped providing Flash Player for mobile devices!

The browser vendors are enforcing their will. You don’t have to be a Flash-hater to see that building Flash-dependent sites is a minefield.

For those of you in e-learning who depend almost completely on Flash-based courseware, it’s a good idea to start looking for alternatives.

 

 

Introducing SWFRightClick

Adobe Captivate currently ships with a 3rd-party JavaScript utility named RightClick.js, which enables the Captivate SWF to detect when a user right-clicks the SWF. While upgrading the Captivate publishing templates, I realized RightClick.js wasn’t built to work with SWFObject 2.x and suffered from a few shortcomings. I modified the Captivate template’s SWFObject code to get around the issue, but marked it down as something to revisit when I have the time.

Now, I’m happy to report I’ve created a replacement for the RightClick.js utility, creatively named SWFRightClick. It uses the same approach to handling right-clicks, but does it with a completely new codebase and a few extra goodies. SWFRightClick is compatible with every edition of SWFObject, and is free to use (MIT license).

Check it out on GitHub. I plan to fold it in to my Captivate publishing templates very soon.

HTML5, Flash, Silverlight, and your courseware

What a busy week.

Flash is dead. Sort of, but not really.

In case you haven’t heard, Adobe formally announced the discontinuation of Flash Player for mobile devices (“Flash to Focus on PC Browsing and Mobile Apps; Adobe to More Aggressively Contribute to HTML5“). Adobe employees struggled to come to grips with what has undoubtedly been a tough week for them — aside from the product news, they were also informed of massive layoffs (around Adobe 750 employees). Regardless of your feelings about Flash, your heart must go out to the families affected by a sudden job loss.

Flash critics were quick to declare Flash dead. But in the immortal words of Monty Python’s Eric Idle, “I’m not quite dead yet.”

Yes, Adobe is scaling back on Flash to focus more energy on so-called HTML5 technologies (“so-called” because many of the technologies involved are not actually part of the HTML5 spec.) However, their public announcement was that mobile Flash is dead, and Flash on the desktop will continue to thrive.

Flex is being abandoned

Then the “Official Flex Team Blog” dropped a bombshell: Adobe Flex is going open-source:

Yes. We know Flex provides a unique set of benefits for enterprise application developers. We also know that the technology landscape for application development is rapidly changing and our customers want more direct control over the underlying technologies they use. Given this, we are planning to contribute the Flex SDK to an open source foundation in the same way we contributed PhoneGap to the Apache Foundation when we acquired Nitobi.

Okay. Flex is being open-sourced. To be honest, this isn’t really shocking news to me since Flex has mingled with Eclipse for a long time and has had its toes in open source for ages. The part that made my jaw drop was in the next section:

Does Adobe recommend we use Flex or HTML5 for our enterprise application development?
In the long-term, we believe HTML5 will be the best technology for enterprise application development. We also know that, currently, Flex has clear benefits for large-scale client projects typically associated with desktop application profiles.

Given our experiences innovating on Flex, we are extremely well positioned to positively contribute to the advancement of HTML5 development, starting with mobile applications. In fact, many of the engineers and product managers who worked on Flex SDK will be moving to work on our HTML efforts. We will continue making significant contributions to open web technologies like WebKit & jQuery, advance the development of PhoneGap and create new tools that solve the challenges developers face when building applications with HTML5.

In the long-term, we believe HTML5 will be the best technology for enterprise application development. For those of you unfamiliar with Flex, it’s Adobe’s ‘enterprise-level’ Flash development path. Designers use Flash Professional and the timeline, while programmers use Flex and its pure ActionScript/MXML environment. This line is basically saying “see ya, Flex, was nice knowing you. We’re putting our best guys — the ones who weren’t laid off — on the ‘HTML5’ train.”

By extension, if Adobe is wiping its hands of Flex, it means they’re seriously scaling back support for the entire Flash ecosystem.

Whoa. The anti-Flash crowd really does have reason to celebrate. But not so quick, my friends: Support for the HTML5 environment is nowhere near Flash’s level of ubiquity, it will take a couple of years to get there, and even then, I doubt it will have the full capabilities Flash offers today.

But does it matter? Let me come back to that in a minute.

Silverlight is dead. Sort of, but not really

For now, lets turn our attention to our friends in Redmond, WA. While Adobe created this week’s loudest thunder, Microsoft made a few waves itself. If you recall, about a year ago one of Microsoft’s presidents (yes, they have more than one) caused a stir when he said “HTML is the only true cross platform solution for everything, including (Apple’s) iOS platform”. Microsoft quickly issued a statement backtracking from the implication that Silverlight was on its way out, and stressed their commitment to Silverlight.

A year later, the circus is back in town. According to some industry sources, Microsoft is planning to stop development of future editions of Silverlight; version 5 may be the last hurrah, except for security updates. Stop me if this sounds familiar.

However, this time around, the rumor sounds much more feasible because of Internet Explorer 10.

Microsoft’s Internet Explorer, that grand ol’ browser, is going through a major metamorphosis. In general, Internet Explorer 10 will behave less like its ancestors and more like Firefox and Webkit (Safari/Chrome). For example, IE 10 will not support Microsoft’s long-standing conditional comments. This is a big deal for web developers, as conditional comments have become a major crutch when dealing with Internet Explorer. But the biggest news I’ve heard about IE 10 thus far is that it will not support plugins — Flash, Silverlight, Quicktime, etc. — when running in “Metro” mode. Microsoft’s Windows 8 team believes that removing plugins from IE will result in improvements across-the-board: security, reliability, privacy, battery life in mobile devices, etc.

For the web to move forward and for consumers to get the most out of touch-first browsing, the Metro style browser in Windows 8 is as HTML5-only as possible, and plug-in free. The experience that plug-ins provide today is not a good match with Metro style browsing and the modern HTML5 web.

Running Metro style IE plug-in free improves battery life as well as security, reliability, and privacy for consumers. Plug-ins were important early on in the web’s history. But the web has come a long way since then with HTML5. Providing compatibility with legacy plug-in technologies would detract from, rather than improve, the consumer experience of browsing in the Metro style UI.

Plugins will still be supported in the non-Metro environment, but it appears Microsoft’s way of the future is Metro, and Metro is HTML5-based, with no plugins allowed, just like Apple iOS. Microsoft is clearly serious about leaving plugins behind, including its own Silverlight Player.

The analysis

Flash and Silverlight are not dead, but are being minimized by their owners. If you read the articles closely, you’ll see a pattern: both Adobe and Microsoft hope to port some of the technology from their plugins to the open web, aka the “HTML5 ecosystem”.

As it currently stands, browser technology and HTML5 ubiquity will take a number of years to catch up to the baseline capabilities of Flash and Silverlight. Even then, I doubt browsers will have some of the advanced capabilities Flash offers today.

The thing is, I don’t think most Flash developers take full advantage of Flash’s capabilities; they seem to use the same basics they’ve been using for years. The cutting-edge stuff is nowhere near as common as the mundane: video players, slideshows, and simple games.

Today’s editions of Firefox, Chrome, Safari, and even Internet Explorer 9 are massively capable browsers. JavaScript, canvas, and CSS3 can be used to replicate many of Flash’s features. The real question becomes: what are you trying to do?

Video

The vast majority of Flash usage appears to be for serving streaming video. HTML5’s video support is not quite ready to replace Flash in this regard, but it’s getting pretty close. The codec wars are the biggest stumbling block, followed by support for DRM and perhaps a handful of advanced features. If you have a simple video that doesn’t need DRM and can be served via two codecs (H264 and OGG or WebM), you can proceed directly to Go, collect $200.

Need to add some interactivity to your movie? Canvas and JavaScript can do an awful lot. Projects like WebGL and Mozilla’s popcorn.js are upping the ante. The future looks pretty bright for native online video.

Gaming

Flash-based gaming is another strong user base. My kids have been using NeoPets and similar sites for years, so I understand just how far and deep Flash gaming goes in our community. But some of these games are deceptively simple with their graphics, and I wouldn’t be surprised if Adobe’s HTML5 tools soon enable Flash game developers to port their games to the HTML5 ecosystem.

Apple’s iOS and Facebook have created big-money opportunities for game developers willing to switch gears to HTML5. We’ve already seen JavaScript/HTML ports of Nintendo games, including the best video game ever made: Super Mario Brothers. They work. They’re fun. Yes, it will take a long time to get market saturation, but HTML5 already has its foot in the door and a lot of money behind it — gaming is big business!

E-Learning

If you’re reading this blog, chances are good that you’re an e-learning developer. You probably also know that most major e-learning rapid development software outputs Flash SWFs. I can’t think of any industry aside from online gaming that is so utterly dependent on Flash at the moment. This has worried me for years — I’ve long preached that e-learning developers should be less reliant on Flash.

When Apple’s iPad was released without Flash support, the outcry from the e-learning industry was fierce. I also feel it was misplaced — it clearly showed the industry’s reliance on a plugin, and rather than focus on removing the Flash requirement barrier, many people chose to plant their feet in the ground and buy non-Apple devices as a form of protest. Some vendors, to their credit, modified their products (Raptivity, Lectora, Rapid Intake, etc.) to take steps away from plugin requirements and towards modern HTML5 experiences. (I admit I haven’t tried the HTML5 editions of these products yet, so I can’t speak to their quality.)

Don’t get me wrong, I’m not anti-Flash — anyone who follows this blog knows that I work with ActionScript and am a member of the SWFObject project team — I just think browsers plugins should be used sparingly, with decent fallbacks in place for people who don’t have Flash, such as video transcripts for people who can’t see the video.

My personal development approach has been to develop the course interface and base pages in HTML/JavaScript, and only use Flash when necessary, such as when playing a video or providing a software simulation experience. Now that native video playback is possible in modern browsers, it’s easy to go back and retrofit courses to use HTML5 video. Same goes for audio if you like to have narration in your course. Some situations, such as software simulations, are much trickier, but this is where we rely on tool vendors to improve their tools. For example, Adobe is working on enabling Captivate to output to HTML5 (it currently only outputs a non-interactive video version of the SWF).

Quizzes, fun interactions, and elegant slideshows are all possible with JavaScript today, even in lowly Internet Explorer 6. I have no idea why a simple course system like Articulate Presenter doesn’t provide an HTML5 publishing option yet… interactions can be handled via JavaScript. Narration can be handled via HTML5’s audio element. Quizzes can be handled by JavaScript (though I admit the security is not as strong when you can’t obfuscate answers via a SWF). Even Captivate should be farther along than it is, but at least they’re making progress.

Hopefully this week’s news about Adobe and Microsoft shifting gears away from plugins will help the more hard-headed among us in the e-learning industry to take a more active role in moving away from Flash and towards a true native web experience.

Dear Apple and Adobe

 

Update: Steve Jobs Responds! Well, not to my letter directly, but it hits on the major points and is a well-written explanation of Apple’s position.

Dear Apple and Adobe

I’m a long-time customer and have spent more money on your products than I have on just about any other aspect of my life. I’ve spent more money on your products than I’ve spent on my healthcare, vacations, kitchen appliances, children’s school supplies, or home entertainment system.

In return, you’ve increasingly shown a disregard for my needs and concerns, and have acted in ways that demonstrate all you want from me is my money.

For example, both of you have constantly forced me (or at a minimum pressured me) to buy updates to products I already paid for. For years I went along with it because I bought into the sales hype and assumed these updates would somehow make my life better.  In most cases, they did not.

Adobe, your constant tinkering with the Creative Suite has brought a few nifty tools to the world, but these new tools will not get me to overlook the incredible bloat you’ve unleashed on my computers — almost 6GB of program files on my Windows PC at work, and over 7GB of app files on my Mac at home. Your applications feel more unstable with every release, and your UI feels slow and unresponsive despite the extra RAM and other hardware upgrades on my machines. Some of the biggest security holes on my computers are due to your Acrobat software — the very same Acrobat software I’ve learned to hate because of how bloated, complicated, and unfriendly it has become. It feels like it gets worse with each release.

Apple, your innovation is refreshing. Adobe could learn a thing or two by examining your software: increased productivity through reduced feature sets and cleaner UI. Simple is usually best. However, despite your continued excellence in design, your behavior is repulsive. You’ve consistently screwed your early adoptors via your pricing schemes and forced millions of Americans to use a phone network they detest. (Why? Because AT&T was willing to give you a bigger cut of the revenue?) Worst of all, the totalitarianism displayed in your latest iPhone developer agreement is breathtaking. It appears your goal is to piss off everyone, even your staunchest allies… like Adobe.

Apple and Adobe, you used to play well together. You both benefited from your long-term relationship and grew into very large, very successful companies. I sincerely doubt either of you would have survived the 1990s intact if it weren’t for your partnership. Desktop publishing was the Mac’s forte and the one thing that kept it afloat when the buzzards were circling. And who provided the most popular DTP software? Adobe (and the companies Adobe acquired, like Aldus and Macromedia).

Adobe, I know you’re mad because Apple won’t let you put your Flash technology on the new iPhone platform (iPhone, iPod, iPad). Honestly, if I were controlling a platform, I would have major concerns, too. As I mentioned earlier, your track record for software quality seems to be in a steady decline. Your products have become infamous for security holes, bloat, and crashing. It didn’t used to be that way. Somewhere along the line you dropped the ball, and now it’s coming back to bite you. The good news is that it isn’t too late for you to reign things in and regain control of your software. Stop trying to please everyone by adding every conceivable feature under the sun, and really focus on the most important elements. Drop the cruft. Clean the cupboards. Get that lint out of your bellybutton. Once your software is respectable again, you’ll be in a much stronger position to complain about Apple.

Apple, I don’t know what happened to you. You went from being a popular underdog to being the class bully. You’re in danger of becoming as popular as Microsoft in the European court system. From where I sit, your biggest mistake has been the idea that you can take over the world, one industry at a time. Of course, many companies are aggressive and set big goals for themselves, but they don’t stab their partners in the back as quickly and viciously as you seem to do. Your hubris and eagerness to expand into your partners’ markets is going to be your downfall. People have liked you because of your design sensibilities and because you were the hip underdog. You are no longer the hip underdog, and with time, other companies will create products that will be (almost) as stylish but also cheaper and with equivalent or greater capabilities.

The bottom line is that neither of you are choir boys, and I’m fed up with your bickering.

Adobe, stop playing the sympathy card. It’s a complete turn-off because I know how crappy your software can be. Granted, it’s unfortunate that so many people depend on Flash and Flash doesn’t work on the iPhone platform, but Flash is not a web standard. For all its shortcomings, the iPhone platform has one excellent quality: a top-notch HTML5 browser. Standardistas have been warning people not to go all-in with Flash for years, and now we see why. If it isn’t part of a standard, it will not be incorporated into some products. It’s the vendor’s choice. Simple as that.

Apple, stop trying to take over the world. We’ve seen what happens to other companies who try it, and it never looks pretty. Focus on your core values and let your partners do their thing without stepping on their toes.

Oh, and ditch AT&T already, will ya?

Respectfully,

Philip

What feature is missing from your e-learning development tool?

I have some simple questions I’d love to get feedback on.

I’m curious about what people are looking for in their e-learning authoring tools, specifically:

  1. What feature is your current tool missing that you would love to see implemented? Support for team collaboration? Support for themes or custom CSS styling? Support for language localization? A beer dispenser? Etc.
  2. What feature does someone else’s tool have that you’re jealous of?

For me? I wish the most popular tools (Captivate, Articulate, Lectora, etc.) would output cleaner HTML and JavaScript. I also wish there was less reliance on Flash and PowerPoint. But if you read my blog regularly, you probably already knew that!

Please post your opinion in the comments below, and please ask others to give their 2 cents. (You can also reply via twitter if you prefer)

I’m really looking forward to your comments. Thanks!

ECMAScript vs JavaScript vs ActionScript: Do you know the difference?

If you’re trying to use SCORM in your e-learning, you’ve undoubtedly heard of JavaScript and ActionScript. But do you know the different between ECMAScript, JavaScript, and ActionScript?

Alex Russell has provided definitions for many of the ECMAScript-related names you might be reading about these days, including ECMAScript (3, 3.1, 4), ActionScript 3, Harmony, and JavaScript 2.

Very helpful!

Via Ajaxian.

Choosing a specific technology for your e-learning courseware

This question came in via email. I figured I would post it (keeping the author anonymous) because these are very common questions, and maybe this post can help other people out. I also want to give others the opportunity to throw in their 2 cents! 🙂

The question(s):

I am trying to decide among three vendors for an e-learning project. Two of them are advocating using Flash/XML, Javascript, .swf files, etc. One is planning to use Toolbook for the development.

I am trying to decide the advantages of one method (rapid e-learning tool like Toolbook) over the other two (combinations of tools). I have a basic understanding of all of the technology, and I have been trying to research this (this is where I got your site), but I’d really like some non-vendor insight as to the pros and cons of one approach over the other.

This is a standalone e-learning course. It can be run through an LMS system, a web browser or if need be, we could distribute it on CD although we don’t forsee doing that. It needs to be SCORM, AICC, and 508 compliant.

Could you help me out? If you could advise on areas such as ease of translation and skills/tools needed to update later on as well, that would be great.

Choosing a tool/course file format

I don’t have enough time to get into the depths of the issue, but here are my gut reactions:

Toolbook.
Avoid Toolbook! It was a great program for its time, but it doesn’t work in a native Web format; anything created in Toolbook is Windows-only (no Mac compatibility). To create a course that works online — and with Macs — you’ll need to export the project to a Web-friendly format with reduced functionality. That’s a recipe for disaster these days. We bought a copy about a year ago — for ~$2000! — and have never used it because of these issues. Yuck.

Note: if anyone from SumTotal’s Toolbook team is reading this, I’d love to hear your thoughts; is the latest version any better? Is there new functionality I’m not aware of?

Flash/Flex with XML
This is a popular option, especially if you’re concerned about localization (XML files containing one language can be swapped with XML files containing other languages), but Flash is not particularly accessible and could potentially hurt your 508 compliance. Adobe is working on this, but they’re not quite there yet. Flash also has limitations when it comes to handling (and styling) large amounts of text.

Most e-learning vendors’ tools output to Flash SWF format; I think it’s probably for two reasons: Flash gives you a lot of control over the course (including the ability to easily add rich media such as narration or animations) and Flash is an easy way to avoid cross-platform (Windows versus Mac) issues.

(X)HTML with JavaScript
Personally, I lean heavily towards (X)HTML-based courses. HTML courses are much more flexible, accessible, and easy to update than Flash/Flex courses. Thoughts on HTML courseware:

  1. Flexibility: An HTML-based course is basically a web site with some extra JavaScript that can keep tabs on a user’s progress. As with any website, you can import almost any kind of rich media, including Flash animations, Captivate simulations, videos, images, music, quizzes, etc. Localization is a breeze because it’s HTML; by nature it can handle just about any language you throw at it. Wikipedia is a great example (though Wikipedia uses a database and PHP to handle the localization).
  2. Accessibility: HTML is much more accessible than just about any other course format out there (including Flash and Silverlight). Of course, the level of accessibility depends how the course is built; it’s up to your developer to be responsible and avoid pitfalls that can make your course less accessible. Heavy use of mouse events or xmlhttprequest in JavaScript, heavy use of rich media without providing textual equivalents, and bad development practices such as using table-based layouts and deep framesets can render an HTML page pretty inaccessible. If you import Flash SWFs on every page then you’re really no better off than you were if you just went all-Flash to begin with.
  3. Cross-browser/cross-platform: This used to be a huge barrier for web developers. Thankfully, with the emergence of Web standards and JavaScript frameworks over the last few years, things are much easier and more compatible than they used to be. Most of us are just waiting for IE6 to go away! 🙂

Delivery options

A couple of things to understand:

  1. SCORM and AICC are competing standards for course tracking/LMS communication… you don’t usually have a course that conforms to both, it’s one or the other. You can think of it as a choosing a cell phone provider: AT&T and Verizon both do roughly the same job, but with a few different ‘plan’ options. After weighing the differences, you pick the one that suits your needs (and budget). SCORM is newer than AICC and is currently the more widely accepted standard, but AICC still has a loyal following and is a viable option.
  2. SCORM/AICC tracking requires an LMS that supports one of those standards. You can’t use SCORM or AICC tracking from a non-LMS website unless someone has built a ‘lite’ LMS for you that implements a database and the API for SCORM or AICC. Likewise, SCORM/AICC won’t work from a CD-Rom.

If you need the course to be able to work (without tracking) from a website or CD-Rom, be sure to discuss it with the vendor beforehand.

Thoughts?

These were just my gut reactions to the questions. I’m sure a bunch of you have pretty strong feelings on the subject. Care to share?

How to add basic SCORM code to a Flash movie

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.

Here are the work files (ZIP, approx 615KB) if you’d like to add the code yourself while reading the tutorial. The zip file also contains the completed product.

Important note: This tutorial uses ActionScript 3 and SCORM 1.2, but the same principles apply for ActionScript 2 and SCORM 2004

The steps:

  1. Add the SCORM wrapper to the head of the HTML file
  2. Import the SCORM class into the Flash file
  3. Add some variables and create a SCORM instance
  4. Initialize the SCORM connection and check for prior course completion
  5. Add the SCORM completion code
  6. Publish the FLA
  7. Modify the manifest

Step one: Add the SCORM wrapper to the head of the HTML file

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 <head>:

<script type="text/javascript" src="SCORM_API_wrapper.js"></script>

Your HTML file should look something like this:

Add a link to the wrapper JavaScript file in your HTML

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

You may want to specify the targeted SCORM version using JavaScript (this can help avoid problems with some LMSs). To do so, simply add the following line of code to the head of the document after the SCORM_API_wrapper.js link:

<script type="text/javascript">pipwerks.SCORM.version = "1.2";</script>

Believe it or not, that’s the only change that needs to be made to the HTML file! Save and close the file.

Update: The JavaScript in the project files has been expanded to include a few other best practices, including using an onunload handler.

Step two: Import the SCORM class into the Flash 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;

The file should look something like this:

Add the import statement

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 pipwerks.SCORM.

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.

Step three: Add some variables and create a SCORM instance

Declare the following variables in the first frame of your Flash file, after the import statements:

import fl.controls.Button;
import flash.events.MouseEvent;
import com.pipwerks.SCORM;

var lessonStatus:String;
var lmsConnected:Boolean;
var success:Boolean;

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:

import fl.controls.Button;
import flash.events.MouseEvent;
import com.pipwerks.SCORM;

var lessonStatus:String;
var lmsConnected:Boolean;
var success:Boolean;
var scorm:SCORM = new SCORM();

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.

Step four: Initialize the SCORM connection and check for prior course completion

Add a scorm.connect() call, which returns a boolean indicating whether it succeeded or not.

import fl.controls.Button;
import flash.events.MouseEvent;
import pipwerks.SCORM;

var lessonStatus:String;
var lmsConnected:Boolean;
var success:Boolean;
var scorm:SCORM = new SCORM();

lmsConnected = scorm.connect();

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”.

import fl.controls.Button;
import flash.events.MouseEvent;
import pipwerks.SCORM;

var lessonStatus:String;
var lmsConnected:Boolean;
var success:Boolean;
var scorm:SCORM = new SCORM();

lmsConnected = scorm.connect();

if(lmsConnected){

   lessonStatus = scorm.get("cmi.core.lesson_status");

   if(lessonStatus == "completed"){

      //Course has already been completed.
      scorm.disconnect();

   } else {

      //Must tell LMS course has not been completed yet.
      success = scorm.set("cmi.core.lesson_status", "incomplete");

   }

} else {

   trace("Could not connect to LMS.");

}

Step five: Add the SCORM completion code

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.

function resetPlanets():void {

if(visitedMercury && visitedVenus && visitedEarth && visitedMars){

   success = scorm.set("cmi.core.lesson_status", "completed");
   scorm.disconnect();
   lmsConnected = false;

   gotoAndPlay("end");

} else {

[ ... ]

Step six: Publish the FLA

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.

Step seven: Modify the manifest

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.

  1. Open the imsmanifest.xml file
  2. Change the identifier attribute of the manifest element (at the top of the file) to something suitable for this course (no spaces): identifier="MyPlanetsCourse"
  3. Find the organizations element (and organization child 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 _)
  4. Find the two title elements, starting at line 17. Change both of them to something suitable for your course. For this example, I’ll change them both to “Planets!”
  5. You’ll need to list the files used by this course in the resource node. For this example, we need to make sure “href” is set to “index.html”, then we need to list the other files using file elements:
    
    <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>
    
  6. Save and close the imsmanifest file

Wrap-up

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 little JavaScript to the HTML file
  • 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.

Adding SCORM functionality to your existing Flash file

There seems to be a lot of people interested in making their existing Flash movies SCORM-compatible lately; while I know of a few good resources explaining how to use SCORM in a Flash-based e-learning course, I haven’t seen many resources for explaining how to add some simple, bare-bones SCORM code to an existing Flash movie.

What if someone just wants to be able to say “the learner launched the course and watched the whole thing?” In a case like this, SCORM is super-easy to use, especially if you use my SCORM wrapper and ActionScript class (that’s why I wrote them!).

You may be interested to know that I’m currently working on a tutorial explaining how to add the SCORM code. Here’s a teaser: a very simple Flash movie I made using some images from NASA. It’s called PLANETS!


</p> <p>This movie requires Flash Player version 9 or higher.</p> <p>

It’s nothing fancy, just a timeline-based Flash movie with a bit of ActionScript (3.0) for buttons and timeline navigation.

The tutorial will explain how to add the basic SCORM code to the “planets.fla” Flash file and related HTML file, and will also explain how to make very basic edits to an imsmanifest.xml template in preparation for uploading to an LMS.

Hopefully I’ll have time to finish the tutorial this weekend. I’ll keep you posted.

Update: The tutorial is available here