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

A presentation of Santa Clara with Storyline 2

Capture

Last time I created an interactive map about Santa Clara, where I live, for the e-learning heroes challenge #86. Then, I decided to continue this work on Santa Clara and created a presentation of the city with Storyline 2. I only did a few slides with basic information you can find on Wikipedia, and reused my interactive map!

You can access the presentation by clicking on the picture above. Next time, I will show you a few charts and pies created with storyline, to show you how you can present data nicely with Storyline 2; I will add details about animation/triggers/layers to explain you how to recreate the same effect! So, I hope you will enjoy this short presentation, and see you next time!

E-learning Heroes Challenge #86

Capture

It’s been a long time since I participated to a ELH Challenge proposed by Articulate! But this time, I had more time and was very interested in the challenge: create an interactive map to show where we live. I arrived in my neighborhood only 8 months ago, and I use Google Map a lot to discover the area, and to drive with the GPS feature of the app. So, I decided to create an interactive map looking like Google Map, in ‘Earth’ mode.

To create this interactive map, I had to create a looooooot of layers, Layers are life. Really. Your can play with then so much, with the correct triggers and settings. I also used sliders, one of the new features of Storyline 2. I had to be careful with all the variables used by the triggers, to ensure the proper picture is shown at any time.

It was very challenging, because I faced a few issues and had to find a solution to ensure my map would work properly, as expected, any time, after revisiting a layer, etc.

I hope you will enjoy this interactive map! You will discover 10 places in my neighborhood, in the beautiful city of Santa Clara in California.

View the map