AS3 :: BackgroundFill

This is the AS3 version of my AS2 :: BackgroundFill class. Just define your gradient (type, colors, etc) and the BackgroundFill class handles the rest including RESIZE events. Bitmaps and bitmap gradients are on the way...=)

package labs.otuome.ui.graphics
{
	import flash.display.BitmapData;
	import flash.display.MovieClip;
	import flash.events.Event;
	import flash.geom.Matrix;
	/**
	 * Provides an easy reusable way to create seamless backgrounds for 
	 * full-screen Flash movies whether it be gradients or bitmaps. 
	 * Works with a BackgroundGradient object customized to your needs.
	 */
	public class BackgroundFill
	{
		//--------------------------------------------------------------
		// PRIVATE PROPERTIES
		//--------------------------------------------------------------
		private var _target:MovieClip;
		private var _gradient:BackgroundGradient;
		private var _matrix:Matrix;
		private var _width:Number;
		private var _height:Number;
 
		//--------------------------------------------------------------
		// PUBLIC METHODS
		//--------------------------------------------------------------
		/**
		 * Constructor
		 */
		public function BackgroundFill( target:MovieClip, gradient:BackgroundGradient=null, fillNow:Boolean=false )
		{
			trace( '[ BackgroundFill :: constructor() ]' );
			_target = target;
			_target.stage.addEventListener( Event.RESIZE, _onResize, false, 0, true );
			if (gradient) _gradient = gradient;
			if (fillNow) _fillBackground();
		}
		//--------------------------------------------------------------
		// PRIVATE METHODS
		//--------------------------------------------------------------
		/**
		 * Draws the gradient background fill.
		 */
		private function _fillBackground():void
		{
			_width = _target.stage.stageWidth;
			_height = _target.stage.stageHeight;
 
			trace( 'width = ' + _target.stage.stageWidth );
			trace( 'height = ' + _target.stage.stageHeight );
 
			_target.graphics.clear();
			_target.graphics.lineStyle( 1, 0xffffff, 0 );
 
			switch (_gradient.type)
			{
				case BackgroundGradient.LINEAR:
					_matrix = new Matrix();
					_matrix.createGradientBox( _width, _height, 90/180*Math.PI, 0, 0 );
					break;
				case BackgroundGradient.RADIAL:
					_matrix = new Matrix();
					_matrix.createGradientBox( _width, _height, 0, 0, 0 );
					break;
			}
 
			// use the defaults for spreadMethod("pad"), interpolationMethod("RGB") and focalPointRatio(0)
			_target.graphics.beginGradientFill( _gradient.type, _gradient.colors, _gradient.alphas, _gradient.ratios, _matrix );
 
			with (_target.graphics)
			{
				lineTo( _width, 0 );
				lineTo( _width, _height );
				lineTo( 0, _height );
				lineTo( 0, 0 );
				endFill();
			}
		}
		/**
		 * RESIZE event handler.
		 */
		private function _onResize( e:Event ):void
		{
			trace( '[ RMXBackgroundGradientFill :: _onResize() ]' );
			_fillBackground();
		}
	}
}

Here's a sample Document class that implements the BackgroundFill:

package
{
	import flash.display.MovieClip;
 
	import labs.otuome.ui.graphics.BackgroundFill;
	import labs.otuome.ui.graphics.BackgroundGradient;
	/**
	 * Document class for the background gradient fill SWF.
	 */
	public class BackgroundGradientFill extends MovieClip
	{
		private var _fill:BackgroundFill;
		private var _gradient:BackgroundGradient;
		/**
		 * Constructor
		 */
		public function BackgroundGradientFill()
		{
			trace( '[ BackgroundGradientFill :: constructor() ]' );
			_init();
		}
		/**
		 * Initializes the background fill and adds the resize listener.
		 */
		private function _init():void
		{
			_gradient = new BackgroundGradient();
			_gradient.type = BackgroundGradient.RADIAL;
			_gradient.colors = [0x212121, 0x000000];
			_gradient.alphas = [.5, .6];
			_gradient.ratios = [1, 255];
 
			_fill = new BackgroundFill( this, _gradient, true );
		}
	}
}

Download source code here.

Copyright © 2008 Otuome Labs. All rights reserved.

sfy39587f11