Quick Tip: How to Automatically Resize an Image to Fit the Screen

Tutorial Details
• Difficulty: Beginner
• Program: Flash CS3 or above
• Estimated Completion Time: 20 mins

This Quick Tip explains how to use an image as a website background and scale it proportionally to the stage size. It’s great for when you’re using a SWF that’s full-height and full-width inside a webpage.

iMac icon by bobbyperux.

Final Result Preview

Take a look at what we’ll be working on. Resize your browser window and click the SWF to auto-resize the image.

Step 1: Create a New File

Let’s start by creating a new Actionscript 3.0 File. Save it as resize.fla wherever you want – I’ll assume C:\resize\resize.fla

Step 2: Configure the Folders

Let’s create the folders we need for this tutorial. If you are familiar with classpaths and you have your own classpath, create the folder \org\display\ inside it (assuming you don’t already have one with the same name).

Otherwise, create the folder \org\display in the same folder as the resize.fla document (for example: C:\resize\org\display).

Step 3: Import an Image File

Import an image to your FLA’s library so that we can use it to test the effect. Click File > Import > “Import to library”.

In the dialog that opens, find the file you’d like to use. The sky image I picked is available in the Source download at the top of the page.

Step 4: Configure the Image for Export

Next we’ll export our image for ActionScript, so that we can refer to it in our code.

First open your library (if you can’t see it, click Window > Library), right-click the image, and click Properties.

Change its name to “Sky.”

If the advanced options are not visible, click Advanced in the bottom-right corner of the Properties window. Check the options, “Export for ActionScript” and “Export in Frame 1″, using the name Sky for the class and flash.display.BitmapData for the base class. Also make sure the option “Allow smoothing” is checked; this option will ensure that we maintain good image quality when resizing the image.

Click OK to close the Properties panel. So, now we have configured everything in our FLA, you can save it.

Step 5: Custom Class OffsetResize

Now let’s create a new ActionScript document and save it inside our \org\display\ folder as OffsetResize.as (for example: C:\resize\org\display\OffsetResize.as), or inside the \org\display\ folder in your classpath.

Next: code. Check out the comments.

package org.display{

//Import the needed classes for this object
import flash.display.Sprite;
import flash.display.DisplayObject;
import flash.events.Event;

//Creating a new class extending the Sprite class
public class OffsetResize extends Sprite{

//Create the static constants for maximum and minimum
//We will use this for the offsetType property
public static const MAX:String="max";
public static const MIN:String="min";

//The kind of the resize -- whether the image is bigger or smaller than the stage
private var _offsetType:String;

//The constructor function
public function OffsetResize($child:DisplayObject,$offsetType:String="max"):void{

//The offsetType; if no value is set the "max" value will be automatically assumed
_offsetType=$offsetType; //Add the child here, any kind of DisplayObject addChild($child);

//Check if this object is on stage. if so, call the init() function
if(stage) init();

//If it's not on stage it will listen for when it's added to the stage and then call the init() function

//This will check when this object is removed from the stage and call the end() function
}

//The init() function (called when the object is in the stage)
//The Event=null parameter is because we used the init() without any parameter in the constructor
// and because it's also used as an event listener (ADDED_TO_STAGE)
private function init(e:Event=null):void{

//Detect when the stage is resized and call the stageResize() function

//Call the stageResize() function now, too
stageResize();
}

//The stageResize() function will be called every time the stage is resized
//The e:Event=null parameter is because we have called the stageResize() function without a parameter
private function stageResize(e:Event=null):void{

//Calculate the width ratio by dividing the stage's width by the object's width
var px:Number=stage.stageWidth/width;

//Calculate the height ratio by dividing the stage's height by the object's height
var py:Number=stage.stageHeight/height;

/*
This is the ternary operator; in one line it checks if _offsetType is "max".
If so, it sets the variable div as the maximum value between the width's ratio and the height's ratio.
If not, it sets the variable div as the minimum value between the width's ratio and the height's ratio.
So, this line is responsible for whether the image is bigger or smaller than the stage.
*/
var div:Number=_offsetType=="max" ? Math.max(px,py) : Math.min(px,py);

//These two lines resize this object according to the division ratio.
//If we use scaleX or scaleY here it wont work as we need it to.
width*=div;
height*=div;

//These two lines are responsible for centering this object on the stage.
x=(stage.stageWidth/2)-(width/2);
y=(stage.stageHeight/2)-(height/2);
}

//This function is called when this object is removed from stage, as we don't need the stageResize() function any more
private function end(e:Event):void{
//Remove the RESIZE listener from the stage
stage.removeEventListener(Event.RESIZE,stageResize);
}

/*
Here we create the offsetType parameter, so we can change how the object
resizes dynamically
*/
public function set offsetType(type:String):void{
_offsetType=type;

//After changing the type we call stageResize function again to update
if(stage) stageResize();
}

//Just for if we want to know what the offsetType is
public function get offsetType():String{ return _offsetType; }
}
}


Now you can save the OffsetResize.as file. You can close it if you want; from now on, we won’t be editing it any more, just using it inside other classes.

Step 6: Configure the Document Class

Now switch back to the FLA and let’s assign a document class to it. (Not familiar with document classes? Read this quick introduction.)

Open the Properties panel of the FLA by clicking in any blank space on the stage (with no objects selected), then clicking Window > Properties.

In the panel that opens, type “Main” for the Class (or Document Class, in Flash CS3).

Save the FLA again but do not close it.

Step 7: Code the Document Class

We could write our code directly in the timeline, but that’s not a good habit; the purpose of the document class is to eliminate timeline programming.

So, create a new ActionScript File and save it as “Main.as” in the same folder as your FLA (for example: C:\resize\Main.as).

Let’s code it now (see the comments in the code):

package{

//Let's import the needed classes
import org.display.OffsetResize;
import flash.display.Sprite;
import flash.display.Bitmap;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.Event;
import flash.events.MouseEvent;

//We are extending the Sprite class, rather than MovieClip, since we won't use any timeline animation here
public class Main extends Sprite{

//This will be the instance of our custom object OffsetResize
private var _bg:OffsetResize;

//The constructor
public function Main():void{

/*
We could use the stage property directly here, but I'm assuming that a lot of people
create a document like "base.swf" which loads the "main.swf" file -- in which case our
main.swf wouldn't have the stage property.

But it checks if there is a stage property. We can use this swf we will create with
or without the base.swf; in this case we will use it without the base.swf, but it's
prepared to use with the latter if we want.

So this line will check if our swf is on the stage, and, if so, call init().
*/
if(stage) init();

//If not on the stage it will call the init() function only when it's added to the stage
}

//The init function is called only when the object is in the stage
//It was explained before whe we are using this in the constructor function
private function init(e:Event=null):void{

//Setting how the stage will scale (it will not scale) and its alignment (top-left corner)
stage.scaleMode=StageScaleMode.NO_SCALE;
stage.align=StageAlign.TOP_LEFT;

//Remember the picture in the library? Well, this is why we exported it for AS.
//Let's create a Bitmap object with that image:
var picture:Bitmap=new Bitmap(new Sky(0,0));

//Now we create an instance of the OffsetResize class we coded before.
//The second parameter is optional and can be left blank; its value can be OffsetResize.MAX or OffsetResize.MIN.
_bg=new OffsetResize(picture,OffsetResize.MIN);

//add the instance of the OffsetResize to the stage at child index 0, so it will be behind everything (it's a background)

//The code so far is enough to make this work, but I will show how to change the offsetType dynamically.
//So let's add a MOUSE_DOWN event, which will call the mouseDown() function when we click on the stage.
}

//This function is called every time that we click the stage
private function mouseDown(e:MouseEvent):void{
/*
This is the ternary operator, it's a compact version of this long if statement:
if(_bg.offsetType==OffsetResize.MAX){
_bg.offsetType=OffsetResize.MIN;
}
else{
_bg.offsetType=OffsetResize.MAX;
}
*/
_bg.offsetType = _bg.offsetType==OffsetResize.MAX ? OffsetResize.MIN : OffsetResize.MAX;
}
}
}


Step 8: Test It Out

Check if it’s alright.

• We need to have an image in the Library called “Sky” which is exported for ActionScript with a class name of Sky and a base class of flash.display.BitmapData.
• We must also have the document class set to “Main”
• the Main.as file in the same folder as the FLA
• and the OffsetResize.as file inside \org\display (which is either inside the same folder as the .fla file or is inside the classpath).

If all these requirements are met, you can test it now!

Conclusion

We created a custom class called “OffsetResize”, which resizes a specified object according to the stage’s size. If you created it in your classpath then you can use it wherever you want: all you need to do is import the OffsetResize object and use it; it’s extendable and reusable. But remember it’s to use with scalable content, for example a SWF in HTML which takes up 100% of the width and height.

Thanks for reading! Post any questions in the comments.

Tags: Tips
• Pingback: uberVU - social comments

• http://www.hellofutureboss.com Diogo Simões

Congratulations to all ActiveTuts+ team for pulling out another great tutorial. Nice writting too, by the way.

Cheers!

• Master

Too many comments c.O

• André

Sorry for the excessive comments, but i am focused on people learning it, so the comments explains what each line do and why i did that way… But i keep the source code clean, without any comment.

• http://michaelashton.com.au Michael

Not too many comments! It’s great to see what bits are doing what. I wish this commenting was in all tutorials.

• http://www.webguide4u.com WebGuide4U

as i am using abobe photshop to reduce the size of the image. Hope with this tutorial i can do it so that i can fix the size of the images?

• André

I recoment always use a big image, not in kb, but in size… and always use the allowSmoothing checked, or use the smooth property of the Bitmap class, the size will be automatically resized accourding to the browser area always keeping the quality and not distorting the image.

• http://www.webguide4u.com WebGuide4U

thanks andre i will get it what you are trying to say

• http://www.patrickcole.com Patrick

Thank you soo much for posting this. This tip/class should be included with the basic Flash packages in future releases.

• _ramo

Great tutorial, The comments are great!

• http://www.greensock.com Jack Doyle

Another handy tutorial. And I agree that the well-commented code is great especially for beginners.

If anyone needs this kind of functionality plus a bunch of other features (extra scale modes, alignment options, masking capabilities, the ability to work with objects that don’t have their registration point in the upper left corner, etc.), you can snag the free AutoFitArea class at http://www.greensock.com/autofitarea/.

• Ruan

Great Tutorial. How can I get the background to scale so that i dont see any borders of the stage? So that the background fills the entire page, with the center of the picture staying the center of my stage?

• André

_bg.offsetType=OffsetResize.MAX;

If you click on the demo you will se it changing this line between OffsetResize.MAX and OffsetResize.MIN, but just setting the offsetType parameter to OffsetResize.MAX you have the result you want…

Thanks for the comment, and any doubt please feel free to ask!

• Simon

Hi Andre,

I too want the image to cover the whole browser…I followed your answer to this but I don’t know EXACTLY where in the code to change? Please help when you have a second!

Kind Regards

Simon

• http://3ansdemulti.com Patrice | Technicien Multimédia

Nice tutorial! I’m actually working with it to practice the AS3 and I’m trying to find out how to load a MovieClip intsead of an image.. Is it possible..?

I bring these changes :
- Added import flash.display.MovieClip; in Main.as
- Changed var picture:Bitmap=new Bitmap(new Sky(0,0)); to var picture:MovieClip=new MovieClip(new Sky(0,0));

I recive an error telling me this : 1137: Incorrect number of arguments. Expected no more than 0.
and : 1136: Incorrect number of arguments. Expected 0.

I’m still trying to find out how to solve the problem!

Thx again

• André

var picture:MovieClip=new MovieClip(new Sky(0,0));
The MovieClip class doesnt have any parameter in it´s constructor…

But you can use any kind of DisplayObject in the OffsetResize constructor, for example:

var mc:MovieClip=new MovieClip();
var offset:OffsetResize=new OffsetResize(mc);

I hope it helps, but if you have any doubt yet please ask

• Rascal

Wow this is great, very helpful comments but I need some help please to get it doing exactly what I want.

I added some elements to frame 1 (which would eventually be the site) of the movie and they display over the image as intended, bu they do not aligh to the centre, I tried editing the main.as from TOP_LEFT to TOP (line 44) which would align horizontally centred but it changes the alignment of the image as well, which is no longer filling the area and I have blank space down the left. I want the image to continue what it is doing but i want the elements I add to the frames to be centred to the html window – is this possible? thanks! sorry, I am newbie: monkey

• André

Hi my friend, first of all, this code works only for TOP_LEFT align… and for fullscreen flash, (100%x100%), them you center your contents in Main.as with event.resize of the stage property

• rascal

Hi Andre

It does work well in a browser except for the aligning, oh well, not what i am looking to do then, I shall continue to search and try to learn, I have a long way to go, thx anyway

• André

You can align the stage to TOP_LEFT and them you align the object throught some math codes…

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

This on Event.RESIZE of the stage, it will keep the file always aligned to the center, but if you want on top just remove the second line :D

• Rascal

Thank you very much for your reply, but It’s still not working for me, at what lines should I put the 2 lines of code?

I tried 22&23, 23&24, 24&25 of OffsetResize.as all of which resulted in no change to position of frame 1 content but did mess up the image positioning, I tried putting it on lines 35 & 36 which moved the contentbottom right and sometimes out of the stage when i resize.

Thank so much for your help! Sorry to be so stupid

• Rascal

Hi again, also tried putting this code into line 23 & 24 of main.as, this resulted in the frame being moved to the bottom right again, I added a line to 25:

this lost the image entirely, but strangely now the content is being scaled and centred, I feel i’m getting closer but still lost, THANKS!

• André

Hey Rascal, can you paste your code somewhere like http://pastebin.com/
Just paste your code there and them paste the link of the code here… them we can know what is happening.

And thanks for following the tutorial.

• Pheyonagh

Hi,

I’ve been trying to do this with a movieclip which has a parallax effect on it using the z-scale. Similar to the tutorial http://www.gotoandlearn.com/play?id=96

If i follow the instructions you gave for using a movieclip in one of the comments futher up do you forsee a problem? When i’ve done it before it never quite goes full screen, always has a bar at the side.

Look forward to trying it out but thought i’d ask anyway.

• http://www.morphacademy.com/ animation institute

great layout and very clean

• http://www.3rdprotocol.com/ ux design

Thanks for explaining it so clearly! I think i will be able to do it now.

• http://www.digitalphotosoncanvas.com/ steve

I am not good in learning scripts though but, you are a good teacher..Thanks.

• http://www.impulsodiseno.com vanderknot

thanks to you those “”excesive”" comments are the right for us who are learning the best path!, congrats for the tut!

• http://www.bluebeans.in Bluebeans

Thanx for sharing . It really helped .