Spring is here so it’s time for a drop-down menu

Not only do you get to see some pretty pictures from my garden but you also get to see a nifty custom built drop-down menu in Storyline 360. What could be better!

Launch Presentation

Click on the picture to launch the demo.

How I did it 

I started by creating two variables in Storyline:  One is a boolean (True/False) variable called menu and the other is a numeric variable called menuToggle

Next, I turned off all the default tabs in the Storyline player and added my own custom tab called Toggle Menu – ok so that is the easy part.

I added some JavaScript to the tab that increments the value of menuToggle each time the tab is clicked.

Here is the code.

var player=GetPlayer();
var menuVal=player.GetVar(“menuToggle“);
menuVal++;
player.SetVar(“menuToggle“,menuVal);

That’s all for the custom tab.

Now on to the Slide Master

First I created a layer in the Slide Master that contains the toggle menu (the menu is just some rectangle shapes with hover states and triggers to jump to specific slides when clicked. I added Fly In enter and Fly Out exit animations to each of the topics.

To keep the menu from flying out before the user clicks, I used a Cue Point to pause the timeline until the user clicks one of the topics.

On the base slide of the Slide Master, I added a trigger to toggle the value of menu when the variable menuToggle changes.  If you’ve been paying attention you already know that the JavaScript on the custom tab causes menuToggle to change every time someone clicks the tab.

I then added a couple more triggers to the base Slide Master: one trigger to show the menu layer when the variable menu changes if the value of menu is equal to true and another trigger to resume the timeline on the menu layer (remember I  paused it using a cue point) when the variable menu changes if the value of menu is false.

Finally, I published and then crossed my fingers that it worked on all the different browsers and devices.  (It did test on IE 11, Edge, Chrome and Safari on the iPad and it seems good to go.)

 

 

Share
Continue Reading No Comments

Get Mobile with this Free Storyline Template

One thing that irks me about using mobile devices to view Storyline courses is that the keyboard on the device gets in my way whenever I have to enter data into a text or numeric input field.  More often than not the keyboard covers the input fields so that I can’t see what I am doing, and it is awkward moving back and forth between the keyboard and the course UI when there are multiple input fields on a screen. Instead of focusing on the learning I end up wrestling with the keyboard.

My solution to this problem was to build my own keyboard in Storyline. And this little demo is the fruit of my efforts.

How I did it

It is pretty easy to simulate a key press in Storyline by using a button or shape to show a specific number or letter when clicked, but there is no way to string these individual characters together to make meaningful words, sentences or paragraphs. To do this I created two text variables — one called “newNote” and one called “allNotes.” I placed “newNote” off the screen so the user never sees it.  Each time the user clicks a key, a trigger changes the value of  “newNote” to the character I assigned to the key. I then run some JavaScript code to get the value in “newNotes” and link (concatenate) it to the value in “allNotes” which is what the user sees on the screen.

In the case of the backspace key, the JavaScript removes the last character from the string (allNotes.length – 1). 

The JavaScript also does a little formatting which I won’t get into here.

For those of you who are interested in seeing how I set this up, you can download the Storyline 2 file here : keyboard

Share
Continue Reading No Comments