Give me an inch…

Ok, I love using Articulate Storyline.  I only started using it recently and immediately realized that Storyline makes interactivity so much easier to build than other tools I had used (mostly Adobe Captivate – which does have its own virtues).

But, give me an inch and I want a mile of course.  There are some things that I wish Storyline could do that it just can’t.  For example, there is this cool zoom area feature.  It is a neat feature to have but is meant as a story telling aid, not an interactive element, and so is a little restrictive in the ways you can use it. The two restrictions that bug me the most are you have to zoom the entire slide (so any navigation or custom player elements are also zoomed) and you can’t trigger the zoom with a user click.  Also, you can’t use a zoom region on a layer.


The Articulate e-learning challenge this week was about interactive screenshots. So I took this as an opportunity to play around with the zoom region and figure out some work arounds that would make it a little more interactive.  I am currently working on a software demo that it would have been great to try this with, but since that isn’t something I am able to share I decided to use Google maps to play around.

Making it clickable

My first challenge was making zoom regions that could be triggered by the user.  I had thought about this in the past – actually, the very first moment I learned about the zoom feature – and had a vague idea of how to approach this.  I knew I would need a main slide that could be triggered to jump to new slides, each with an appropriate zoom region depending on where the learner clicked.

The structure ended up being 5 slides – a map with 4 clickable hot spots, each of which brings you to a slide representing one quadrant on the map.


Each new zoom slide was a direct copy of the initial map slide. In order to make sure the images were not (as) blurry, I actually created the large image from 4 separate images, one for each quadrant.

Getting the timing right

Playing around showed me that the zoom region has to come in after the start of the slide in order for the cool zooming effect to happen. If you start the zoom region at the beginning of a slide then the slide starts already at full zoom.

Once the zoom slide starts, it keeps rolling until the slide ends and zooms out.  So I used one of my new favorite tricks, a pause layer. It pauses the slide just before the zoom out starts and the user can click on the slide to zoom out and return to the larger map.


Zooming navigation features

You can see in the images above that I have a consistent navigational feature in the bottom right corner of each map.  This feature disappears (or gets really large) when the image is zoomed in.  In order to get around this I created a smaller version of the button that appears about the same size once zoomed in. It’s timeline starts once the zoom region is almost fully zoomed and ends when the zoom out starts.

It’s not a completely smooth transition, but it was a quick, easy, and functional solution.

Some lagniappe

That little navigation feature actually lets the user toggle between map view and satellite view. At first I tried to use layers to toggle, but the no zooming on a layer thing really threw me off.  Then I realized there was a much simpler solution – states!

Now, each quadrant image isn’t perfectly equal to the size of a zoom region.  They overlap a little.  In order to make sure I didn’t have to deal with changing the states of several images for each slide, for each click, I changed the state of just one image, Q2, since it is the top most image.  The “satellite” state for this image has the entire map – 4 images – in satellite view. The nav feature buttons also have a “map” state.

normal_state   sat_state

The states for the nav feature and the map switch with a “MapView” variable that is toggled each time the user clicks on the nav feature.  The MapView variable is also used to make sure that a slide is opened in satellite view if the variable is false. (Incidentally, this is the first time I realized that you can set a trigger to toggle a true false variable – I love it!)


And voila! Out came a simple interactive map of my hometown of Lafayette, LA
heart of Cajun country and the best place in the world.

Feel free to download the source file and leave any feedback or comments below.  I would love to hear about other awesome work arounds and ways folks have used the zoom region feature.


One comment

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s