hi Rob,

Thanks for this wonderful tips. I have a question regarding this tut. I saw your image is bigger than your document size in Flash. Is it ok to do that? Will it increase the final size? I am doing a website that I need an intro with several images rotating at the beginning but it ended up with the huge size file. What will you recommend for the format when I import those images to the flash. I saved my images as a jpg file.

The other problem I encountered was the website got cut off on the top and bottom after I brought it to the dreamweaver. It doesn’t show the whole site from the browser. I can only see the middle part of the site. Do you know what cause that happen? any solutions for that?

Thank you in advance

sorry, it’s me again. Forgot to ask one more question. If my document size is 1024×768 and my image size is bigger than that. How could i center it on stage?

Thanks again.

Thanks a lot for your quick response. I put my swf file into dreamweaver so that i can make an index.html file then upload to the server. Do you make an index.html in the dreamweaver?

thanks very much. I’ll try that.

Perfect - this is exactly what I need and have wondered how to do this loads of times in the past. Thanks very much!

Hi Rob;

How would I apply this code to my entire swf file? I tried applying it to the fla background movie clip calling it “pic” but it loads the background in the center with all the other elements in my original photoshop layout area (working with a designer). Also would like to discuss consulting re; working in my FLV intro. Thanks.

Thanks Rob; I can’t assign an instance name to the movie clip as I used flash insert movie clip which doesn’t allow me to attach an instance name: w/o the instance name the code doesn’t work. Any ideas? Thanks so much!

correction; I used insert New symbol which doesn’t allow me to assign an instance name.

Thanks,

joan

nice bit of code - good tutorial nice and simple to follow. cheers mate

as3 rocks and even rolls.tween lol

Thanks for this, if i want to center the content on my website with this backgroun, how do i do?

hey when i streach the browser my image is pixel out …………… how to do without pixel out?….. u have any idea………….

Thanks, I tried that but the scaling went strange then. (When i minimized the window i got two white boxes by each side of the image).

Maybe i did something wrong, will try that again.

This is a wonderful Tutorial. I will be using in the development of a cultural festival site. Thank you for the help.

Hey Rob,

Me again! Listen just to say a big massive thank you for all your help with the prop image scaling on my site.I finally managed to go live!!

Im in the middle of making a blog and I’ll throw some thanks your way on it.

Thanks again

Great tutorial! (you must be tired of hearing that), but I’m having a little problem which some others seemed to have. I want to establish minimum dimensions for the resizing. I used to know how to do it in AS 2.0 (i used a completely different code which worked pretty well) but I’m at a complete loss of where to include the conditional in your AS 3.0 code since I’m just beginning to migrate. I guess it will involve just setting a minimum width, but as I said, I just don’t know how to do it in AS 3.0

Maybe you could point me in the right direction

Thanks,

Hi Rob this tutorial is great its exactly what i wanted, the only problem im having is for some reason my slideshow wont work, i am using slideshowpro ive converted it to a movie and naming it pic but it will not play…

sorry 4got to mention im using as2

Hi Rob

Thanks for the reply i wonder is there any type of other sideshow that may work i could possible use im quite limited with my knowledge of flash…

Hi Rob i want the background pic (the leopard) as a slideshow of different images playing as resizable to the browser window and have the menu keep its proportions in the centre im no good with code unfortuntly, i copied and pasted this one… id be very grateful for help

Rob… you’re my hero.

Hi Rob - I created a full browser video in Flash and published the swf and html from Flash and the video works full browser nicely on PC and Mac. I however wanted to put content over this video background using html/css and the html text I have applied is only visible on Macs. I have looked on PC’s and cannot see the text over the video. I also tried this with your file and couldn’t see the text on PC. I was wondering what the problem/solution could be. you can view my source at http://www.kaceymorrow.com.

Thanks!

Hi Rob - Okay - so I figured it out from another forum that I needed to make the wmode transparent. that worked perfectly. thanks for your help!

Hi Rob,

Firstly this is great, a wonderful bit of code that massively helps the learning curve.

I was wondering if it’s not too much work could you show an example of how this would be structured as an external as file for comparison, i.e. within a package?

thanks Rob, it’d be greatly appreciated if you got the time.

hey there!

a much easier way would be to use the xscale property for proportional resizing.

example:
mc._height = Stage.height;
mc._xscale = bg._yscale;

no need for the math. hope it helps.

oops:

mc._height = Stage.height;
mc._xscale = mc._yscale;

like that.

to give more info:

put all your flash clips inside the movie clip that proportional scales to the screen it will all scale accordingly.

If your doing it for a device that has a rare height larger than the width reverse it.. can use an if statement..

good?

Hi Rob. This code is amazing it’s exactly what I was looking for. However, my website uses a “horizontal scrolling” technique that use this code: function moveX(targ, xpos, speed)

Where xpos = position of the X coordinate on stage.

I turned my entire scrolling background image into a movie clip, but the “moveX” function doesn’t proportionally re-size according to the browser window, making the horizontal scrolling technique work incorrectly.

Do you know a way around this? Or can you point me in the right direction?

Thank you!!

This is horizontal scrolling code: (AS2)

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

function moveX(targ, xpos, speed)
{
new Tween(targ, “_x”, Strong.easeOut, targ._x, xpos, speed, true);
}

home_btn.onRelease = function()
{
preload(”home.swf”,targ_mc);
//bg_targ_mc._x = 0\\
moveX(bg_targ_mc, -1000, 2)
}

My question is in regards to the function moveX(targ, xpos, speed)… What I meant is that with the proportional resizing code you have, the scroll positions of the scrolling background are off (the xpos doesn’t proportionally resize with the browser window).

I am guessing i need to do something with xpos parameter in moveX, meaning it has to be dynamic so that it can proportionally change based on the users browser. Correct?

However, I don’t even know what I would change and where! If you can help that would be amazing. Or at least point my in a certain direction. thanks!

nice tutorial thanks man

Hey Rob, great tutorial, exactly what I was looking for.

The resize function works perfectly, but some pictures (particularly ones with sharp, definable edges/lines) get distorted.

I was wondering if you knew a way for the images to resize without any artifacts?

take at a look at this site: The images in the background resize and the quality is not compromised in the process.

http://www.marc-austin.com/

thanks

Thanks rob for your promt reply!

I found out a way just before I checked back here, you can just add this to the end of the code (as2):

pic.forceSmoothing = true;

that would probably work great for externally loaded images

thanks
Tim

Great tutorial Rob.

However when I try to apply the action script I come across an issue. I want the image to be full screen at all times, but when I publish it in HTML the image is at bottom right of my screen and not fully displayed.

Thank you in advance.

-T.

Thanks Rob! You just saved my day!
Cheers!

Thanks Rob that did work, but now although the image is fullscreen it now has a small boarder on the top, left and right side. When I publish a preview as a flash file it displays fullscreen, but when I view it as an HTML it has a small boarder. I do have it the settings set at a 100%, and I tired messing with some of the other settings, nothings seems to affect it; Any suggestions?

Thanks again.

-T.

Rob,
Is there a way to apply this script only to the background on intro? I have a background image on intro but not the rest. I don’t want this script affecting the whole website. Do I have to set the HTML setting on Flash to percent instead of match movie even I have set up the html somewhere else? thank you.

Rob, thanks for the replied.
Yes, The entire website is built in Flash but I exported the swf file into Dreamweaver. What I’m trying to achieve is to have an image for background on the intro page only. The layout is center. When I apply this script to my intro page, it affects the whole layout because now all my navigation align to the top left corner. I only want that full width layout on the intro page only. Hope you understand my question. Thanks

Rob,
Other than preloader and toggle fullscreen, everything use timeline in this particular page.

Rob,
can you hep with the code? so my registration point is in the middle for the image so I just follow your script instead of using x/y coordinate since it’s not on the left corner right?

no problem. thx

Hey I’m using the below code to load external images but when I try to add the AS3 Proportional Image Scaling the code just makes the image vanish. Any ideas? Thanks a lot.

var imageLoader:Loader;
function loadImage(url:String):void {
// Set properties on my Loader object
imageLoader = new Loader();
imageLoader.load(new URLRequest(url));
imageLoader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, imageLoading);
imageLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, imageLoaded);
}
loadImage(”largeImages/k1.jpg”);
function imageLoaded(e:Event):void {
// Load Image
pic.panning_mc.imageArea.addChild(imageLoader);
}

function imageLoading(e:ProgressEvent):void {
trace(”loading”);
}

picHeight=pic.height/pic.width;
picWidth=pic.width/pic.height;

I managed to get it working by adding the lines above to the imageLoaded function.

function imageLoaded(e:Event):void {
// Load Image
pic.panning_mc.imageArea.addChild(imageLoader);
picHeight=pic.height/pic.width;
picWidth=pic.width/pic.height;
var smoother_bm=Bitmap(imageLoader.content);
smoother_bm.smoothing=true;
TweenMax.to(pic,0,{alpha:0});
scaleProportional();
}

Thank a lot for the AS3 version of the code. Working great. Got it loading dynamic and smoothing .

Maybe I’ll post my finished site here when I’m done. Thanks again.

The home and k1 - k5 pages are working but the rest of the site is still to come. Check it out. Thanks again for the support.

http://www.designlabwest.com/kxt_web/index.htm

I wanted to chime in with my thanks for this code, and, of course, ask a question. I am oh so close to getting this to do what I want, but there’s just one problem I have.

I’m trying to limit the background image to stop resizing smaller if the stage is resized less than 1120 px. I can get this to work, but I would like to allow the image to resize larger if the height is over 700 even if the width is less than 1120.

Right now, I can get the image to stop reducing in size, but if the window is tall and narrow, the image won’t fill the height proportionately.

This is my listener code. Can you point me in the right direction?

sizeListener.onResize = function() {

//dont let bkg shrink less than 1120 px
if (Stage.width <= 1120) {
bkg._width = 1120;
bkg._height = 700;

}
else if ((Stage.height / Stage.width) < bkgHeight) {

bkg._width = Stage.width;
bkg._height = bkgHeight * bkg._width;
}
else {
bkg._height = Stage.height;
bkg._width = bkgWidth * bkg._height;
};

bkg._x = 0;
bkg._y = 0;

linkLogo._y = Stage.height - (linkLogo._height + 12);
data_menu_mc._y = Stage.height - (data_menu_mc._height + 15);

That did it! I knew it was close. Thank you very much.

I thought I would share the code I’ve got in case anyone would like it.

Here’s what it does:
- Resizes the background image, but will limit the minimum width to 1120 (this could be adjusted to whatever)
- Bottom aligns an element (like a menu bar) to the bottom of the screen
- Bottom right aligns another element (like a logo)

//set stage
Stage.align = “TL”;
Stage.scaleMode = “noScale”;

//define dynamic aspect ratios
bkgHeight = new Object ();
bkgHeight = bkg._height / bkg._width;

bkgWidth = new Object ();
bkgWidth = bkg._width / bkg._height;

//conditional statement to set minimum height and width
if (Stage.width > 1120) {
bkg._width = Stage.width;
bkg._height = bkgHeight * bkg._width;
} else {

bkg._height = bkg.height;
bkg._width = bkg.width;
};

//keep bkg top left
bkg._x = 0;
bkg._y = 0;

//align menu to bottom
data_menu_mc._y = Stage.height - (data_menu_mc._height + 15);

//align logo to bottom right
linkLogo._y = Stage.height - (linkLogo._height + 12);
linkLogo._x = Stage.width / 1.05 - _root.linkLogo._width / 1.05;

// create listener
sizeListener = new Object();

// make listener change bkgture size on browser resize
sizeListener.onResize = function() {

//dont let bkg shrink less than 1120 px
if (Stage.width <= 1120 && Stage.height <= 700) {
bkg._width = 1120;
bkg._height = 700;

}
else if ((Stage.height / Stage.width) < bkgHeight) {

bkg._width = Stage.width;
bkg._height = bkgHeight * bkg._width;
}
else {
bkg._height = Stage.height;
bkg._width = bkgWidth * bkg._height;
};

bkg._x = 0;
bkg._y = 0;

linkLogo._y = Stage.height - (linkLogo._height + 12);
linkLogo._x = Stage.width / 1.05 - _root.linkLogo._width / 1.05;
data_menu_mc._y = Stage.height - (data_menu_mc._height + 15);

}

//add listener to stage
Stage.addListener(sizeListener);

Hello,

Great tutorial!!

Im using exactly what Gino modified on Oct 29. How and where do I put in the code a maximum bg height restriction?

Thanks,
Steve

I modified gino’s code to AS3… still working on bg maximum restriction. Am I on the right track?

function sizeListener(e:Event):void {

//dont let pic shrink less than 950 px
if (stage.stageWidth <= 950 && stage.stageHeight = 1425 && stage.stageHeight >= 940) {
pic.width = 1425;
pic.height = 940;

}
else if ((stage.stageHeight / stage.stageWidth) < bkgHeight) {

pic.width = stage.stageWidth;
pic.height = bkgHeight * pic.width;
}
else {
pic.height = stage.stageHeight;
pic.width = bkgWidth * pic.height;
};

pic.x = 0;
pic.y = 0;

I dont think I copied the correct code… here it is…

function sizeListener(e:Event):void {

//dont let pic shrink less than 950 px
if (stage.stageWidth <= 950 && stage.stageHeight = 1425 && stage.stageHeight >= 940) {
pic.width = 1425;
pic.height = 940;

}
else if ((stage.stageHeight / stage.stageWidth) < bkgHeight) {

pic.width = stage.stageWidth;
pic.height = bkgHeight * pic.width;
}
else {
pic.height = stage.stageHeight;
pic.width = bkgWidth * pic.height;
};

pic.x = 0;
pic.y = 0;

hi,

when i publish the source file and try opening the html version in a web browser, it doesn’t perform the way it should. the image becomes smaller and doesn’t fill the background. please help to resolve this.

thanks.

hi Rob,
Thx for the code. flash is new for me…
I tried your code and it is working but I still have a little border all around my pix…So, its not using all the space of the browser, compare to your jaguar.
Don’t know where is my mistake…so I dare to ask your advice. Many thanks. alex

Thank you very much for your help Rob.
Was the HTML…It works!!!
Thanks!

Rob, i must say: i’m not gay, in fact i have a girlfriend, but i love you. hahahahahahahahaha!

thank you sooo much for this!!! i’ve been cracking my head these last few days, because i’m not a programmer, i’m a designer that likes Flash a lot, and i’ve been trying to figure this out.

i still didn’t get eeeeeverything in your code, i’ll take a better look at it on the next days, to really understand it, but man, it works!!

thank you very much, it’s the least i could say!

best!

Hi Again Rob,

Just a quick question about using css to maintain a minimum browser window size.

I have been throught the previous comments and managed to get your work around half working for the PRVCY site. My problem is that width works fine but I am having a problem with the behaviour of the height as it seems to pull up the contect on resize. The problem actually exists on that PRVCY site as well.

Do you have any idea as to what is causing this effect.

Many thanks Rob

Hi Again Rob,

Do you have any idea as to how to fix this. The problem these days is of course pesky mobile phones.

I have never really touched css before so I am toiling to work out where to turn next.

Thanks again
Alan

Hello Rob,

I have used your text to try and simulate the scale listener, in conjunction with an array and a button, to change the image in the movie clip. To no prevail. I am at a very basic level but assume there is some conflicting code? if anyone could take a look and point it out to me it would be much appreciated!!

’site’ is simply a folder holding my images, and ‘box’ the movieclip where i would like the image to change. Which it does when the button is clicked. Only the scale doesnt work in any respect. This is the code…

stage.align = “TL”;
stage.scaleMode = “noScale”;
//
var imageList_array:Array = new Array(”back.JPG”, “back2.JPG”);
var imageToLoad:Number = 0;
//
var image_mcl:MovieClipLoader = new MovieClipLoader();
image_mcl.addListener(mclListener);
image_mcl.loadClip(”site/”+imageList_array[imageToLoad],box);
//
boxHeight = new Object ();
boxHeight = box._height / box.width;
boxWidth = new Object ();
boxWidth = box._width / box.height;
//
if ((Stage.height / Stage.width) <boxHeight) {
box._width = Stage.width;
box._height = boxHeight * box._width;
} else {
box._height = Stage.height;
box._width = boxWidth * box._height;
};
box._x = Stage.width / 2;
box._y = Stage.height / 2;
//
sizeListener = new Object ();
//
sizeListener.onResize = funtion(); {
if ((Stage.height / Stage.width) <boxHeight) {
box._width = Stage.width;
box._height = picHeight * pic._width;
} else {
box._height = Stage.height;
box._width = boxWidth * box._height;
};
box._x = Stage.width / 2;
box._y = Stage.height / 2;
}
Stage.addListener (sizeListener);
//
this.load_btn.onRelease = function() {
imageToLoad++;
if (imageToLoad == imageList_array.length) {
imageToLoad = 0;
}
this._parent.box.loadMovie(”site/”+imageList_array[imageToLoad]);
};

You dont know how much I would appreciate anyone solving this for me
Si

ok, fixed notable things like accidently leaving in code like pic and the occasional ; in the wrong place, but still no luck!

nor does my clip align top left, despite the publish settings and the code starting off that way
help!!!!

ok, forget everything i said i fixed it and my array/scale works. thanks very much to the initial blog post!! I removed code that centers the image and set x & y to 0

but, i still have a problem

when the site is opened the first image is full size/zoom (bigger than the frame) and the resize only changes this when the window/browser is resized… then it works fine. Anyone know whats up with that?

do i have to apply an onLoad or onEnterFrame or something?
again. help very much appreciated.
Si

Hi Rob,

still having trouble working this out.
when it loads the image scales up and only changes when you actually resize it. unlike ur example. mine is exactly the same only with an array to load images into the movieclip onrelease of a button. any thoughts?

thanks for help. tutorial was great also

Hey Rob I am trying to do the scaling but for a flv player. The scaling code doesn’t react the same when applied to a flv player instance and I was wondering if you ever played with that?

Anyone ever play with trying that? I tried the default flv player in AS3 with no luck.

Oh and the original web site I was working on is done, I even have the background images panning though its pritty processor heavy. :S Check out http://www.kainaluxt.com. Thanks again.

So I would be changing the movie format to AIR? Forgive my ignorance. I don’t know much about AIR.

Would I still be able to use the default FLV player I am used to skinning?

Hey no problem thanks for the advice. Its urgent so I really need to find a solution right away. Is it just a syntax issue? Do I need to use different code for the scaling? Thanks in advance.

Yippy! Ok so I got it working by changing the scaleMode in the component inspector. If you use exactFit its all groovy. I just need to add smoothing too the video now.

And for anyone who also wanted smoothing of pixels:
var videoPlayer:VideoPlayer = flv_player.getVideoPlayer(flv_player.activeVideoPlayerIndex);
videoPlayer.smoothing = true;

Thank you!!!!!!!!!!!!!!!!!

Hey Rob, quick question..

Is there a way to make it so if the users only resizes the bottom of the browser, the top portion of the movie clip / image stays in place, only cropping out the bottom?

Currently it does a combination of moving, and cropping bottom and cropping top as you move the bottom of the browser up..

http://blog.fryewiles.com/wp-content/examples/fbf-scale/

Notice as you resize your browser upward, the cat’s head gets pushed behind your search bar, way out of view at the top. I’d rather have the top of the image stay put, and just have the bottom being cropped out as you resize the bottom of the browser to the top..

like on http://www.jimcarrey.com, the top for the most part always remains in view, and doesn’t get pushed out of view.

Hopefully I didn’t confuse you with my question, thanks

Actually I figured it out for myself, to do what I had said.

I simply aligned the symbols center point with the top center point of the image.

And changed the values of:

//center picture on stage
function centerPic():void {
pic.x = stage.stageWidth / 2;
pic.y = 0;
}

Worked like a charm

Thanks again for the great code!

Hi Rob,
I have a small problem.
I have a movie clip showing a masked area of five images. I just want to resize the masked area whic is 20% of the width and 33.333% of the height of the total movieclip. How would I write the code to do that?
Thx.

Ok maybe I was a little vague.
I will try to explain again.

I have five 7 images placed next to eachother inside a movieclip in the shape of a lying capital T.
When pressing a button the images inside the mivieclip tweens on the x and y axel.
To prevent all the images of showing I have a mask that is the same size as one of the images w:1280 x h:649.
My wish is for this scaling script that you have posted works on only the masked area.
The total width of the image is 1280×649 and the movieClip is 6400×1947.
Is this possible to do?

Thx
Joakim

Hi again, I am still in need of help on the last post but I have one more. Is there a way to get a scroll x and y on the part of the image outside the screen when rezized?
Thx,
Joakim

I understand it is taking this tut a little bit further but I would say it is very related. I understand you might not have the time. How about my first question. Proportionally scale onle part of a movie clip How would I do this?
I have tried setting the
var picHeight = pic.mask_mc.height / pic.mask_mc.width;
var picWidth = pic.mask_mc.width / pic.mask_mc.height;
But that is to no help. Well it seems to be on the right track but is scales unproportionally. Any direction you can give me?

Please help me I cannot seem to get it to work. As I have been trying to explain I am trying to proportionally scale a movieclip containing content five times the width and three times the height then I want to fit on the sceen. I want to just fit the visible content fullscreen and the rest needs to be scaled even further out. Can you please help me?

understood

Hey Rob

looks great, i’m actually trying to do this with an external swf, a al http://www.yeticycles.com/#/features/, see the way the external swf maintains its aspect ratio when the browser is resized. could this code do such a thing?

Many thanks for your help

Wow thanks for your quick reply, thats exactly the functionality i need, i have been tearing my hair out for a bit. i’ve got your source files so will now have a go..

Ah didn’t read that as well as i thought… what properties would i need to add to the external swf..

Hey Rob,

I have so far implemented your code with less than a few hiccups, how ever there are a fews snags i’m hoping that you can help me out on..

when i first publish the site, the external swf that is being loading in comes in huge until i resize.. second when it finally does fit on resize the swf is forced into the width and height… weird huh..

If this is too much to ask then any help would be great..

Many thanks in advance

Hi Rob,
I have a question. I have a movie clip with 7 images in it. My document size and images are both 1300*860. The final swf size is huge and it takes forever to load it. I am trying to make the final swf size a lot smaller. Do you know if I can make my image files smaller but keep the fla document size as 1300*860? Or any other way that i can have big images but with smaller size? P.S i am using AS2

Many thanks Rob

Thank you for your quick response!

I have a preloader in my fla file but still very slow due to the size. For the images, I already compressed them but still about 700 kb each. You mentioned i could use a preloader to load the images individually. Do you know how? How does it work?

Thanks again.

Thank you for the link. I’ll check it out.

Hi Rob
can you learn me the action of script??

mingo

Rob- thank you and well done. Your guide worked like a charm- you really have been a big help to a lot of people.
After reading through a lot of the comments, I am curious after reading Gino’s info on rescaling down to a certain image size. Using AS3, what is the most efficient way to limit the downsize scaling for a pic such as 1024×768? Would it be better to define a new function, or add into the scaleProportional function? I did play around with some code for quite some time but gave up as I could not get it to work smoothly or to the correct scaling.
Any input would be most appreciated and utilized as it would be nice to limit the downsize scaling in similar situations.

Thanks again Rob- I really appreciate the help. I successfully added the additional conditional statement and have posted it here in case anyone else wanted to see the code in AS3. The background image was dcpic_mc. I did notice I had to adjust the width and height to match the proportions of the picture. It would be nice to figure out a more automated way to calculate the correct scale in case someone wanted to make a background slideshow. Of course, they images can all be adjusted in photoshop to have the same scale anyway. I also included a simple ‘annoying’ round circle tween as an extra- I will be changing that one shortly, I just wanted to make sure tweening worked with the code I used. Thanks again Rob!

import fl.transitions.Tween;
import fl.transitions.easing.*;

stage.addEventListener(Event.RESIZE, resizeListener);
stage.addEventListener(Event.RESIZE, sizeListener);

stage.scaleMode = “noScale”;
stage.align = “TL”;

var picHeight = dcpic_mc.height / dcpic_mc.width;
var picWidth = dcpic_mc.width / dcpic_mc.height;

var xTween:Tween;
var yTween:Tween;

function resizeListener (e:Event):void {
xTween = new Tween (ball_mc, ‘x’, Elastic.easeOut, ball_mc.x, (stage.stageWidth / 2), 1, true);
yTween = new Tween (ball_mc, ‘y’, Elastic.easeOut, ball_mc.y, (stage.stageHeight / 2), 1, true);
}

function scaleProportional():void {
if ((stage.stageHeight / stage.stageWidth) < picHeight) {
dcpic_mc.width = stage.stageWidth;
dcpic_mc.height = picHeight * dcpic_mc.width;
} else {
dcpic_mc.height = stage.stageHeight;
dcpic_mc.width = picWidth * dcpic_mc.height;
};
}
//minimum size you want- define height and width to prevent deadspace
function minSize():void {
if (stage.stageWidth <= 800 && stage.stageHeight <= 530) {
dcpic_mc.width = 800;
dcpic_mc.height = dcpic_mc.width*picHeight;
};
}
//place picture on stage
function topleftPic():void {
dcpic_mc.x = 0
dcpic_mc.y = 0
}
// make listener change picture size and center picture on browser resize
function sizeListener(e:Event):void {
scaleProportional();
topleftPic();
minSize();
}
//run initial locations and size
scaleProportional();
topleftPic();
minSize();

Mitch,

Thx for ur post. Ive been hv issues with this tutorial wherein the img would show up somewhere in the middle and out of the screen. By using ur code below-

//place picture on stage
function topleftPic():void {
dcpic_mc.x = 0
dcpic_mc.y = 0
}

i got it to work.

However, while the image is scaling to the correct browser width, im not getting to see the entire image within the browser height. The img im using in fla is 4752 x 3168. My screen resolution is 1920 x 1200. Shld i not be seeing the entire img scaled down to the 1920 x 1200 and filled in the browser?

Pls advise. Thx

regds

Rob- thx for the initial post….

thanks a lot for your tut, its way more simple that my script, this it gonna help me a lot, thank you.

exactly what i was looking for after searching for a bit and only finding full screen examples this is a god send.

cheers
- pheyonagh

Thank you very much!!! Perfect!

[...] Creating liquid GUIs with Flash and ActionScript 3.0 | Adobe Developer Connection Proportional Image Scaling in Full Browser Flash | Frye / Wiles Blog have fun __________________ http://www.socreative.tv flash / web / motion / [...]

Thanks for the great tutorial. It works fine for me! But, i have a question. What if I want to use a uiloader component instead of a picture in the swf? I’ve tried it, but the picture appears 1/4.

Thank you so much for your help - I needed that AS3 code badly :-)))

This was exactly what I was looking for. Thank you sooooo much!

STP, I had the same trouble. I used the UIloader to load images randomly.

Make sure you use:
pic.x = (stage.stageWidth / 2) - (pic.width / 2);

+ same for y. That seemed to help but the image would only scale when the browser size changed – not when it initially loaded. To overcome this I added an ENTER_FRAME listener with the same code as the resize listener. This fixed initial scaling problem but now there’s a slight frame flicker as the code snaps the image to fit within the browser.

See my site (work in progress) here:
http://lukemorgandesign.com/

If anyone has any ideas on how to fix the background intial frame flicker I’d love to hear about it.

By the way Rob, you are a legend!

To scale the pic form the center stage the following with help.

function centerPic():void {
pic.x = stage.stageWidth - pic.width/2 - stage.stageWidth/2;
 pic.y = stage.stageHeight -pic.height/2 - stage.stageHeight/2;
}