Flash to HTML5 TABLE of CONTENTS

The why and how of moving ELEARNING from Flash to HTML5 TABLE OF CONTENTS

1.0 eLearning Then and Now 04 What's the deal with HTML5? 05

Difference between Flash and HTML5 06 2.0 Why move eLearning from Flash to HTML5? 09 3.0 Moving To HTML5 – Key steps 13 4.0 Converting Legacy Flash-based eLearning to HTML5 18 5.0 References 34 1 .0 eLearning Then and Now

03 eLearning Then and Now Since the term 'eLearning' was coined, up until HTML came to be recognised as a better alternative for eLearning development, Flash enjoyed the position of being the favourite development tool for desktop-based eLearning. And rightly so. It redefined the user experience on web with its rich multi-media and interactive capabilities. But with the evolution of technology and network connectivity, newer and better devices emerged. PCs were accompanied by laptops, tablets, phablets and even smartphones. Some of these mobile devices, due to their diverse screen sizes and operating systems (and some other reasons like processor capability, device features, etc.), did not support Flash – neither within the web-browser nor outside of it. Explaining why Apple would not allow Flash on the iPhone, iPod touch and iPad, Apple openly criticised Flash for its rapid energy consumption, poor performance on mobile devices, abysmal security, lack of touch support, and desire to avoid "a third party layer of software coming between the platform and the developer". As this battle of technologies intensified, the popularity of Flash waned, and that of HTML5 increased.

04 eLearning then and now What's the deal with HTML5?

HTML5, in technical sense, is a new open standard based on XML, a combination of HTML, CSS and Javascript.

It has the potential to change the traditional (read Flash-based) approach to eLearning development. It is particularly useful for organisations with 'no plug-in' policy because it renders natively in HTML5 capable browsers. Also, HTML5 helps in creating platform independent applications.

Here are some of the new elements included in HTML5:

Web developers can now create 2D drawings controlled by JavaScript. This would help in creating Canvas interactive graphs, games, and presentations easily. Key benefit is that web developers can do this using JavaScript directly in HTML 5 without relying on technologies like Flash or Silverlight.

Video and Ability to play video or audio in HTML5 WITHOUT any plug-in required (like Flash or Silverlight), Audio simply by using the new audio and video markup tags.

Details, datagrid, command & menu -These are interactive elements included for development Interactive of web applications with more such elements to be included in the future. This would help the Elements web developers display data in structured formats and make it easier to implement.

05 eLearning then and now Difference between Flash and HTML5

Apart from the apparent difference in technologies, there are many other factors that set them apart. Here are a few: Flash html5

Software Flash player/plug-in required No additional requirement support

Vendor Adobe System's proprietary software Largely controlled by W3C and WHATWG neutrality made up of three companies – Opera Software, the Mozilla Foundation, and Apple.

Using Adobe tools (Flash Professional, Coding in CSS, HTML, and JavaScript; with Flash Builder etc.) any Text Editor, Tools like- GoMo, Storyline 1,2, Authoring Captivate-8,9, Adobe Edge, Adapt, Elucidat. Frameworks like FRED, Adapt etc.

Measurements in sub-pixel increments, Measurements on a sub-pixel scale, web Features crisper, pleasant and rich design output, browsers will round either up or down, audio good audio-video output, perfectly fit for and video support, very good accessibility simulations. support.

06 eLearning then and now Difference between Flash and HTML5

Apart from the apparent difference in technologies, there are many other factors that set them apart. Here are a few: Flash html5

Mobile Up to Android 4.0[8] (unofficially for Android Windows Phone 8+,Android 2.3+,Apple iOS Operating 4.1 and above), BlackBerry PlayBook, 6+,Symbian Belle+, BlackBerry OS 7+ Systems BlackBerry 10 v10.0 - 10.3.0 (10.3.1 unofficially supported), Windows RT. Through AIR apps for Latest Android and iOS.

Device Full access to web camera, microphone, Limited access to web camera, microphone, access accelerometer, GPS accelerometer, GPS

Responsive/ No Yes multi-device access

07 2 .0 Why move eLearning from Flash to HTML5?

08 Why move eLearning from Flash to HTML5? With Flash losing support from major mobile players and Adobee itselfitself abandoningabandoning support for mobile browsers altogether, HTML5 presents itself as a promisingpromising alternative for eLearning development. It can play audio, video, 2D/3D2D/3D graphics,graphics, and animation - all without a plugin, and also have improved access to hardwarehardware elements and offline storage.

09 Why move eLearning from Flash to HTML5?

Some more reasons that drive the need to move eLearning from Flash to HTML5 are:

The Multi-device Shift

The recent years have witnessed an unprecedented growth in the number and variants of devices. eLearning that was once restricted to desktops has now moved on to handhelds and even wearables. And only a few of these devices support Flash making HTML5 the best option.

BYOD

Devices have now become a part of the daily routine, with almost everyone using and switching between multiple devices to finish a task during the course of the day. With the growing trend of BYOD (Bring Your Own Device) worldwide, employees are using their personal devices to access business applications. Gartner predicts that by 2017 half of employers will require employees to supply their own device for work purposes. Such a scenario calls for eLearning delivery on a wide range of devices and a technology that can be built once and delivered everywhere. That's HTML5.

10 Why move eLearning from Flash to HTML5?

Investment Locked in Legacy eLearning Most eLearning have a huge pool of legacy Flash-based eLearning courses at hand. It’s bad enough that they don’t work on tablets and smartphones, locking investment to desktop delivery only, and with the increasing demand for learning on mobile devices, it might end up as a sunk cost! Converting Flash-based courses to HTML5 can unlock some of this investment as it would be more cost effective than redevelopment of those courses from scratch.

Future-proofing To avoid being in the same situation again, with investment in courses locked in an old technology, it is wise to convert existing or create new eLearning in HTML5. HTML5, being an open standard adopted by W3C and being incorporated in all latest browsers, presents a long-term option.

11 3 .0 Moving To HTML5 - Key Steps

12 Moving To HTML5 Key Steps MovingMoving towards HTML5 is no lonlongerger a question of 'if' but 'when'. The first and foremost stepstep for adoptingadopting an HTML5HTML5 strategystrategy iiss EEvaluation,valuation, followedfollowed byby AnalAnalysis.ysis.

13 Moving To HTML5 Key Steps 1 Evaluation It is important to evaluate whether the move from Flash to HTML5 is required. If the target devices consist of desktops alone, then using Flash as the platform to develop learning might be a viable option subject to the long term objective in the context of multiple devices. However, if multiple devices of various sizes and makes are to be considered, then based on the target devices the approach may vary. There are 3 ways for conversion of legacy Flash-based eLearning to HTML5.

14 Moving To HTML5 Key Steps 1 Evaluation 1. mEnablement mEnablement is the process of converting existing eLearning to a tablet–compatible format. With almost 70% of the official work being done on tablets, conversion of legacy eLearning content to tablet compatible version is essential. Converting existing eLearning to Tablet Learning can be relatively easy, and with many tablets having resolutions similar to desktop PCs, content repurposing is often minimal. More on mEnablement, its options, key considerations and challenges here. 2. Responsive Design Responsive design is a design approach that delivers content that responds to the user’s behaviour and environment based on screen size, platform and orientation. Using responsive design ensures that the converted legacy courses work well on any device. More on Responsive Design, its key considerations and challenges here. 3. App-based/Mobile only 'App' is a software program that can be launched from the mobile and is designed to perform a specific function directly for the user or, in some cases, for other programs. If performance support or just-in-time learning is a part of the training objective then app-based or mobile only learning is the right solution. More on App-based/mobile only, its key considerations and challenges here.

15 Moving To HTML5 Key Steps 2 Analysis

Once the approach is determined, then the next step is to analyse the existing Flash-based course. The elements of analysis may remain the same but the conclusions may vary based on the approach. The process of analysis includes the following steps: 1. Review the objectives Understanding the nature of the existing Flash-based eLearning (Eg. content and presentation type, compliances etc.) and what it would be converted to (Eg. delivery device(s), etc.) helps in setting the right objectives. This should be done while keeping the overall learning and organisational goals in mind. 2. Identify tools used for development Identify tools used for creating legacy content. Tools like Articulate, Captivate etc. can be used to republish the same content for tablets and even provide multi-device output. 3. Identify reusable assets Even if the entire legacy course may not be of use, there may be some assets that can be reused. Keeping those handy can be really helpful in the conversion process, both time and cost wise.

16 4 .0 Converting Legacy Flash-based eLearning to HTML5

17 Converting Legacy Flash-based eLearning to HTML5

The actual processcess of conversion begins once thehe evaevaluationluation anandd tthehe analysis is done,ne, basedbased on wwhichhich an approach is chosen.hosen. DependingDepending on the approach, the designdesign and development pprocessrocess anandd thethe associated challengesallenges mamayy varvary.y.

18 Converting Legacy Flash-based eLearning to HTML5 1 mEnablement

The legacy Flash-based courses built for desktops can be easily converted to tablet-based learning, as visually, the display areas of tablets are similar to desktop PCs and therefore, from a design perspective, content repurposing is often quite simple. Options: There are three options to mEnable an existing course, namely: a) Complete Redevelopment in HTML- If the legacy content contains text, images, simple graphics and animations, interactivities, and/or synchronised audio, complete redevelopment by extracting the content from existing Flash–based framework can be easily done. b) Partial Redevelopment in HTML and Flash- If the legacy content contains rich graphics and complex animation, in addition to text, images, interactivities, and/or synchronised audio, the existing Flash-based animations can be reused and the course can be partially redeveloped. c) Republishing- Courses which were developed in an older version of an authoring tool can be republished using the tool's latest version. However, many a times it involves redeveloping interactivities, re–syncing audio, and making minor adjustments to layouts where required.

19 Converting Legacy Flash-based eLearning to HTML5 1 mEnablement Design and Development Considerations: When converting an existing Flash-based eLearning course to HTML5, it is helpful to keep the below listed considerations in mind. These considerations are nearly the same for the aforementioned 3 options.

Ÿ Retain design/layouts Given the (almost) similar display areas of desktops and tablets, the design and layout can remain the same. Portrait mode can be locked on for tablets. In case performance support and just-in- time learning is to be considered, content will have to be chunked down to make it byte-sized for quick support/learning. Ÿ Apply touch; replace hover Of the many affordances that tablets offer, one of the important ones is response to ‘touch’. So mouseovers have to be removed and touch controls have to be added. With touch devices, there also arises the possibility for gestural navigation. So, in addition to providing buttons, it is essential to code for a swipe gesture on tablets.

20 Converting Legacy Flash-based eLearning to HTML5 1 mEnablement

Ÿ Convert animations to gifs, videos, or sprite sheets If the legacy eLearning contains a lot of small, short, looped animations, the best option is to use CSS sprite sheets and GIFs. A sprite sheet is a single PNG image that contains a sequential array of smaller, distinct images or graphics that make up an animation. These smaller images/graphics (frames) get displayed in quick succession, so it seems like an animation. Another option is to convert Flash animations to short videos. This can be done by creating and synching the animations in Flash, and then publishing them in the required formats (MP4 and OGV) for integration within an HTML framework. Ÿ Recode interactivities (jQuery) Certain interactivities in Flash may require to be re-coded in HTML5. Ÿ Authoring tools Tools such as Articulate Storyline, Captivate, Lectora etc. can be used to convert the existing Flash-based eLearning to HTML5. Ÿ Converters For simple Flash-based courses, certain tools like Swiffly, Wallaby can also be used.

21 Converting Legacy Flash-based eLearning to HTML5 1 mEnablement Challenges:

Ÿ Lower IE versions HTML5 is not supported on IE8 and lower versions. For such cases, the solution is to either use a combination of HTML4 and 5 or keep Flash as a fallback option. Ÿ LMS compatibility For courses to be delivered via a Learning Management System, the LMS platform needs to be checked for tablet compatibility. Ÿ Browser variance in HTML5 adoption Different browsers deliver different outputs for HTML5 on different devices. In such cases, simple conversion often becomes complex due to the multiple iterations in design modifications. This is shown in the following tables for Desktops and Mobile Devices

22 Converting Legacy Flash-based eLearning to HTML5 1 mEnablement Challenges: Desktop Full support Partial support No support

MAC Features IE8 IE9 IE10 IE11 Firefox 33 Chrome 38 Opera 25 Safari 7.1 calc() as CSS unit value Canvas (basic support)

Canvas blend modes Video Audio MPEG-4/H.264 video format

HTML5 form feature DeviceOrientation events Screen Orientation Drag and Drop SVG (Basic support) JSON Parsing

File API classList (DOMTokenList )

23 Converting Legacy Flash-based eLearning to HTML5 1 mEnablement Challenges: Tablet/Smartphone Full support Partial support No support

Features Chrome for Firefox for IE Opera Blackberry Android iOS Android 38 Android 32 Mobile 10 Mobile 24 browser 10 browser 4.4.4 Safari 8.1 calc() as CSS unit value Canvas (basic support)

Canvas blend modes Video Audio MPEG-4/H.264 video format

HTML5 form feature DeviceOrientation events Screen Orientation Drag and Drop SVG (Basic support) JSON Parsing

File API classList (DOMTokenList )

24 Converting Legacy Flash-based eLearning to HTML5 2 Responsive Design

Responsive design for eLearning is closely based on Responsive Web design (RWD), which has a single source file. Updates or additions need to be made only once to reflect changes across all devices, irrespective of the size, make or operating system.

25 Converting Legacy Flash-based eLearning to HTML5 2 Responsive Design Design and Development Considerations:

There are some design and development considerations that need to be adhered to while converting existing Flash-based eLearning to HTML5 for an output that runs seamlessly across all devices. While most of the considerations are almost similar to that for mEnablement, there are a few additional ones:

Ÿ Think resources (not courses) The whole idea behind converting the legacy courses to responsive is to make them available across a wide range of devices. The design considerations begin with viewing courses as resources, which can be accessed by the learners as performance support tools or just-in-time learning. Ÿ Complete redevelopment Given the wide range of devices with diverse screen sizes, operating systems, manufacturers etc., it is not possible to convert an existing Flash-based course to a responsive course. Complete reconstruction is the best option.

26 Converting Legacy Flash-based eLearning to HTML5 2 Responsive Design Design and Development Considerations:

Ÿ Graceful degradation vs. Progressive enhancement There are two ways to go about with responsive courses – Desktop-first approach or Mobile-first approach. Depending on the primary target devices, the responsive design approach is to be chosen. ‘Progressive enhancement’ or Mobile-first approach works best when the preferred devices for accessing learning would be smartphones and tablets, while ‘Graceful degradation' or Desktop-first approach works best for desktop- and laptop-based delivery.

Ÿ Tools Ready tools and frameworks can be used for Flash to HTML5 conversion. Some tools that give responsive output are GoMo and Captivate 8 & 9. FRED, Framework for Responsive eLearning Development, is another wonderful solution for conversion to HTML5.

27 Converting Legacy Flash-based eLearning to HTML5 2 Responsive Design challenges:

Ÿ Audio/video issues Audio and video do not play automatically on iOS devices, making it necessary to include specific buttons for these devices which are quite unnecessary for the others. Also, different browsers support different video formats. Some browsers like Opera do not support mp4 format.

Ÿ Tools are still evolving Since tools are still in the evolution phase, advanced HTML skills are required for customisations.

Ÿ Testing More the number of target devices, the more it becomes essential to have physical devices at hand, and with it increases the effort and time for thorough testing.

Ÿ Iterative Responsive design development is an iterative process.

28 Converting Legacy Flash-based eLearning to HTML5 3 App-based/Mobile only

App-based learning can be Native, Web or Hybrid depending on the learning requirement. The perk of a learning app is the ease and speed of access.

29 Converting Legacy Flash-based eLearning to HTML5 3 App-based/Mobile only Design and Development Considerations:

Here are some design and development considerations for converting existing Flash-based eLearning to app-based or mobile only eLearning.

Ÿ Think Performance Support An app, by virtue of being on a mobile device be it a smartphone or a tablet, renders itself perfectly for delivering learning at the moment of need. As desktops are not involved in this scenario the whole focus is on byte-sized, easy-to-access courses.

Ÿ Responsive Design The approach for responsive design here is Mobile-first. More on Mobile-first approach here.

Ÿ Offline availability Native Apps usually store data locally on the devices which makes it possible for learners to access learning with no/limited Internet access. Hybrid apps can also be created using HTML or an LMS offline player can be used as the course delivery platform.

Ÿ Tools Tools like GoMo, Captivate 8 & 9 and FRED can be used to create HTML apps. 30 Converting Legacy Flash-based eLearning to HTML5 3 App-based/Mobile only challenges:

Ÿ OS updates The biggest challenge with apps is keeping the app updated as per the OS. So every time an OS upgrades, the app has to be updated too so as to ensure smooth functioning.

Ÿ App store challenges The other challenge, mainly in case of Native apps, is the time taken for updates to be delivered because the apps have to be always modified through the app stores.

31 Converting Legacy Flash-based eLearning to HTML5

With the emergence of the multi-device world and the growing dependence on (mobile) devices to carry out daily tasks, there is no escaping from havinggg learning available anywhere, anytime on any device.e. HTML5, with its various advantages, is no longer a futuristicuristic approach; it's a reality and it's here to stay!y!

32 5 .0 REFERENCES

33 References

http://www.upsidelearning.com/blog/index.php/2010/02/18/adobe-air-flash-player-10-1-how-it-can-benefit-mobile-learning/

http://www.upsidelearning.com/blog/index.php/2014/11/20/why-move-elearning-from-flash-to-html5/

http://www.upsidelearning.com/blog/index.php/2014/04/15/design-challenges-and-considerations-for-responsive-elearning/

http://www.upsidelearning.com/blog/index.php/2015/04/29/multi-device-learning-designing-for-usability/

http://www.upsidelearning.com/blog/index.php/2012/08/16/6-steps-to-a-better-mobile-learning-strategy/

http://www.upsidelearning.com/blog/index.php/2009/07/02/html-5-and-elearning-development/

http://www.apple.com/hotnews/thoughts-on-flash/

http://www.rapidvaluesolutions.com/flash-to-html5-app-where-is-adobe-headed/

http://www.theverge.com/2015/1/27/7926001/youtube-drops-flash-for-html5-video-default

34 Author

Amit Garg Director and Co-founder, Upside Learning

Amit is the co-founder of Upside Learning and heads its Custom Learning Solutions department. A mobile learning evangelist and an avid learner of technology, he helps organisations understand and implement eLearning and mLearning solutions. Amit regularly shares his thoughts, knowledge and insights on technology and learning through webinars, learning sessions at trade shows, blog posts and eBooks.

35 Upside Learning

We are a leading provider of learning technology solutions. We help over 150 organisations across the world to create, deliver and manage their learning and performance improvement programs. Our solutions are backed by over 11 years of experience, built on the expertise of 200+ dedicated, in-house experts who have developed over 6000+ hours of eLearning. We offer – • UpsideLMS - A best value, responsive Learning Management System • Custom eLearning - Tailor-made solutions for desktops and laptops • Custom mLearning - Tailor-made solutions for smartphones and tablets • FRED - Framework for Responsive eLearning Development • Multi-device testing lab – Testing services for responsive courseware We have won over 40 awards from renowned eLearning bodies like Brandon Hall, CLO, Training Industry Inc. and Deloitte. L'Oreal, Mars, Bell, Kraft (Asia), Tyco Learning, Ensco, and Global Knowledge are some of the leading organisations using our learning solutions.

Learn More: www.upsidelearning.com