📢 Our next Live Stream Event is taking place on May 2, 2025

Create Click And Drag X-Ray Effect Experiences In Articulate Storyline 360

Learn how to create extraordinary interactive experiences using Articulate Storyline 360 with some additional JavaScript coding knowledge!

We’re delighted to bring you this new advanced-level skills tutorial course for Articulate Storyline 360 eLearning developers!

At Discover eLearning, we love exploring all of the things that are possible to create using Storyline when we combine additional JavaScript coding and frameworks. This technique uses the classic Scrolling Panel object in Storyline and takes it to a whole new level!

The technique which you will learn step-by-step during this course can be applied to so many different creative ideas, and we have several which we will guide you through from start to end including our fantastic Easter special which you can check out for yourself right here!

Explore Samples From The Course

Core Objectives

Use JavaScript To Expand The Creative Possibilities Using The Design Tools Available In Articulate Storyline

While Articulate Storyline offers powerful visual and interactive tools out of the box, combining them with JavaScript opens the door to a whole new level of creative freedom. In this course, you’ll learn how to use JavaScript to build a unique X-ray window effect — something that would be otherwise impossible using Storyline’s standard features alone. You’ll see how simple snippets of code can be used to enhance interactivity, improve learner engagement, and add polish to your course designs.

Learn Through Practice As We Guide You Through Creating A Number Of Engaging Real World Projects During The Course

This is a hands-on course where you’ll follow step-by-step instructions to build interactive experiences that mirror practical use cases. From simulating a realistic X-ray drag-and-reveal interaction to combining layered visuals with dynamic behaviours, you’ll gain valuable experience applying what you’ve learned in meaningful ways. Each project is carefully designed to reinforce key techniques, helping you build confidence as you progress through the course.

Discover How We Can Optimise Our Code In Order To Deliver A Great Experience On Both Desktop And Mobile Devices

Creating innovative effects is only part of the challenge — ensuring they perform reliably across devices is just as important. In this course, we’ll look at how to write and structure our JavaScript code for efficiency, responsiveness, and compatibility. You’ll gain a better understanding of how to test and adapt your interactions so they work just as smoothly on mobile as they do on desktop, giving every learner the best possible experience.

Full Course Contents

Understanding The Technique

  • Course Prerequisites (2:30mins)
  • A Non-Technical Explanation of the X-Ray Effect (1:50mins)
  • Creating The Effect With The Help Of JavaScript (1:30mins)
  • Building Our Working Demo Project in Storyline (1:15mins)
  • Writing our JavaScript Code Part 1 (9:30mins)
  • Writing our JavaScript Code Part 2 (5:00mins)
  • Working With Mobile Devices (4:00mins)

Let’s Build This Project! – Vet X-Ray Scanner Game

  • Introducing the Easter Bunny X-Ray Activity (1:30mins)
  • Exploring The Project In Storyline (2:45mins)
  • Triggering Events Based On X-Ray Window Movement (4:50mins)
  • Creating an Entrance Animation for our X-Ray Window (2:45mins)

Let’s Build This Project! – What Lives On Your Skin Magnifier Activity

  • Exploring The Project In Storyline (1:45mins)
  • Creating The Introductory Animation Sequence (5:45mins)
  • Setting Up Our ‘Magnifier’ Scrolling Panel Window (6:45mins)
  • Creating Our Collision Trigger Points For Each Rollover Hotspot (4:15mins)
  • Create Pulsing Star Guide Markers (3:00mins)
  • Setting Up An Instructions Layer (3:30mins)
  • Adding Further Accessibility Options To Our Project (5:30mins)
  • Final Word and Sign Off (1:00mins)
Click Here to Purchase this Course
£19.99

Schedule a meeting

Why not book a consultation call with us? We’re here to assist you with any questions or concerns you may have.

Please note: All bookings are subject to confirmation. We reserve the right to reschedule based on availability.