Follow me @Tmeister

Archive for July, 2008

Clase TiledBackground

Posted by Tmeister On July - 4 - 2008

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

Archivos para descarga

download

Download: TiledBackground.zip
Version: 0.1
Updated: July 4, 2008
Size: 12.42 KB

Saludos!!

Acerca de mi
Enrique Chavez

Enrique Chávez también es conocido como @Tmeister es un desarrollador, emprendedor, poeta y loco.

Geek autodeclarado y apasionado de todo lo que tiene que ver con tecnología y desarrollo.

Cuenta con una experiencia de más de 7 años en el ramo del desarrollo, creando, sobre todo, aplicaciones web en la empresa Sapotek.

A finales del 2008 crea, junto con 3 colegas, la consultoría llamada AureaCode, enfocándose a brindar servicios de desarrollo web en todas sus variantes.

Si necesitas algún tipo de información o consulta por favor no dude en escribir.

View Enrique Chávez's profile on LinkedIn

Carlos Enrique Chavez Garcia's VisualCV

RSS Feed

Links Patrocinados