This is more a question to the adobe edge animate team i guess rather than the community.
I recently had to do a project in adobe edge animate. I noticed the scale/responsiveness/resize is not really fitting my requirements, so i decided to tweak the resizing a bit. I wanted to achieve a fully responsive layout starting from x:0,y:0 ( top-left ), so the composition is always shown at 100% width & height.
The problem with the current animate scaling is that , it always has blank/white spaces on the sides. Even if using the BOTH option in the composition settings it always fits( scale ) the content just by one of the dimensions( the bigger fitting one ). It would be either by height or by width , but not both. The other dimension is compensated with blank space.
I made it work. Here's the demo. It's not completed and not sure if it will be because.. When the stage/composition loads, stars resizing(drag) the window. You'll notice that the stage resizes correctly and all of a sudden a smile starts appearing on anyone face, but unfortunately every time a user clicks a button ( or any action is executed ) the runtime resizes the main app again to it's original dimensions, breaking the fullscreen resize. For example , click on the black button NEXT , and you'll see the stage resized again with the edge resize logic
I'm attaching my resize logic immediately after the resizing of the edge animate( binding it to the window resize ), that's why everytime a user resizes the window the resize is correct. The aspect ratio is preserved everywhere and everything works as I wanted, but for some strange reason for me everytime an action ( timeline action/trugger ) , or even a button action/trigger, the resize logic block is executed.
So i guess my questions are:
1.Why does edge animate resize the wrappers and the composition everytime an action is executed ? Isn't this also a performance problem?
2.is there a way to stop this behaviour. I even made the composition non responsive hoping for even better result. In this case only my logic would be executed instead of two times for each resize event ( edge resize & my resize )
3.Is there any way to overload the edge resize method or any way to make this work( stop animate to resize the stage and wrappers for every action )
4.Also.. currently there is a resize initially so the stage is also resized on first view without resizing the window. but again i guess, because there are actions in my stage they are resetting the first resize aswell. I guess this one will not be a problem if the previous issue can have a workaround somehow.
Thanks a lot..
1. You need to know that Edge animate handles the responsive scaling by using css scaling the stage div element along X and Y axes by the same amount so that the aspect ratio is maintained. And that's the reason, when you apply responsive scaling value to both, Edge checks which of the attribute (height or width) fits the whole screen, and depending upon that it applies the scaling with aspect ratio maintained.
2. By looking at the demo, I think that you want to have responsive scaling such that the game fits the whole screen along width and height. If I am thinking right, then that way, I think it will have a bad user experience if the user resize the window more in one direction, then you will loose the aspect ratio.
3. So, what I would recommend is that you use "responsive scaling"=> "height or both", and "Center Stage"=>"horizontal or both". This way you'll have empty white space on either side but will have good user experience. Also, this way, you no longer need to use any extra code to handle responsive scaling yourself, and responsive scaling will work even after clicking buttons(as in your case).
4. But still, if you don't like step#3, then you will have to create the whole anomation in Edge with units as "%" instead of "px". But in your case, it won't look good if user resizes browser window more in one direction.
Let me know if that helps.