Clase TiledBackground

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:

[as]
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)
}
}
}
[/as]

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

Saludos!!