Bienvenido a Klr20mg

Cronicas de un desarrollador

Actualmente soy Jefe de Desarrollo del area Flash en Sapotek de México en la cual trabajo desde hace mas de 4 años. Desarrollando aplicaciones en Flash para Web mas comúnmente llamadas (RIAs)

Estas en : Blog
  • Decrease font size
  • Default font size
  • Increase font size
  • color default
  • color verde
  • color azul
Clase TiledBackground Post2PDF Print
July 4th, 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

PLAIN TEXT
Actionscript:
  1. package net.tmeister.utils.background
  2. {
  3.  
  4.     import flash.display.BitmapData;
  5.     import flash.display.Loader;
  6.     import flash.display.Sprite;
  7.     import flash.display.Stage;
  8.     import flash.events.Event;
  9.     import flash.geom.Matrix;
  10.     import flash.net.URLRequest;
  11.     import flash.display.StageScaleMode;
  12.     import flash.display.StageAlign;
  13.     import flash.display.GradientType; 
  14.    
  15.     public class TiledBackground extends Sprite
  16.     {
  17.         private var _pattern:String;
  18.         private var _container:Sprite;
  19.         private var _image:Loader;
  20.         private var _stage:Stage;
  21.         private var _gradient:Boolean = true;
  22.         private var _gProperties:Object = {};
  23.        
  24.         public function TiledBackground(stage:Stage)
  25.         {
  26.             _stage = stage
  27.             _stage.scaleMode = StageScaleMode.NO_SCALE;
  28.             _stage.align = StageAlign.TOP_LEFT;
  29.             _stage.addEventListener(Event.RESIZE, resize);
  30.         }
  31.         public function set pattern (urlPattern:String):void
  32.         {
  33.             _pattern = urlPattern;
  34.             loadPattern();
  35.         }
  36.         public function get pattern():String
  37.         {
  38.             return _pattern;
  39.         }
  40.         public function set radialGradient(value:Boolean):void
  41.         {
  42.             _gradient = value;
  43.         }
  44.         public function get radialGradient():Boolean
  45.         {
  46.             return _gradient;
  47.         }
  48.         public function set gradientProperties(properties:Object):void
  49.         {
  50.             _gProperties = properties;
  51.         }
  52.         public function get gradientProperties():Object
  53.         {
  54.             return _gProperties;
  55.         }
  56.         private function loadPattern():void
  57.         {
  58.             var patternLoader:Loader = new Loader();
  59.             var patternUrl:URLRequest = new URLRequest(_pattern);
  60.             patternLoader.load(patternUrl);
  61.             patternLoader.contentLoaderInfo.addEventListener(Event.COMPLETE, onPatternLoaded);
  62.         }
  63.         private function onPatternLoaded(e:Event):void
  64.         {
  65.             _image = e.target.loader;
  66.             createBackground();
  67.             createRadialGradient()
  68.         }
  69.         private function createBackground():void
  70.         {
  71.             if (_container != null)
  72.             {
  73.                 removeChild(_container);
  74.                 _container = null;
  75.             }
  76.             var bitmap:BitmapData = new BitmapData (_image.width, _image.height);
  77.             bitmap.draw(_image)
  78.             _container = new Sprite();
  79.             _container.graphics.beginBitmapFill(bitmap);
  80.             _container.graphics.drawRect(0,0, _stage.stageWidth , _stage.stageHeight);
  81.             _container.graphics.endFill();
  82.             addChild(_container);
  83.         }
  84.        
  85.         private function createRadialGradient():void
  86.         {
  87.             if (! _gradient )
  88.             {
  89.                 return;
  90.             }
  91.             var matrix:Matrix = new Matrix();
  92.             var gType:String = GradientType.RADIAL;
  93.             matrix.createGradientBox(_stage.stageWidth,_stage.stageHeight,0,0,0);
  94.             var gColors:Array = [(_gProperties.insideColor) ? _gProperties.insideColor : 0xffffff, (_gProperties.outsideColor) ? _gProperties.outsideColor : 0xffffff];
  95.             var gAlphas:Array = [(_gProperties.insideColorAlpha) ? _gProperties.insideColorAlpha : .15 ,(_gProperties.outsideColorAlpha) ? _gProperties.outsideColorAlpha : 0];
  96.             var gRatio:Array = [0,255];
  97.             var bound:Sprite = new Sprite();
  98.             bound.graphics.beginGradientFill(gType,gColors,gAlphas,gRatio,matrix);
  99.             bound.graphics.drawRect(0,0,_stage.stageWidth,_stage.stageHeight);
  100.             addChild(bound);
  101.         }
  102.         private function resize(e:Event):void
  103.         {
  104.             createBackground();
  105.             createRadialGradient()
  106.         }
  107.     }
  108. }

Uso:

PLAIN TEXT
Actionscript:
  1. package
  2. {
  3.     import flash.display.Sprite;
  4.     import net.tmeister.utils.background.TiledBackground
  5.    
  6.     public class sampleTiled extends Sprite
  7.     {
  8.         public function sampleTiled()
  9.         {
  10.             var background:TiledBackground = new TiledBackground(stage);
  11.             background.pattern = "bg1.gif"
  12.             background.gradientProperties = {insideColor:0xffffff, outsideColor:0xffffff, insideColorAlpha:.05, outsideColorAlpha:0}
  13.             addChild(background)
  14.         }
  15.     }
  16. }

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

Archivos para descarga

download

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

Saludos!!

Archivado bajo : AS3, ActionScript - Este post tiene : 2 Comentarios »
 
Obteniendo los hijos de un DisplayObject [AS3] Post2PDF Print
April 1st, 2008

Está en una clase simple pero muy útil, al menos para mí, que recorre todos los hijos contenidos en un DisplayObject, la clase cuenta con 2 funciones:

getAllChilds

Regresa todos los hijos contenidos en el “targetâ€

getChildsByType

Regresa solo los hijos que sean de un tipo específico, por ejemplo solo MovieClips, o solo Botones.

DisplayObjectUtils

PLAIN TEXT
Actionscript:
  1. package net.tmeister.utils
  2. {
  3.     /**
  4.      * @author Enrique Chavez aka Tmeister
  5.      */
  6.     import flash.display.DisplayObject;
  7.     public class DisplayObjectUtils
  8.     {
  9.         /**
  10.          *
  11.          * @param   target
  12.          * @return Array
  13.          */
  14.         public static function getAllChilds(target:*):Array
  15.         {
  16.             var listTmp:Array = []
  17.             for (var a = 0; a <target.numChildren; a++ )   
  18.             {
  19.                 listTmp.push (target.getChildAt(a) )
  20.             }
  21.             return listTmp
  22.         }
  23.         /**
  24.          *
  25.          * @param   target
  26.          * @param   type
  27.          * @return
  28.          */
  29.         public static function getChildsByType(target:*, type:*):Array
  30.         {
  31.             var listTmp:Array = []
  32.             for (var a = 0; a <target.numChildren; a++ )   
  33.             {
  34.                 if (target.getChildAt(a) is type)
  35.                 {
  36.                     listTmp.push (target.getChildAt(a) )
  37.                 }
  38.             }
  39.             return listTmp
  40.         }
  41.     }
  42. }

Su uso es el siguiente:

Primero creamos unos Movieclips y unos botones para tener algo que buscar.

PLAIN TEXT
Actionscript:
  1. import net.tmeister.utils.DisplayObjectUtils;
  2. import fl.controls.Button
  3.  
  4. createMovieClips()
  5. createButtons()
  6. getChilds()
  7.  
  8. function createButtons()
  9. {
  10.     for(var a:Number = 0; a<2; a++)
  11.     {
  12.         var tmp:Button = new Button();
  13.         tmp.x = Math.random()*400
  14.         tmp.y = Math.random()*400
  15.         tmp.label = "buton"+a
  16.         addChild(tmp)
  17.     }
  18. }
  19. function createMovieClips()
  20. {
  21.     for(var a:Number = 0; a<5; a++)
  22.     {
  23.         var tmp:MovieClip = new MovieClip();
  24.         tmp.graphics.beginFill(0x2a2a2a, .5)
  25.         tmp.graphics.drawRect(Math.random()*500, Math.random()*300, Math.random()*100, Math.random()*100);
  26.         tmp.graphics.endFill();
  27.         tmp.name = "mc"+a;
  28.         addChild(tmp)
  29.     }
  30. }
  31. function getChilds()
  32. {
  33.     trace("All Childs: " + DisplayObjectUtils.getAllChilds(this) )
  34.     trace("=====================================================================================")
  35.     trace("Movieclips:  " + DisplayObjectUtils.getChildsByType(this, MovieClip))
  36.     trace("=====================================================================================")
  37.     trace("Buttons:  " + DisplayObjectUtils.getChildsByType(this, Button))
  38.  
  39. }

Archivado bajo : AS3, ActionScript - Este post tiene : 2 Comentarios »
 
Advanced round class AS3 Post2PDF Print
March 31st, 2008

Esta es una clase de mucha ayuda para cuando queramos redondear números de una forma más avanzada.

AS3 cuenta con su Math.round pero esta función lo único que hace es redondear el numero al entero más cercano. Pero qué pasa si quiero redondear un número en múltiplos de 5 por ejemplo.

Para ello escribí esta sencilla clase que lo permite.

PLAIN TEXT
Actionscript:
  1. package net.tmeister.utils
  2. {
  3.     /**
  4.      *
  5.      * Advanced Round Class
  6.      * @version 0.1
  7.      * @author Enrique Chavez aka Tmeister
  8.      *
  9.     */
  10.     public class MathUtils
  11.     {
  12.         /**
  13.          *
  14.          * Rounds a Number to the nearest multiple
  15.          * @param   number Number to Round
  16.          * @param   precision multiple to be rounded
  17.          * @return  A number round
  18.          *
  19.          */
  20.         public static function roundToNear(number:Number, precision:Number)
  21.         {
  22.             return Math.round( number / precision) * precision;
  23.         }
  24.         /**
  25.          *
  26.          * Rounds a Number up to the nearest multiple
  27.          * @param   number Number to Round
  28.          * @param   precision multiple to be rounded
  29.          * @return  A number Up round
  30.          *
  31.          */
  32.         public static function roundToUpNear(number:Number, precision:Number)
  33.         {
  34.             return Math.ceil( number / precision) * precision;
  35.         }
  36.         /**
  37.          *
  38.          * Rounds a Number down to the nearest multiple
  39.          * @param   number number Number to Round
  40.          * @param   precision multiple to be rounded
  41.          * @return  A number down round
  42.          *
  43.          */
  44.         public static function roundToDownNear(number:Number, precision:Number)
  45.         {
  46.             return Math.floor( number / precision) * precision;
  47.         }
  48.     }
  49. }

Modo de uso es tan simple como esto.

PLAIN TEXT
Actionscript:
  1. import net.tmeister.utils.MathUtils;
  2.  
  3. const number:Number = 38
  4. const precision:Number = 5
  5.  
  6. trace(MathUtils.roundToNear(number, precision)) // 40
  7. trace(MathUtils.roundToUpNear(number, precision)) // 40
  8. trace(MathUtils.roundToDownNear(number, precision)) // 35

Enjoy ;)

Archivado bajo : AS3, ActionScript - Este post tiene : 0 Comentarios
 
PureMVC :: ValueObjects Post2PDF Print
March 26th, 2008

Los ValueObjects son indispensables al momento de trabajar con MVC o sin el :).

Voy a tratar hacer una definición de los ValueObjects sin ser muy técnico. de ahora en adelante al usar VO me estaré refiriendo a los ValueObjects. Los puntos mas importantes de los VO son:

  1. Los VO son contenedores de información representada por una clase individual.
  2. Los VO son serializables, es decir, pueden ser enviados entre un servidor y un cliente mantenido sus propiedades.

Imaginemos que vamos a hacer un listado de mensajes para un guestbook, pero no sabemos quien, que o como nos van a proveer la información, lo único sabemos son los atributos que contendrá cada mensaje, estos son:

  • idUnique
  • author
  • url
  • content

Los mensajes siempre contendrán estas propiedades vengan de donde vengan.

Según el punto 1 esta información es representada por una clase individual entonces como nuestro cliente será hecho el FLEX creamos nuestro clase en AS3 la cual representara nuestros VO en el cliente.

PLAIN TEXT
Actionscript:
  1. package com.klr20mg.pureMVC.guestbook.model.vo
  2. {
  3.     [RemoteClass(alias="MessagesVO")]   
  4.     [Bindable]
  5.     public class MessagesVO
  6.     {
  7.         public var idUnique:String;
  8.         public var author:String;
  9.         public var url:String;
  10.         public var content:String;
  11.         public function MessagesVO(author:String=null, url:String=null, content:String=null)
  12.         {
  13.             this.idUnique = ""
  14.             this.author = author;
  15.             this.url = url;
  16.             this.content = content;
  17.         }   
  18.     }
  19. }

Hay 2 formas comunes de "poblar" los VO mediante el constructor, como en este ejemplo o mediante getters y setters, yo prefiero la primera.

Ahora vamos crear un VO a partir de la clase anterior

PLAIN TEXT
Actionscript:
  1. package com.klr20mg.pureMVC.guestbook
  2. {
  3.     import com.klr20mg.pureMVC.guestbook.model.vo.MessagesVO
  4.     public class someClass
  5.     {
  6.         public function someClass()
  7.         {
  8.             var miVO:MessagesVO = new MessagesVO("Tmeister", "http://tmeister.net", "Este es un mensaje de prueba");
  9.             trace(miVO)
  10.         }
  11.     }
  12. }

Con esto hemos creado un VO de acuerdo a la primera clase.

Los VO son "compatibles" entre el cliente y el servidor según el punto numero 2, y al usar AMFPHP, WebOrb entre otros podemos enviar arrays de VO's entre el server y el cliente sin ningún problema, pero entonces debemos de crear nuestros VO's en el servidor en este caso usando PHP para poder "mapear" esta información.

PLAIN TEXT
PHP:
  1. <?php
  2. class MessagesVO
  3. {
  4.     public $idUnique;
  5.     public $author;
  6.     public $url;
  7.     public $content;
  8.  
  9.     public function MessagesVO()
  10.     {
  11.     }
  12.     public function mapObject($data)
  13.     {   
  14.         $this->idUnique = $data["idUnique"];
  15.         $this->author = $data["author"];
  16.         $this->url = $data["url"];
  17.         $this->content = $data["content"];
  18.     }