Monthly Archives: January 2015

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.