Adapt size depending on users resolution

Hi there

Im just a little bit curious… is there a way to detect the users resolution. Then let the flashmovie (html) adapt in size depending on users resolution? hope you understand me here… Im sorry if its blurry written :slight_smile:

Rock hard

it can be done, I had it working on a site of mine a while ago.

Use flash mx’s System commands to return the users resolution. You’ll need two pages, the first is a blank movie with some code going on:


getURL("MainPage.html?ScreenWidth=" + System.capabilities.screenResolution.x + "&ScreenHeight=" + System.capabilities.screenResolution.y);

so the first page loads, detects the users screen res and opens the main page, passing the screen res as it goes.
next you’ll need some javascript in the main page html that captures the passed parameters and uses them to dynamically define the movies width and height paramters:

main page html:
(this is off the top of my head so might not work properly)


script language="javascript">
href=document.location.href;
ScreenWidth = href.substr(href.indexOf('ScreenWidth=') + 12, href.indexOf('&'));
ScreenHeight = href.substr(href.indexOf('ScreenHeight=') + 13);
document.writeln('OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"');
document.writeln(' WIDTH="' + ScreenWidth + '" HEIGHT="' + ScreenHeight + '" id="Loader" ALIGN=""> PARAM NAME=movie VALUE="Movie.swf"> PARAM NAME=quality VALUE=high> PARAM NAME=bgcolor VALUE=#FFFFFF> EMBED src="Movie.swf" quality=high bgcolor=#FFFFFF  WIDTH="' + ScreenWidth + '" HEIGHT="' + ScreenHeight + '" NAME="Loader" ALIGN=""');
document.writeln(' TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">/EMBED>');
document.writeln('/OBJECT>');
/script>

(note I’ve had to delete all the <'s as this forum doesn’t want to display them)

edit: hmmm… it would seem that even after deleting the <'s it still isn’t displaying properly, hopefully there’s enough there to give you the idea

these are the lines I’m not sure about, but with a bit of tweeking you should be able to get them working:

ScreenWidth = href.substr(href.indexOf(‘ScreenWidth=’) + 12, href.indexOf(’&’));
ScreenHeight = href.substr(href.indexOf(‘ScreenHeight=’) + 13);

Good luck! let me know if you have any problems

well that would work but i prefer to not resize my flash movie. i use javascript detection and then depeding on what the users resolution is, redirect them to the appropriate layout. if you want to do it through javascript reply and i will post the code

Thanx both of you… I havnt the time right now to try it out but will soon…

and Digitalosophy… I would very much appreciate som javacode for redirection…

thanx again

ok well here’s a srcipt that i love to use. simple and straight foward. now depending on what your swf size is you might want to do something else like what i mention in the previous post. but this to me is much cooler. here’s a quick rundown of how it works. on your html page create a table. insert your flash movie into that table. what happens is the javascript centers that table horizontally and vertically to fit your users monitor, even if for soem strange reson they should change their resolution while the are at your site. here’s the code

<SCRIPT language="JavaScript">self.moveTo(0,0);self.resizeTo(screen.availWidth,screen.availHeight);</SCRIPT>

now all that is left is to make sure your table’s height=“100%”

now if your swf is large this script may not do the trick for 800*600 resolutions, so you have to play around with it. i prefer this script because there is no redirection.

good luck !:slight_smile:

Thank you so much… Its for a future project so I will try it later… I didnt know it was possible at all.

Thanx

no problem mang

Hey that script worked great, but I must ask, is there another way than redirection, then I must resize everything in the movie… can you through javascript resize the flashmovie? hope you understand my point… so the flashmovie looks the same in all resolutions (maybe not exactly but you know)

thanx again

i think your misunderstanding what i said. that script is not in any way redirecting your flash movie. its only positioning your movie to be centered in the browser. that is why i wrote that script intstaed of redirecting. this way you DO NOT have to resize anything in flash. the script i provided answers your question

“can you through javascript resize the flashmovie? hope you understand my point… so the flashmovie looks the same in all resolutions (maybe not exactly but you know)”

if the script works correctly then when you change resolutions your movie shuld still be centered.

btw what size is your movie?

no no… did not misunderstand you… I got that the flash movie gets centered all the time and I liked the script very much thx… ok I will try to explain.
Lets say My movie is 750600 and I use the resolution 12801024. When I watch it in my browser it has the size I like. But if I change the resolution to 1024*768 I would like it to have the same size… for the eyes so to speak. Is there a possible way for this… or do I have to use redirection?

thanx again

well first off flash is vector based meaning if you make a graphic and fullscreen the movie the graphic will notbe morphed. however if your using any bitmap images, there will be a distortion so i would go reirection in that case. do you want the script?

will this happen even with externally loaded images? and you are now speaking about when using the script you gave earlier?

any script is a script to save so yes please… thanx ( I just realized you are located pretty far from here… cool)

rock on

i am a firm believer that when you design, you should make a page that will look good on everyone’s monitor. i personally coudl give 2 **** about people with small resoulutions except if those people are goign to be the ones to look at the site. i said it before, knwo who your users will be. who is goign to be looking at your site? based on that you should already know what size you want to make your movie.i know this may seem difficult, but it will come with design experience

as far as your question im really not sure what u mean by loading images externally. do u mean load .swf’s extrenally with your image embeded in the .swf? becuase if u do hen, yes it will still be diistorted. i will post redirection code when i get home from work, along witha brief tutorial on how it works.

I do know about the targeting thing… know who the user is… its part of my school studies… and of course… the flashmovie isnt for users with dialups and 800*600… I was just curious if there was a way of doing it.

the thing I meant with the images was loading in jpgs into empty movieclips… externally yes… not from the library. Im not the best in explaining in english… sorry if I confused your mind.

thanx and Its no hurry with the scirpt :slight_smile:

I’ve followed this thread and have a question of my own. I hope you can help DigitalP, or at least point me in the right direction.

Here’s the dilemma.

I have a Fireworks generated vector graphic that has “effects” applied and must be “flattened” to be seen in Flash. I’m considering making 2 versions ( one for 800x600 and 1024x768 and another for 1280x1024 and 1600x1200 resolutions).

Is it possible to detect the users screen resolution and load one or the other into a container movie clip nested on the main timeline…???

hmm well i’m not too sure about

Is it possible to detect the users screen resolution and load one or the other into a container movie clip nested on the main timeline…???

. At worst case you can make 2 flash files. one for 800x600 and 1024x768 and the other for you bigger size. Use javascript to detect user’s reso and then point them to the proper .swf. I don’t have the javascript on me and I can’t seem to remeber the whole thing, but I will post it when I get hoem from work. any more questions? let me know, i’ll be happy to help