Flash to HTML5 conversion – our experience

Flash to html5

It is nothing new for those in e-learning industry that today conversion of the flash based courses to HTML5 is very popular topic. There is a lot of content out there about Flash vs HTML5 and also about different tools that can be used for flash content conversion. But we all know that when dealing with e-learning courses there is no tool that can actually help us to do the job.

So the conversion for us really means building the course from scratch or using some authoring tool templates as a base – which basically is the same thing. As I have led a lot of conversion projects and did the actual conversion myself I want to share things I have learned and experienced along the way. Hope you will find some valuable takeaways here for yourself.

Experience

At the very beginning conversion projects took us a lot more time to get done than it is today. It makes sense because we have gained a solid experience up to this point. There are a lot of different flash courses out there and each of them brings you different challenges and experience. Thus with each project you become better and better just like with almost all of the things in life if you do them for a certain period of time.

Knowing which authoring tool options to use to convert flash interaction just by looking at the flash content for the first time is certain level of mastery of course but it is not everything. Together with the ability to quickly develop appropriate flash interactions in particular authoring tool we also realized that there is a pattern that can be used in the conversion projects over and over again no matter what kind of flash course you are dealing with. So this comes down to some sort of template or approach if you will how to handle or structure the conversion process. This can be broken down into steps which I’ll try to describe in more detail a bit later in the article.

Before you start examining your conversion subject most likely you will receive a brief from your customer about how they want the course to be converted. There could be a number of different ideas your client comes up with but from my experience these can be structured in few general cases:

  • Convert the course and keep it as close to original as possible;
  • Convert the course using certain authoring tool template;
  • Convert the course by implementing different customizations (e.g. color change, changes in functionality etc.).

No matter which case of conversion is yours, first thing you do is you look at the flash course you’ll have to convert and examine the content and the structure.

So back to the pattern. It looks something like this for us:

  1. Examine the conversion subject;
  2. Identify available flash assets;
  3. Understand the content;
  4. Convert and Test.

Examine the conversion subject. In this step we usually make a list of:

  • things that can be made using built in authoring tool options;
  • things that can be accomplished using custom programming;

In order to make this list we go through all of the activities, scenarios, tests, assessments and pages within that course. And we also make notes in form of sketches of the general structure of the course (modules, sections, sub-sections etc.). There are other things that we evaluate in this step as well, but that depends on what is the case of conversion and it varies from one project to another (e.g. branding considerations, fonts etc.).

Identifying available flash assets. Ideally you have a .fla source file with all of the bits and pieces (images, videos, audio, texts and other assets) that you can modify and get the things you need for building your HTML course. However if you have been provided just with .swf (non-modifiable flash file) files of the project then in most cases you are good with that unless you need to make some modifications. To get the assets out of the flash project we use SWF Decompiler. There are a lot of other tools out there but this one works for us pretty well.

So when you have all of the pieces you can evaluate the quality of those assets. Again ideally if you can re-use them for your HTML build as they are without any adjustments. But I can tell you that there is always something that needs to be adjusted (size of the images for instance).

Understanding the content. By understanding the content (text, audio, video, interactions, etc.) I mean that you have to understand why the content in the flash course has been built in the way it is and can you or should you replicate this in your HTML build.

An example: You have a Flash course with the audio files that plays automatically when the page loads. If you have to produce the HTML version so it works also on mobile devices you have a slight problem because the media files won’t start automatically on these devices. So you have at least two options:

  1. Implement the button so users are able to start the media manually.
  2. Custom programming for audio to work automatically on mobile devices (more expensive but will do the trick).

Let’s pretend the choice is up to you how to sort this out. How do you choose the right option?

Well you have to analyse the content. If the audio (speaker) says the same things user can read on the screen then most probably you can stick to the choice number one. However if there is more information within the audio than user can read on screen and this information is meaningful you would want to choose the second option. Or you could omit the audio completely and convert all of the audio in to on screen text. Let’s just say there are options.  But the point here is that you have to pay attention how it is done in the source and why.

You have to understand the purpose of the activity or certain media in order to build it correctly in HTML5, specially in cases where exactly the same interactions cannot be used.

Convert and Test. As for this step then it is worth a whole separate topic. Just want to say that once you figure out how are you going to build particular activity or action in your authoring tool the build gets more fluid.

Conclusion

There are enormous amount of flash courses and also there are a lot of companies that will continue to update their flash content without converting them and that is fine as long as they are happy with it. But for us who are dealing with the conversion process this is an option to test our creative and technical abilities as each conversion case brings new challenges to overcome and most important new competence to gain.

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *