Forum Discussion
Early Access for the Advanced JavaScript API
Storyline's current JavaScript API is, well, pretty lacking to put it politely. All you can really do with it is manipulate project variables. We've gotten lots of feedback that authors want to be able to do more with JavaScript in their courses, particularly the ability to reference and manipulate slide objects. Many authors resort to unsupported workarounds to accomplish what they want.
The new Advanced JavaScript API will allow authors to obtain references to their slide objects programmatically and manipulate various properties such as x/y position, rotation, scale, opacity, and depth / z-index. Additionally the new API exposes functions for obtaining mouse pointer position, and running code in the continuous animation loop that powers all course playback. These properties and functions unlock a whole new world of possibilities to create modern and immersive courses in Storyline 360. Our engineers have been having a lot of fun over the past couple of weeks testing and validating the new API internally. I put together a few quick examples of what's possible with this new API in this sample project: Review Link
The first slide demonstrates the ability to make the arrow shape point in the direction of the mouse cursor. The second binds the rotation of the smiley face to the value of the slider variable. The third demonstrates usage of the native JavaScript animate function to translate the position of the rectangle and apply a blur effect. These are three fairly simple examples of what's possible with this new API; we're excited to see what our incredibly talented and creative customers will be able to create with it.
We have had this Advanced JavaScript API on our public roadmap for awhile now, and I'm excited to announce that we're nearly ready to invite some customers into an Early Access program to evaluate and provide feedback. If you're interested in being one of the first customers to experience this API let us know by filling out this interest form: Advanced JavaScript Early Access.
We'll be reaching out to interested customers over the next couple of weeks to invite them to the Early Access program once it's ready.
18 Replies
Great news.
Looks fun.
A few things i would love to test, as is this looks promising.
How GSAP is integrated and if it works as good as before ?
If any of GSAP's extra plugins are added ?
Can we add 3rd party Javascript libraries and how ?
Is it possible to make components with the API for non-JS-fluent users to use/reuse ?
Kind regards,
MathI'm delighted a JS API for Storyline is finally happening. Honestly just the ability to define a unique immutable ID for slide elements instead of relying on data-acc-text is something we've all wanted for YEARS!
Can you confirm though JesseTaber if the API generated ID will assign itself to the containing div of the element, the same way the Accessibility Text value does, and not at the path/svg level for example? (Hoping to not have to refactor a lot of code if I want to convert existing projects to use the JS API.)
Also, I like the examples in the demo, but I'm confused about why the mouse location tracking also covers the player area? If I were wanting to use the coordinates this offers to design an animation for example then it would be more useful to have 0,0 be defined as the top-left point of the slide?
Appreciate it's still early days though and I'm excited for what's to come.ChrisHodgson To answer your questions, 0,0 is the top left of the slide - but the mouse location can go into negative values (maybe that is what you're seeing?).
We don't directly expose a dom element (div svg etc) - instead we have a proxy that normalizes things. This will enable us to change the internal html structure of an object while keeping old API code intact. From what you are describing I don't expect you'd need to change much to update your old code. You should definitely sign up for Early Access if you haven't already. We're eager for customer feedback to help us finalize key aspects of the api.
Chris pointed out some very valid points. Another point i want to emphasize is the way Articulate updated Storyline in the past and the changes made in structure of HMTL that often result in custom Javascript solutions not working anymore. I do hope now there will be a Javascript API that when using the API any future changes will not end up in extra work for us as developers having to fix our solutions.
MathNotermans-9 That's the idea, by having official ways to do these kinds of things via an API, you can rely on them not breaking once you write your code. Even if we change the internal html structure, the API abstracts that away so nothing will need to change on an authors end. If you haven't already, definitely sign up for Early Access :D
Ofcourse i already signed up :-) The current Private Beta has access to the JS-API ?
This looks promising and I already have Ideas for some of the new features :)
This is great news! Is there a rough estimate on when it may be available to all?
I feel late to the party...but, is this still available? Or, is it rolled out. Or, am I in that weird in-between where the form is inactive, and it's not publicly available yet? I'd love to get the opportunity to play in the new JavaScript sandbox, if possible!
Hi WilliamNeate309 . You can use the new JavaScript API by simply upgrading to the latest version of Storyline 360!
JesseTaber , can you provide a link to any documentation on the new Javascript API? Thanks, very excited!
This is truly a needed add. Not only fun, but easy to integrate.
Hi Jesse!
You have mentioned that manipulating the z-index / depth will be available with the Advanced JavaScript API. Where could I find a documentation to this? Adjusting z-index is still a challenge for me.
Bests,
ZsomborYou can find the documentation here: https://access.articulate.com/support/article/Storyline-360-Advanced-JavaScript-API
