Develop Your JavaScript Skills By Learning How To Create This Cool Effect in Articulate Storyline!
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!
What Am I Going To Learn During This Course?
Use JavaScript To Expand The Creative Possibilities Using The Design Tools Available In Articulate Storyline
Learn Through Practice As We Guide You Through Creating A Number Of Engaging Real World Projects During The Course
Discover How We Can Optimise Our Code In Order To Deliver A Great Experience On Both Desktop And Mobile Devices
Full Course Contents
Lesson One – Understanding The Technique
- 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)
Lesson Two – 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)
Lesson Three – 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 (03:00mins)
- Setting Up An Instructions Layer (3:30mins)
- Adding Further Accessibility Options To Our Project (5:30mins)
- Summary (1:00mins)
Frequently Asked Questions
If your question isn’t answered below, feel free to get in touch with us.
What version of Articulate Storyline will I need to follow along with the course?
We will be building our project files during this course using Articulate Storyline 360, but version 3 should work absolutely fine also.
Does it matter that I don't know anything about JavaScript?
Not at all! The purpose of the course is to teach you how to use the JavaScript language to create amazing user experiences in Articulate Storyline. We will be explaining each section of code as we go, and by the end of the course you will have developed a good understanding of how each section of code works.
Can I use my Mac to follow along with this course?
Yes you can! We’ll be recording on a Windows PC, but if you use a Mac (e.g. with a virtual machine application installed in order to run Articulate Storyline) then you can still follow along with this course.
Do you provide the project files to work with during this course?
Yes, for each lesson there is a starter project file which you can use to follow along with the practical steps taught during this course.
This Complete Online Course Can Be Accessed With One Single Purchase:
Get instant access to over 1 hour of specialist training on advanced development techniques in Articulate Storyline 360. Perfect for all eLearning developers and instructional designers.
Get More From Discover eLearning
Expand your skillset as an eLearning Developer, or hire Discover eLearning to work with you on your next development project.