Category Archives: Storyline 1 & 2

I have been researching hardware and software options for low-cost multi-rotor drones for a while, my inner-geek can’t wait to fly and program one soon. If I could only find the time! There I was on a Friday afternoon, waiting for an open source flight planning software to download, when I happened to see a tweet about Articulate’s weekly E-Learning Challenge: Interactive Screenshots for Online Training.

So I thought why not take one sample screen from the Mission Planner software and ‘bring it to life’. The Mission Planner (I still can’t believe this awesome software is free, open source!) software UI is very complex, with lots of dropdown lists, subwindows and parameter selections. For the E-Learning Challenge I picked one element; a flight planner window that allows the user to select a waypoint and then zoom in and out of a Google map display. I quickly set up a sample flight plan with six waypoints and captured the screen.

All the logic and objects are contained in a single screen, no additional layers or slides were used. Just like the actual software, the Storyline simulation allows a user to select any of the six waypoints and then use a slider to the right of the flight plan window to zoom in and out of a Google map. For example, if you select waypoint#3 and then use the slider, the map zooms to that specific waypoint. At least one waypoint has to be selected for the zoom slider to work.

Based  on the selected waypoint, different maps are displayed. The zoom effect was created with states of custom objects that are changed as the zoom slider is moved up and down the vertical scale.

I could have used hotspots, markers and captions to provide information about the flight plan window, but thought that using a zoom interaction would add more realism to the screen. I was thinking about making the Gauges panel on the left an interaction as well, but then I realized that I would need a connection to an actual drone to get input values for the various gauges. I might come back to this screen at some point and add more functionality.

Here is the finished sample. Can you guess which city my flight plan is for?

Edit 05/2018: I created a similar example in Adobe Captivate 2017, see here.

With Storyline, it is easy to build non-linear courses where learners can select topics they are interested in and skip others. The two  common methods to achieve this are:

• Create a Menu with buttons that when clicked navigate to the beginning of a topic. At the end of the topic, clicking the Next button (or some custom navigation) would return the leaner to the Menu. Or
• Turn on the built-in Storyline menu and allow learners to freely navigate to any screen.

But what if I wanted to create my own ‘a-la-carte’ menu so that learners can access ANY topic(s) in ANY order, AND use the built-in Next/Prev buttons to navigate AND have a progress indicator that shows how much of the selected topic(s) I have already viewed?

That seems like a tall order, but with Storyline’s variables, triggers and some elbow grease this ‘Build Your Own Course’ concept is well within reach.

Here is a prototype with six topics (scenes) and a drag-and-drop menu.

And here is the published prototype. The menu is a drag-and-drop interaction that captures the user’s selections. At a minimum, one topic has to be dropped on the menu, up to the maximum of six. Since the topics can be added in any order, it takes quite a few triggers to capture the number and sequence in which the topics should be displayed. Once the Begin button is clicked, the first selected topic is displayed, then the next, and so forth. Also, at any point can the menu be displayed again. This menu structure sits on the slide master and adapts, based on the initial selections.

Also on the master slide, there is a progress indicator, that calculates and displays the progress based on the number of selected topics, their respective number of content pages and the current position within the selection.

I could have spent some more time troubleshooting any navigation hiccups, but I did learn enough about the concept to leave the prototype as is. Just for testing purposes, I added some placeholder content and republished the prototype. See here for the completed sample.

There you go; you can now add a new buzzword to your eLearning vocabulary: BYOC – Build Your Own Course!

Edit Sept. 2016: Some folks have asked me for the source file of this project. I doubt that`ll be of much use because there are so many possible variations to implement a menu like that, but here you go.

For a while now, I have been trying to find time to explore GoogleDocs, forms and spreadsheets and how they could be used with Storyline. One obvious option is to embed a Google document into a Storyline web object. With that, you can either display content that is stored in your GoogleDrive or you can make a document (e.g. a form) available for users to edit/update. There is a great screenr available which shows how to do just that.

I was ore interested in another, less obvious option: I wanted to have Storyline variables populate fields in a Google spreadsheet. The idea is to pass Storyline variables into a JavaScript that in turn uses an Ajax call to connect to the spreadsheet and updates its columns. I found some basic info on this topic in an Articulate community thread, but it still required lots of fiddling and testing to:

• get the spreadsheet set up for sharing
• find the required form indentifiers that Google uses to access the access each column and adapt an Ajax routine to ‘talk’ to my spreadsheet.
• explore publishing options for the spreadsheet.

It’s not for the faint of heart, but once I got it to work it created whole new world of possibilities. For example, you could use a Google spreadsheet as a “poor man’s LMS” to keep track of scores and quiz results. Here some more advanced info on making API calls to Google spreadsheets.

My idea was to build a Storyline project that lets users select the two teams that will play in the final of the soccer world cup in Brasil next year. Once a user picks teams and selects the winner, they can also view the picks other users made before them. A spreadsheet is used to keep the picks for TeamA, TeamB and the Winner. When you keep the lightbox open that shows the ‘raw’ spreadsheet data, you can actually watch as other users submit their pick… pretty cool!

To display the results, I chose two options; one is a web report that is generated every time the spreadsheet is updated and the other is a view of the spreadsheet itself.

Note: I didn’t spent any time formatting the reports, I just wanted to figure out the technical issues behind the scenes. Also, ironically, neither the spreadsheet nor the web report were displayed in Storyline with Google Chrome. It worked fine in IE, Firefox and Safari. I might come back to this issue later and try to find an answer. All I wanted to do for now is to test out the general process of passing Storyline variables into a spreadsheet.

Here is what I cam up with. What was my pick you ask? Germany vs. Italy, with Germany winning this time!

There was a question in the Articulate E-Learning Heroes community recently, asking whether it is possible to build a ‘gallery-style’  interaction that lets a user navigate between images. We all know these image carousels from websites that allow you to click through product images, the latest headlines, etc. There are lots of ready-made Javascript libraries (here is just one of those components) and Flash components available that you could simply display in a webobject in Storyline. But what if you want to build such an interaction directly in Storyline?

Storyline’s animation capabilities are somewhat limited right now, with a handful of Entrance and Exit animations, e.g. Fade in/out, Spin, and FlyIn, as well as slide transitions available on the Animations tab. But even with these basic animation options, you can build slick interactions.

With an object,e.g. an image selected, you can specify the object’s transitions. For my one-slide, image slider interaction, I set up layers for each of the right-to-left and left-to-right transitions. Each layer contains two images; the one that ‘slides out’ and one that ‘slides in’. On the timeline, the two images slightly overlap, so that as one image slides out, the other one starts sliding in. Next/Previous buttons navigate between these layers.

Once the layers and triggers are set up, the end result looks something like this:

As expected, the transitions are not as fluid as you would be able to create with other tools, e.g. Flash, but with minimum effort you can create a nice interaction in your Storyline project. Ans since there is no Javscript or other ‘heavy lifting’ involved, this interaction also works in the Mobile Player app.  Here is a sample of the completed slider interaction. This basic image slider interaction can be expanded and modified as needed. For example:

• navigation buttons could be set up to only be displayed when the mouse is hovered over an image
• pagination items along the bottom could be made clickable
• images could automatically advance, until an image is clicked.

Options, options….

I recently had a request from a client to include a calendar in a Storyline project. The idea was to have leaners arbitrarily pick a date, which then would be used throughout the tutorial (e.g. the selected date would show up in forms, etc.). This course was being used for a relatively short time (until max. Dec.2014), of transition training to a new ERP system, so there was no need for me to create a perpetual calendar that would work ‘forever’. With this potential headache out of the way, I opted for a low-tech approach which included:

• JavaScript to bring the current date into Storyline
• one slide per month for the timeframe (Aug. 2013 – Dec.2014)
• for each day, have an indicator for today’s date and an indicator once a date is picked.
• a lightbox that was accessible from different slides within the course to pick a date.

Here is a link to the prototype I showed to the client (there might still be a few bugs in there, it was just a proof-of-concept). The real calendar that was used in the training module, had the look&feel of the ERP system’s calendar picker, but used the same logic.

And there you have it: JavaScript + variables, triggers + custom button states let you create a calendar that adds realism to your Storyline project! In case you do need a perpetual calendar, here is some info on the math required.

A client recently asked me to develop some ideas for a video player screen in Storyline. The requirements:

• Provide thumbnails of eight YouTube or Vimeo videos
• Learners should drag&drop thumbnails to watch a video
• Provide an indication which videos have been watched
• Only when all videos have been “touched” (not necessarily watched to the end) provide feedback and option to continue to the next topic

As a Proof-of-Concept, I set up a few options for the client to review. This version here was selected as the one to use for development.

Thanks to Storyline’s layers, triggers and variables, this Proof-of-Concept was developed in only a few hours and the entire logic sits on one screen (good luck trying this in Captivate!).

The thumbnails are arranged in two groups as a ‘filmstrip’.  A Freeform question type provided the drag&drop functionality. Once a thumbnail is dropped, the associated video is shown in a layer.

The source file can be downloaded here.

Edit 06/2018: It’s been almost five years since I created this player. I noticed the YouTube videos do not play anymore, because the embed codes have changed. To fix that I would have to update the file to SL360, revise the embed codes and republish.