I'm trying to do essentially the same thing. I have a stage created at 1920x1080, but all the main content displays within the center 1024x768 pixels. This way, if someone is viewing the Edge composition on a 1080p screen or an iPad, they will both be able to see the same "main content" displayed neatly in the center of their screen.
I was able to get the background image to stay in the center of the display thanks to this forum: http://forums.adobe.com/message/4770703.
However, I am unable to get my symbols to remain in the center, even using the "stage/compositionReady CSS centering technique". I also tried setting the symbol's stage instance to "resize" instead of "scale".
Basically, the symbol contains a series of labels and buttons that appear above objects on the background image. I need these labels and buttons to stay above the objects when the screen size changes.
Any suggestions? Or should I provide additional information?
I figured out a (not so) elegant solution to my problem, so I thought I would post it here for anyone having similar problems.
The solution involved ignoring any scaling, and only focusing on what was being displayed, so I built the stage at 1024x768. Then I added in a background (that was 1920x1080).
I centered the background & symbols using code in the "document.compositionReady" & "window.resize" events. The code I used is the same for both events:
var trueStage = sym.$("Symbol_Name");
left: ($(document).width() - trueStage.width()) / 2,
top: ($(document).height() - trueStage.height()) / 2
var backgroundOffset = sym.$("BG");
left: ($(document).width() - backgroundOffset.width()) / 2,
top: ($(document).height() - backgroundOffset.height()) / 2
Using this method allows the symbol to always remain in the center, and the background looks nice on any resolution (up to the background size, which is 1920x1080).
I can post an example and source code of this functionality if anyone is interested.
Do post your example. It is often easier to understand for many people when we can look under the hood!
Here's the link to view the example: http://www.shawnflanagan.com/test/resize_test_example/resize_test_final.html
Here's the link to download the source code: http://www.shawnflanagan.com/test/resize_test_example.zip
I added in some text boxes to show the values of each corner, so we can see the resolution being displayed (for both the browser and the stage).
Isn't there any other solution for centering the symbol on the stage?
My example looks like this:
When you scroll down to products, it looks great at 1920 px width. But if you scale the browser, everything is acting nice responsive till 1024 width, everything but products div resp. symbol: it moves a bit, but it is not centered. So if you open the site with ipad, the right side, say 50 % of picture in product is complettely cut, say not visible, and you cannot scale the whole to see it.
Please people help... this is the only thing which remains ugly resp. not acceptable...
Who helps me gets a crater of good german beer from me...
Do you have a minimum width set for the stage? It seems like that is the most likely problem.
Try setting the stage's minimum width to 0. That's what I did to get the symbols to stay centered in the browser window no matter what the browser's size is.
I solved the problem. but by solving the problem with centering the symbol on the stage I created another one, a very strange problem.
Firstly the solving of centering problem:
I left all settings of the symbol by px, (means no responsive layout), set 0 px o for position, and wrote a css which then centered the symbol on the stage,
margin : 'auto',
here how does it look in edge:
The symbol products is behaving just as supposed. The problem I created and which I don#t understand at all: I created another symbol (news) made the very same adjustments, but the symbol is not positioned as supposed. (of course I change the name of symbol in css). What the heck???
Anyone any idea why this is happening?
Here the link:
Ah ja, this is really very strange:
when I change the order of layers in edge, then the problem with strange positioning is moved to another symbol. In another words: If layer of the news symbol is laying over the layer of products symbol in edge, its position is false rendered, and vice versa - if products symbol is laying over the news symbol, then the products symbol is repositioned. Haaaaa?!?! Anyone any idea why this is happening????
That is very strange. Haven't heard that one before.
Seems difficult to diagnose the problem without seeing the Animate file. WOuld you be willing to post it for us to take a peek at what is going on?
I solved this very strange problem by repositioning the symbol on the stage before rendering, so after creating a html file it looks all good (even if it looks in Edge very strange). I also tested it on IE 7,8,9, on Chrome both PC and Mac, on Ipad 1 and 3, on Samsung Note 2 - it looks perfekt.
- Firefox doesn't load at all, means just a blank screen
- On Safari on Mac the Navigation Bar on the top looks weird when you try to scale browser (the fonts are somehow being duplicated or so)
- When you scroll down to Products and klick either the arrow on the right or the second circle, the next underpage is being animated - so far so good. But when you click the first circle to animate the first product underpage, you always need two clicks, because by first click it is blank, and by second klick then it is being animated. It looks like the playhead is being sent to the begining of the timeline of the products symbols and firstly beind stopped there. I don't have any sym.stop(); action on the beginning of this timeline. Any suggestions?
Here the link to online version:
And here the zipp-file: