Are Flash and HTML5 locked in a mortal struggle for control of the internet?

Are Flash and HTML5 locked in a mortal struggle for control of the internet?

It’s a loaded question, isn’t it? The kind of attention grabbing headline we’ve come to expect from the mainstream media who receive a substantial portion of the $691,000,000 (2010) of Apple Inc.’s annual marketing budget. So what of this epic struggle between Adobe’s flagship software platform and the open source, open standard HTML5?

Some sobering facts

  • HTML was born* in 1995.
  • Javascript was also born in 1995.
  • CSS was born in 1996.
  • Flash was born in 1997.

* By “born” I mean the first working versions of the respective languages and runtimes were released to the public, i.e. HTML 2.0 and Flash Player 2.0.

So none of them are new and they all get significant new features added to them from time to time. HTML, CSS, Javascript and Flash have co-existed, collaborated and integrated with each other for the past 14 or so years. They’ve done very well together and if we took any one of them away, the WWW would be a poorer place for it. They all have their merits:

  • HTML is open specification and great for flexibility and accessibility. HTML text flows naturally across the screen, browsers can apply anti-aliasing to make it smoother on the eye, the text can be resized (Ctrl + mouse wheel) which is perfect for the sight-impaired, assistive technologies can convert the text to speech for accessibility, etc. In short HTML is wonderful for everyone.
  • CSS (Cascading Style Sheet) defines the physical appearance (look and formatting) of web pages, for example defining text fonts, sizes, colours and styles, the arrangement of areas of text, images and other elements on the page.
  • Javascript is a flexible, open format, object oriented scripting language that runs natively in web browsers. It adds interactivity to web pages transforming static, inert HTML elements into interactive objects that respond to users’ actions. Since 2000, Javascript has also been commonly used in elearning SCOs, e.g. Adobe Captivate, Articulate and Raptivity, to relay data from Flash applications to Learning Management Systems’ SCORM modules. It’s now becoming more widespread with the introduction of code libraries such as JQuery and MooTools which make programming with Javascript’s idiosyncrasies much easier.
  • Flash and its native programming language, Actionscript, provide the whiz-bang wow factor on the WWW. Its role has always been to do the things that web developers couldn’t and can’t currently do on the WWW with HTML, CSS and Javascript alone or where it is impractical to do so. Its primary rise to internet fame was in providing a platform to display scaleable vector graphics (SVG) and animation in web browsers, i.e. images that move and don’t get pixelated when you expand or zoom them. Shortly after that it provided support for sound and then video. Before Flash Player supported video, it was possible to play video on web pages with other plugins like Apple Quicktime, Windows Media Player and Real Networks Real Player. However, they all used different, proprietary video formats that weren’t cross-compatible (See Youtube API Blog link below). Flash Player is currently the only way to do web conferencing with access to webcam and microphone in a browser. The most recent version of Flash Player (11) introduces 3D graphics engines and GPU hardware acceleration: http://away3d.com/

In short, they’ve all had a long and productive history together and they’ve all contributed to making the web a richer, more enaging, more accessible medium. At one time or another, they’ve all had their critics and predictions of their demise. Will HTML5 kill Flash? More likely, HTML5 will gradually replace HTML4 and some but not all of what Flash currently does. No killers, no victims and not very sensational after all.

Further reading

What’s SMIL and why should we use it?

What's SMIL and why should we use it?OK, here comes a geeky article about elearning and data management best practices. Although the issues are very technical in nature, they require the support of well-informed management so that the most appropriate decisions can be made. Understanding these issues from the outset can save you or your organisation a lot of time, effort and going up blind alleys in the not-too-distant future.

What are the issues? If it isn’t broken, why fix it?

Currently, most elearning developers use so called “rapid elearning development tools”, e.g. Microsoft PowerPoint + Adobe Presenter, Adobe Captivate, Techsmith Camtasia, Articulate and Raptivity,  to create and publish content. They present quick and easy solutions to elearning novices, enabling them to create and deploy multimedia rich, highly interactive learning content on the web without learning a great deal of technical skills or knowledge. However, the vast majority of these tools publish content that is “single purpose” or “single use” and elearning content developers may end up spending a lot of time and effort on creating very impressive content that has little effect on learning outcomes and, in the long run, may make elearning courses difficult and time consuming to manage, maintain and develop. Here are some of the drawbacks:

Proprietary dependencies (lock-in)

Rapid elearning development tools create source files that only their software can read and edit. Often, they’re not forwardly compatible meaning that if you want to edit files from a newer version of the software, you’ll have to buy an upgrade. If you want to edit the source files in other tools, it’s usually a breach of copyright and the End User Licence Agreement (EULA) to do so. Additionally, some rapid elearning development tools publish content in out-dated versions of Flash leading to some unexpected problems for developers. Vendors rely on this to keep users dependent on their software and to make it as difficult as possible to migrate learning content development away from their tools.

Inflexible learning content

Published presentations from rapid elearning development tools generally take the form of single or multiple Flash (.swf) files that present the learning content in predetermined sequences. All the text, images, audio, video and animations are locked away inside the Flash file(s). If you want to change the order of a sequence, you have to go back to the source files and re-author and re-publish the new sequence. There’s no access to the published learning content from other software than can re-use and re-purpose it and Learning Management Systems (LMS) cannot allow teachers and learners to access media from the files and use it in presentations of their own or in discussion forums, wikis, glossaries, etc. Now that group learning (AKA social learning or Social Constructivism) is becoming increasingly popular among learners and teachers, this is a severe drawback.

Narrow range of uses

Pedagogically, presentations, slide shows, simulations, etc. have a narrow range of uses. Regular, old-fashioned HTML web pages often have comparable learning outcomes to rapid elearning tool produced learning interactions with video and multimedia. Furthermore, with all the multimedia, audio, video and animation options available at your fingertips, it’s easy to get carried away and to include too much media and too many different types media simultaneously resulting in cognitive overload and a subsequent drop in learning efficacy.

Inappropriate use of quizzes

Most rapid elearning development tools recommend and encourage the use of quizzes before, during and after presentations. Indeed, they pride themselves on providing the best possible editors, training and support for learning content developers to add quizzes to their presentations. However, according to the US Department of Education’s Evaluation of Evidence-Based Practices in Online Learning,

Elements such as video or online quizzes do not appear to influence the amount that students learn in online classes. The research does not support the use of some frequently recommended online learning practices. Inclusion of more media in an online application does not appear to enhance learning. The practice of providing online quizzes does not seem to be more effective than other tactics such as assigning homework.

Source: ED.gov (PDF, page 18)

Can your Learning Management System (LMS) do it?

Most modern LMS’ have well-developed and designed presentation authoring modules built in. They almost all have quiz and exam authoring modules. The results can be comparable to rapid elearning development tools. It’s worth spending some time with your LMS and seeing what it can do. While LMS’ don’t typically have the best support for multimedia, there are a lot of advantages to this option:

  • Learning resources can be edited and created immediately online.
  • No extra software or development tools are necessary.
  • LMS’ are usually database driven which means indexing, searching and maintaining libraries of learning resources in them is powerful, flexible and simple.
  • Some LMS’ have text filters that can automatically add links and tags to learning content and learner generated content to make make them more closely integrated, such as glossaries, wikis and discussion forums.
  • Some LMS’ provide easy to use tools for embedding multimedia into presentations, quizzes, glossaries, etc.

I’m not advocating abandoning rapid elearning development tools altogether (I think they’re very appropriate for one-off, highly particular presentations and simulations) but I think it’s important to understand their limitations and that, in many cases, there are more appropriate approaches to creating, maintaining and managing learning content.

Another option: SMIL XML

The Synchronized Multimedia Integration Language (SMIL), is a W3C.org recommended XML markup language for describing multimedia presentations. It defines markup for timing, layout, animations, visual transitions, and media embedding, among other things. SMIL allows the presentation of media items such as text, images, video, and audio, as well as links to other SMIL presentations, and files from multiple web servers. SMIL markup is written in XML, and has similarities to HTML.

Source: Wikipedia.org

SMIL is currently most commonly used as a subtitle or text captioning format for online video, otherwise known as SMILText, TimedText or RealText, and for media play lists like those used with the JW Player and the Media Player module for Moodle but, as you’ll see in this article, it is capable of far more than that.

How does it work?

A SMIL XML file contains all the data necessary to organise a play list or learning interaction such as a PowerPoint style presentation or a multimedia quiz. Note that the main constituent parts of the learning interaction are kept separate; the multimedia files, the SMIL data files, any styling and the SMIL player. Software developers call this the Model-View-Controller* (MVC) design pattern which is used in almost all web software, such as Content Management Systems (CMS), such as WordPress, Joomla, Drupal and Mambo, and LMS’, such as Moodle, Sakai, ATutor and ILIAS. This means that each part of the multimedia, data, styling and player can be edited, substituted and recombined separately without “breaking” the learning interaction. Also multimedia, which tends to be costly and time consuming to produce, can be re-used and re-purposed easily for other learning interactions. For example, if all the learning interactions display an image, only one copy of that image needs to be stored on the LMS. If we want to change or update it, we only need to edit or replace this one copy and this will be reflected across all the learning interactions that use it, so there’s no need to go through the laborious task of editing and republishing tens, hundreds or maybe even thousands of files just to change one image, which is the case with typical rapid elearning SCORM packages.

SMIL diagram

* In the case of elearning MVC would be:

  • Model – SMIL XML files and multimedia files. Additionally, SMIL files often contain layout data.
  • View – Any styling, which could include colour schemes, fonts, graphics, backgrounds, logos and branding.
  • Controller – The software that manipulates the model and applies the styling to create presentations and other learning interactions.

Platform agnosticism

Perhaps one of the biggest advantages of using a web standard format, like SMIL XML, is that it’s “platform agnostic“, i.e. it isn’t limited to just one operating system, software platform, runtime or playback device. This means that you can develop applications in any language for any operating system or runtime to play SMIL presentations. Options include but are not limited to: Flash and Javascript (for web browsers), Adobe AIR and Java (for desktops), Android apps (mobile phones and tablets) and iOS apps (iPhone, iPod and iPad). The following media players also support SMIL playback: Apple’s Quicktime player, Windows Media Player (WMP) and RealNetworks RealPlayer.

Flexible and adaptable

In addition to playing SMIL files from start to finish, as slide show presentations, it’s also possible to develop custom applications that can use the presentation data to create new activities, for example games, quizzes and reference aids. I develop Flash Multimedia Interactive Learning Applications (MILAs) that read SMIL files and use them to create a variety of learning interactions. With this approach it’s possible to create an almost unlimited range of activity types to your exact specifications.

When should we use SMIL?

SMIL XML is a potential replacement for presentations typically produced by using one of the many rapid elearning development tools. If you find yourself copying and pasting layouts, content, templates, etc. from one presentation to the next or you find yourself doing very repetitive tasks frequently, then that’s a good case for considering adopting a SMIL based approach. Typical rapid elearning development tools that SMIL can replace are:

* OpenOffice.org, the free open source alternative to Microsoft Office, can publish presentations directly to Flash. Additionally, it’s compatible with MS Office documents so it’s one of the cheaper and easier ways to convert old legacy presentations to Flash for web deployment. I previously wrote an article, Open source for elearning, which lists alternatives to commercial, proprietary software.

Why should we use SMIL?

The advantages

  • Open file format – Your typos, spelling mistakes, wrong images, audio or video, etc. can be corrected in seconds with a simple text or XML editor. (Moodle 1.9 allows you to edit SMIL XML files in the course files repository directly online.)
  • Media files are stored separately – Images, animations, audio and video can be updated without having to re-author and re-publish elearning packages. Also screen recordings in either video or Flash are separate from the main presentation structure and can be re-recorded without completely rewriting the whole project.
  • All the data and media is available at a “granular” level so it can be manipulated and re-purposed with software to create an almost infinite variety of learning resources.
  • Web browsers cache media files and, instead of unnecessarily downloading them multiple times, taking up bandwidth and time, they are re-used from the cache. It’s faster and more efficient.
  • Video file formats preserved – As long as video file formats are supported, they are played directly in their original form. This avoids the inevitable loss in quality caused when rapid elearning tools transcode video files imported into them.
  • Presentations can share files and data – It’s possible to re-use media files such as video saving you server storage space and reducing internet bandwidth usage.
  • SMIL is “platform agnostic” meaning that you can develop/use SMIL player applications for use on any operating system or runtime.
  • Course/Site wide configuration – Groups of presentations can be configured using a single, shared file and changes to courses or even whole sites can be made easily. With rapid elearning development tools, it’s necessary to edit and re-publish every single presentation.
  • Smaller file sizes – Most rapid elearning development tools typically produce unnecessarily large files. A combination of SMIL content files and software SMIL players typically produces smaller, optimal file sizes, therefore learning resources download and start faster.
  • No problems with rapid elearning development software versions – You can update image, animation and video production software without worrying if it’ll be compatible with previous or later versions. Additionally, you’re not tied to using any particular software to maintain legacy presentations.

In short, you get a leaner, meaner, faster, more flexible, more editable and ultimately more efficient way of producing elearning presentations and learning resources.

The disadvantages

  • Initial cost of developing a SMIL player (Almost no free or open source web based SMIL players available so please let me know if you know of any)
  • Knowledge of SMIL XML schemata for authoring and editing is required
  • Generally requires some specialised, skilled IT support

Ultimately, the choice is determined by the number of presentations you’re likely to deploy and maintain on your elearning courses. If it’s a small number, then the software development and inconvenience of training or hiring developers with the necessary skills and knowledge outweigh the benefits. However, elearning and blended learning programmes can quickly accumulate large numbers of multimedia learning interactions, which can become difficult and time consuming to manage and maintain and subsequently place unreasonable restrictions on your curriculum development programmes.

More information about SMIL

SWF Activity Module now supports SWF Address

SWF Activity Module now supports SWF AddressThis article’s aimed at developers and adminstrators and addresses a web usability issue that has an ingenious solution. If you’re not at all “geeky” this article will most probably go right over your head.

A common problem with Flash and web browsers is that they don’t use the same navigation model. Users regularly click on the browser forward and back buttons navigation to navigate to web pages. Unfortunately, if the user is viewing a Flash application and she or he clicks on the browser back button,  the browser exits the Flash application and navigates to the previous web page. Obviously, this can be extremely annoying if a user has just spent a lot of time and loses any unsaved data or grades. Enter SWF Address, the answer to your browser navigation woes.

What is SWF Address?

SWF Address is a combination of Javascript and Actionscript classes that Flash developers can include in their projects. The classes work together to add changes in state in Flash applications to the browser navigation history, such as going to the next slide in a presentation or navigating to a menu. Otherwise known as “deep linking” this technique integrates browser and Flash navigation powerfully, unobtrusively and flexibly and reduces the likelihood of learners losing unsaved data or grades or generally wasting time trying to get back into an application to find where they left off. It even works with bookmarking so teachers and learners can link directly into a specific state or page in Flash applications.

The SWF Address Javascript class is already included and integrated with the latest version of the SWF Activity Module. You can install or upgrade it in your Moodle 1.9 or 1.8 installation immediately. Developers will still need to download and install the Actionscript class in their Flash IDE class path before they can start using it.

Please note that SWFAddress only works with Flash applications that have the necessary Actionscript class and functions included in them. See Lee Brimelow’s tutorial for more details about how to do this.

Where can I find it?

  • I’ve created an introductory wiki page with links to the project site and a very helpful tutorial by Flash and Actionscript guru, Lee Brimelow, on the SWF Activity Module project site wiki.
  • The latest version of the SWF Activity Module, which integrates the SWF Address Javascript class, can be downloaded from the SWF Activity Module project site.
  • So that you can see SWF Address in action in Moodle, I’ve also uploaded a simple demo by Asual and deployed it on my R&D Moodle 1.9 site (Login as a guest).
  • SWF Address project site with examples and demos.

Flash and HTML5 – Competitors or complementary solutions?

Flash and HTML5There seems to be a heated and highly polarised debate in progress about Flash and HTML5. There also seems to be a lot of misinformation flying around and some misunderstandings about what Flash and HTML5 are, what they can do and how the future of the web is likely to shape up in the next ten years.

Microsft, Apple, Adobe and Google are all competing for their own particular profit models and market share. Most of the debate and the disagreements have little to do with what the best technology for the web is or what’s best for developers and users. The link at the end of this post is a sober, well-informed article written by Jeremy Allaire, founder of the Flash MX platform, ColdFusion and Brightcove.

Also, please note that the developments in HTML5 RIAs that they’re talking about are in quite a long-term time frame by web technology standards. Don’t be fooled by Google’s “hard push” campaigns and their YouTube.com/html5 beta demo. Try it out in IE8 and you’ll see it’s still the Flash plugin video player and Internet Explorer still accounts for almost 59% of web browser usage, with versions 6 and 7 making up the majority share. Unless there’s some radical change in web browser user behaviour, we aren’t going to see a widely distributed full implementation of HTML5 on users’ desktop browsers for the next few years.

Here’s the article:

http://techcrunch.com/2010/02/05/the-future-of-web-content-html5-flash-mobile-apps/

Moodle FLV Player module update

In February 2009, I released the first beta version of the FLV Player plugin activity module for Moodle. It leverages the ubiquitous JW FLV Player and has been very popular among teachers and course content developers working with Moodle. I’m working on a substantial update for the module and in this article I’m going to write about some of the improvements and new features in it.

What has changed?

The most significant changes in the module will be:

  • Support for alternative HD video streams.
  • Support for audio descriptions.
  • Uses simpler SWFObject 2.2 embed method.

Alternative HD video streams

The current FLV Player module can play any video format supported by Flash Player, which includes FLV, F4V, MOV,  MP4 and Youtube.com videos as well as MP3 and AAC audio files, and JPEG, PNG and GIF images (animation is not supported) and Flash animation files. See here for a full list of supported formats.

The new version of the player now supports an alternative HD video stream. This means that users can switch between normal and high definition video at the click of a mouse. All you need to do is provide two video files, one normal and one HD for the player to switch between. This is particularly useful for providing an alternative low definition stream to users with slow or intermittent internet connections.

Audio descriptions

This one’s still a bit buggy and doesn’t allow full control over the audio file. An audio description is a second, separate MP3 audio file that can be deployed alongside a video. It is synchronised with the video so that if you seek through it to a new point in time, the audio file plays at that point respectively. Users can switch the extra audio on and off as they like.

Audio descriptions are typically used for accessibility support for the visually impaired but can also be used for multi-language support, optional narrator’s voice overs, director’s commentaries, etc. I’m sure instructional designers, teachers and course content developers can come up with some creative applications for this feature.

SWFObject 2.2 embedding

Previous versions of the FLV Player module were a little “inconsistent” across different browsers and some suffered from bugs when it was necessary to perform Flash Player upgrades for users who don’t have Flash Player 9.0.115 or later installed. I’ve upgraded the module to SWFObject 2.2 and used a static embed method so that even with Javascript disabled, the video player will work, as well as detecting users’ Flash Player versions and informing them if they need to perform a Flash Player upgrade in order to view the video content, instead of automatically deploying Express Install, giving users more control. The new embed method has been successfully tested on Internet Explorer, Firefox, Safari and Google Chrome.

Prompt to upgrade the Flash Player version

A prompt to upgrade to the required Flash Player version.

Other features still supported

As well as these new features, the new version of the FLV Player will continue to support:

  • HTML notes under the video playback window so you can put lecture notes, diagrams, graphs, tables, photos, links to files or pages, etc. on the same page.
  • TimedText, RealText, ASX, ATOM, RSS and XSPF video caption formats (Users can now switch captions on and off).
  • XML Playlists.
  • Skins to change the visual appearance of the player (also includes support for XML based skins).
  • Definable player control colours.
  • Video poster images before playback commences.
  • A variety of other JW FLV Player plugins (as a CSV list).
  • Player configuration via an externally loaded XML file so that course-wide player policies can be established.

When will the new version be ready?

Many thanks to the brilliant developers at LongtailVideo.com for all their ideas and hard work. I’m still testing and trying to “iron out” the bugs in the FLV Player module but this should be finished in the next week or so. Unfortunately, there’s a bug in the Audio Description plugin, which is beyond my control and I’m waiting for the respective developer to resolve the issue. Hopefully, this will be soon.

Update…

After spending some time going over the various requirements for supporting the new plugins, the changes to the module code and the database table structure, I’ve realised that a number of the changes would “break” older instances on Moodle courses and lead to a lot of extra work for teachers and course content developers. With this in mind, I’ve decided to leave the FLV Player as it is for people who don’t need a feature-rich media player.

I’m now developing a very feature-rich “Media Player” module that will support most of the plugins currently available for the JW FLV Player as well as playlists and all the other features that we expect of a good web video application for e-learning. The module editing page will also be better organised to make it easier to use. The JW FLV Player plugins that I’m experimenting with at the moment are as follows:

Please note that the Live Stream and Snapshot plugins require a server-side script and will not be enabled as standard for security reasons. The search Seach Bar plugin can use custom search scripts but only YouTube.com search will be enabled by default.

Here’s the Google Code project home page: http://code.google.com/p/moodle-mplayer/