I’m not sure if this is a feature request or can practically be achieved already somehow. I know I’ve asked some questions on creating this effect before but my current solutions are difficult to use.
For example, if you create a 1024 x 768 project then enable auto-fit and centre alignment. You then place a DIV 100px high BUT you want to set it to 100% of the view-port so that it is visible outside of the container. At the moment, setting the size or alignment seems only possible to the container.
I wonder if it is possible to have size and alignment relative to the view-port instead?
I have managed to get some of what I was trying to build in the following example. It uses code to force DIVs to scale to the size of the view-port and make it appear that the scenes fill the screen with a coloured background whilst the main content scales perfectly in the centre of the screen
You can set the scene width and height to 100%, and use % unit for element position and size.
The scene will fill entire the viewport, the elements also have their position and size relative to the viewport. However, text will not be scaled as in the case of fixed (px) scene size and auto-fit.
If you just want to fill the scene entire the viewport and scale elements with auto-fit, you can see Control animations sample in Samples page of the welcome screen. setDocBackground function in this sample gets the scene’s background properties and set for the document.
Background scaling to fill the viewport is one aspect of what I’m trying to achieve but it needs to feel like it’s part of the scene rather than a static image / colour that fills the body element.
The relative option offers a better route but I found it impacts on trying to build the main content of the project. My client likes the style of several other third party modules they have seen - produced in Rise and by custom JS libraries but the custom animations and interactions that I build using Animate take priority.
The end solution needs modern, beautiful full screen responsiveness for some elements with most of the content built using a fixed, scalable method that simply works for desktops / tablets in landscape.
At the moment, using autofit - creates a dead space to the left / right of the screen depending on the device resolution / ratio. Solving this by trying to work outside of the bounds of the container has proved difficult but now I’m looking at a different idea that has the container as one layer in the project that autofits in conjunction with other layers that fill the viewport completely…
Saola Animate is already very flexible but anything that can help mix fixed / fluid is appreciated.
If / when I get a solution working, I’ll post it to illustrate more clearly the idea.
Yes, this method will set the new scene background immediately without transition effect when changing scenes.
Great idea!
I think you can do as follows: (it’s a bit complicated to make sure push transition effect will work)
Set width and height for all scenes in the main document to 100%.
Elements in these main scenes will use % unit for their sizes and positions for flexible layouts.
Create a symbol in each main scene to contains elements that will be scaled with autofit.
– The symbol element (symbol instance) fills the entire main scene: left/top 0, width/height 100%
– The symbol AutoFit is checked
– The scene in the symbol has a fixed size (px unit for width/height) so that autofit feature can work.