Skip to content

How to convert Flash content to HTML5

It’s like the tear jerking movie that refuses to end. When will Flash finally be allowed to decompile gracefully?

It’s seven years since Steve Jobs posted his thoughts that started to topple Adobe’s dominance of interaction on the web.  One of the most significant statements ever made in the history of web technology and we are still feeling the repercussions.

“Adobe has characterized our decision as being primarily business driven – they say we want to protect our App Store – but in reality it is based on technology issues. Adobe claims that we are a closed system, and that Flash is open, but in fact the opposite is true.”- Steve Jobs

If you are still hosting Flash-based e-learning – and believe it or not, I know of organisations who still create Flash courses – it really is time to drop it, and quickly.

In its 20 years of life, Flash hugely advanced interactivity and creative content on the web. Incredibly beautiful designs were created but let’s just accept that we now have better options and move on.

Never combine the three pillars of interaction design

Way back in 1990 when I was a keen young student studying for my MSc, I was taught by a bearded lecturer what he called the golden rule of interaction design.

“Always keep content, design and interaction separate when designing interaction.”- Anonymous lecturer

I didn’t realise the significance of this at the time but it’s a simple rule of design that I’ve used again and again when designing learning technology solutions. Let me explain further.

Content, design and interaction are the core elements of a web based experience for a learner. The content is what they see, the design is how it looks and the interaction is what it does.

Take a simple button: it says ‘click here’ – content – it’s in the red with curved edges – design – and it shows a video when selected – interaction.

Extrapolate this to an entire e-learning course and you can see how the entire experience can be split into these three components in an authoring application.

But why would we want to do that you may ask? Put simply; it allows us to make lightning fast updates, make global changes to an entire module, ensure consistency throughout and future proof deliverables. Let’s bring this to life with a few examples from my back catalogue of content development.

“I now want to translate the diversity module into eight languages. Sorry didn’t I say that at the start of the project?” – A stakeholder

“Our brand has changed. We need to update the colours in our catalogue of 35 e-learning modules this week. Is that OK?” – A marketing manager

“The assessments in the mandatory e-learning catalogue are not working on iPads. I know we have over 100 modules, is it a big job to fix them?” – A reviewer

Do any of these sound familiar? If you were sitting down to carry out these with a legacy authoring application (our old friend Flash possibly) your evenings and weekends would vanish before your eyes. Teasing out all the text, changing colours globally and applying a technical fix across a full catalogue of modules would be hideously time consuming.

However, imagine the situation where all your text is kept separate so can be exported and edited with one button press, colours can be changed in a single theme that ripples through all course templates and a single technical change can be made to impact all instances of an assessment template. You could then sleep soundly.

What I’ve just described is the future of e-learning content. We don’t need any more proprietary formats. We need authoring applications that use native web standards to give us lean and long lived learning output.

The dream that is HTML5

The dream that was finally dreamt is HTML5. It’s lean, designed for gestures – not ‘ye olde’ rollovers – optimised for low power mobile devices and there isn’t much it can’t handle.

Much has been written about the benefits of HTML5 for learning development so that job is done. For me the big win for content authors is with its stablemates of cascading style sheets – CSS – and JavaScript, we have separate content, design and interaction – bringing with it all the benefits mentioned earlier.

“With fewer smartphones and tablets being able to support Flash these days, HTML5, a mobile-friendly alternative, is becoming the new favourite among e-learning professionals.” – Christoforos Pappas

At last, we’re not tied to a proprietary format that will eventually hit a brick wall and collapse amid frantic Google searches for ‘legacy content conversion’.

But wait… I still have oodles of Flash e-learning

Unlike the vinyl LP, Flash based learning content is unlikely to regain its coolness in our lifetime. The hipster option is to look at conversion to HTML5 by importing – or recreating – it into a modern authoring application that supports this output format.

The ease and cost of doing this is a question we commonly get asked and it depends on getting answers to some technical scoping questions and an understanding of your vision for the converted learning content:

The dream that was finally dreamt is HTML5. It’s lean, designed for gestures – not ‘ye olde’ rollovers – optimised for low power mobile devices and there isn’t much it can’t handle.

Much has been written about the benefits of HTML5 for learning development so that job is done. For me the big win for content authors is with its stable mates of cascading style sheets (CSS) and JavaScript, we have separate content, design and interaction – bringing with it all the benefits mentioned earlier.

Scoping questions for conversion to HTML5 e-learning

You may need technical input to get answers to these but definitive answers greatly influence the success of the outcome, so it’s worth the time investment:

  • how tightly have the content, design and interaction been combined? – you may be lucky as some Flash content separates them out making conversion easier, if not there may be a process to tease apart these elements
  • is there a way to export the entire text and media content into an editable format? – it is far easier to copy and paste from a document and directories of media than directly from Flash
  • is the theme – colours and fonts – something we can create in our chosen HTML5 authoring tool? – you may use the opportunity to modernise the look and feel at the same time
  • can we create all the templates and interactions in our chosen HTML5 authoring tool? – I recommend you create a specification document that defines them all, and as for the theme, you may use the opportunity to modernise the interactions
  • will any functionality not convert? – Flash used mouse rollovers extensively which need to be redesigned to cater for gesture-driven mobile devices and there may be other custom elements that need rethinking

Your vision for converted HTML5 e-learning

HTML5 e-learning offers a whole new set of exciting possibilities for your content. Many of these considerations relate to the readiness of your organisation to take on board modern web design. In my view, it’s a wasted opportunity to move from ‘Click next’ slide-based e-learning to the same in a new frock on a tablet.

I implore you not to let your learners down with a like for like conversion – they expect far more from an evolved web experience. So push your stakeholders as hard as you can to make sure they take some of these options seriously:

  • what levels of richness are you looking for? Don’t default to converting your entire catalogue to the same quality; you will no doubt have high and low impact modules – high impact may benefit from extra development – e.g. gamification and rich media – and low impact may go the other way to become informal resources what devices will be used to access content? -HTML5 opens the door to responsive content that adapts to any screen resolution, so if smartphone and tablet are devices that learners will be using you should consider how the interface and content will vary across these different devices
  • what devices will be used to access content? HTML5 opens the door to responsive content that adapts to any screen resolution, so if smartphone and tablet are devices that learners will be using you should consider how the interface and content will vary across these different devices
  • do you want to move to a scrolling content format? Many HTML5 authoring tools create a modern scrolling output allowing learners to use gestures to move around with less restriction than before quickly. If this is what you want you should redesign the course navigation to suit this and look in detail at the course content to ensure it flows logically once converted from a traditional ‘Click next’ format
  • who will be making and maintaining the content? Back in the day, a single learning designer would preciously own development with their standalone authoring tool. Most modern HTML5 solutions are online, so they open the door for collaborative development which can be a massive benefit for sharing authoring, managing reviews and generally speeding up project timelines – and this may require a reshuffle of roles and responsibilities.

Once you’ve answered these technical questions and defined your vision, you’ll be in a good position to plan and cost the conversion. Note that we haven’t mentioned an authoring tool yet and for good reason, as it should be one of the last decisions you make on this journey.

Adapt as an exemplar HTML5 authoring tool

Out of the acceptance of HTML5 as the learning designer’s new friend has come a wave of authoring tools exploiting this new standard. Adapt is one of these and is my particular favourite as it is open source, so goes one step further in ensuring we are not locked into a particular supplier – as the authoring tool itself can be picked up and shaken by anyone to fit their requirements.

We’ll use Adapt as an example of the kind of functionality you can look forward to in your new authoring best friend.

Adapt comes with the Adapt Builder, which is the authoring environment for non-technical developers – to avoid them having to delve into the nasty HTML5, CSS and JavaScript we mentioned earlier. In the Builder are all the elements you need to make and shape your responsive content. There are:

  • themes – to design the look and feel
  • menus – to define the navigation
  • components – to add interactions

Content – i.e. text, graphics and rich media –  is added to components, and the whole module can be previewed, shared for review and finally published to an LMS.

Surrounding all this is the Adapt community, which is frantically active, with new Components and functionality being added all the time. Look out for gamification and interactive video components coming soon.

The goal: Creating better content

I hope this all looks enticing enough for you to go through the conversion process. It needs a hard swallow to start, with big decisions to make, but it’s a worthy – if inevitable – path to go down towards much cleverer learning content.

content
Flash
HTML5

Got a learning problem to solve?

Get in touch to discover how we can help

CTA background