[Nutrox]

Hi rfoote,

Replace the centerMC() function with this one...

function centerMC(mc:MovieClip, w:Number, h:Number):Void {

	if( w == 0 ) {
		w = mc._width;
	}

	if( h == 0 ) {
		h = mc._height;
	}

	mc._x = Math.floor((Stage.width - w) / 2);
	mc._y = Math.floor((Stage.height - h) / 2);
}

Then change your reposition() function slightly to this...

function reposition():Void {
	centerMC(mcContainer, WIDTH, HEIGHT );
	centerMC(mcBackground, 0, 0 );
	alignBottomLeft(footer);
	alignTopRight(topRight);
}

Replace WIDTH and HEIGHT with the width and height of your mask. That should work as long as your mask doesn't change size.

[rfoote]

Awesome, that worked great! Thanks Nutrox!

[uxte]

Quote: Originally Posted by arteye

I uploaded it to a server with the code you had uxte, tried it on several different types of machines running IE and it still would not work, much as many people here are saying.

Hey arteye I even went has far as to try it on IE 5.0 and it works always. Does anybody else have this problem, and if yes what is the browser/ system you're using.

[Zee]

Wow! This thread is still here???? I was a part of this historic thread back in 2006. Helped me tremendously when I built this site: www.vickiewinans.com

[Oxigan]

I´ve read through the whole Thread, grabed some Code of Nutrox and translated it into AS3. The Resize itself works really great, and everything is ok But one little thing what i cant figgure out is:
At the moment the Image resizes vom the top left corner , is it possible to set this to the center? So, if i minimize my browser window ( lets say only 50 pixel width of flash can be seen ) then the image middle would be @ 25 pixel. This means, the middle of the image is ALLWAYS the middle of the available browser area - like @ http://www.creative-box.co.jp/.

This is the Code im currently using:

**************************************
function OnResize( event:Event ) : void
{
stageWidth = stage.stageWidth;
stageHeight = stage.stageHeight;

backgroundMC.scaleX = 100;
backgroundMC.scaleY = 100;

var sX:Number = stageWidth / backgroundMC.width;
var sY:Number = stageHeight / backgroundMC.height;

var s:Number = ( sX > sY ) ? sX : sY;

backgroundMC.scaleX = 100 * s;
backgroundMC.scaleY = 100 * s;
}
***************************************

sorry for my bad english

Thx & Greetings, Mike

[Nutrox]

Hello Oxigan,

You only need to add two more lines of code to the end of your OnResize function:

backgroundMC.x = ( stageWidth - backgroundMC.width ) / 2;
backgroundMC.y = ( stageHeight - backgroundMC.height ) / 2;

That should make sure the image is always in the middle of the stage.

[rkgibbons]

Hi Folks,

Great thread! I've done my best to follow all the examples, but I've been somewhat confused by the different approaches suggested over the time-span of the thread (which I'm sure are a result of changes to ActionScript and Flash). Anyway, I'm not sure if any of the examples have addressed my specific need.

I need to build a site with a series of fairly hi-resolution full-screen backgrounds. When the browser is scaled, I need the background image to stay positioned correctly, but not to scale either horizontally or vertically. A perfect example is the following site:

http://www.revolutionaryroadmovie.com/

In this example website, when the browser is shrunk horizontally, the image kind of stays right-aligned and disappears off the left of the screen. When the browser is shrunk vertically, the image disappears off the bottom of the screen.

Could anyone be kind enough to provide some example code of how this could be achieved?

Thanks!

[uxte]

Hi rkgibbons,

What you want to achieve is quite simple. The image in the background is aligned to the top and right.

imageHolder.x = stage.stageWidth - imageHolder.width;
imageHolder.y = 0; 

[rkgibbons]

Quote: Originally Posted by uxte

Hi rkgibbons,

What you want to achieve is quite simple. The image in the background is aligned to the top and right.

imageHolder.x = stage.stageWidth - imageHolder.width;
imageHolder.y = 0; 

While I agree that the background in that site is aligned to the top, I'm thinking that there has to be something else going on with the horizontal alignment. The backgroud image appears to float a bit when you resize the browser (horizontally). When I maximize the browser on a widescreen monitor, I can see all of the two actors (plus a bit of white space even further to the right). But when I start to shrink the browser, I see less and less of the actors...which wouldn't happen if the image was just aligned to the right, would it?

[petar]

Quote: Originally Posted by arteye

I used the same code that everyone was having a problem with here and I was able to fix the problem of the background not loading in IE by updating to swfobject 2.1 (this example used swfobject 1.5).

That alone was not enough though to fix the problem, thanks to someone helping me out it turns out you have to make IE force load the swf each time so the background works by adding the following values to your swfobject code:

<script type="text/javascript">
var rand = Math.random();
var params = {bgcolor:"#000000"};
swfobject.embedSWF("flash.swf?"+rand, "flashcontent", "100%", "100%", "8.0.0");
</script>

Hope that helps everyone that was having an issue in this thread. Just wanted to post my findings.

That fixed the problem with IE not loading the background

this worked a treat.. luv you long time

[Nutrox]

Quote: Originally Posted by rkgibbons

While I agree that the background in that site is aligned to the top, I'm thinking that there has to be something else going on with the horizontal alignment. The backgroud image appears to float a bit when you resize the browser (horizontally). When I maximize the browser on a widescreen monitor, I can see all of the two actors (plus a bit of white space even further to the right). But when I start to shrink the browser, I see less and less of the actors...which wouldn't happen if the image was just aligned to the right, would it?

I could be wrong but it looks like the image in that site you linked to is just being centered horizontally.

imageHolder.x = ( stage.stageWidth - imageHolder.width ) * 0.5;

[creativeye]

Hi

I have just spent a good hour or so looking through this post and am struggling to find what it is I am after. I have limited knowledge of actionscript but here is what I need... Oh and I am using Flash 8.

I am trying to do an online flip book but I need to make the movie clip exact proportions and scale on browser resize. Here is a link to a flip book which does exactly what I am after....

http://issue.igizmo.co.uk/1P4979a41588840012.cde

As you can see there is a fixed pixel height between the top and bottom of the browser and the movie resizes in proportion.

I have got the book working along with a tiling background but this has stumped me.

I will be forever grateful for a solution.

Thanks

[Onny]

Quote: Originally Posted by Mijiru

bcrabtree, this should work

Stage.scaleMode = "noScale";
Stage.align = "TL";
function scale(mc){
    var Width:Number = 1000;
    var Height:Number = 762;
    var GetWidth:Number = Math.round(Stage.height/Height*Width);
    var GetHeight:Number = Math.round(Stage.width/Width*Height);
 
    if (Stage.width <= Width & Stage.height >= GetHeight)   
    {
        mc._width = Stage.width;
        mc._height = GetHeight;
    }
    else if (Stage.height <= Height & Stage.width >= GetWidth){
        mc._height = Stage.height;
        mc._width = GetWidth;
    }
    else {
        mc._width = Width;
        mc._height = Height;
    }
}
function center(mc){
        mc._x = Math.round((Stage.width/2)-(mc._width/2));
        mc._y = Math.round((Stage.height/2)-(mc._height/2));
}
this.holder_mc.onResize = function(){
        scale(this);
        center(this);
};
Stage.addListener(holder_mc);
stop(); 

edit* we all like var right?

First of all, hello to everyone!
I've been reading this thread for few days now and it really comes with a lot of information. You guys rock!

I'm trying to use this code I found in this thread and it works quite well but I have a slight problem:

What if my holder_mc is originally much much bigger than stage size(or browser window) for example 2000px times 1400px. What I want it to do is to scale to fit the stage keeping its aspect ratio when loaded for the first time..
With this code it puts the mc to topleft and with its original size. Only after you resize your window, it works like I want it to work..
So what am I missing from the code that it would force it to fit the stage at the beginning?
Sorry for my bad english and low knowledge in AS..
But it would be more than great if someone could help me with this.. thanks.

[Nutrox]

Hi Onny,

It that code example you posted you could just add the following line:

holder_mc.onResize();

You basically need to execute your resize function(s) as soon as you have set everything up, if you don't do that then nothing will be updated until the SWF is first resized.

[Onny]

Oh yes that's it!
I knew it was something as simple as that.. Thanks Nutrox!!

I was also wondering, what if I want it to do just like it does now, while leaving some amount of pixels blank in y-axis.. Let's say 100px in top and/or bottom? And still scaling between them in aspect ratio? Is it possible?

Thanks again!

[ghostheroreda]

This Seen Very Useful As~ Thx

[armababy]

Hello a lot of reading here

Anyway i would like to ask someone to tell me how to get working this kind of stuff:
My flash takes 100% browser window on 1280x1024 monitor size, but on 1024x768 it cuts top/left/bottom/right parts of mc and don't resize to fullfill that browser window.

Is there any solution for that ?
I don't need to resize mc when user resizes his browser i need something that can take full browser space on any monitor when someone is entering website.

Help me please how can this be done ?

[djedzed]

Since this thread has been such a valuable source of information I figured I would try to take it in another direction and make it the one stop shop for all things full screen.

I'm working on a site that's using the full screen model described here (AS2). The way it differs is that when the user transitions from section to section the old content slides off to the left of the browser (no matter what the resolution) while the new content comes in from the right. This happens at the same time so that it looks like the page is sliding.

Here is an example of something similar to what I am talking about http://nawlz.com/ click on the 2 at the bottom for the best example (issue 2). This appears as one large image opposed to mine using centered sections (which will help keep down on initial file size). This link http://www.johnnyslack.com/ shows a more accurate depiction of the motion of the content on stage but in my case it is not thumbnails, it's a new section of the site with completely different content.

I have started some ways of solving this but before I go too in depth I would like to see what people suggest or have run into that have executed this in the past (Nutrox - Uxte ..haha).

Here are a few couple other example to show a site that side scrolls like I am talk about.

http://www.jonathanyuen.com/
http://www.sonypictures.com/homevideo/30daysofnight/ (not full screen)

Any help or discussion on this would be GREATLY appreciated.

Thanks all.

[zurdoksoft]

For Everyone, im using this AS for a fullscreen centered page, everything look fine, but im working with the preloader and im stuck there, any suggest.

First Frame:
AS:

Stage.scaleMode = "noscale";
Stage.align = "tl";
Stage.addListener({onResize:_root.reposition});
//
//fit on screen
//
function reposition() {
	backgroundx._width = Stage.width;
	backgroundx._height = Stage.height;
	//
	logox._x = (Stage.width/2);
	logox._y = 38;
	//
	titlex._x = 0;
	titlex._y = 0;
	//
	bottomx._x = -10;
	bottomx._y = Math.floor(Stage.height);
	//
	bottom_text._x = Math.floor(Stage.width);
	bottom_text._y = Math.floor(Stage.height);
	//
	menux._x = Math.floor(Stage.width/2);
	menux._y = 80;
	//
	contenido._x = (Stage.width/2);
	contenido._y = (Stage.height/2);
	//
}
//
//main assembly
//
function main() {
	attachMovie("background_mc","backgroundx",1);
	attachMovie("title_mc","titlex",2);
	attachMovie("logo_mc","logox",3);
	attachMovie("bottom_mc","bottomx",4);
	attachMovie("bottom_text_mc","bottom_text",5);
	attachMovie("menu_mc","menux",6);
	attachMovie("contenido_mc","contenido",7);
}
//
//run functions stuff
main();
//
reposition();
//

link:
http://tfmandrel.googlepages.com/index.html

PS: Im using Mozilla as defualt Webrowser

Any sugest?

[zurdoksoft]

edit new link

http://zurdok82.googlepages.com/index.html

[zurdoksoft]

Myloader swf File AS

frame1

Stage.scaleMode = "noscale";
Stage.align = "tl";
Stage.addListener({onResize:_root.repoloader});
//
//main assembly
//
function loader() {
	attachMovie("background_mc","backgroundx",1);
	attachMovie("preloader_mc","preloader",2);
	_root.fondo = true;
}
//
//fit on screen
//
function repoloader() {
	backgroundx._width = Stage.width;
	backgroundx._height = Stage.height;
	//
	preloader._x = Math.floor(Stage.width/2);
	preloader._y = Math.floor(Stage.height/2);
	//
}
loader();
//
repoloader();
//

frame2

stop();
_root.onEnterFrame = function() {
	if (fondo == true) {
		gotoAndStop(3);
	} else {
		gotoAndPlay(1);
	}
};

frame3

stop();
this.createEmptyMovieClip("img_mc",999);
var my_mcl:MovieClipLoader = new MovieClipLoader();

var mclListener:Object = new Object();
mclListener.onLoadError = function(target_mc:MovieClip, errorCode:String, status:Number) {
	preloader.gotoAndStop(2);
	trace("Error loading image: "+errorCode+" ["+status+"]");
};
mclListener.onLoadStart = function(target_mc:MovieClip):Void  {
	preloader.gotoAndPlay(3);
	trace("onLoadStart: "+target_mc);
};
mclListener.onLoadProgress = function(target_mc:MovieClip, numBytesLoaded:Number, numBytesTotal:Number):Void  {
	var numPercentLoaded:Number = numBytesLoaded/numBytesTotal*100;
	preloader.preloader_texto.text = numPercentLoaded;
	trace("onLoadProgress: "+target_mc+" is "+numPercentLoaded+"% loaded");
};
mclListener.onLoadComplete = function(target_mc:MovieClip, status:Number):Void  {
	trace("onLoadComplete: "+target_mc);
};
//
my_mcl.addListener(mclListener);
my_mcl.loadClip("index.swf",img_mc);

[weejimmyhat]

This code is wonderful, and works a treat, but I'd like to delay the background.jpg image loading, by, say 3 seconds.

The background jpg currently loads/appears before mc.swf, which causes a problem with my website intro sequence:

1. a blank grey screen with logo (in mc.swf)
2. a simple wipe transition (also in mc.swf)
3. the background image revealed (background.jpg - which I'd like to load up just after mc.swf loads)

With limited Actionscript experience, I've tried everything I can think of, but with no success. Any help would be massively appreciated!

Here's my current code:

---------------------------------------------------------------

stop();

Stage.scaleMode = "noscale";
Stage.align = "tl";

import mx.transitions.Tween;
import mx.transitions.easing.*;

//Center movieClip reusable function
function centerMC(mc:MovieClip, w:Number, h:Number):Void {

if( w == 0 ) {
w = mc._width;
}

if( h == 0 ) {
h = mc._height;
}

mc._x = Math.floor((Stage.width - w) / 2);
mc._y = Math.floor((Stage.height - h) / 2);
}

//Fade in or out reusable function
function fadeMc(mc:MovieClip, newAlpha:Number, duration:Number):Void {

var mcAlpha:Number = mc._alpha;
var fade:Tween = new Tween(mc, "_alpha", Regular.easeOut, mcAlpha, newAlpha, duration, false);

}

//Reposition elements
function reposition():Void {

centerMC(mcHolder);
bkgScale();

};

Stage.addListener({onResize:reposition});

//Scale Background
function bkgScale():Void {

// This is the proportion (width/height) of the image
var imageScale:Number = bkgHolder._width/bkgHolder._height;

// This is the proportion (width/height) of the stage
var stageScale:Number = Stage.width/Stage.height;

// If the stage scale is bigger than the image scale the images width resizes to the stage
// width and the image height takes the stage proportion
if (stageScale>=imageScale) {

bkgHolder._width = Stage.width;
bkgHolder._height = Stage.width/imageScale;

// If the stage scale is smaller than the image scale the images height resizes to the stage
// height and the image width takes the stage proportion
} else {

bkgHolder._height = Stage.height;
bkgHolder._width = Stage.height*imageScale;
}

}

/////////////Loader//////////////////////
var loaderListener:Object = new Object();
//When loading starts turn the loaded clip alpha to 0
loaderListener.onLoadStart = function(mc:MovieClip):Void {

mc._alpha = 0;

};
//When the first frame of the loaded clip have been executed
loaderListener.onLoadInit = function(mc:MovieClip):Void {
//if it is the background
//scale background
//and load the external mc with a 1000 miliseconds delay
// so the appearing of the elements seem more smooth
if (mc == bkgHolder) {

bkgScale();

setTimeout(loadMc, 1000);

}

//if it is the external mc
//center it
else if (mc == mcHolder) {

centerMC(mc);
}

//Tween the loaded alpha to 100
fadeMc(mc, 100, 20);

};

var loader:MovieClipLoader = new MovieClipLoader();
loader.addListener(loaderListener);
//Load external MC
function loadMc():Void {

loader.loadClip("mc.swf", mcHolder);

}
//Load background image

function loadBKG():Void {

loader.loadClip("background.jpg", bkgHolder);

}
//Start Loading
loadBKG();

---------------------------------------------------------------

[rdub]

I've tried this code as well as others. The background will not fill the screen. http://www.invisiongrafix.com/samples/IG/

It should work like this. http://www.troika.tv/ (I've also seen other sites that work this way) What would you guess I'm doing wrong?

[HelgaValerie]

Thanks to Nutrox, found some useful pieces of code!

[shoemeistah]

thanks a lot for the code, good explanation

[2shirts]

Hello there,

I used the code of Uxte and it worked fine, until I put a preloader into the main movie. If I play the swf file alone, it seems to work, but if I play from the beginning up to that movie (which contains the preloader), the process stops right after loading the background. I'd like to know if there is any workaround for this. By the way, thank you so much for your hard work, I learned a lot, and there still is a lot and a lot more to learn.

[gmoeller54]

Hi peoples....great stuff.
I am creating a website which can be seen at: http://soldesigns.com/furniture/

This sandwhich is: index.html-->calls upon bust_test.swf--->loads home_mc.swf
I would like the flash background (bust_test.swf) to change with resolution (like an swf normally would), and the loaded mc (home_mc) to be a fixed size always and always at the center.

Right now, all I can get it to do is load the home_mc, which puts it in the top left, not the center.
It also seems that after putting the "no scale" call on the loaded mc (home_mc), it affected the background (bust_test) as well.

the code on home_mc is (this is the little rectangle that ought to be centered-and never change size):

Stage.scaleMode = "noScale";

And in bust_test (main background):

loadMovieNum("home_mc.swf", 1);

function setStage(){
home_mc._x = Math.round((Stage.width/2)-(home_mc._width/2));

home_mc._y = Math.round((Stage.height/2)-(home_mc._height/2));
}

stageChange.Object = new Object();
stageChange.onResize = function() {
setStage();
};

Stage.addListener(stageChange);


I'm sure it's an easy fix.
I appreciate your help!!

[Nutrox]

You need to wait for the home_mc to load/initialize, then you call the setStage() function. See this thread

[gmoeller54]

Uxte,
I downloaded your .fla which is the example at:http://www.uxte.com/test/centering_example/example.htm

I replaced the background.jpg with a .swf and replaced the center movieclip. For some reason, the center movieclip justifies to top left
http://soldesigns.com/furniture/main_mov.html
also, I tried copying the source code for the html you put up to house all of this, and it looks like there is a .js file that goes along with it....could you post that please

[gmoeller54]

Nutrox,
It makes sense that the movie ought to load first, but how do I get it to recognize that it is fully loaded before proceeding?
- I am using the
loadMovieNum("home_mc.swf", 1);
call to load the movie...what do I do after this to stall the start of the setStage function until home_mc is loaded?
thanx!

[gmoeller54]

any help please?

[Nutrox]

You could do something like this:

loadMovieNum( "home_mc.swf", 1 );
onEnterFrame = function() {
	var n = _level1.getBytesTotal();
	if( n && n == _level1.getBytesLoaded() ) {
		onEnterFrame = null;
		// HOME SWF HAS LOADED
	}
}

In a nutshell, wait for the SWF to load, then position it. This subject has been covered numerous times already.

[liamb2001]

Hiya, i apologise if this has been covered before but i have been searching forums including reading this post for so long and have tried so many things i dont think my brain is registering anymore

What i am trying to do is create a flash page that stretches a full screen background whilst keeping aspect ratio and not creating a border, and then have my 3d carousel menu which i purchased on top of that layer so it resizes and stays central without cutting off ay part of the menu..I have posted what i want on the carousel site i purchased it from and they are no good and tried now over 15 different techqiues and tutorials but not one has been succesful. I admit i am a bit of a flash novice but im detemined to get this to work.

i have found a site thats doing exactly what i want to acheive

http://www.cyber-coach.co.uk/CC/Home.html

it has a full background on the content on top shrinks/ enlarges to always fit with a perfectly displayed background image at all times.


not this is my attempt

http://www.districtsports.co.uk/flash/ which looks even enough until you start to resize it for example you make it very narros it cuts out half the menu instead of shrinking it right down like cyber coach.

and using the same technique here

http://www.districtsports.co.uk/flash/parents.html

its cutting the bottom of my blue box on whcih is intended for content, obvsiously this is going to be no good as people will have to fiddle around in resizing to see all the content

I need it to auto fit like cyber coach

the code needs to be in AS2 as the 3d carousel menu ive purchased is and the current code i am using is

Stage.scaleMode = "noborder";
Stage.align = "tl";

although i have tried loads of code including code form this post i cannot get it to work

plllllease help me or give me advice on doing this i will be eternally grateful