Can you give me an example of how to implement the Orientation command so when a Soala project is rotated on a mobile device it will switch between layouts?
Anyone with any ideas on this would be much appreciated.
The HTML5 player will update the layout automatically when the browser is resized or the device orientation is changed.
If you use responsive layouts, you can add two layouts for portrait and landscape orientations. The suitable layout will be selected when you rotate the mobile device.
Thanks again ToanLS!
I am on the home stretch with Saola now…just one last thing that is tripping me up. I have looked at all the tutorials on breakpoints etc but there’s nothing on responsive mobile phone layouts.
I am having terrible trouble understanding how to create 2 x responsive layouts for only 2 x orientations for mobile phone aspect ratios, Landscape and Portrait. I am using a stage set to 360 x 640 (Portrait) as a base layer. When I try to create breakpoints for 640 x 360(Landscape) nothing works? The breakpoints will not allow a completely new aspect ratio to be set? Also what is confusing me is the separate Horizontal Vertical and Horizontal Preset, Vertical preset. Nothing I create seems to stay in tact?
PortraitLandscape.saola (9.7 KB)
When the viewport width is less than (
<) the horizontal breakpoint value, the layout on the left of the breakpoint will be selected. When the viewport width is greater than or equal to (
>=) the horizontal breakpoint value, the layout on the right of the breakpoint will be selected.
So you should add a horizontal breakpoint at 361 to create two layouts (portrait and landscape) for a 360 x 640 mobile device. In the portrait mode, the mobile viewport width is 360 (which is less than 361) so the left layout will appear. In the landscape mode, the mobile viewport width is 640 (which is greater than 361) so the right layout will appear.
Please see this sample: portrait landscape sample.saolapack (2.0 KB)
You can resize the browser (or press F12 and switch to device mode) to view layout switching directly on your computer.
A vertical breakpoint is used to change the layout based on the viewport height. Users usually don’t need to use vertical breakpoints.
P/S: You should select File > Save As > Package to create a package from your project for sharing when you need help. Only .saola file will not work if your project contains resources such as images.
Thank you again. I am still learning the basics and will do this in the future. I will have a look at the Saola file you created and study it.
I have attached an image of the project you sent back. I was getting confused with the multiple background shapes (outlined in Yellow). Why is this area still visible? Shouldn’t the break point areas be only visible?
Oh an the file you sent works extremely well thanks
EDIT: ToanLS Thanks I have been studying your file and I understand how it all works now. No need to reply. I was thinking that the break point guidelines represented INNER dimensions of the stage area not the outer dimensions.
Many thanks again.
The yellow outlined area represents the viewport area (it’s called the container in Saola Animate editor).
You can adjust the container size to see how the scene is displayed:
In my sample, I set the scene width, height to 100% so it fills the entire container.
Thanks you ToanLS