I have just updated to Stoyline 360 to Build 3.16.15842.0 and am trying to set the new modern player to chromeless optimal size. I cannot see any way to set the browser size to optimal size or less than full screen. The options are grayed out unless you select launch as new window.
I always use set to optimal size as html creates poor quality images when stretched. Is this a limitation of the new modern player ( always full screen correct aspect stretch)?
Thanks Will for the pickup, so Full Screen correct aspect, black in fill only . Pity that the new Menus & Controls option to go chromeless is only available in modern player.
I also have tried the new modern player settings and was very pleased to see this implemented as a simple way to switch player chrome off for a seamless experience.
However, as Doug has reported, the scaling to browser window size results in that undesirable re-sizing and softening/pixelation of Images. I appreciate that this is a proportional scaling so that is good, I just wish there was the ability to at least make the course open at the size it was designed at to create the best initial impression and quality for the participant.
After that, ok, let it be resized by the user as they like.
guess I might have to revert back to the legacy player to maintain this, although the modern player does seem a good improvement in other ways...it would be great to be able to have control over the setting of that initial view. Regards
I love a lot about the new player, but for me, and I'm probably old school, the interface buttons (Prev/Next, play, Submit) seem just a little too subtle and lack adequate affordances. I was happy to see you can turn on text labels, but, how can you tell the buttons are disabled, for example? I guess I'm just not sure about this Modern age.
To avoid the undesirable re-sizing of the Story window and the pixelation of images in the new Modern Player, I did this change in the main.min.css file of the published course (Output Folder > html5 > lib > stylesheets):
at the bottom of the file, in the #presentation-container, I replaced the last element height:100% by the optimal height of the player (height:800px; in my case).
I know is'nt the best solution, but event if the browser is open in any size or in a full screen, I'm sure the story window stay always open and centered at the size that I assigned.
Alain (sorry for my english, I think Google Translate is not my most reliable friend today ;-)
Sorry to hear the Modern Player is causing resizing and pixilation issues in your course. I'd like to get a better idea of what you're seeing--so you have a link you can share with me?
If something's not right, I definitely want to share it with my team so we can look into fixing it. Any examples you can share with me would be helpful!
May I chip in here as well Alyssa? Hope you don't mind Alain. As you'll know, when creating a course in storyline, one of the decisions we make is to set a story size. When I do this I then optimise all the graphics that are going in to that piece of work so they are exactly the right size for the space they are being placed in to. If my story size is 1280x720 then, if I'm using a splash screen photo say, that will be sized in the photo processing app I use (e.g. lightroom) to exactly 1280x720 - if that photo occupies half the screen it will be sized to 640x720 etc.
With the Modern player - when a participant opens the course and it is by default displayed at the size the browser is set to, then, if that browser it set to full screen, the course window is scaled up, so those 1280x720 or 640x720 graphics get upscaled and no longer look nice and sharp as they would if the course window was to open at the designed story size. Objects on screen like buttons with multiple states can also sometimes 'pixel shift' when hovered over. This is more apparent when the production is scaling to fit the browser window.
For me its about creating the best first impression I can, so the participant can immediately perceive something like.... "hey, this is a nicely design course, maybe its worth my attention and focus, let me explore this further, I'm motivated to continue".....you get the idea.
Another way of looking at this - do you ever see the graphics on a modern website for a reputable company become soft and pixelated when the browser is being re-sized? Generally, no, because they are designed to be responsive, which storyine is not, its only scaling.
Maybe a workaround to this is to place larger sized (more pixels), say x2 upsized images into the production. However, this would increase the bandwidth required to play the course and we do need to consider mobile use and download performance too, which is why I don't generally do this.
If the modern player retained the option of the classic player and allowed the course to set the browser size to the story size on opening, or max window size if that was smaller than the story size, this would be great! After its open - sure, allow the participant to resize to whatever they like.
With the modern player, we changed some of the color options to make it a lot easier for your course design. Take a look at the specifics here:
The modern player style makes customizing colors super easy. Just select a dark or light theme, then choose an accent color from the color selector (the default accent color choices come from your theme colors).
The neutral tones of the dark and light themes allow your content to be the focus of learners’ attention, while the player performs a supporting role in the background. And the accent color is used throughout the modern player to tie it all together. For example, the accent color highlights the current slide in the menu, identifies the selected tab in the sidebar, and shows the progress of the seekbar.
As of SL 360 v3.19, one of my complaints about the modern player is the size of the content when it is rendered on a phone. The phone is already a small device, but the modern player puts a border around the content which makes it even smaller.
When I switch the Menus & Controls to Off, I like how the content fills the available viewing space, but I don't have custom navigation so there' no way to progress through the training.
I wish the Modern Player allowed me to keep the Menus & Controls ON but also allowed the content to fill the available viewing area.
What I’m saying about the Modern Player is that when it is viewed on a phone, there is a border around the content, like this:
This border isn’t present in the Classic Player when it’s viewed on a phone. It’s also not present when the Player Properties: Menus & Controls option is Off. What I’m saying is that I wish the content filled a larger portion of the screen in the Modern Player, even when the Player Properties: Menus & Controls option is On. Like this:
In order to achieve this, I have to use my fingers to “zoom” the content so that it fills more of the viewable area.
Thanks for those images, that really helped this visual learner. 🤓
I can see how the border is really noticeable on the top/bottom of the player, and a little on the sides as well. I'm touching base with a few of our developers to understand this set up more, so I'll be in touch as soon as I can!
I wanted to follow up here after chatting with a few colleagues about this design in the modern player, and specifically how it displays on a mobile phone. They confirmed this was a design choice to have the slide occupy a particular space and separate it from other browser elements with that border.
I did share your explanation of needing the largest slide size on a mobile phone, so they'll look at this as a potential feature request. Thanks for sharing your experience here!
I just want to make sure I understand. If you are using the modern version player you cannot control if it resizes or stays the optimal size on PC? That is really important to my clients is there a work around?
Correct, with the modern player it will always scale smoothly to completely fill the learner’s browser on every device and screen size. You’ll also have the HTML5-only output that works in all major browsers on desktop computers and mobile devices.
If you need to control the course size and display, I'd look at using the Classic player.
31 Replies
"The modern player always scales smoothly to completely fill the learner’s browser on every device and screen size." - https://articulate.com/support/article/Storyline-360-Modern-Player
Thanks Will for the pickup, so Full Screen correct aspect, black in fill only . Pity that the new Menus & Controls option to go chromeless is only available in modern player.
I also have tried the new modern player settings and was very pleased to see this implemented as a simple way to switch player chrome off for a seamless experience.
However, as Doug has reported, the scaling to browser window size results in that undesirable re-sizing and softening/pixelation of Images. I appreciate that this is a proportional scaling so that is good, I just wish there was the ability to at least make the course open at the size it was designed at to create the best initial impression and quality for the participant.
After that, ok, let it be resized by the user as they like.
guess I might have to revert back to the legacy player to maintain this, although the modern player does seem a good improvement in other ways...it would be great to be able to have control over the setting of that initial view. Regards
Is there a way to change the color of the new modern player (outside of selecting Dark or Light)?
I love a lot about the new player, but for me, and I'm probably old school, the interface buttons (Prev/Next, play, Submit) seem just a little too subtle and lack adequate affordances. I was happy to see you can turn on text labels, but, how can you tell the buttons are disabled, for example? I guess I'm just not sure about this Modern age.
More on this subject: https://ux.stackexchange.com/questions/56555/does-flat-design-reduce-affordance-of-actionable-objects
Yikes, I appear to be late to this debate: https://ux.stackexchange.com/questions/33197/what-kind-of-design-do-users-like-the-most-at-the-time-of-this-question-flat
Light Box Close Button (X)
Just Noticed that the Lightbox close button is located in the top right hand corner of the browser window and not in the slide area.
SL 360 , Modern Player, no controls , Chrome version 66.0.3359.181 (Official Build) (64-bit)
Hi,
To avoid the undesirable re-sizing of the Story window and the pixelation of images in the new Modern Player, I did this change in the main.min.css file of the published course (Output Folder > html5 > lib > stylesheets):at the bottom of the file, in the #presentation-container, I replaced the last element height:100% by the optimal height of the player (height:800px; in my case).
I know is'nt the best solution, but event if the browser is open in any size or in a full screen, I'm sure the story window stay always open and centered at the size that I assigned.
Alain
(sorry for my english, I think Google Translate is not my most reliable friend today ;-)
Same thing for the chronometer/countdown timer. I can't find how to fix it (to stay with the player, not with the browser).
Hi Alain!
Sorry to hear the Modern Player is causing resizing and pixilation issues in your course. I'd like to get a better idea of what you're seeing--so you have a link you can share with me?
If something's not right, I definitely want to share it with my team so we can look into fixing it. Any examples you can share with me would be helpful!
May I chip in here as well Alyssa? Hope you don't mind Alain. As you'll know, when creating a course in storyline, one of the decisions we make is to set a story size. When I do this I then optimise all the graphics that are going in to that piece of work so they are exactly the right size for the space they are being placed in to. If my story size is 1280x720 then, if I'm using a splash screen photo say, that will be sized in the photo processing app I use (e.g. lightroom) to exactly 1280x720 - if that photo occupies half the screen it will be sized to 640x720 etc.
With the Modern player - when a participant opens the course and it is by default displayed at the size the browser is set to, then, if that browser it set to full screen, the course window is scaled up, so those 1280x720 or 640x720 graphics get upscaled and no longer look nice and sharp as they would if the course window was to open at the designed story size. Objects on screen like buttons with multiple states can also sometimes 'pixel shift' when hovered over. This is more apparent when the production is scaling to fit the browser window.
For me its about creating the best first impression I can, so the participant can immediately perceive something like.... "hey, this is a nicely design course, maybe its worth my attention and focus, let me explore this further, I'm motivated to continue".....you get the idea.
Another way of looking at this - do you ever see the graphics on a modern website for a reputable company become soft and pixelated when the browser is being re-sized? Generally, no, because they are designed to be responsive, which storyine is not, its only scaling.
Maybe a workaround to this is to place larger sized (more pixels), say x2 upsized images into the production. However, this would increase the bandwidth required to play the course and we do need to consider mobile use and download performance too, which is why I don't generally do this.
If the modern player retained the option of the classic player and allowed the course to set the browser size to the story size on opening, or max window size if that was smaller than the story size, this would be great! After its open - sure, allow the participant to resize to whatever they like.
This post was removed by the author
This post was removed by the author
Is there a way to change the color?
Hi Stefan,
With the modern player, we changed some of the color options to make it a lot easier for your course design. Take a look at the specifics here:
The modern player style makes customizing colors super easy. Just select a dark or light theme, then choose an accent color from the color selector (the default accent color choices come from your theme colors).
The neutral tones of the dark and light themes allow your content to be the focus of learners’ attention, while the player performs a supporting role in the background. And the accent color is used throughout the modern player to tie it all together. For example, the accent color highlights the current slide in the menu, identifies the selected tab in the sidebar, and shows the progress of the seekbar.
grr
As of SL 360 v3.19, one of my complaints about the modern player is the size of the content when it is rendered on a phone. The phone is already a small device, but the modern player puts a border around the content which makes it even smaller.
When I switch the Menus & Controls to Off, I like how the content fills the available viewing space, but I don't have custom navigation so there' no way to progress through the training.
I wish the Modern Player allowed me to keep the Menus & Controls ON but also allowed the content to fill the available viewing area.
Hi Nathan,
I'd like to understand a bit more about what you're looking to see. On a smartphone, the Modern play with some controls will display like this:
You'll see that the controls and menu collapse to the sides and we don't stretch your slide content or change how it appears.
Are you hoping to see the controls overlap this slide content or something else?
Hi Ashley, thanks so much for the response.
What I’m saying about the Modern Player is that when it is viewed on a phone, there is a border around the content, like this:
This border isn’t present in the Classic Player when it’s viewed on a phone. It’s also not present when the Player Properties: Menus & Controls option is Off. What I’m saying is that I wish the content filled a larger portion of the screen in the Modern Player, even when the Player Properties: Menus & Controls option is On. Like this:
In order to achieve this, I have to use my fingers to “zoom” the content so that it fills more of the viewable area.
Does these added descriptions make more sense?
Hi Nathan,
Thanks for those images, that really helped this visual learner. 🤓
I can see how the border is really noticeable on the top/bottom of the player, and a little on the sides as well. I'm touching base with a few of our developers to understand this set up more, so I'll be in touch as soon as I can!
Hey Nathan, you might be able to manipulate that using David Crocker's jquery codes. You'll have to search through available css classes in order to target the border. I think David would welcome some collaboration. https://community.articulate.com/discussions/articulate-storyline/can-we-change-background-color-in-modern-player-storyline-360
Hi Nathan,
I wanted to follow up here after chatting with a few colleagues about this design in the modern player, and specifically how it displays on a mobile phone. They confirmed this was a design choice to have the slide occupy a particular space and separate it from other browser elements with that border.
I did share your explanation of needing the largest slide size on a mobile phone, so they'll look at this as a potential feature request. Thanks for sharing your experience here!
Ashley, I really appreciate it, thank you :-)
Jean-Guy, thank you for the link to the similar conversation. I plan to share my findings as they surface.
I just want to make sure I understand. If you are using the modern version player you cannot control if it resizes or stays the optimal size on PC? That is really important to my clients is there a work around?
thanks
dawn
Hi Dawn,
Correct, with the modern player it will always scale smoothly to completely fill the learner’s browser on every device and screen size. You’ll also have the HTML5-only output that works in all major browsers on desktop computers and mobile devices.
If you need to control the course size and display, I'd look at using the Classic player.