What is funny to select the right item from the array you need to count how high is the element on the timeline. In this example soccer image is on 14th position from the bottom and because in JS array start from 0 position thus I pick 13th element.
However, I noticed that when you resize the window to a smaller size the soccer ball goes out of bounds.
It seems that by using transform/translate, the pixels become realtive to the screen size. So the boundaries you set in your IF statements cease to work.
Any ideias how to guarantee that a 10px increment (as you set up in your project) remains as a 10px increment no matter what size you screen is?
Oh, and how did you find out that to storyline objects were defined by layers within an array? That was very helpful for my projects.
Is there a way to set the position to an x,y value rather than just translating it from another position? I'd like to move an element to a specific position regardless of where it's original location was.
Oh I was asking if there was a way to do it via Javascript, similarly to how it was being done in the example posted by Przemysław Hubisz. I've got some items that I need to move dynamically so I can't use any pre set positions.
GSAP's TweenLite is built into Storyline and thus can be used to move anything anywhere...
Here is a sample i recently made to demonstrate the use of TweenLite in Storyline. Basically all animation in Storyline is done the same way, Articulate uses it under the hood to create their timeline and motion path animations.
If I try to rebuild Przemyslaws Sample it works, when publishing to Web, but not when publishing to LMS / LRS as SCORM 1.2. Can somebody explain to me why? And if there is a way to adjust it so it works?
Both work when i test them. So should work on the LMS too. Guess it depends on if the Scorm is shown in an iframe and thus maybe the selection used doesnot work.
Also although the selection that is used works fine.. its quite dependant on the amount of elements you have on your timeline. If you have less or more...the selector needs to be different.
let pilka = document.getElementsByClassName("slideobject-maskable")[13];
The number 13 relates to layer 14 in the timeline... its array based, so 0-13 from the bottom.... So if you change the amount of elements... well it wont work. Or change the order...then something else will move.
document.querySelector("#slide-window > div > div > div.slide-transition-container > div > div.slide-layer.base-layer.shown > div:nth-child(14) > div");
This is the selector as copied from the running HTML...
I use the accessibility names as selector...for a imported image thats always the original name. So for the ball thats like this...
let pilka = document.querySelector("[data-acc-text='path859.png']");
how many other elements you add, what layer its on...this works always.
Your surname aint coincidence for this kind of interactivity ;-) Its really parent-child behaviour of elements ;-)
Well made it happen. In fact i wanted rotation of the planets in our galaxy on SlideLayers as example, but especially rotation was a bit more tricky. I probably make it happen some time but not today ;-)
Here you see a sample of whats needed to get SlideLayers to act upon changes of objects on the baseLayer. In fact you only need to calculate the distance between the parent-child, so you could do it with less Javascript.
But for now showing a child on a SlideLayer moving along with a random movement of a parent on the baseLayer.
The rotation idea i will finish some other time.. here is the working Storyline too.
If I move the item in the base layer (in a Drag and Drop freeform) can I get the proprety X and Y of my base item to set the X and Y for my item in the slideLayer?
Thanks a lot. I'm very sorry, but I discussed this problem with my colleague and we found another solution, but I keep in mind this very useful solution for another project.
34 Replies
It is :)
Sample:
https://slchallenges.s3.eu-west-1.amazonaws.com/JSMoveTest/story_html5.html
Source in the attachment
Przemysław, pretty cool... Took me a minute to figure out your example uses the arrow keys on the keyboard, but I like it!
Thank you!
What is funny to select the right item from the array you need to count how high is the element on the timeline. In this example soccer image is on 14th position from the bottom and because in JS array start from 0 position thus I pick 13th element.
Hi Przemyslaw. Thanks for the tips.
However, I noticed that when you resize the window to a smaller size the soccer ball goes out of bounds.
It seems that by using transform/translate, the pixels become realtive to the screen size. So the boundaries you set in your IF statements cease to work.
Any ideias how to guarantee that a 10px increment (as you set up in your project) remains as a 10px increment no matter what size you screen is?
Oh, and how did you find out that to storyline objects were defined by layers within an array? That was very helpful for my projects.
Is there a way to set the position to an x,y value rather than just translating it from another position? I'd like to move an element to a specific position regardless of where it's original location was.
You can use a motion path. Set the start x and y values to the location you want, and the length to 0.
Oh I was asking if there was a way to do it via Javascript, similarly to how it was being done in the example posted by Przemysław Hubisz. I've got some items that I need to move dynamically so I can't use any pre set positions.
GSAP's TweenLite is built into Storyline and thus can be used to move anything anywhere...
Here is a sample i recently made to demonstrate the use of TweenLite in Storyline. Basically all animation in Storyline is done the same way, Articulate uses it under the hood to create their timeline and motion path animations.
https://360.articulate.com/review/content/c9c0450c-0814-4492-bc02-5192e40017b9/review
The sample as is i attached too..
Check my post with attachment and link. This way you can animate anything dynamically.
This post was removed by the author
This post was removed by the author
If I try to rebuild Przemyslaws Sample it works, when publishing to Web, but not when publishing to LMS / LRS as SCORM 1.2. Can somebody explain to me why? And if there is a way to adjust it so it works?
Both work when i test them. So should work on the LMS too. Guess it depends on if the Scorm is shown in an iframe and thus maybe the selection used doesnot work.
Also although the selection that is used works fine.. its quite dependant on the amount of elements you have on your timeline. If you have less or more...the selector needs to be different.
let pilka = document.getElementsByClassName("slideobject-maskable")[13];
The number 13 relates to layer 14 in the timeline... its array based, so 0-13 from the bottom....
So if you change the amount of elements... well it wont work. Or change the order...then something else will move.
document.querySelector("#slide-window > div > div > div.slide-transition-container > div > div.slide-layer.base-layer.shown > div:nth-child(14) > div");
This is the selector as copied from the running HTML...
I use the accessibility names as selector...for a imported image thats always the original name.
So for the ball thats like this...
let pilka = document.querySelector("[data-acc-text='path859.png']");
how many other elements you add, what layer its on...this works always.
Hi,
I was wondering if i could move an element on a layer relative to another element on the base layer?
Thanks
Yes. With javascript for sure. Will make a sample tomorrow
Your surname aint coincidence for this kind of interactivity ;-) Its really parent-child behaviour of elements ;-)
Well made it happen. In fact i wanted rotation of the planets in our galaxy on SlideLayers as example, but especially rotation was a bit more tricky. I probably make it happen some time but not today ;-)
https://360.articulate.com/review/content/41f9e131-b5ba-4bef-8656-d57cd1d6f526/review
Here you see a sample of whats needed to get SlideLayers to act upon changes of objects on the baseLayer. In fact you only need to calculate the distance between the parent-child, so you could do it with less Javascript.
But for now showing a child on a SlideLayer moving along with a random movement of a parent on the baseLayer.
The rotation idea i will finish some other time.. here is the working Storyline too.
Hi Math,
Thank you very much. I will check this this week et come back to you if it's what I want, but I'm pretty sure this will work.
That's genius :)
Hi Math,
If I move the item in the base layer (in a Drag and Drop freeform) can I get the proprety X and Y of my base item to set the X and Y for my item in the slideLayer?
Yes should be possible. If you share a sample with your specific issue...i can easily show how.
Like this...
https://360.articulate.com/review/content/e2ca8b04-8736-4d42-9777-34515660776a/review
Hi Math,
Thanks a lot. I'm very sorry, but I discussed this problem with my colleague and we found another solution, but I keep in mind this very useful solution for another project.
Math, Yet again, YOU ARE THE MAN
Thank you!
Not sure for what but thanks anyway ;-)
The reason is I was not aware of the inclusion of the GSAP in articulate!
Do you happen to know what version is included 2 or hopefully 3?