Monthly Archives: June 2014

Need to display a user’s location on a Google Map inside Storyline? This will be my shortest blog post ever, because it is so simple to do 🙂

1. Create a simple HTML page and insert a code snippet from JQueryMobile that displays both latitude/longitude values of your current location and drops a pin onto a Google map.
2. Add a web object to your Storyline project and link it to the HTML page
3. Publish your project
4. Go for coffee and later tell your boss that you slaved on this ‘map thing’ all day.

Once published, you can view info on your current location as either longitude/latitude values or see your location indicated as a pin on a map.

You can even toggle the map between default map and satellite views.

For my test, I just grabbed a sample script and used it as is. With a bit of HTML editing, you can style the look&feel of the map as required.

I haven’t tried this yet, but I’m sure it is possible to pass the longitude/latitude values into Storyline variables and show different content based on the user’s location. Imagine a New Employee Orientation course that shows information only relevant to a learner’s location at one of the company’s branch offices. The possibilities are endless!

To learn more about JQueryMobile, check out their demos.

A while ago I had created an interactive screen demo that used a slider to zoom in/out of a map image. I got a question from a Storyline user who, in addition to ‘sliding’ an image, also wanted to simulate a typical Windows scroll bar, with Up/Down buttons to move the window content. Using a Storyline scrolling panel didn’t work in this case, because the user wanted it to look like standard Windows scrollbar. And to add to the challenge, the user wanted to:

• simulate clicking anywhere in the scroll area should jump to the corresponding position in the window
• scroll a very long image (3800 pixels high)

So I thought I’d do a basic example, showing how to ‘fake’ a scrolling window; all in one slide. Starting on the slide’s baselayer, I added a custom button that when clicked shows a layer.

On the layer, I started with the frame for the scrolling window, using an image with a transparent area, that shows the image underneath. The Up and Down buttons on the scrollbar are custom buttons that change a variable. Based on the value of this variable, the state of both the scroll indicator and the image is changed. Since the image was very tall and Storyline only allows images up to 2048*2048 pixels (see here for info), I had to tile the image and use triggers to display the correct tile and its correct state, based on the ScrollCount variable.

Finally, I added transparent shapes that allow user to click anywhere in the scroll bar area to jump to a portion of the report image.

The completed sample file is here.

This “fake” scrolling functionality adds a lot more realism to a software simulation and is well worth the additional development effort. Storyline to the rescue (again)!