Forum Discussion
Storyline 360 Advanced JavaScript API
Back in March we released the Advanced JavaScript API for Storyline 360 🎉
What you may not know is that this project actually started as part an internal engineering "hackathon". Once a quarter our engineers have the option to spend a few days exploring ideas that excite them. Some of those projects never see the light of day, but every so often something promising emerges. The Advanced JavaScript API was one of those ideas.
The goal was to give authors more control and flexibility when they bump up against the edges of what is possible with Storyline’s built-in features. We wanted to create a path for deeper customization, more sophisticated interactivity, and experimentation.
Now that it has been out in the world for a few months, I would love to hear from you:
- Have you used the API to unlock something you could not build before?
- Have you experimented with “vibe coding” JavaScript for triggers using the API? If so, what tools or models helped you along the way?
- Where could the API itself improve, and how might we bring more of that “vibe coding” experience directly into Storyline?
For me, the most rewarding part of projects like this is seeing how creative the community can be with them. If you have tried the new JavaScript API, even if you only got partway to what you wanted, I would love to hear about your experience. Your stories and feedback help us figure out where to take things next!
4 Replies
I've been very interested in the potential of JavaScript for a while and was very happy to learn of the JavaScript API. A lot could already be accomplished with only the setVar() and getVar() methods but the recent enhancements, in particular the object IDs, allow for granular control of the elements on the screen.
Possibilities have always existed with animation paths, but now that the update() loop is open and code can more precisely manipulate objects, player-controlled animation can be even smoother. I'd hoped to come back to a platformer I've been working on, but it hit a snag (this was my first attempt at creating a very simple collision engine) so I'll gladly put it to rest here. (WASD/arrows to move.)
Were it finished, touching the secret door would teleport you to an end-game/congrats slide, so please imagine. ✨
I did leverage LLMs for some of this, especially for some high-level debugging, and it was great at explaining best practices like "jump buffers." LLMs have limits with extended conversations though so it was less useful the larger the scope or broader the question.
I think the API is really great already. I think there's already a wealth to explore with all of the objects and methods that've been exposed. I've only seen line shapes have a single x and y coordinate, so I wonder if there a dynamic line(x1,y1,x2,y2) might be possible?
Off the top of my head, that could allow a state-machine dog to wander around a screen with a dynamic "leash"/(line segment) with one end immobile at a "post" in the center and the other end following around the dog's position, giving the illusion of the dog on an elastic leash.
Outside of the API itself, I do still think the Execute JavaScript window is a significant bottleneck to me. I don't expect it makes sense for Art to spend too much time and energy upgrading it since so many external utilities exist, so I wonder then if the ability to add CDN links would be easier? A new menu button provides an input field to paste CDN links into, which maybe are retrieved for development purposes (e.g., verifying the available methods), and then maybe the course inserts them in the <head> tag for me when the story.html is published?
I have a lot of love for VSC so if there's a way I can easily create and import .js files into projects, or maybe open SL's Execute triggers in an external editor, that'd be amazing and would avoid anyone spending time reinventing intelli-sense. I've had luck pasting minified code into base-level triggers on a master slide so it can be called on every instance of that template slide, but not reliably enough to use it for anything more than experimentation.
Head-in-the-clouds selfish request? A stronger JavaScript audio API. I won't pretend to know what it would take to incorporate something like Howler.js, but the player now freely offering the positions and dimensions and depth of objects on the canvas could marry very well with spatial audio.
AndrewBlemings- thank you for the detailed feedback! I agree that the experience of using the trigger dialog for authoring and editing JavaScript is far from ideal; I've been thinking about some ways to improve it.
While I don't use many features of the API, I have grown to appreciate using it to identify slide objects and for doing simple translations/transforms that don't break when the slide is resized. This is much simpler than before.
A couple of things I would like to see:
- Provide an explicit property in object() that references the DOM element associated with the data-model-id (unless I'm missing it). While it's straightforward to get the reference, it is a lot of extra typing to use that tag to identify each of the elements. And, sometimes you just need the DOM element.
- It would be handy for object() provide some standard properties/methods the could facilitate working with the SVG structures ubiquitous to most Storyline slide objects. In particular, something that would make it easier to add or manipulate SVG filters and masks, and possible simplify accessing/manipulating path data for shapes. Having entries in object() that separated background and foreground elements would be nice too. Deconstructing SVG DOM structures after the fact and inserting modifications can look quite nice, but can also be quite a hassle.
I realize number 2 is quite niche and a significant effort, but just throwing it out there in case a bored engineer needs a side hobby.
Thanks for the feedback, Nathan_Hilliard ! I wouldn't say any of our engineers are "bored", but they do like a good side quest 😉.
