Storyline Block - How to go full screen?

Thanks Ashley, even with it set to full width I don't think it looks as flush / clean as it could.

Could you also pass on that the SL element in Rise doesn't respect the settings you set as the output? (As in portrait & landscape or just landscape etc)

Hi James, 

Responsive playback restrictions won't work when you publish to Articulate 360.

That also means that Storyline blocks always rotate with the Rise courses where they're embedded, giving learners an intuitive experience on mobile devices.

And Storyline courses always rotate with the Articulate Review interface so stakeholders have a consistent experience when leaving feedback.

Thanks for the feedback James.

As for the second find you've shared, do you have an example or screenshot to describe what you are seeing?

I have the same need - full screen storyline video in Rise. I’m creating  Software simulations and the viewable screen is too small when embedded/restricted in the Rise page. This seems like a comm need. 

Hi there, Mike.  Thanks for sharing.  On desktops, Storyline blocks will display within the Rise frame.  On mobile, however, Storyline blocks will open full screen to make sure your learners get the best experience.

We'll track this feature request and let you know if we have plans to add a fullscreen option to desktop!

Hi Crystal.   

My issue concerns publishing for an Android mobile platform and I'm having a similar problem to Mike and others on this thread. Before publishing to Articulate 360 I did the following:

• removed SL controls (except Resources)
• used Storyline Classic Player / Modern Player (tried both options)
• set content to Landscape Only

I then published to Articulate 360, following the instructions available here

• published to Articulate 360
• used Storyline Blocks to upload content
• removed padding 
• set to Full Width

I also ensured the criteria outlined here were adhered to i.e.:

• Google Chrome in Android OS 4.4 or later - I am using the latest Chrome version 69.0.3497.100 & Android version 7.0

but, as you can see from the attached, the responsive player does not function as one might expect since the Header Bar / Address Bar does not disappear and the slide does not present at full width.

Can you advise, please?

Hi Íde,

First, let's tackle the reason why you're still seeing Storyline player elements in both landscape and portrait mode. You do have some player elements turned on, such as the resource tab, the quiz timer, and the player submit button. Because those features are turned on, the Modern Player won't disappear completely. 

The red bar you're seeing at the top of the screen is the website title, and by the looks of your screenshot, it appears that you may have opened that link from your email -- is that right?

Just tap the three dots in the upper-right corner and select "Open in Chrome", and that red bar should disappear. 

Hi Alyssa

Thank you for your reply.

I re-published the file with the following changes

• No 'Resource' 
• No 'Submit' button 
• Menu Style - Modern
• Menus & Controls - Off
• Quiz timer on the Results slide - Off
• Created a new  Course in Rise uploading the newly-published file
• Responsive Playback  - Landscape Only

Even with the controls switched off, the results are the same. Any ideas what might be going wrong?

Hello, Íde! Thanks for sharing your file with me. Here's what I see when I test your content in a Storyline Block in Rise on an Android mobile device. 

The dark gray background you see to the left and right of the slide area is normal and expected. You'll see that background because your slide isn't designed to be wide enough to fill the wide mobile screen, and Storyline won't stretch your slide to fill the screen. 

Let me know if you have further questions about that!

Hi Alyssa

Thank you for your reply.

Can you please advise as to the specification I will need to apply in SL in order to achieve a full screen in RISE?  I have combed through all available information but, I find that this piece of information was not mentioned or maybe it escaped my attention.

There is also the unresolved issue of the header / address bar that will not go away! :-)  How might this problem be addressed?

Thank you.

Hey Íde. The full screen question for Storyline in Rise is a bit of a moving target. We won't stretch your slide content to fill the screen on any device. Because different devices have different screen dimensions and orientation options, there isn't a one-size-fits-all story size. So you aren't missing anything - Storyline is doing its job of keeping your slide content arranged as you designed it!

As for your browser bar, you'll see Chrome in Android keeps the URL bar. iOS devices using either Chrome or Safari shrink or completely remove the browser elements, depending on orientation.

The bigger picture is that Rise content is responsive, meaning it will reflow to fill the space the browser allows it on mobile devices. Storyline content does not shift in the same way. It will fill as much space as it can while preserving it's aspect ratio. When you add Storyline content in Rise, you'll want to keep that in mind for your mobile learners. Create interactions that are easy to navigate on smaller screens.

Let us know how else we can help!

So, basically the status is as follows:

(a) if you are using chrome as your browser on an Android device - SL Blocks in Rise will not work properly

and

(b) if you are using SL and follow the instructions on creating content, the published product will not work properly in Rise, even though the SL blocks facility in Rise is supposed to accommodate this transition.

Did I get that right?

 I followed the instructions below and still I cannot get a full, legible screen.

The post quoted above does not reflect my experience.  Equally, the instructions adhered to below do not produce the desired result.

So does this mean that the content I have created over the last two years cannot be used in Rise because the transition cannot be achieved?

In reference to your last suggestion, the content I have created is not complex.  As you can see from the file I submitted, it only comprised three simple slides, one of which is an MCQ and the other a Results slide.  

It would be good if we new what slide size to make the blocks in Storyline for small, medium and full width. 

Hello, Íde! So sorry for the confusion, and you've asked some great questions. 

1. If you are using Chrome as your browser on an Android device - SL Blocks in Rise will not work properly
   • Storyline blocks will display correctly in Chrome on an Android device, but you will always see the URL address bar at the top. This means the slide will have to shrink a bit to fit below the address bar. You won't see that address bar on an iOS device, depending on the orientation.
2. If you are using SL and follow the instructions on creating content, the published product will not work properly in Rise, even though the SL blocks facility in Rise is supposed to accommodate this transition.
   • Storyline slides will fill the screen on a mobile device (as much as possible) without stretching or skewing the slide content. If you see some gray space on the left and right side of the slides, you'll want to design the slide to be wider to fill that space. 
   • If Storyline were to stretch the slide to fill the screen, it would look like this. As you can see, the slide objects are very stretched and distorted. This is definitely not ideal! 
     

I know it often helps to see things visually, so I've created a quick 3-minute video to explain how Storyline slides should appear on mobile devices.

Check out that video by clicking here! 

Hi Alyssa

Many thanks for your comprehensive response to my query.

Needless to say, it is disappointing the Articulate have not found a way to overcome the issue of the address bar.  Maybe this is something that might be addressed in a future update?  The transition from SL to RISE is a question I posed before the addition of the SL Blocks feature.  By its introduction, I presumed that this issue had been resolved, but sadly, not.

Maybe your technical experts will continue to strive to find a solution?

Thanks again.

Hi Alyssa, thanks for the great video. I have an issue I was hoping you could help with. When I view a SL block on an iPhone in landscape orientation it is showing the URL address bar as well as the tabs. Because of this some of the SL object is cut off the screen and users can’t submit it. I’m thinking that since your video apple has made an update and now displays these bars, but you haven’t adjust your code to accommodate this change? 

SL blocks display very small in portrait orientation so it is vital to have it work correctly in landscape orientation. 

Can you please help.

Hi Clinton. Thanks for letting us know what's happening. We're seeing an issue where once the browser chrome displays in mobile Safari, instead of the course player shrinking to fit in the screen, it shifts down, covering the bottom part of the player.

If you swipe up on the screen, outside of the slide, the browser chrome will disappear, and the player will be fully visible again. You can also rotate your device to portrait and back to landscape, and you should see the full player again. I'm adding this discussion to our report for this issue so we can keep you up to date on any changes!

I'm curious if anyone has found an ideal story size in storyline that resizes well as an Sl block in Rise?

In your video, Alyssa, you mentioned designing the slide to be wider in storyline so it fills more of the screen. Do you have any sense of what the specific dimensions for this might be?

Hi Michael! 

I would say the 16:9 aspect ratio (widescreen) is a good start. You can also open https://supportally.com/ and check your browser width under Browser Size. This will tell you about how wide you'd want the Storyline 360 slide to be. 

Hi Articulate team,

I have a Storyline project sized 350 x 720, embedded in Rise with the Storyline width set to 'small'. When I view it on my smartphone, i can see the entire Storyline project. However, when I view it on my computer, it shows way too large, meaning that I have to scroll up and down in order to see the complete Storyline block.

Widening the Storyline project is not an option, since that makes the text too small to read when using a smartphone.

I've tried to embed the Storyline project in an iframe sized 350 x 720, but that doesn't work either. It looks like Rise does not do anything with the provided iframe sizes, except for defining the aspect ratio.

Is there any way to show the Storyline block in such a way that I can see its entire height without scrolling when viewing it on a computer?

Hi Edward! Does this Storyline Block fully display in your browser without scrolling? Here's how it looks from my side:

This slide was created with a 4:3 aspect ratio with the Modern Player. Try switching to the Modern Player to see if that makes a difference!

Hi Alyssa,

Thanks for your reply. Your Storyline block displays the same for me as it does for you, but 4:3 is not  the ratio I need. Switching to the modern player doesn't make any difference. As you can see in the demo below, both players show just over 40% of the Storyline block, while they show everything on my phone.

Adding a menu seems to help somewhat (showing 80% of the block), but I don't need/want a menu (or any other navigation) in this project.

Link to the demo I set up: https://rise.articulate.com/share/FescrcVdy43QtElTvtGbflTVxAvpbJfn 

Any other suggestions?

Hi Edward,

Thanks for including the screenshots and the Share link! Designing a Storyline block that fills the browser window on both desktop and mobile is a challenge, since one is portrait and the other is landscape.

I'll open the floor to the community to share their suggestions with you!

I think having a full-screen option for storyline blocks is a good improvement and would help with the sizing of software simulations that I build on a regular basis.