How I Built this Working Abacus in Storyline 360 (ELC 124 - Skeuomorphism in E-Learning) / and ELC 367

I was looking for something to do while waiting for the next eLearning Challenge and decided to look at some challenges from before I got started.

I was intrigued by ELC 367- Using Hints to Guide and Challenge eLearning.  What is Skeuomorphism.  It is basically making your interaction look like something from the real world vs. flat icons.

I decided to build an Abacus.

Here is my example: https://360.articulate.com/review/content/a66dfd21-bfb9-4d9e-8036-e896961b483d/review

Emulating the real world

So how does someone create an abacus in Storyline that works and feels like a real world abacus?  Motion paths.

It starts with a board, a wire, and one bead.

I started by creating a board and a wire, and one bead in front of the wire.

We need a motion path to move bead one to the center bar, and back to where it started.

Here we can see the upward motion path.  We move it pretty quick (1/2 a second).

Here we can see the motion path down, the settings are the same as up, but we move relative to the start position by selecting that under options.

How do we know whether to move up or down?

So I wanted the bead to move whenever it was clicked.  If it was down, I wanted it to move up.  If it was up, I wanted it to move down.  How will I know where the bead is at any one time?  States.

I created two states for the bead, a 'normal' state, with the shadow on the bottom and and 'up' state with the shadow at the top.

Now we can create a trigger to move the bead whenever it is clicked either up or down based on the state of the bead, provided we change toggle the state each time a motion path animation completes.  We also take this opportunity to add or subtract 1 from the total based on whether the bead has moved up ("add") or down ("subtract").

Do it again, and again and again.

That is the basic pattern.  Now we can copy this bead and make adjustments based on newly created motion paths and values.

But wait . . . there's more!

This works great for bead one, but when I add bead two, I also want bead two to go down, if I click bead one.  And I want bead one to go up, if I click bead two.  So for beads one through five, I have to trigger the beads above or below the one clicked so that they move as well, based on the state of the beads.

Here you can see all of the triggers for when bead one is clicked.

Everything else is just math.

Want to learn more, download the Storyline file here.