• Skip to primary navigation
  • Skip to main content
  • Skip to footer

Enrique Chavez

Professional WordPress Development

  • Home
  • Blog
  • Contact Me
  • Hire Me

Clase TiledBackground

ActionScript, AS3 · Jul 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
[as3]
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()
}
}
}
[/as3]

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

[drain file 8 show dTemplate]

Saludos!!

Related

Filed Under: ActionScript, AS3 Tagged With: ActionScript, AS3, Background, tiled

Enrique Chavez

Senior Full Stack WordPress developer & WordPress Enthusiast -
Spend my days building cool stuff with WordPress.

Reader Interactions

Comments

  1. Zguillez says

    Jul 9, 2008 at 4:48 am

    Muy buena la clase, sobretodo lo del degradado queda muy c00l 😉
    saludos

    Reply
  2. Alejandro says

    Jul 16, 2008 at 11:45 pm

    Saludos amigo.

    Quiciera saber si me puedes ayudar, estoy desarrollando un Web, y he tenido muchos problemas con el size y el background de mi página, se me ocultan los elemnto como texto e images and the backgroun no llena completamente mi pag. Quiciera resize my BG y que mis elementos contenidos en la pag. no perdieran la calidad, si puedes ayudarmen te lo agradeseré siempre. Me puede mandar cualquier info. por mi mail si lo deseas.

    Gracias por adelantado.

    Reply

Trackbacks

  1. Bookmarks about Colores says:
    Jan 10, 2009 at 4:30 am

    […] – bookmarked by 5 members originally found by n5238 on 2009-01-05 Clase TiledBackground http://tmeister.dev/2008/07/04/clase-tiledbackground/ – bookmarked by 2 members originally found by […]

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Footer

SUBSCRIBE FOR UPDATES

Like what you’ve read? If you're interested in my email, sign up here. No spam I promise!

My WordPress Plugins

  • JWT for WP REST API
  • WP Simple Mail Sender
  • Idea Factory

My SideProjects

  • WordPress Plugin Boilerplate Generator

My Profiles

  • WordPress
  • GitHub
  • Linkedin

Additional Info

  • Blog
  • Hire Me
  • Contact Me

© 2021 Enrique Chavez