Differences Classic - Modern Player
Nov 07, 2020
As im working on a generic method to get the x/y position of an element in Storyline i run into a difference in the Storyline player. When published in a Classic player my functions work properly... getting the correct x/y position of elements and when animating them they move to the correct position. However when i publish the exact same SL to the Modern player... if i then run that, the positions are off...especially on the x-axis ??? The y is fine..just the x-axis...
When i open up my browser inspector...then the x-position is fine again ???
Can any Articulate engineer explain this to me ?
And how to get the correct x that works correctly in the Modern player too ?
6 Replies
Do you have the menu enabled? I wonder if it is the nature of the 'responsive player' that the X is relative and opening the console resets the X
as opening the console will affect the size of the player
In both playertypes disabled. One step closet however. Modern player somehow zoons and enlarged Storyline stage in contract to the classic player. Now to vind a way to calculator exact xposition that works in goth player...
As i thought it was. The modern player does some scaling and translating on the web browsers visible view. Checking the x/y translation of the Storyline slide gives those values, and with a calculation i now get the proper x/y values on the Modern Player too.
Problem now though is that when publishing on a Classic player those calculations fail and move the elements offscreen. So i have to detect a way whether some course is published with the Classic or the Modern player and change variables based on that.
Detecting whether published in the Classic or Modern Player was luckily quite easy.
if(document.querySelector("body").classList.contains("theme-unified")){console.log("Modern Player");}else{console.log("Classic Player");}
As said i got a setup working now that checks whether you publish in Classic Player or Modern Player mode. Based on that getting the x/y position is somewhat different for the player.
Check that here...
Modern Player version
https://360.articulate.com/review/content/3ec783f4-cb1e-4843-9aeb-a98abf1b1684/review
Classic Player version
https://360.articulate.com/review/content/adedaa1a-ce3f-4b87-9092-e4aeeb597c01/review
Clicking the 'move to spots' button triggers a animation that moves the candy to the endposition of the 3 spots. You can drag the green spots around to change the positions. When clicking the button the candy moves to the correct spot and the variables are updated.
The biggest issue, especially because the Classic and Modern player behave somewhat differently, was the x/y translation of the player ( Storyline slide ) on a webpage of a given size.
Figured that out and now on any device ( testing needed for that ;-) the x/y position of elements should be good. To get and set for animation.
Attaching my storyline sample.
This discussion is closed. You can start a new discussion or contact Articulate Support.