Monthly Archives: July 2015

There was a question in the Articulate eLearning Heroes community the other day  that caught my eye. A user was asking for ideas to create an interactive stopwatch/timer interaction.

I had done timers and clocks before, but this one was slightly different because a user should be able set a time between 0 and 59 sec. and then start a countdown.

The solution was quite simple and didn’t require any new techniques…been there done that.

The red sec. indicator is an object with 59 custom states. The countdown clock is driven by a looping animation that subtracts a value. Based on that value the sec indicator is updated. The drag functionality to set the sec. is done by a transparent drag object. The community post didn’t provide specifics on how this timer was to be used, but this simple Storyline project can be extended as needed. For example, a lightboxed slide could be displayed when time is up.

This type of interaction would also make for a good exercise for intermediate Storyline users, who want to apply custom states, variables, triggers, sounds and more all in one project.

That’s it! There are still a couple of bugs I could have fixed, but as a quick example/prototype it was good enough.  Here is the finished example.

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

I was in California last week to conduct a training course. On my way to San Francisco airport, I passed by the Tesla car plant; that’s where the Model S electric cars are built. I had seen one of these awesome, fully electric (not a hybrid) sedans up close once. If I ever win the lottery, I’ll buy one for sure! After check-in, I had some time to kill and revisited the Tesla website. Turns out they will soon release a new model. The webpage that describes the upcoming Model X included a neat Javascript-based interaction that lets you open and close the car’s wing-like doors.

I thought this interaction could easily be replicated with a Storyline slider. Here is the result.  It was ridiculously simple to do, the most time-consuming part was saving the images from the site.

I added a slider with custom thumb, an image object with states and a bunch of triggers to switch image states as the slider variable changes. By the time they announced pre-boarding, my slider interaction was completed, tested and uploaded to my site! Now, if I could only make my carry-on bag  fit into this idiotic sizing thing 🙂

Edit 10/20/2015: I happened this SketchFab 3D model of the Tesla Model X today and did a qucik test to see how this woud look inside Storyline. Here is the testfile. I simply used the model`s embed code and added it to Storyline via the Video from Website function.

Edit 09/2016: Since several people asked for the Storyline source file, here it is.