Fullscreen Image (Keep Proportions)
- Started
- Last post
- 14 Responses
- sisu
How can I keep my flash video (or image) full screen despite resizing the browser. I have it almost working here, using a stage listener
http://www.sisuhome.com/fullscre…
I want it to work how this site does:
http://www.ondademar.com/... where the image never goes out of proportion and never shows the html page bg color.
- OSFA0
Beautiful site!
- stupidresponse0
you're close. the problem is that you're setting the width of the clip to the stage width, but you also need to check if the height is less than the stage height.
- sisu0
// ***Stage aligned top left
Stage.align = "TL";
// *** Stop the stage from scaling with the browser window.
Stage.scaleMode = "noScale";
stop ();
// initiate postitions and scaling values for objects
if ( randomMovie._width > randomMovie._height ) {
ratio = randomMovie._height / randomMovie._width;
randomMovie._width = Stage.width;
randomMovie._height = randomMovie._width * ratio;
} else {
ratio = randomMovie._width / randomMovie._height;
randomMovie._height = Stage.height;
randomMovie._width = randomMovie._height * ratio;
}
asab_logo._x = (Stage.width / 2) - (asab_logo._width / 2); // set the X and Y location for the progress bar. You may want
asab_logo._y = 70; // to set this differently depending on your stage layout
// end initial position setting//create a listener that checks to see if the browser window is resized
sizeListener = new Object();
sizeListener.onResize = function() {
// change movieclip properties when the window is resized.
if ( randomMovie._width > randomMovie._height ) {
ratio = randomMovie._height / randomMovie._width;
randomMovie._width = Stage.width;
randomMovie._height = randomMovie._width * ratio;
} else {
ratio = randomMovie._width / randomMovie._height;
randomMovie._height = Stage.height;
randomMovie._width = randomMovie._height * ratio;
}
asab_logo._x = (Stage.width / 2) - (asab_logo._width / 2); // set the X and Y location for the progress bar. You may want
asab_logo._y = 70; // to set this differently depending on your stage layout
};
Stage.addListener(sizeListener);// ***Loads random external swf
loadMovie("random/0"+(random(5... _root.randomMovie);
- Llyod0
that's pretty nice. what does it do?
- sisu0
That's the code I'm using—sorry for not giving context. Any help in answering my questioni above would be appreciated.
- Jnr_Madison0
I have template fla's I made if anyone wants them.
Hello Jaline :)
- p.s. leave a note on here if anyone does, my mail is still a bit fucked.Jnr_Madison
- Would you mind, terribly? I know next to nothing about Flash, but that's one gimmick I really like. PS Welcome back!detritus
- hi :)Jaline
- Jnr, would you mail me a template too, been searching for it all day, thanxDrno
- Mail sent.Jnr_Madison
- Jaline, please mail it to me: mark@sisuhome.comsisu
- I don't have it...Jaline
- mimeartist0
you take the ratio of the image (width/height) and compare it to the ratio of the users browser size (width/height), if it is wider, you use the height of the browser for the height of the image, and the width is the height * the ratio of the image.
If it is narrower then you use the width of the browser for the image, and the height is the width / the ratio of the image.
You'll need to offset these obviously, set your alignment to TL and a listener something along the lines of...
Stage.align = "TL";
Stage.scaleMode = "noscale";
Stage.addListener(this);function onResize() {
//PUT YOUR CODE IN HERE to check for stage.width etc.
}
- jkmohr0
if it's really simple, i usually just set the width and height of the image to 100%. then i use CSS to position everything ontop of that image.
- Drno0
if you also have a good link with a tutorial about how to achieve resizable fullscreen video bg,
please post it
- sisu0
Yes, someone please do.
- OSFA0
Yo Jnr_Madison,
I sent you an email just in case, but could you please email me a template if possible? I've also been going crazy trying to make this work... Thanks!
- Mail sent, don't think it helped the other guy though? Anyway see if it suits your needs.Jnr_Madison
- p.s. the fla's I sent are named the same so make sure you save them into different folders .Jnr_Madison
- geralddean0
howdy Jnr_Madison,
I'd like a fullscreen fla plz.
Thanks.
- poomoo0
On a slightly different note:
I am doing the same thing except with dynamically created movieclips. All my mc's and their content are generated in the as. When I center these dynamic mcs, they have a width and height of zero, then the content is created and displayed.
So it looks like the top left corner of the mc is centered. As soon as the stage size is changed it quickly jumps all the content into the correct centered positions.
Any ideas how to sort this?