Layout for screen rotate (iphone)

1

Hi, I see in Layouts there is an ipad portrait and landscape.

I’m attempting to create a landscape version (for iphone) and am having a bit of trouble figuring out how to do this with the Layouts tab. I have my portraits scenes completed and I do understand that pinning certain elements will allow them to responsively move at various breakpoints. However the landscape layouts are designed quite a bit differently than their portrait mode.

What would be the best course of action for this amateur?

Thank you very much.

2

Creating any layout (not just landscape), is basicaly same as creating a new scene, except, the timelines (not the animation within them, just the timeline names), are synced across layouts. Rest, everything is unlinked. You can delete or add anything to any layout without affecting the other. So, pinning of elements has nothing to do with layouts. Pinning works only in one breakpoint at a time.

1 Like
3

Thank you @Hrishikesh – This next question might seem silly, but how does the device know to use my landscape scene when rotated vs portrait?

edit: I notice that when I try to add a new scene that is a landscape orientation, all scenes are updated to landscape. If this should be done in Layouts, could you please shed some light on process?

What I’ve attempted is the following:

  1. Portrait scenes all completed (XR size of 828 x 1792px)
  2. Go to Layouts and click the + to add new layout
  3. Click the iphone layout (attempting Landscape here) with breakpoint at (828?)
  4. At this point I’ve got a landscape orientation is intended, however all of the scenes are now landscape and I am unable to see the Portrait mode unless I hit cmd-z.
4

Update: I figured it out. The Layouts had me confused me for minute… but I see now that its actually very intuitive!

2 Likes
5

The browser tells it. When your device rotates, the browser also rotates and stretches to use the full screen. This change triggers a viewport width change. Now, in most other responsive websites, this is handled bu the website's CSS, but, Hype does everything though JavaScript.

I hope you have got everything else figured out. Good luck.

2 Likes
6

This is a very interesting topic and I am experiencing similar trouble. The problem with layouts is they double or triple the size if you use embedded images in your scene even if you inline your html using Advanced Export (they double the size if you have two layouts, triple if you have 3 layouts, etc). If you are embedding your artwork in a standalone html file, using layouts can be costly. Is there a way to create layouts with select layers and then detect the orientation of the device using a script like this?...

window.addEventListener('orientationchange', (event) => {
console.log("orientation is now " + event.target.screen.orientation.angle);
});

how can I keep my file sizes smaller?

7

I think you're basically onto the solution - Advanced Export by default populates slices in "Individual Layouts" that represent all scenes for just that particular layout. If you check those for export, you'll get pages that are layout-specific. Code in the head can then change the location.href based on the logic you want to go to the other page.

The issue with this approach is that you'd need to do a full load whenever the sizing changes, and possibly preserve some state for which scene was loaded and even where timelines/symbols may be at.

It sounds like you may have worked it out in the other thread though?