Students
Students get a Tuts+ subscription for just $45! Hurry limited offer.
Advertisement

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

by

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.

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):


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.

Advertisement