Que tal gente.

Hace un buen rato que no posteo, pero aquí estoy de vuelta con algo sencillo.
TiledBackground es una clase simple la cual toma una imagen externa (jpg, gif, png) y la repite tantas veces quepa en el navegador tal y como lo hiciéramos en CSS

Además de que tiene un par de parámetros, se puede sobreponer un gradiente radial para hacer un efecto sobre el fondo. Los colores y alphas del gradiente se pueden configurar.

TiledBackground

package net.tmeister.utils.background
{

	import flash.display.BitmapData;
	import flash.display.Loader;
	import flash.display.Sprite;
	import flash.display.Stage;
	import flash.events.Event;
	import flash.geom.Matrix;
	import flash.net.URLRequest;
	import flash.display.StageScaleMode;
	import flash.display.StageAlign;
	import flash.display.GradientType;  

	public class TiledBackground extends Sprite
	{
		private var _pattern:String;
		private var _container:Sprite;
		private var _image:Loader;
		private var _stage:Stage;
		private var _gradient:Boolean = true;
		private var _gProperties:Object = {};

		public function TiledBackground(stage:Stage)
		{
			_stage = stage
			_stage.scaleMode = StageScaleMode.NO_SCALE;
			_stage.align = StageAlign.TOP_LEFT;
			_stage.addEventListener(Event.RESIZE, resize);
		}
		public function set pattern (urlPattern:String):void
		{
			_pattern = urlPattern;
			loadPattern();
		}
		public function get pattern():String
		{
			return _pattern;
		}
		public function set radialGradient(value:Boolean):void
		{
			_gradient = value;
		}
		public function get radialGradient():Boolean
		{
			return _gradient;
		}
		public function set gradientProperties(properties:Object):void
		{
			_gProperties = properties;
		}
		public function get gradientProperties():Object
		{
			return _gProperties;
		}
		private function loadPattern():void
		{
			var patternLoader:Loader = new Loader();
			var patternUrl:URLRequest = new URLRequest(_pattern);
			patternLoader.load(patternUrl);
			patternLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPatternLoaded);
		}
		private function onPatternLoaded(e:Event):void
		{
			_image = e.target.loader;
			createBackground();
			createRadialGradient()
		}
		private function createBackground():void
		{
			if (_container != null)
			{
				removeChild(_container);
				_container = null;
			}
			var bitmap:BitmapData = new BitmapData (_image.width, _image.height);
			bitmap.draw(_image)
			_container = new Sprite();
			_container.graphics.beginBitmapFill(bitmap);
			_container.graphics.drawRect(0,0, _stage.stageWidth , _stage.stageHeight);
			_container.graphics.endFill();
			addChild(_container);
		}

		private function createRadialGradient():void
		{
			if (! _gradient )
			{
				return;
			}
			var matrix:Matrix = new Matrix();
			var gType:String = GradientType.RADIAL;
			matrix.createGradientBox(_stage.stageWidth,_stage.stageHeight,0,0,0);
			var gColors:Array = [(_gProperties.insideColor) ? _gProperties.insideColor : 0xffffff, (_gProperties.outsideColor) ? _gProperties.outsideColor : 0xffffff];
			var gAlphas:Array = [(_gProperties.insideColorAlpha) ? _gProperties.insideColorAlpha : .15 ,(_gProperties.outsideColorAlpha) ? _gProperties.outsideColorAlpha : 0];
			var gRatio:Array = [0,255];
			var bound:Sprite = new Sprite();
			bound.graphics.beginGradientFill(gType,gColors,gAlphas,gRatio,matrix);
			bound.graphics.drawRect(0,0,_stage.stageWidth,_stage.stageHeight);
			addChild(bound);
		}
		private function resize(e:Event):void
		{
			createBackground();
			createRadialGradient()
		}
	}
}

Uso:

package
{
	import flash.display.Sprite;
	import net.tmeister.utils.background.TiledBackground

	public class sampleTiled extends Sprite
	{
		public function sampleTiled()
		{
			var background:TiledBackground = new TiledBackground(stage);
			background.pattern = "bg1.gif"
			background.gradientProperties = {insideColor:0xffffff, outsideColor:0xffffff, insideColorAlpha:.05, outsideColorAlpha:0}
			addChild(background)
		}
	}
}

Aquí el ejemplo y como siempre los archivos fuente están disponibles.

Saludos!!

Popularity: 4% [?]