Thank you for adding the story file. I learned a thing or 3 from it.
I wonder if you gained that knowledge simply by reverse engineering + adding your javascript knowledge and creativity? Are there any resources to learn about storyline advanced javascript effects?
I don't get how the JS connects with the object, though. Just a random draggable image won't do the trick. Should the image contain a white field or something? Would you mind sharing some more about how it works?
Ofcourse Teo. What is key when using Javascript in Storyline is to get the proper element selected. There are several methods to get that done. One i use a lot is using the 'accessibility-names' to give a specific element in Storyline a really recognizable name and use a CSS-selector to get the element.
var elementToAddClassTo = document.querySelector("[data-acc-text='panel.png']");
The data-acc-text atrribute in this line of code is the elements accessibility-name. Default Storyline uses the source name of an image. For other elements ( text fields eg. ) that differs.
In the image on top you see the default acc-name of this element. When its default...its grey. You can customize the name to your liking. Often this is usefull.
There are other methods for selecting a Storyline element with Javascript. Depending on what your are trying to achieve you need to decide which method works best. In all cases the browser inspector to see the proper flow of elements in HTML in Storyline is your best friend.
Then the script adds a CSS class to the element. textpanelToAddClassTo.classList.add('CSSBackdropBlur');
Do hope this makes sense to you.
Im planning some more indepth Storyline+Javascript tutorials... aimed at games in Storyline. All techniques to select elements with Javascript will be explained properly.... and when to use what...
6 Replies
This is really cool, Math. Thanks for sharing your project file.
Bedankt!
Thank you for adding the story file. I learned a thing or 3 from it.
I wonder if you gained that knowledge simply by reverse engineering + adding your javascript knowledge and creativity? Are there any resources to learn about storyline advanced javascript effects?
I worked years with Flash and Actionscript... step by step learned things. Im planning Javascript / Storyline courses for gamification.
Cool one Math!
I don't get how the JS connects with the object, though. Just a random draggable image won't do the trick. Should the image contain a white field or something? Would you mind sharing some more about how it works?
Ofcourse Teo. What is key when using Javascript in Storyline is to get the proper element selected. There are several methods to get that done. One i use a lot is using the 'accessibility-names' to give a specific element in Storyline a really recognizable name and use a CSS-selector to get the element.
var elementToAddClassTo = document.querySelector("[data-acc-text='panel.png']");The data-acc-text atrribute in this line of code is the elements accessibility-name. Default Storyline uses the source name of an image. For other elements ( text fields eg. ) that differs.
In the image on top you see the default acc-name of this element. When its default...its grey. You can customize the name to your liking. Often this is usefull.
There are other methods for selecting a Storyline element with Javascript. Depending on what your are trying to achieve you need to decide which method works best. In all cases the browser inspector to see the proper flow of elements in HTML in Storyline is your best friend.
Then the script adds a CSS class to the element.
textpanelToAddClassTo.classList.add('CSSBackdropBlur');Do hope this makes sense to you.
Im planning some more indepth Storyline+Javascript tutorials... aimed at games in Storyline.
All techniques to select elements with Javascript will be explained properly.... and when to use what...
Damn. That's insanely cool.