Forum Discussion
[JS] SET OBJECT POSITION
Hello,
is it possible to set an object position (x,y) using javascript when, for example, user clicks the button?
35 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.
Check my post with attachment and link. This way you can animate anything dynamically.
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..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 :)
Yes should be possible. If you share a sample with your specific issue...i can easily show how.
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.
