How to Implement Object Zooming in Articulate Storyline Using JavaScript

Storyline Object Zooming with JavaScript
Storyline Object Zooming with JavaScript

Introduction

Zooming is an essential feature in e-learning courses as it enhances learner interaction and engagement by allowing them to focus on specific details. While Articulate Storyline includes a built-in zoom region feature, its capabilities are limited. The default feature only zooms the entire slide along the timeline and doesn’t allow users to zoom into specific objects using triggers.

To overcome this limitation, I have created a custom JavaScript library that enables precise zooming of specific objects on slides, triggered by user interactions. This article will guide you through the process of implementing this functionality in your Articulate Storyline project.

Preview of Zooming Functionality

Below is a snippet for previewing the zoom functionality:


Step-by-Step Guide to Implementing Object Zoom in Articulate Storyline

Step 1: Setting up a JavaScript Trigger on the Master Slide

  1. Open your Articulate Storyline project.
  2. Navigate to the Master Slide view.
  3. Add a JavaScript trigger when timeline start on slide:
    • Paste the following JavaScript code into the trigger window:

Step 2: Identifying Object Accessibility Name

    1. Go to the slide containing the object you wish to enable zoom for.
    2. Right-click on the object and select Accessibility.
    3. Note down the accessibility name of the object. This name will be used to identify the object in the JavaScript code.

    Step 3: Setting up JavaScript Trigger for Object Zoom

    1. Add a JavaScript trigger to the object for the “User clicks” event.
    2. Paste the following JavaScript code into the trigger window.
    3. Replace "Object_accessibility_name" with the actual accessibility name of your object.

    Additional Information

    • This zooming functionality also works on all touch devices.
    • Repeat Step 2 and Step 3 for each object you want to zoom.

    Video Tutorial

    For a step-by-step visual demonstration, watch the following video tutorial:

    Download Source file

    Share this article
    Shareable URL
    Leave a Reply

    Your email address will not be published. Required fields are marked *

    Read next