General Question

meemorize's avatar

Flash advice needed: How do you position elements based on the screensize?

Asked by meemorize (324points) December 1st, 2008


Quite often I see flash websites that stretch a full 100% of width and height of my browser window. They do so without changing the size of any elements (12 pt type stays 12pt) and the elements position and re-position themselves automatically depending on your screensize as if the formula is something like:
” position x = 100% of screen – 50px. ” that way whatever the element would always even after resizing be 50px off from the right side of the edge of the browser window.
The same is done with top and bottom, a loading bar for example that is always at the very bottom or a menu that runs along top.

I cannot figure out how it’s done, as any ‘publish’ setting will simply stretch the swf to 100% either by distorting the dimensions or by ‘enlarging’ the elements.

Any link to tutorials and advice would be much appreciated.

Observing members: 0 Composing members: 0

7 Answers

Perchik's avatar

I think what you’re describing is done through CSS… but I’d have to see an example before I can say for sure.

Breefield's avatar

I know that in actionscript 2, it’s Stage.width. So you could center a movie clip by setting it to Stage.width – (Stage.width / 2) – (element.width / 2)

meemorize's avatar

@ Perchik, Thanks but in this case it is definitely done within Flash. Not CSS.

@ Breefield, AS2 is fair enough, I’m in no rush to adapt to AS3. Is there a tutorial you know of that would describe what you just mentioned in more detail? I am very very far away from being fluent in ActionScripting.

Perchik's avatar

Meemorize, I could do a flash website and use css entirely to position things…I’ve done it. It could be done with css.

funkdaddy's avatar

I don’t think it’s possible with straight CSS, but I would love to see it if it is. It would be a great trick.

@meemorize Here’s a good example of what I think you’re talking about, I may be misinterpreting –

These tutorials seem to get you going in the right direction, although you may need to tweak the results…

Would love to check it out when you’re done and good luck with the site.

meemorize's avatar

@ Perchik. Wow, i had no idea CSS could be that awesome. If you have a link to a website or tutorial that shows me what you mean that would be brilliant.

@funkdaddy. The first link is somewhat related to what I mean but this site shows you what I really want. Don’t be distracted by the awesome but unimportant background and look at the menu top left and top right how it stays in place when you resize the browser.

I will check out the tutorials now. Thanks again.

jumpo7's avatar

@meemorize sorry but that is yet another annoying flash UI in my opinion. It adjusts the menu locations horizontally but not vertically. As far as doing that in flash, you would need to get the screen width and height then divide by 2 to get the center point and then position things based on the screen and element as @Breefield displayed for AS2. It is also checking the mouse position and scrolling the entire UI if the screen dimensions are shorter than the stage height.

Looks like your example site is using the swfobject js which is what helps make the movie fill the screen. Here is a link to one of the example files

Answer this question




to answer.

This question is in the General Section. Responses must be helpful and on-topic.

Your answer will be saved while you login or join.

Have a question? Ask Fluther!

What do you know more about?
Knowledge Networking @ Fluther