Category Archives: Articulate

eLearningChallenge#144 was all about designing interactions that move beyond the boring “Next” button. That reminded me of some experiments with advanced sliders I had done in SL1, long before slider elements were introduced in SL2. One of those experiments was a `radial slider` aka `a knob`, like you would it on a device. I always wanted to try if a knob like this can also be used for navigation between slides or layers within a slide.

For this experiment, I wanted to show a 3D model of a drone and a knob that when turned, rotates the model to a specific position and shows layers with additional information about new features. The 3D model is an image object with custom states that show the drone at different degrees of rotation.

The knob element is an image object as well. I use hotspots and transparent drag objects to display the various knob positions as a drag object is being dragged over the hotspots.

With a bunch of triggers I can not only make the knob appear to be rotating but also display layers with some placeholder text. Of course, I could have used additional slides instead of layers; however the concept would be the same.

Here is the end result of my experiment. Note: it may take a while to load.

The knob is a bit wobbly but I though it was good enough to illustrate the idea of using an alternative method to navigate between slides and/or layers. I also published for HTML5 and tested on a couple of devices, both with and without the Mobile Player app. HTML5 on a desktop worked reasonably well. On my iPad and Android device, the HTML5 performance was as expected…completely useless. If anyone has a tablet or phone and can test this project, please let me know how it worked for you.

Weekly eLearning Challenge #125 is about creating an interaction similar to a lottery scratch ticket. I didn’t have a whole lot of time to work on my entry over the weekend, but I thought I could expand on ‘Fun with Flags’ – a project I had started last year. The first iteration of this project was a randomized quiz about flags of European countries. Later, I added a memory game interaction and now reworked it into a scratch card-style component. There are six scratch areas revealing three sets of flags. Both the flags themselves and their positions are randomized for each shuffle.

The ‘scratch-off’ effect is done by image objects with custom states. As a drag object is moved over the image objects, custom states are displayed that reveal more and more of the flag underneath. The semi-transparent images for each custom state were created in Photoshop. Each scratch area has 10 custom states.

The real challenge was to figure out which flag is in what position and when a matching set has been scratched. That’s easy enough to do if there is a fixed set of items, but I wanted to randomize the flags and their positions. It took lots of triggers, variables and coffee, but here is a first version of the interaction. I could have added more game elements like a timer, score indicator or levels of difficulty. Also, I could have created a true scratch card game with all six items being random, but all I wanted was to verify the general logic for the randomization and scratch-off functionality.

‘Fun with Flags’ – the gift that keeps on giving!

A while ago I had created a ‘Fun with Flags’ interaction that used question banks for a geography quiz. For this week’s eLearning challenge#121 I thought I extend this interaction with a memory game. For this experiment I wanted to reuse the flag assets, but add two twists:

1. Randomly show three sets of flags, and
2. Randomize the position of each of the six flags

To meet the first requirement, I created image objects with custom states.

To randomize the position of each of the objects, I added six motion path animations, one for each possible position.

The interaction was done all in one slide, with a ton of triggers, no layers. To complete the randomization, I used a simple Javascript to create two random numbers which are then used in trigger to a.) trigger motion path animations to position the objects and b.) select the custom states. Yet more triggers are needed to figure out which object is positioned where, and if the last two clicked objects belong to the same set. With this setup I can generate hundreds of variations of flags in various positions. For my experiment, I only set up a grid of 3 sets of two flags each. Real-world memory games often have grids with a lot more object. I only wanted to work out the general concept and the basic randomization logic. Here is a first version of the memory game. From the main screen, select the red Begin button (lower left corner). As always, I stopped my experiment at ‘good enough’ and didn’t spend a whole lot of time on fine tuning, graphic design and troubleshooting. So, go ahead and shuffle the flags untill your arm falls off!

When I had first researched options for screen recordings on Android devices, all I could find were some rather clumsy tools to capture/record apps. More than 3 years later, I thought I take a second look and test the currently available options using my Samsung Galaxy S5 phone. For Samsung devices, their free SideSync tool seems to be the best option. This tool allows you to mirror the Android device’s screen to your PC desktop.

The tool provides options to either connect to the device via USB or Wi-Fi. The USB connection is supposed to be more responsive. In my test, I didn’t notice a significant difference between both options.

Once connected, you can easily record the mirrored device screen, using Storyline’s screen recording option.

Use the device as you normally would; tap on icons, scroll up/down, swipe, pinch to zoom, etc. All user actions are mirrored to the SideSync window which in turn is recorded in Storyline. Once the recording is complete, you can complete the ‘illusion’ by overlaying a bitmap of a phone with a transparent cutout for the screen.

Here is a simple test recording using SideSync and Storyline 2. For this test, I inserted the recording as a video on one slide.

I’m sure other Android device manufacturers offer tools similar to Samsung SideSync.

Edit 10/2018: I added a recording that uses SideSync and Adobe Captivate.

The weekly eLearning challenge #115 was about using Storyline sliders to create Parallax Effects. You may have seen this effect on modern websites where content is scrolled at slightly different rates. It just so happened that I had seen a cool website recently which used that effect. I was curious to find out if the basic layout and function of this website could be recreated with Storyline sliders, layers and triggers.

The Storyline setup was quite simple. Each element, e.g. clouds, airplane, aerial view background were all created as sliders with no track, and an image for the thumb fill.

At various points along the slider path, some content elements are displayed. I opted to use layers for these elements. The transitions in my example file are a bit rough, but it was ‘good enough’ to verify the concept.

The slider at the bottom of the screen ‘drives’ all the other elements. With a bit of math and triggers, I made the various sliders move at slightly different rates. For example, the plane moves much faster than the clouds; the clouds move slightly faster than the background landscape, etc. The layering of the various sliders also adds some depth, e.g. some of the clouds overlaps the airplane`s wings while others are moving below the plane. Also, the shadows of the clouds add some perspective and the illusion of distance between elements.

The whole interaction was done in one slide, except for the lightboxed video. That’s about it, there was nothing in the Storyline logic that I hadn’t done before, but it was nice to confirm yet another application for sliders.

See here for the finished Storyline example. Just for the heck of it, I also did a self-running, looping version, see this version here. The movement is a bit jerky, but it does work and only required a few additional triggers. Set this version to fullscreen, remve the player frame and you have yourself a neat kiosk-style presentation.

Not too shabby, considering I hacked both versions together in an afternoon!

I was working on a project recently, where the storyboard asked for a ‘get your brain in gear’ animation, something similar  to this…

The gears didn’t have to be mechanically accurate, just good enough to convey the idea. My first thought was to create a video, but then I remembered having answered a related question in the eLearning Heroes community. So, how do you spin objects in Storyline around one axis? You can’t motion paths, because the object would simply travel, along the path (even if it is circular) but would not rotate.

There are two other options:

1. Create custom states for an object, with the object slightly turned in each state and then use triggers to switch between states.

2. Use a Spin Entry Animation and continuously hide/show the object so that the entry animation repeats.

Before committing to the client, I wanted to test out option #2 and set up my Storyline project like this:

Each Wheel is a .png with transparent background (For this test, I didn’t bother cleaning the edges of the bitmaps).

Each Wheel has a Quarter Spin Entrance animation, which depending on the wheel’s position of the chain either spins it clock wise or counterclock wise. So far so good. The problem is that this setup would only spin each wheel once.

So, I added an offstage object (rectangle) with a looped motion path. whenever the loop is complete, each wheel’s state is set to Hidden and immediately changed back to Normal. This way, the entrance animation is played again, adding another quarter spin, and another…

It only took a few triggers to make that work. Wit the problem solved I wanted to try one more thing: have the animation start and stop based on a button click.

Here is the end result of the my quick test.

This technique can be applied to any object and provides an easy way to add rotation to Storyline projects.

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

Edit 04/2017: I noticed that in SL360’s HTML5 output, the spin animations I used show some weird behaviour. The rotation will speed up uncontrollably. It’s actually cool to look at, but this bug makes the method I described unusable for HTML5 output.

Edit 06/2018: The issue with HTML5 output I had mentioned previously is now fixed in SL360. See here a republished file. The animation is still a bit jerky, but at least the spin doesn’t go into overdrive anymore.

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.