Flash, HTML5 and Articulate Mobile Player

In my last post, I said I will publish a post about data and graphs, and explain how to present it nicely with Storyline. It’s exactly what I wanted to do, and what I am about to do. But not immediately. Let me explain why.

First, I needed to find some example of data to present in an e-learning course. Last time I had to present data for the ELH Challenge #64, I used tourism information and created a small presentation named ‘Key fact on tourism‘. This time I wanted another topic, and after a short reflection, I decided to use the business review my company published for the year 2014. In a business review, you have tons of data about finance, results, employees, etc. So, it seemed to be a good idea, and it was. So, I was about to start my work in Storyline, when I had another idea: I should create a presentation easy to read on a smartphone or tablet! Another good idea when you know mobile device may be the future of e-learning deployment in many companies. It was a good way to experiment and improve my skills, to be able to design an e-learning course you can follow on a tablet or a smartphone. It even has a name: m-learning.

The first mistake I did is to forget the differences between Flash, HTML5 and Articulate Mobile Player (AMP). Indeed, to play the module on a mobile, you may have to use the HTML5 version of the course, or the AMP application. For my experiment, I tried to create a presentation I could follow with my Nexus 5, so it means HTML5 or AMP. I’m not an expert in mobile device so I don’t know how it works for tablet (I don’t even own a tablet), but I guess the format question is crucial. And I totally forgot to check it before starting my work. I didn’t have any issue with the size of the course. It’s easy to find the resolution of a device and to adapt the story size to ensure your module will fit perfectly your target device. It’s a bit more complicated when you are deploying a module on several devices that may not have the same resolution, but you can set the player to fit the browser size, so the learner won’t have any major issue to follow the course.

Untitled

How to custom the story size to fit a tablet/mobile. You can even choose a portrait view for smartphone.

CaptureIn ‘Other’ you can customize the browser settings.

So, Flash / HLML5 and AMP. I forgot I will use HTML5 to view my module on my smartphone, so I also forgot to check how this format works. I realized it when I had finished my work and was viewing on my smartphone. Here are the few functionalities which didn’t work properly on mu smartphone:

A picture effect: shadow. There wasn’t any shadow at all, the pictures didn’t have any effect.
The ‘wheel’ entrance animation. I used it on the parts of a pie chart. In the classic HTML version of the course, or with the AMP, it was very nice: the parts of the pie chart appeared step by step like a unique wheel. With HTML5, it was a disaster.
– And other details I don’t remember precisely, the two above were the major ones.

At this moment, I remembered HTML5 doesn’t support everything. So, I’m giving you a piece of advice: if you want to create a course for tablet or mobile, and you plan to use HTML5 (most probably), don’t do as I did. Be smarter than me, and read the following topics before starting your work in Storyline:

It should be a good start 🙂

Then, I decided to finally publish my course for the AMP. This time, I had another issue: the story size / orientation of the screen and the app itself. Indeed, I had created my course for my Nexus 5, so the story size was in portrait, optimized for the Nexus 5. But, and it’s very unfortunate, the AMP application was unable to manage the portrait view. I was compelled to view the course in landscape view. I let you imagine how terrible it is to view a portrait-mode module in a landscape view. It’s simple: it’s so small you can’t read anything. Sooo, I had to change the  story size of my course, and I came back to the standard story size of Storyline 2. Then, I was able to view my module in the AMP properly (even if it’s not perfect…).

There is a simple conclusion to this post. I should have anticipated the impacts of publishing a course on a mobile. It’s not like publishing a course on a browser on a computer, or in a LMS. You have to anticipate all your animations or effects may not be supported by HTML5 or by the AMP. For my case, I could have just changed my animations and effects, and it would have been perfect for HTML5. This experiment was not a waste of time: I learnt a lot from this mistake, and I also tried a lot of things in this exercise. The result is interesting. If you want to compare the results, here are the several versions of this business review extract presentation:

Untitled3 Untitled4

The version designed for the Nexus 5 for HTML5. You can compare the HTML and HTML5 versions to view some differences. Try to open the HTML5 with a smartphone, of course.

Untitled5

Here is the version at the standard story size, 720×540. You can open it with the AMP.

I hope this article was instructing! I mainly shared my experience to help new e-learning designers not doing the same mistake I did. In the next articles about the business review project, I will give some examples and explain how to create:

  • Graphic charts, especially pie charts, with nice entrance animations + other animations like ‘Hover’ states, etc. I will use the pie charts of the POBR presentation + other examples from other modules.
  • Forms like characters, buildings, cars… only with Storyline shapes! You can already find a lot of tutorials on this topic, and I’ll share mine in a next post!

Then, see you next time for the part 2.

NB: You can find the complete, official and original Business Review here. The work I present in this post is not official and is for e-learning features demonstration only. If you want to share any information about Plastic Omnium, please use the official business review.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s