Creating items with Storyline or PowerPoint

Posted on by
Reply

I know it’s been a long time since I posted on my blog, but I’ve been very busy with some e-learning projects for the company I’m working for. Today, I will post a few items created with Storyline or PowerPoint shapes. I just want to show you how easy it is: you don’t need to be a graphic designer to create simple and nice items for your modules!

Cars

Capture

This car is made of 3 shapes in Storyline: a freeform for the main part of the car, and two circles for the wheels. Creating the freeform is not very hard, because the form is mainly made of straight lines. For the wheels, the shapes outline is white and thick.

Capture1

Here are more complex cars, created in PowerPoint:

Capture2

Those cars require more shapes, and to be very careful with the front/back order of each shape. Here are the different shapes used to create each car:

Capture3 Capture4

In the second car, the two white shapes for the windows are freeform too.

Then, I grouped all the shapes, and added a ‘glow’ effect.

Forklift

This one is very simple!

Capture5

Capture6

Screens (tablet, laptop…)

Creating a laptop, a tablet or a smartphone is very simple with Storyline or PowerPoint. I think I don’t need to show you the different shapes I used for the following items. There are very easy to do.

Capture7

Buildings

Capture8

I created those building in Storyline. It was not complicated but required a lot of shapes (for the windows). Also, the outlines and the front/back settings between shapes are important.

Capture9

Capture10

Various items

Capture11

A plant

Capture12

A truck

Capture13

A folder

Pies and some other graphic charts in Storyline 2

Posted on by
Reply

Today, I’m going to explain you how to create a few animations for your graphic charts in Storyline 2.

We all know presenting data in an interesting (and non-boring) way can be very hard, especially in e-learning modules. It’s very important to make your e-learning attractive and interesting: you don’t want to loose your learners’ attention after 3 minutes of navigation within the course. You are not going to show a graphic charts with numbers and labels like you would do in a powerpoint presentation. We are in an e-learning course, so you need to add some animation and interactions, even if it is only some basic interactive effects. We need it because we want our learners to learn and remember, and we know we learn and remember better if the form supports the content, and when we are active and not passive.

For presenting data, it’s not always possible to have complex interactions, but you have to do a minimum. That’s what I am going to show you: how to present data like pie chats (and others) nicely, with entrance animations and interactive actions. I’m not going to show complex things, only basics that can be useful to know how to do.

Before going any further, I invite you to read the following:

Now let’s start with some pie charts.

Pie chart entrance animation

Here is an example of a pie chart entrance animation: click here to view it. Now, let’s see how to create it in Storyline 2.

NB: it does NOT work in HTML5.

  • First, you have to create your pie chart in Storyline 2 directly. Forget Excel or copying/pasting a picture or whatever. To create your pie chart in Storyline 2, you will have to create several forms, one per part:

Untitled

  • Then, customize the color, borders and size of your first part:

Capture

  • Now, add the other parts of your pie. For this, my advice is to copy and paste your first part, to ensure the shape has the same dimensions. Then, ensure the position in the slide of your second and other shapes are exactly the same than the first one.

Untitled1

Position of the first shape.

Untitled2

Position of the second shape. Etc.

  • It’s very easy to customize the size of each part: just click the 2 yellow dots at each extremity of the pie part and move them to create each part.
  • Then, to create the entrance animation, first set the parts in the proper order in the time line (and don’t forget to adjust your labels too):

timeline

  • Now, select all the parts of your pie, and select the “Wheel” entrance animation:

Untitled3

  • You may have to adjust the duration of the entrance effect, depending on the size of each part, to ensure they all appear in a similar way.

And that’s it for the entrance animation for a pie chart. Of course, it’s only one way to animate the entrance of a pie chart, you may prefer other ways, but this one is my favorite.

“Piling” entrance animation for a pyramid (and other forms)

Here are two examples of a “pilling” entrance animation: click here to view it.

This is a very basic entrance animation. I’m showing it only for the idea itself, not for the complexity of the settings in Storyline.

  • Create your forms in Storyline. For the first slide, I used the “Can” form, and for the pyramid in the second slide, I used the “Trapezoid” form.
  • Then, adjust each form on the time line.
  • Finally, choose the entrance animation: “Float in” (first slide) or “Fly in” (second slide).

Untitled4

Effects on the shapes and layers for more content

Here are two examples of a pie and a pyramid where the learner has to click to reveal more content about the data presented in the slide: click here to view it.

NB: not all the shape effects are compatible with HTML5.

  • Hover effects: it’s something really easy to do, just add a ‘Hover’ state to your shapes, and customize this state with the effect of your choice. For pie parts, I recommend the ‘shadow’ effect; don’t forget to choose the proper direction of the shadow for each part, or you may have a wrong effect. For the pyramid, I chose a ‘glow’ effect. but it’s really up to you.

Capture2 Untitled6

  • Effects when you click a part: here, the easiest way, in my opinion, but not the only one, is to copy and paste the clicked part in the layer; indeed, if the learner has to click parts/shapes to reveal more content, the best is to use layers for the specific content. Then, in each layer, customize the effects on the shape. I recommend the ‘shadow’ effect again, but this time inside the shape! It create a nice effect, it feels like you ‘pushed’ the part when you click it. Don’t forget to remove the ‘hover’ state of the copied shape, if you copied it in your layer after adding the hover state.

Capture1 Untitled5

That’s all for today. I could show and describe more animations, and data presentation, but it would take me hours 🙂 ! My advice: try and experiment! Look at other designers’ work! That’s the best way to have new ideas and to get new tips.

See you next time for some examples of forms like cars, buildings or characters, made with Storyline shapes only!

Flash, HTML5 and Articulate Mobile Player

Posted on by
Reply

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.