74981 VISITAS ACERCA ARCHIVOS BLOG FOTOS PROYECTOS

Colores Sin Sentido (Aprendiendo ActionScript 3.0)

Ya estoy de vuelta con la segunda aplicación en ActionScript 3.0.


Características:

  • Puedes escribir el valor RGB en hexadecimal de un color en el cuadro rosa (justo abajo de la flecha). Luego debes hacer click en OK o dar un ENTER.
  • Al pasar el ratón encima de algún tono, se despliega una etiqueta con el valor RGB de ese color.
  • También es posible hacer click en cualquiera de los colores de la derecha, y automáticamente ese color pasara a ser el color del centro del panel.


A continuación pueden encontrar el código de esta apliacación. Es totalmente libre, o sea, pueden hacer con él lo que quieran.

Primero necesitamos un archivo NonsenseColors.as:

/**
 * Nonsense Colors (A Palette Color Generator)
 * Gilberto Stankiewicz 
 * http://www.stan.com.mx
 * January 2008
 */
 
package {
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.display.SimpleButton;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.events.KeyboardEvent;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	import flash.text.TextFieldAutoSize;
	import flash.ui.Keyboard;
	import NonsenseSquare;
	import GiveMeA;
	
	public class NonsenseColors extends Sprite {
		protected var _arrow:Shape;
		protected var _textInput:TextField;
		protected var _button:SimpleButton;
		protected var _squares:Array;
		
		public function NonsenseColors() {
			drawArrow();
			drawTextInput();
			drawButton();
			drawAds();
			drawSquares();
			changeColor();
		}
		
		private function drawArrow():void {
			_arrow = new Shape();
			_arrow.graphics.beginFill(0xFF0099);
			_arrow.graphics.curveTo(100,0,100,100);
			_arrow.graphics.lineTo(150,100);
			_arrow.graphics.lineTo(150 / 2,200);
			_arrow.graphics.lineTo(0,100);
			_arrow.graphics.lineTo(50,100);
			_arrow.graphics.curveTo(50,50,0,50);
			_arrow.graphics.lineTo(0,0);
			_arrow.graphics.endFill();
			addChild(_arrow);
		}
		
		private function drawTextInput():void {
			_textInput = new TextField();
			_textInput.type = TextFieldType.INPUT;
			_textInput.border = true;
			_textInput.background = true;
			_textInput.multiline = false;
			_textInput.maxChars = 6;
			_textInput.restrict = "A-F 0-9";
			_textInput.defaultTextFormat = GiveMeA.newTextFormat(0x000000);
			_textInput.height = _textInput.textHeight * 1.2;
			_textInput.width = 80;
			_textInput.borderColor = 0xFF0099;
			_textInput.text = "FF0099";
			_textInput.x = 40;
			_textInput.y = 220;
			_textInput.addEventListener(KeyboardEvent.KEY_DOWN,onKey);
			addChild(_textInput);
		}
		
		private function createButtonText():TextField {
			var buttonText:TextField = new TextField();
			buttonText.width = _textInput.width;
			buttonText.height = _textInput.height;
			buttonText.defaultTextFormat = GiveMeA.newTextFormat(0xFFFFFF);
			buttonText.text = "Ok";
			return buttonText;
		}
		
		private function createButtonState(color:uint):Sprite {
			var sprite:Sprite = new Sprite();
			sprite.addChild(GiveMeA.newRect(_textInput.width,_textInput.height,color));
			sprite.addChild(createButtonText());
			return sprite;
		}
		
		private function drawButton():void {
			_button = new SimpleButton();
			_button.upState = createButtonState(0xFF0099);
			_button.overState = createButtonState(0xFF3300);
			_button.downState = createButtonState(0x663300);
			_button.hitTestState = _button.upState;
			_button.x = 40;
			_button.y = _textInput.y + _textInput.height + 10;
			
			_button.addEventListener(MouseEvent.CLICK,onButtonClick);
			addChild(_button);
		}
		
		private function drawAds():void {
			var stanAd:TextField = new TextField();
			stanAd.autoSize = TextFieldAutoSize.RIGHT;
			stanAd.defaultTextFormat = GiveMeA.newTextFormat(0xD0D0D0);
			stanAd.text = "STAN.COM.MX";
			stanAd.x = 10;
			stanAd.y = 340 - stanAd.textHeight;
			addChild(stanAd);
		}
		
		private function drawSquares():void {
			var panel:Sprite = new Sprite();
			var side:uint = 50;
			var square:NonsenseSquare;
			_squares = new Array();
			
			for (var j:uint = 0; j < 7; j++) {
				for (var i:uint = 0; i < 7; i++) {
					square = new NonsenseSquare(side * i,side * j,this);
					panel.addChild(square);
					_squares.push(square);
				}
			}
			
			panel.x = 200;
			panel.y = 0;
			addChild(panel);
		}
		
		private function onKey(event:KeyboardEvent) {
			if (event.keyCode == Keyboard.ENTER)
				changeColor();
		}
		
		private function onButtonClick(event:MouseEvent) {
			changeColor();
		}
		
		public function changeTextInput(text:String):void {
			_textInput.text = text;
			changeColor();
		}
		
		private function checkColor(color:int):uint {
			if (color > 255)
				return 255;
			if (color < 0) 
				return 0;
			return color;
		}
		
		private function changeColor():void {
			var i:uint = 0, j:uint = 0;
			var mRed:uint, mGreen:uint, mBlue:uint;
			var color:uint = parseInt("0x" + _textInput.text);
			var red:uint = (color & 0xFF0000) >> 16;
			var green:uint = (color & 0x00FF00) >> 8;
			var blue:uint = (color & 0x0000FF);
			var mX:uint = 10, mY:uint = 22;
			
			for each (var square:NonsenseSquare in _squares) {
				mRed = mGreen = mBlue = 0;
				if (j != 0 || j != 6)
					mRed = mX * (i - 3) + mY * (j - 3);
				if (j != 1 || j != 5)
					mGreen = mX * (i - 3) + mY * (j - 3);
				if (j != 2 || j != 4)
					mBlue = mX * (i - 3) + mY * (j - 3);
				
				if (++i >= 7) {
					i = 0;
					j++;
				}

				square.changeColor(checkColor(red + mRed), checkColor(green + mGreen), checkColor(blue + mBlue));
			}
		}
	}
}

Otra clase NonsenseSquare.as:

package {
	import flash.display.Sprite;
	import flash.display.Shape;
	import flash.display.SimpleButton;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.ColorTransform;
	import flash.text.TextField;
	import GiveMeA;
	
	public class NonsenseSquare extends Sprite {
		protected var _square:Shape;
		protected var _button:SimpleButton;
		protected var _label:TextField;
		protected var _grandfather:NonsenseColors;
		protected var _width:uint;
		protected var _height:uint;
		
		public function NonsenseSquare(posX:Number,posY:Number,grandfather:NonsenseColors) {
			x = posX;
			y = posY;
			_grandfather = grandfather;
			_width = 50;
			_height = 50;
			drawSquare();
			drawLabel();
			drawButton();
		}
		
		protected function drawSquare():void {
			_square = GiveMeA.newRect(_width,_height);
			addChild(_square);
		}

		protected function drawButton():void {
			_button = new SimpleButton();
			_button.hitTestState = _square;
			_button.addEventListener(MouseEvent.ROLL_OVER,onMouseOver);
			_button.addEventListener(MouseEvent.ROLL_OUT,onMouseOut);
			_button.addEventListener(MouseEvent.CLICK,onMouseClick);
			addChild(_button);
		}
		
		protected function drawLabel():void {
			_label = new TextField();
			_label.background = true;
			_label.backgroundColor = 0xFFFFCC
			_label.defaultTextFormat = GiveMeA.newTextFormat(0x555555);
			_label.text = "Ok";
			_label.height = _label.textHeight * 1.2;
			_label.width = 70;
			_label.visible = false;
			addChild(_label);
		}
		
		protected function onMouseOver(event:MouseEvent) {
			parent.setChildIndex(this,parent.numChildren - 1);
			_label.visible = true;
			addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
		}
		
		protected function onMouseOut(event:MouseEvent) {
			_label.visible = false;
			removeEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
		}
		
		protected function onMouseMove(event:MouseEvent) {
			_label.x = event.localX;
			_label.y = event.localY - _label.height;
		}
		
		public function onMouseClick(event:MouseEvent) {
			_grandfather.changeTextInput(_label.text);
		}
		
		public function decToHex(dec:uint):String {
			var str:String;
			str = "0" + dec.toString(16);
			return str.substr(-2).toUpperCase();
		}
		
		public function changeColor(red:uint,green:uint,blue:uint):void {
			_square.transform.colorTransform = new ColorTransform(0,0,0,1,red,green,blue);
			_label.text =  decToHex(red) + decToHex(green) + decToHex(blue);
		}
	}
}

Y una clase más, GiveMeA.as:

package {
	import flash.display.Shape;
	import flash.text.TextFormat;
	import flash.text.TextFormatAlign;
	
	public class GiveMeA {
		public static function newRect(width:uint,height:uint,color:uint=0):Shape {
			var rect:Shape = new Shape();
			rect.graphics.beginFill(color);
			rect.graphics.drawRect(0,0,width,height);
			rect.graphics.endFill();
			return rect;
		}
	
		public static function newTextFormat(color:uint=0,size:uint=0,align:String=null,font:String=null):TextFormat {
			var format:TextFormat = new TextFormat();
			format.align = (align == null ? TextFormatAlign.CENTER : align);
			format.bold = true;
			format.blockIndent = 5;
			format.color = color;
			format.font = (font == null ? "Trebuchet MS,Arial" : font);
			format.size = (size == 0 ? 14 : size);
			return format;
		}
	}
}

Si no sabes como empezar, te recomiendo otro post que escribí:

ActionScript 3.0 Para Bobos!

publicado el 2 de enero de 2008 a las 9:33

Advertencia

La información de esta página no es confiable. El conocimiento se adquirió de forma empírica (o por fuerza bruta) y algunos términos pudieron ser inventados. Los trucos mencionados en este blog difícilmente son la manera más eficiente de resolver algún problema. La información no se actualiza y tampoco proviene de fuentes oficiales. Mejor acérquese a la documentación oficial, compre libros o visite la Wikipedia.

Comentarios Y Quejas Aquí






He he he... Si, es un "nicho" muy especial la banda de Flash/Flex y esos rollos. Lo chido es que con las RIAs cada vez tenemos mas un "lugar" en este mundo. Los diseñadores no nos la creen porque programamos, y los programadores no nos la creen porque diseñamos. Ahora ya nos llaman "technical artists" o devigners!... He he he, es un buen skill a tener hoy en día. ^___^ Y la neta esta chido el blog, me topé con el cuando comencé a darle a ActionScript 3... Apenas hace poco dí el "brinco", era muy feliz en el 2. :-)

publicado el 23 de abril de 2008 a las 23:32

Yo di el brinco a finales del año pasado, y desde entonces ya no me gusta trabajar en el AS2. Hace poco me pidieron un trabajo en AS2 y ya no me gustó.

publicado el 24 de abril de 2008 a las 19:20