This a background with a variable height like you see in a lot of css styled page layouts.  It’s an effective way of presenting information in a fun, clean and organized fashion.  It’s a pretty simple class, but still an hour or two of work, hopefully using it will save you some time.

This can be used anytime you wish to add a background element to variable height content.

First the images I used in this example (can be replaced by any).

The top of the content…

The middle (expanding) part…

And the bottom…

First thing I like to do when I write classes in Actionscript is write some static classes that contain a list of general purpose constants and settings.  This helps me organize so that all of my images, colors, and sizes are in one place and easy to get to later if I feel like making changes.

This is my Image.as class.

package com.atJascha{
  public class Images {
   public static const POST_TOP_IMAGE:String="images/paper_top.png";
   public static const POST_MIDDLE_IMAGE:String="images/paper_middle.png";
   public static const POST_BOTTOM_IMAGE:String="images/paper_bottom.png";
}
}

(Keep in mind the paths have to be local to YOUR compiled .swf file.)

So, now I have my image path constants set.  So long as I import com.atJascha.*; any of these variables are available to me simply by writing:

trace(Images.POST_MIDDLE_IMAGE); // prints "images/paper_bottom.png"

Now for the working class.

package com.atJascha{

 /*
 *  Expanding Background Class
 *  by Jascha Rynek
 *  http://blog.sugarpillfactory.com
 */

 import flash.display.*;
 import flash.net.*;
 import flash.events.*;

 public class PostBackground extends Sprite{

 private var _middleHeight:Number; // Remaining Height
 private var _top:Bitmap; // top image reference
 private var _middle:Bitmap; // middle image reference
 private var _bottom:Bitmap; // bottom image reference

 public function PostBackground(height:int){

 _middleHeight = height; // set overall height

 var topLoader:Loader = new Loader();
 topLoader.load(new URLRequest(Images.POST_TOP_IMAGE)); // load top image
 topLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, addTop);
 }
 private function addTop(e:Event):void
 {
 _top = e.target.content; // set top image reference

 var bottomLoader:Loader = new Loader();
 bottomLoader.load(new URLRequest(Images.POST_BOTTOM_IMAGE));  // load bottom image
 bottomLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, addBottom);
 }
 private function addBottom(e:Event):void
 {
 _bottom = e.target.content; // set bottom image reference
 _middleHeight -= _bottom.height + _top.height; // set remaining height

 if(_middleHeight > 0){ // if remaining height is greater than current pieces, add middle piece
 var middleLoader:Loader = new Loader();
 middleLoader.load(new URLRequest(Images.POST_MIDDLE_IMAGE)); // load middle image
 middleLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, addMiddle);
 }else{ // else add top and bottom
 addChild(_top); // add top to stage
 addChild(_bottom);
 _bottom.y = this.height;// add the bottom image and set y to the bottom of the image.
 }
 }
 private function addMiddle(e:Event):void
 {
 addChild(_top); // add top to stage

 _middle = e.target.content;
 addChild(_middle); // add middle to stage
 _middle.y = _top.height; // set middel y position
 _middleHeight -= _middle.height; // set remaining height

 if(_middleHeight>0){
 var times:Number = Math.ceil(_middleHeight/_middle.height);
 /* if there is still more height, figure out how many times the middle piece
 will fit into the remainder*/
 for(var i:int=0;i<times;i++){ // *s the amount of times the middle fits into the remainder
 var bData:BitmapData = _middle.bitmapData;
 var bMap:Bitmap = new Bitmap(bData);
 addChild(bMap); // add the copied middle image
 bMap.y = this.height; // set the copied middle image to the correct y position
 }
 }
 addChild(_bottom);
 _bottom.y = this.height;// add the bottom image and set y to the bottom of the image.

 }
 }
}

Implementing this class is very simple, you only need to pass one “height” paramater.. (assuming you know your content width should match the width of your background images.)

import com.atJascha.*;

var bg:PostBackground = new PostBackground(this.height);
addChild(bg);

Your results should be something like this…

Download working example of Variable Height Actionscript 3 Class.