Category Archives: Storyline 1 & 2

The weekly eLearning Challenge #80 was about science-related examples. I knew I wouldn’t have time to come up with a project of my own, but one of the resources caught my eye. I thought it would be fun to try and redevelop this Flash-based example in Storyline. It turned out that fellow Articulate SuperHero Paul Alders had the same idea. So we teamed up in a Dutch-Canadian development project; Paul provided great graphics and gif animations and I did the trigger setup.

The Storyline setup was quite simple, nothing that I hadn’t done before. One slider ‘drives’ a number of other sliders and also triggers state changes for a rotating object.

Since I didn’t have the Flash source file, I had to eyeball the placement of elements and take a guess on the math behind the way these slider proportionally move. I could have spent more time optimizing triggers, organizing and labelling objects on the timeline, fine-tuning some animations and state changes, etc. but even this ‘quick-and-dirty’ attempt turned out pretty good, see here for a published example.

For the past few weeks, I have been experimenting with Google Earth and Google Maps. The Google Maps API provides powerful functions to display maps, customize their appearance and overlay info, based on a user’s location. There are all kinds of options to customize maps with pins, popup windows, zoom settings, etc. Here are some examples and tutorials on how to use Google Maps with JavaScript. Recently, I went on a business trip from Toronto, Ontario to Kelowna, BC via Vancouver, BC and thought this would be the perfect opportunity to test how to use locations-based info in a Storyline project.

The idea was to create a simple Storyline project that:

• uses a Google Maps API call to retrieve the current longitude and latitude parameters within a defined radius
• passes these values into Storyline variables
• displays location-aware information for three locations (the three airports I passed through on my way back from Kelowna)

Since the Articulate Mobile Player app does not support JavaScript, the only option was to run Storyline HTML5 content in a browser window on my phone. To get rid off the browser’s address bar and give the Storyline content a true app-like appearance, I used PhoneGap Build to create an Android app. See here for some info on the process.

For the location-specific content, I just displayed a webobject of each airport’s website. However, this content could be anything. Imagine a technical tutorial that field support engineers use to automatically display the site-specific network configuration as they travel from one data center to another. Location-awareness could also be used to display French-language content for employees at a company’s Paris office, while learners at the London location see English content. In my experiment I enabled a button that users can tap to display location-aware content. Another option would be to make the location selection completely transparent to the user… the opportunities are endless!

“Here is a recording of the app, as I travelled from my starting location in Kelowna, BC with a stopover in Vancouver, BC to the final destination (Toronto).

For the screen recording, I used Samsung’s SideSync app that allowed me to mirror my phone’s screen to my laptop and then record that.

I still have a lot to learn about Google Maps API calls, but my little experiment confirmed that Javascript and location data can be used to ‘serve’ relevant Storyline content, based on a learner’s location. Here are some basic tutorials that get you started with Google Maps.

This week’s challenge in the Articulate eLearning Heroes Community is about teaching math concepts. That reminded me of the very first slider project I created during Storyline 2 beta testing. The point of this project was to learn about some of the new features in SL2; especially sliders, triggers to control the player buttons and motion path animations.

The idea was simple: recreate a basic ‘slide rule’, the gadget I used to do math with long before electronic calculators appeared. If you are too young to know what I mean, you can read up on slide rules here. I used a slide rule (the German word for it is ‘Rechenschieber’ :-)) in high school all the way up to university. They were essential for more complex math, and also worked nicely for sword fights during recess! I actually still have one.

When I first heard about the new slider feature in Storyline, I thought this would be a good test case. A slide rule has two moving parts, a sliding scale and a cursor/crosshair. Depending on the math operation that needs to be performed, e.g. getting the square root of some number or calculating a sinus value, you move one or both of these sliding parts.

Although I only had rather poor-quality scans, it wasn’t that difficult to recreate a basic slide rule that was accurate enough to illustrate how to use this gadget.

I later created lots of more ambitious slider projects, but this first attempt is not too shabby either! I toyed with the idea of adding a few more complex examples, but I had learned enough about sliders to leave it as is. It took me a while to dig up the old test file…

See here the published Storyline project.

This is my last blog post about Storyline sliders…ever…I promise! Since sliders were introduced in Storyline 2, I have used them to slide/move all sorts of things, from 3D models, large images, to videos. I feel like I covered this topic end-to-end, and then some.

Someone had sent me a link to an article this morning with ‘before & after images’ of the Berlin Wall. He asked if these types of sliders could be done with Storyline and, if yes, how difficult it would be to implement. “Of course this can be done”, I replied. Then I made myself a coffee and set out to recreate one of the sliders shown in the article. It couldn’t have been simpler. One of the images is simply the thumb of a slider that sits on top of the other image. Finito, done, stick a fork in it.

No triggers, no layers, no variable gymnastics… nothing. Just a single slide with an image and a slider with a transparent track and an image as the thumb. The hardest part was to extract the images from the article’s URL and to create the transparent drag handle for the slider.

Here is my first attempt.

I purposely switched the order of my images, just to prove that I’m not cheating by simply showing the original slider in a web object. My slider doesn’t exactly mimic the online version in that it moves the top image rather than revealing/hiding it as the slider is moved. But I proved my point and stuck to the ‘one-coffee’ time limit! I even had time to do a second, slightly different version.

Besides the fun factor and nice visual effect, this type of slider could be useful in training as well. Imagine a course about a digital camera with all kinds of filter settings. A slider could be used to show a picture with and without specific filters applied.

Edit 09/24/2015: For weekly eLearning Challenge #100, I stuck with the ‘Berlin Wall’ theme and just put a slightly different spin on it. I had seen a nice interactive map in an online newspaper and thought it would be easy enough to recreate. Nothing fancy here, just an image object with two states that is part of a group. The group is moved up/down/left/right with simple motion path animations and a bit of math.

Edit 09/29/2015: I went back and redid my original Before&After slider. I never really liked how my first two attempts had turned out, so here is a third version with an effect that (I think) is much closer to a Javascript/CSS-based slider. Instead of MOVING the Before image, it now REVEALS it, based on the slider position. Here is the .story file for download.

Edit 10/01/2015: And finally, here is a German version of the same slider. Here is the .story file for download.

I was looking for flight simulator information the other day and happened to see a great image showing the cockpit of an Airbus 350. The image was huge, 5617*3744 pixels. That made me wonder how an image of that size could be presented in a Storyline project, without loosing detail. My first thought was to use a Zoom region, but that would not allow to manually zoom in on a specific region of the picture. So, I wanted to see if I could find an easy way to both zoom AND pan a large picture.

It didn’t take very long to come up with one possible solution:

First, I had to tile the image into smaller segments (Storyline can handle images up to 2047*2047) and then size them correctly to create different zoom levels that show more and more detail. While each zoom level is on its own layer, they all re-use the same image tiles which cuts down on the file size. The entire interaction is contained in a single slide. The only challenge here was to figure out the dimensions and positions of the image tiles on each layer…nothing that couldn’t be handled with a bit of math!

For the Panning effect, I added motion path animations for the horizontal and vertical panning.

These animations are triggered by clicking simple navigation buttons. Variables and additional triggers with conditions are used to enable/disable the buttons once the panning reaches the edges of the image.

This type of zoom and/or panning could be used in Storyline projects to view large maps, detailed pictures, complex schematics, org charts  and much more.

Here is a test file I built with 8 zoom steps, from an overall view of the cockpit all the way up to a very detailed view of every switch, knob and dial. Note that the zooming doesn’t impact the image quality at all. The panning effect is only enabled on the lowest and highest zoom level. The panning steps on the lowest zoom level are fairly small, while at the top level (showing the fullsize image), each panning step moves  the image a significant distance.

I could have spend more time to finetune the positions and dimensions of the motion paths to make them completely symmetrical, but who has the time 🙂

The other day, I had played around with looped motion paths animations on a panorama image. It occurred to me that I could use a similar technique to create loops to continuously count or make something blink on the screen WHILE OTHER ACTIONS HAPPEN, e.g. a video or audio file plays. Until now, I had always used layers to ‘loop’ from the baselayer to a layer (then ‘do something’ on the layer, e.g. increase a variable) and then return to the baselayer and start over again.

Here is my ‘new-and-improved’ way to loop…well, anything! on the same slide without the use of layer gymnastics:

1. Insert a simple shape and put it offstage. This should be familiar to anyone with Storyline 1 experience, when we had to use offstage objects to trigger something on the timeline. In Storyline 2, you can now use triggers for that, but the concept is still valid and can be applied to creating loops.

2. Add a motion path animation to the shape and specific the time. For example, if you want to create a clock, set the animation speed to 1 second to create a counter for the seconds.

3. Add ‘When Animation xyz completes’ trigger to continuously execute the animation.

4. Add trigger that executes whenever the animation completes to change the state of an object (e.g. to create a blinking effect), change a variable, or whatever else you need.

This technique simplifies the process of building timers, looping animations and much more. This could be used for device simulations (for example to simulate blinking LEDs), timed, cyclical interactions…the possibilities are endless. For example, you could make the Next button on the Player Bar flash. I still remember how tricky it was to build these clock examples in Storyline 1. Goodbye layers and Flash objects to create loops. Hello, offstage motion paths animations!

Here are a couple of examples.

Edit 10/2016: Here is the .story file for download.

Today I did another ‘coffee break experiment’: How to display and move very wide panorama images in Storyline. I found a huge image (14200*2122) of Alcatraz that I wanted to add to a Storyline project. The first hurdle was to resize and tile the image (Storyline can only handle images with max. 2048*2048). I ended up with three tiles, totalling 5139*768.

I wanted to try two variations; 1. Move the image back and forth automatically and 2. use buttons to move the image interactively.

The first option was very simple to implement. I simply added two linear motion path animations and added a few triggers so that the animations loop perpetually.

This type of self-running animation could be used as a screen saver in a kiosk-style application.

The interactive variation was a bit more challenging, because I wanted the image to be moved as long as the mouse is HOVERED (not CLICKED) over either navigation button. I also wanted the nav buttons to disable once they hit the left and right edge of the image.

But with a few more triggers and a counter variable that counts up/down to disable and enable the buttons at the right time, this variation worked too.

And with that my coffee break was over, back to work!

Here is the published Experiment.

Edit 10/2016: Here is the .story file for download.

When Storyline 2 first came out, I had built a few slider interactions to test this new feature. I had also looked into using Storyline sliders to create ‘Before-and-After’ sliders like the ones you sometimes see on websites. Here are just a few examples of HTML/CSS-based sliders. I never got around to building these types of sliders and frankly it seemed too easy to build in Storyline.

This morning I was looking for something on Vimeo and happen to come across this neat ‘Now-and-Then’ video of Alkmaar, a town in the Netherlands. The video shows a side-by-side comparison of the what the town looked like in 1914 and 2014. I wondered if I could use Storyline to create a ‘Before-and-After’-type slider, BUT WITH A VIDEO.

I started by recording the video and then edit it into two separate clips, one for the 1914 section and the other for the 2014 portion. I then imported the two clips into Storyline.

The challenge was to use a slider to seemingly drag the 1914 video over the 2014 video while both videos are playing.

I added two motion path animations to the 1914 video and set up triggers that play either animation based on the slider value.

Storyline’s current motion path animations do not allow for precise control, so I used some temporary lines to help me line them up and keep them straight. I did get it to work although the movement is a bit jerky. And if you move the slider rapidly back and forth, the animation just can’t keep up and breaks. Nevertheless, I learned enough from this little experiment to leave it as is. There are probably ways to improve this interaction, but sometimes ‘good enough’ is all I need! See here how it turned out.

Not bad, considering I did this during my morning coffee break!

Edit 02/2017: Here is the .story file for download (Note: It’s 61MB).

I got an enquiry the other day about Storyline Question Banks and it occurred to me that I had never really used a large set of randomized questions in a project. As a test case, I decided to create a bank of questions about flags, an idea I got from the Big Bang Theory (one of the few tv shows I actually watch).

I didn’t want to spend much time on layout and design, so I decided to reuses a neat template created by Articulate Community Manager David Anderson. You can get info about this template here and download it here.

I adapted template slightly to work for my example. For one thing, I added a question bank that randomly displays a set of quiz questions, including True/False, Multiple Choice and Drag-and-Drop questions.

I also added a simple logic that allowed me to specify the number of questions that should be included in any given set. To make this work, I set the Question bank properties to include all questions (not just a fixed subset).

Then on the master slide, I added two triggers, one that counts up a pagecounter. Another trigger ‘breaks’ out of the question bank and jumps directly to the results slide when the pagecounter equals the specified number of questions. That also required some rework on the Results slide to account for the variable number of questions that contribute to the score.

Here is the finished example. Have fun with flags, you may learn something new!

Edit Sept.2016: I was just doing some housekeeping on my blog, re-read this post and thought someone might be interested in the .story file for this little project. Here it is for download.

Edit Mar.2019: For Articulate’s weekly eLearning challenge #224, I updated the old SL2 file to Storyline 360, and added a progress indicator. That doesn’t sound like much of a challenge, but there were some considerations. First, the number of questions included in the quiz was variable and therefore the progress indicator needed to reflect that. Also, I wanted to indicate how if a question was answered correctly or not. The issue was that I used a question bank to randomly draw from and had to map the current (random) question to the current question indicator. See the published example here.

In addition to developing eLearning projects for various clients, I occasionally conduct training courses and workshops for Storyline. One of my clients asked me to run a 1-day workshop that, after a brief overview of Storyline 2’s new features, focused on the type of eLearning courses they build most often: Software simulations for their ERP system. In the initial discussion about which topics should be covered in the workshop, the client also mentioned they have doubts Storyline 2 could be used to build complex software simulations that go way beyond the usual, linear Step-by-Step demoes and exercises.

So I thought I’d start the session by showing off the new Storyline 2 UI, including the various tabs and some selected new features. At the end of this demo, I casually mentioned that “Oh and by the way, what I just showed you was NOT the actual Storyline application, but a SIMULATION of the application”. That got everyone’s attention and right from the beginning removed any doubts that Storyline can be used to develop complex simulations.

Here is an early version of the simulation that I used to work out the overall navigation scheme and confirm the setup for tabbed navigation, disabling/enabling menu items, slide view, story view, preview, etc.

The various tabs, and tab-specific triggers are all set up on layers of the master slide. There are two master slides; one for story view/slide view and the other for the Preview slides.

This initial version was really only my first attempt and is still a bit buggy, but it already lets you:

1. Select SimFileToRecord from the opening screen (also, all the tutorial links on this screen are enabled)
2. Navigate between slides in StoryView
3. Double-click on a slide thumbnail to go to SlideView
4. Browse all tabs on the main toolbar
5. Select/unselect objects on a slide and view the object-specific Format tab
6. With slide 1.2 selected, go to Insert> Video > Video from File and select video_1
7. In the VideoTools tab, select Video Controls (either select None or Below Video)
8. Select Preview (either This Slide, This Scene or Entire Project). Preview can be selected from any tab.
9. Navigate through slides in Preview
10. Close Preview
11. To restart (in case you get stuck), press q on your keyboard.

There are some neat little details already in this version. For example, if an object on a slide is selected, the object is highlighted in the timeline. In Preview, the video on slide 1.2 actually plays and shows controls based on the selection. On slide 1.3, the slider works. And once a video is added to slide 1.2, the slide’s thumbnail is updated to show the video with or without playback controls. In the completed simulation, all menu items on the Insert tab were functional. In the classroom, I ran this final version in Fullscreen mode on a 1024*768 projector. It completely filled the screen and looked like the real software. This type of simulation can be adapted to provide feedback for guided exercises, used as a demo/”ice breaker” tool (like I did during the workshop) or turned into scoreable ‘hands-on’ tests.

Software simulations – yet another great way to use Storyline! 

Edit 06/2018: To just tie similar posts together, here is another post about software simulations. This sim was done in Storyline 360.