FBF Background Image Resizing that keeps aspect ratio
Problem: This recently came up in a job, so I thought I would post about it. Basically, I needed to have a background image in a full browser flash site. However, just setting
image._width = Stage.width;
image._height = Stage.height;
wasn’t going to cut it - the image would get all distorted unless the user happened to have their browser set at the correct aspect ratio. I needed the image to resize proportionately.
Solution: To fix the problem, I wrote a simple little conditional statement that dynamically checks the aspect ratio of the image, and that of the stage, and keeps the image filling the stage and in proportion (in other words, if the the image is wider than it is tall, and the stage is taller than it is wide, or the aspect ratio of the stage is higher than the image, the image will fill either the width or height of the stage, and crop the edges).
That doesn’t make a lot of sense, so here’s an example of the finished product. Try resizing the browser to see the effect. Enjoy the mighty Jaguarundi:
Frye / Wiles Proportional Image Scaling in Full Browser Flash (give it a sec to load, it doesn’t have a preloader)
Here’s how I did it:
Create a new flash document. Import an image, and make it into a movie clip symbol. In the symbol, align the picture center on the stage (use the align tools). Give the symbol an instance name of ‘pic’. Now go to the actions panel.
Next set the stage to work for Full Browser. Please note, the way this calculation is working, the stage alignment needs to be set up for Top Left (TL):
Stage.align = "TL";
Stage.scaleMode = "noScale";
Define dynamic aspect ratios
picHeight = new Object ();
picHeight = pic._height / pic._width;
picWidth = new Object ();
picWidth = pic._width / pic._height;
Make a conditional statement to account for various initial browser sizes and proportions
if ((Stage.height / Stage.width) < picHeight) {
pic._width = Stage.width;
pic._height = picHeight * pic._width;
} else {
pic._height = Stage.height;
pic._width = picWidth * pic._height;
};
Center picture on stage
pic._x = Stage.width / 2;
pic._y = Stage.height / 2;
Create a listener to…er…listen for browser size changes
sizeListener = new Object();
Make the listener change picture size and center picture on browser resize
sizeListener.onResize = function() {
if ((Stage.height / Stage.width) < picHeight) {
pic._width = Stage.width;
pic._height = picHeight * pic._width;
} else {
pic._height = Stage.height;
pic._width = picWidth * pic._height;
};
pic._x = Stage.width / 2;
pic._y = Stage.height / 2;
}
Add listener to stage
Stage.addListener(sizeListener);
That should be it! Test our your movie, and it should scale like magic.
If you want source files, here you go:
PLEASE NOTE: If you are in Internet Explorer, you may need to right-click on this link and choose “Save Target As…”
51 comments so far.
i need to perform this action on a non flash site, is there any way to do this using javascript?
I’ve seen it done, presumably using Javascript, but I’ve never attempted it myself. A Google search for “javascript background image scaling” might help you out a bit. On the plus side, CSS3 will support background image sizing, so soon it will be possible without any scripting!
hi Rob, thanks for this tutorial, i’ve been looking for something like this. However, i have a question, what if the picture is in portrait/vertical format and i want only the pic height that follows the browser height, but not the width (there will be space in the left and right of the picture)? I hope you get what i mean, sorry my English is not so good.
Thanks in advance
You should be able to do that by removing the conditional statements (the if…else thing) in the setup and the listener, and only leaving the calculation for height, like this:
pic._height = Stage.height;
pic._width = picWidth * pic._height;
hi, i tried your example with other image, but if i export movie the swf dont stretch or crop the image. I just put the new image in the symbol named pic and then drag into scene. Is there any other setting that i forget? in export for example… Thanks
How would I add this in part of a website? For example If I just wanted it to be at the side of something like below the navigation of a website?
Miffo: It sounds like you forgot to give the movie clip an instance name. This is different from the name you give it in the library. Click on the movieclip once it’s in the stage, and then go to your Properties panel. You should see a place to name the instance. Name it pic. If in doubt, download my source files and take a look at how I did it. The link is at the bottom of the article.
Michael: Your question is a bit out of the scope of this tutorial. Try asking around on a flash message board, like http://www.flashkit.com or http://www.actionscript.org
thanks, it works now.
Hi Rob,
thanks for this tutorial. I have been looking at how to do this and this has been I great piece..
I don’t know if this is out of the scope of this tutorial but I am working on a website where I need to do this rescaling in a gallery but keep all of the navigation in the proper place. Like the following site:
http://www.paprika.com/ in their portfolio section is what I am referring to.
How would go from this rescaling to integrating this into a website like this. And note if this too much too ask we could discuss a more formal arrangement for info.
Let me know…..thanks!
Eric,
What you are asking is actually quite easy - Actionscript will only scale what you tell it to scale. If you place another element on the stage, but don’t tell it to scale, it will remain the size that it is. Look up in the tutorial on this page - see where it says Center picture on stage? And then that is repeated within the listener as well? That is actionscript dynamically positioning the element (in this case, it makes it right in the middle of the stage, but you can also assign it pixel x and y coordinates, or make it relative to another instance). You would add in another couple of lines like that (inside and outside of the listener) to determine the positioning of your navigation, but don’t assign any ._height or ._width to your navigation.
-Rob
Hi Rob,
thanks for the response. I think I get what you mean and will experiment. Did you see how the pics in the paprika sight start at a certain size and then scale up? I was trying to get this to do that but did not have any luck.
I am curious…I know a Rob in the Minneapolis/St.Paul area who is a flash developer - are you him?
Hi Again,
just looked through your site and realized that you are not him.
I was wondering if you are open to some sort of consultant role in this project that i am doing ( paid of course). Most of it would be in making sure that the basic structure of the site was set up based on the rescaling aspect of the gallery in conjunction to the navigation.
Would you be open to this?
Let me know when you have a minute…Thanks!
We can definitely do consultation. I emailed you about it.
hi rob.
I really like what you’ve done, Ive seen many like this but the quality is poor.
However im a novice and need more detailed instructions on how to insert the code, do you think you could provide me with this? it would be much appreciated if you could
many thanks
Hi Ron,
I admit, the tutorial is aimed at those who know the basics of flash already. I would suggest going through some of the flash tutorials first, and getting a basic knowledge of the terminology and the usage of actionscript. There are many good books for this as well.
We can also offer consulting services, if you are working on a project that has a budget.
Thanks for the tutorial. As an exercise I’m trying to duplicate what you’ve done and am getting some funky output.
Could I have you look at my file and triage it. I’m sure you could glance at it and find the issue in a matter of seconds. If you could allow me to email you my .fla file I could use some assistance because I’m stuck.
Please help a newbie.
Hey BJ, try downloading my source files. Chances are pretty good that if you duplicated the actionscript, your problem is in your instance names (if they exist). Don’t forget that actionscript is case-sensitive.
I looked back over everything and downloaded the source files and have the same issue. The pic is dynamically resizing but not filling the space in all instances and sometimes panning instead of resizing in some instances.
I went so far as to swap out my image with your image in context of your code and I get the same problem . would my image size and format have anything to do with this issue (1024×768 .png image)?
Image size and format should not matter.
Hi Rob
Ive had a good look through and read alot but still none the wiser.
At the moment i’m just copying and pasting all your code into the actions window with current selection select.
Many Thanks
Hi Rob
I have it scaling in flash when i preview it!
But when i publish it and open the html file it doesnt!
Any ideas?
Many Thanks
It probably has to do with your HTML publish settings. Go to the HTML tab in the Publish Settings window (under File), and for Dimensions, select Percent and put it on 100 x 100.
When I test the code the image is displayed at a quarter of the original size. And positions itself to the lower left. It’s almost doing the exact opposite of what it should be doing.
The source file has no extension I tried:
.fla
.exe
.swf
nothing seems to work? Any suggetions? Thanks.
The source code file is a zip
Many Thanks Rob
Got it going and i love it!!!
Can it be used in a simple prev/next slideshow?
Im just trying it with 2 images and this:
stop () ;
next_btn.onRelease = function () {
if (_root._currentframe == 2) {
gotoAndStop (1);
}
else {
nextFrame() ;
}
}
prev_btn.onRelease = function () {
if (_root._currentframe == 1) {
gotoAndStop (2);
}
else {
prevFrame() ;
}
}
It works fine but the scaling is very pixelated now!
Any ideas?
Many Thanks again!
Hey Ron,
There is no reason my full browser framework wouldn’t work for a slideshow, but I don’t think using the timeline for this is the right approach. I would highly recommend using a non-timeline-based solution. Look into using an array and some looping for this, it will work better. Unfortunately, this is beyond the scope of this tutorial, but I may do a followup at some point in the future that addresses your idea.
Rob
Many Thanks for your reply.
Could you tell me what to look for
so i can go a research or is it simply
array and looping i need to look into.
Thankkyou
That should be a good start, at least. Try some actionscript forums, like actionscript.org if you need more help with it.
Hello,
This looks like a great sample. I need to do the same thing, however I am having trouble downloading the source code. Will you be able to email me that.
Also, are you using a JPG image here OR is it some vector format.
Thanks and appreciate your help.
Hey Rick,
If you’re in Internet Explorer 7, you may need to right-click on the link and choose “Save Target As…” You will then need something that can open a .zip file.
This script will proportionately scale anything in flash, including jpgs, other bitmapped image files and vector data. The example uses a JPG.
Hi rob
ive used this a few times and its worked great!!!
However im trying to apply it to and externally loaded image.
Is this possible?
All im using is:
this.createEmptyMovieClip (”container_mc”,this.getNextHighestDepth());
container_mc.loadMovie(”images/0.jpg”);
It should work with an externally loaded image, although I haven’t tried it. Maybe I’ll make a tutorial for that next.
I’m not sure where/how to insert it
Hi Rob,
Hope you can help,
I have tested you tutorial and it works perfectly.
However, I am trying to fade my image in from 0% Alpha 100% using a motion tween. To give a nice transition whilst keeping the image in proportion? Can you help?
hi Rob
I was curious for this tutorial, however the zip you provided seems to be damaged (cannot be extracted here). Would it be able to provide/send another copy?
Thanks alot,
Frank
Jason:
Put the motion tween in the ‘pic’ instance.
Frank:
If you are using internet explorer, you may need to right click on the file and hit ‘Save Target As…’ I just downloaded the file and it worked fine. Also, it’s in Flash 8 format, so if your flash is older than that you might have problems.
thanks alot Rob, I downloaded the zip via FF and it works fine now. I’s a nice, multibrowser script.
The only problem I have left is centering (horizontal, vertical) the content above it (as publish setting are ‘top and ‘left’).
Do you have any suggestion or useful link regarding combining fullbrowser bg-image and centered content? (seems hard to find)
Thanks!
Hey frank,
You can center within the TL setup by dividing the stage. You would use something along the lines of this (replace ‘content’ with your instance name):
content._x = Stage.width/2;
Then put the same line in the resize listener as well.
thanks Rob. Proportional background scaling and centering the content unfortunately doesn’t seem to work out here, but I guess we’ll better keep this for another tutorial
Regards
Hi Rob
Do you have plans to do a tutorial for this script being used in an array or for externally loaded images?
Many Thanks
Hey Ron,
I may eventually put this together, I’m not sure exactly when at the moment. Apologies! Things are fairly busy right now.
Hi Rob,
I did it with one of my pictures and it sems like is working fine. However when I go test it or publish it as HTML preview doesn`t show up full browser. Any idea why?
it has to do with your Publish Settings. Go to the Publish Settings pane under File, click on the HTML tab, and set the dimensions to 100% height and 100% width
Hi Rob,
This is a great tutorial. I am trying to make a design website that’ll be full-browser. I want to make the portfolio images full screen…similar in concept to Brook-Pifer.com. So I was wondering if there was an easy way to tweak this tutorial to make each portfolio image full screen and scale properly like you’ve done. Thanks for your time.
- Minh
Hi Minh,
That is definitely possible with the sizing algorithm in this tutorial (it appears they are using something very similar), but it is not a simple change - that is significantly more functionality. You should be able to find a clickable gallery tutorial someplace and apply my sizing algorithm to it, however. I don’t know if that helps.
Worked just perfectly!!! Thank you.
Hi Rob, thanks for this - great tutorial. Forgive me if this is a total newbie question - but how would I add a preloader to this?
Dylan,
There are lots of preloaders already written out there. This should work fairly well with any of them. You will probably have to just copy all the frames from this movie into the preloader file
Firstly thanks for the tutorial, site now has it’s home in favourites. I’ve been using different scripts over the last few days to scale a background image, but I ran into problems with content placed over the background, ie a new layer or scene, images (jpgs) placed on the scaled background themselves got scaled and became extremely distorted.
Have you ever come across this problem before? We need to use alot of different jpg images whilst allowing for a liquid scaling stage, but the jpg issue is a serious problem at the moment.
Richard, I’m not sure I understand your question.
Thanks Rob!!! Great tut, exactly what i needed! Thanks for sharing! I’ll try this later.