34 Replies
Will P

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.

Math Notermans

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..

Math Notermans

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.

Math Notermans

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.