Ajuste de los colores de DisplayObject

Contenido [Ocultar] Configuracin de los valores de color a travs del cdigo Modificacin de efectos de color y brillo a travs del cdigo

Se pueden utilizar los mtodos de la clase ColorTransform (flash.geom.ColorTransform) para ajustar el color de un objeto de visualizacin. Cada objeto de visualizacin tiene una propiedad transform, que es una instancia de la clase Transform y que contiene informacin sobre diversas transformaciones que se aplican al objeto de visualizacin (como la rotacin, los cambios en la escala o posicin, entre otros). Adems de esta informacin sobre las transformaciones geomtricas, la clase Transform tambin incluye una propiedad colorTransform, que es una instancia de la clase ColorTransform y que permite realizar ajustes de color en el objeto de visualizacin. Para acceder a la informacin sobre transformacin de color de un objeto de visualizacin, se puede utilizar cdigo como el siguiente:var colorInfo:ColorTransform = myDisplayObject.transform.colorTransform;Una vez creada una instancia de ColorTransform, se pueden leer sus valores de propiedades para saber cules son las transformaciones de color que ya se han aplicado o se pueden definir dichos valores para realizar cambios de color en el objeto de visualizacin. Para actualizar el objeto de visualizacin despus de haber realizado cambios, es necesario reasignar la instancia de ColorTransform a la propiedad transform.colorTransform.var colorInfo:ColorTransform = my DisplayObject.transform.colorTransform; // Make some color transformations here. // Commit the change. myDisplayObject.transform.colorTransform = colorInfo;Configuracin de los valores de color a travs del cdigoLa propiedad color de la clase ColorTransform puede utilizarse para asignar un valor especfico de color rojo, verde, azul (RGB) al objeto de visualizacin. En el ejemplo siguiente se usa la propiedad color para cambiar a azul el color del objeto de visualizacin denominado square, cuando el usuario haga clic en un botn denominado blueBtn:// square is a display object on the Stage. // blueBtn, redBtn, greenBtn, and blackBtn are buttons on the Stage. import flash.events.MouseEvent; import flash.geom.ColorTransform; // Get access to the ColorTransform instance associated with square. var colorInfo:ColorTransform = square.transform.colorTransform; // This function is called when blueBtn is clicked. function makeBlue(event:MouseEvent):void { // Set the color of the ColorTransform object. colorInfo.color = 0x003399; // apply the change to the display object square.transform.colorTransform = colorInfo; } blueBtn.addEventListener(MouseEvent.CLICK, makeBlue);Cuando se cambia el color de un objeto de visualizacin a travs de la propiedad color, se cambia completamente el color de todo el objeto, independientemente de que el objeto tuviera varios colores. Por ejemplo, si hay un objeto de visualizacin que contiene un crculo verde con texto negro encima, al definir como una sombra de rojo la propiedad color de la instancia de ColorTransform asociada a dicho objeto, todo el objeto, crculo y texto, se volver rojo (de modo que el texto ya no podr distinguirse del resto del objeto).Modificacin de efectos de color y brillo a travs del cdigoSupongamos que tiene un objeto de visualizacin con varios colores (por ejemplo, una foto digital) y no desea modificar los colores de todo el objeto, sino nicamente ajustar el color de un objeto de visualizacin basndose en los colores existentes. En esta situacin, la clase ColorTransform incluye una serie de propiedades de multiplicador y desplazamiento que pueden utilizarse para realizar este tipo de ajuste. Las propiedades de multiplicador, denominadas redMultiplier, greenMultiplier, blueMultiplier y alphaMultiplier, funcionan como filtros fotogrficos de color (o gafas de sol de color), ya que amplifican o reducen determinados colores en el objeto de visualizacin. Las propiedades de desplazamiento (redOffset, greenOffset, blueOffset y alphaOffset) pueden utilizarse para aadir cantidades adicionales de un determinado color al objeto o para especificar el valor mnimo que puede tener un determinado color.Estas propiedades de multiplicador y desplazamiento son idnticas a la configuracin avanzada de color disponible para los smbolos de clip de pelcula en la herramienta de edicin de Flash que se muestra al elegir Avanzado en el men emergente Color del inspector de propiedades.En el cdigo siguiente se carga una imagen JPEG y se aplica una transformacin de color que modifica los canales rojo y verde a medida que el puntero del ratn se mueve por los ejes x e y. En este caso, como no se especifica ningn valor de desplazamiento, el valor de cada uno de los canales de color mostrados en pantalla ser un porcentaje del valor de color original de la imagen, lo que significa que la mayora de rojo y verde mostrado en cualquier pxel ser la cantidad original de rojo o verde de dicho pxel.import flash.display.Loader; import flash.events.MouseEvent; import flash.geom.Transform; import flash.geom.ColorTransform; import flash.net.URLRequest; // Load an image onto the Stage. var loader:Loader = new Loader(); var url:URLRequest = new URLRequest("http://www.helpexamples.com/flash/images/image1.jpg"); loader.load(url); this.addChild(loader); // This function is called when the mouse moves over the loaded image. function adjustColor(event:MouseEvent):void { // Access the ColorTransform object for the Loader (containing the image) var colorTransformer:ColorTransform = loader.transform.colorTransform; // Set the red and green multipliers according to the mouse position. // The red value ranges from 0% (no red) when the cursor is at the left // to 100% red (normal image appearance) when the cursor is at the right. // The same applies to the green channel, except it's controlled by the // position of the mouse in the y axis. colorTransformer.redMultiplier = (loader.mouseX / loader.width) * 1; colorTransformer.greenMultiplier = (loader.mouseY / loader.height) * 1; // Apply the changes to the display object. loader.transform.colorTransform = colorTransformer; } loader.addEventListener(MouseEvent.MOUSE_MOVE, adjustColor);

Lo primeros que tenemos que hacer antes de programar es crear un clip de pelicula llamado cuadro. En el dibujaremos un cuadro cualquiera con algn relleno. Luego crearemos un boton cualquiera, lo llamaremos boton como nombre de instancia.

En la primera parte del cdigo lo que hacemos es crear una funcin llamada coloraleatorio.En esta funcin lo que hacemos es crear un color aleatorio que despus asignaremos al objeto cuadro.

La ultima parte del cdigo, hace que cada vez que se presiona el boton se ejecuta la funcin coloraleatorio cambiando de color.Cdigo :coloraleatorio = function (){ micolor = Math.round( Math.random()*0xFFFFFF ); miobjeto = new Color (_root.cuadro); miobjeto.setRGB(micolor);}coloraleatorio();boton.onRelease=function(){ coloraleatorio();}

La clase ColorTransform permite ajustar el color de los objetos de visualizacin. Este ejemplo muestra como cambiar el color de un MovieClip utilizando el componente ColorPicker de Flash.

1. package{2. 3. import flash.display.MovieClip;4. 5. public class CambiarColor extends MovieClip{6. 7. //Importo las clases necesarias para trabajar con el ColorPicker y la clase colorTransform8. import fl.controls.ColorPicker;9. import fl.events.ColorPickerEvent;10. import flash.geom.*;11. 12. public function CambiarColor(){13. //Aado un listener al Componente de ColorPicker que tengo en el escenario con el 14. //nombre de "Selector_cp"15. Selector_cp.addEventListener(ColorPickerEvent.CHANGE, cambioColor);16. }17. 18. function cambioColor(e:ColorPickerEvent):void {19. //Cuando se reproduce el evento CHANGE, se ejecuta esta funcin.20. //Creo una instancia de ColorTransform21. var newColorTransform:ColorTransform = Cuadrado_mc.transform.colorTransform;22. //Le pongo el color que viene en el evento (el que se ha seleccioando en el colorPicker)23. newColorTransform.color = e.color;24. //Aplico el colorTransform al objeto que quiero cambiar de color25. Cuadrado_mc.transform.colorTransform = newColorTransform;26. }27. 28. }29. 30. }

Modificar valores de una imagen con la clase AdjustColor14 Etiquetas: AdjustColor

Las clase AdjustColor permite crear un filtro para modificar las propiedades brillo, contraste, matiz y saturacin de cualquier elemento de visualizacin. Esto nos permite, por ejemplo, pasar una imagen a blanco y negro (poniendo la saturacin al mnimo(-100)) o ajustar los colores de una foto. La clase AdjustColor est disponible para Flash Player 9 o superior.El cdigo comentado y los fuentes a continuacin:

setClipboard: como copiar un texto al portapapeles desde Flash5 Etiquetas: System setClipboard Con esta linea podemos copiar un texto al portapapeles del usuario desde Flash. La sintaxis es igual para Actionscript 2.0 y Actionscript 3.0:1. 2. System.setClipboard("El texto que queremos copiar");3. Es muy til por ejemplo si tenemos una web que genera cdigos o urls personalizadas y queremos dar al usuario la oportunidad de copiarlas copn un botn.

Actionscript 3: Formatear nmeros en tiempo real2 Etiquetas: Event.CHANGE TextEvent.INPUT focus setSelection

Lo primero que tenemos que hacer para ir formateando el texto mientras el usuario escribe es aadir un listener para el evento change al campo de texto:1. 2. Texto_txt.addEventListener(Event.CHANGE,textoDentro);3. Es importante que utilicemos el evento Event.CHANGE en lugar del TextEvent.INPUT, ya que el segundo se distribuye antes de que el campo se haya actualizado. Es decir, que si escribimos una "a" en el campo, flash lanza el evento TextEvent.INPUT, actualiza el valor .text del campo y lanza el eveno Event.CHANGE. Despus creamos la funcin que recoja el evento:1. 2. function textoDentro(e:Event):void {3. e.target.text = formatear(e.target.text.split(".").join(""));4. e.target.setSelection(e.target.text.length, e.target.text.length);5. }6. En esta funcin hacemos dos cosas. Primero cogemos el texto del campo, le quitamos los puntos y lo mandamos a la funcin que lo va a formatear:1. 2. e.target.text = formatear(e.target.text.split(".").join(""));3. Despus ponemos el cursor al final del campo para que el usuario pueda seguir escribiendo al final del nmero:1. 2. e.target.setSelection(e.target.text.length, e.target.text.length);3. La funcin que evala el nmero y le pone los puntos es esta:1. 2. function formatear(strNumber:String):String {3. while (strNumber.substr(0, 1) == "0") {4. strNumber = strNumber.substr(1);5. }6. var dollar_array:Array = new Array();7. var start:Number;8. var end:Number = strNumber.length;9. while (end > 0) {10. start = Math.max(end - 3, 0);11. dollar_array.unshift(strNumber.slice(start, end));12. end = start;13. }14. return dollar_array.join(".");15. }16.

Habilitar suavizado en el componente FLVPlaybackEtiquetas: FLVPlayback Esta linea sirve para habilitar el suavizado (smoothing) en un componente FLVPlayback. Aunque el rendimiento se resiente bastante, puede ser til si tenemos que reescalar el vdeo o este es de muy poca calidad1. 2. //Suponiendo que el FLVPlayback se llama "player"3. player.getVideoPlayer(player.activeVideoPlayerIndex).smoothing = true;4.

Envio de email con adjuntos en AS3 y PHPEtiquetas: FileReference FileFilter URLRequest Este ejemplo muestra como hacer un formulario en Flash (Actionscript 3.0) con envio de adjuntos. El esquema bsico es que hacemos una subida normal con FileReference, y en el URLRequest de la subida incluimos las variables que queramos adjuntar en el formulario:1. 2. var request:URLRequest = new URLRequest(url);3. request.method = URLRequestMethod.POST;4. request.data = new URLVariables();5. request.data.nombre = Nombre_txt.text;6. request.data.destinatario = Destinatario_txt.text;7. subidor.upload(request);8. Estas variables las recogemos despus en el PHP con el nombre que les hayamos puesto con:1. 2. $_REQUEST[nombre]3. En el php tenemos el cdigo tpico de una subida, y una vez terminada pasamos a montar el correo electrnico.Dejo los fuentes con el fla, la clase Formulario, y el php para la subida. El cdigo php es una versin adaptada del que podis encontrar en esta pgina

Comprobacin de email con expresiones regulares1 Etiquetas: RegExp Esta funcin utiliza una expresin regular para comprobar si una cadena es un email vlido. La expresin regular no la he construido yo, pero no puedo citar la fuente porque la he visto en muchos foros de actionscript, en castellano e ingls. La funcin en cuestin es esta:1. 2. function emailValido(email:String):Boolean{3. var emailExpression:RegExp = /^[a-z][\w.-]+@\w[\w.-]+\.[\w.-]*[a-z][a-z]$/i;4. return emailExpression.test(email);5. }6. Y estos seran algunos resultados:@hotmail.com: falsepepe@hotmail.: falsepaco@hotmail.hola.com: truewww.hotmail.com: falsepaco@hola@hotmail.com: falsecarmen@hotmail.com: true

Actionscript 3.0: memoria utilizada1 Etiquetas: System totalMemory Podemos comprobar cantidad de memoria utilizada por Flash Player mediante la propiedad System.totalMemory, que devuelve el valor en bytes. Por ejemplo, si queremos ver el valor en KBs de la memoria utilizada por nuestra aplicacin, pondramos:1. 2. import flash.system.System;3. 4. trace(System.totalMemory / 1024 + " KBs")

Efecto lupa en Actionscript 3.04 Etiquetas: BitmapData Bitmap smoothing mask drawCircle

En este ejemplo voy a tratar de explicar como se hace el "Efecto lupa" en Flash, con Actionscript 3.0.Para simplificar voy a explicar la teoria basndome en una imagen que tengo en un MovieClip el escenario. Por supuesto esto se puede modificar para cargar imgenes externamente o como se necesite. Los pasos que tenemos que seguir para crear el "efecto lupa" son estos:-Crear una copia del MovieClip en BitmapData, y ponerla por encima a una escala mayor que el original:1. 2. //Creo un pantallazo del clip, lo pongo con una escala == zoom3. var myBitmapData:BitmapData = new BitmapData(clip.width, clip.height);4. myBitmapData.draw(clip);5. var bmp:Bitmap = new Bitmap(myBitmapData);6. bmp.smoothing = true;7. contenedor.addChild(bmp);8. contenedor.scaleX = contenedor.scaleY = zoom;9. addChild(contenedor);-Poner a la copia una mscara circular, de manera que solo se vea el trozo de imgen tapado por la mscara:1. 2. //Le pongo una mascara del tamao t al contenedor3. mascara.graphics.beginFill(0x000000, 1);4. mascara.graphics.drawCircle(0, 0, t);5. contenedor.mask = mascara;6. addChild(mascara);7. -Aadimos un evento enterframe. Dentro de la funcin del evento vamos a mover la mscara siguiendo al ratn, y a recolocar la "copia grande":1. 2. addEventListener(Event.ENTER_FRAME,renderizar)3. En la funcin del evento tenemos que mover la mscara para que siga al ratn, y recolocar la imagen grande para que el trozo que se v sea el que corresponde a la imagen pequea. La funcin es cuestin es esta:1. 2. private function renderizar(e:Event):void {3. //Calculo el porcentaje que tengo que mover el pantallazo4. var porcentajeX = clip.mouseX / clip.width;5. var porcentajeY = clip.mouseY / clip.height;6. //Recoloco el contenedor7. contenedor.x = -(contenedor.width - clip.width) * porcentajeX8. contenedor.y = -(contenedor.height - clip.height) * porcentajeY9. //Muevo la mascara10. mascara.x = escenario.mouseX;11. mascara.y = escenario.mouseY;12. }13. Adjunto fuentes con todos los materiales, por si queda alguna duda.

ActionScript 3.0: La propiedad mouseChildren2 Etiquetas: mouseChildren Una de las trampas que me encontr cunado empec con Actionscript 3.0 era esta:-Creaba un MovieClip con un campo de texto dinmico dentro (por ejemplo para el botn de un men). -Le aada un evento de ratn y ponia su propiedad buttonMode como true. Resultado: no se vea el handCursor (la mano tpica al hacer over sobre un botn) cuando pona el ratn encima. En aquel momento, para solucionar el inconveniente (estaba haciendo unos cambios delante del cliente), puse un botn transparente dentro del MovieClip, por encima del resto de elementos, de tal manera que al hacer over sobre el clip se hacia over sobre el botn y se mostraba el handCursor. Mas tarde, pude investigar un poco, y descubr que lo que pasaba era que el campo de texto dentro del clip "interfera" con los eventos de ratn, y por eso no se mostraba "la mano". Para solucionarlo, podemos utilizar la propiedad mouseChildren de los DisplayObjectContainer, que determina si los elementos secundarios de un objeto estn habilitados para ratn. Su valor predeterminado es true.

Comprobacion de tipos en Actionscript 3.0 con as e isEtiquetas: as is En Actionscript 3.0 disponemos de dos operadores para verificar tipos: "as" e "is". Es decir, con estos operadores podemos comprobar, por ejemplo, si un elemento del escenario es de tipo Sprite, o si una variable es de tipo Number.Para ver como funcionan estos dos operadores voy a utilizar un escenario sobre el que tengo 3 MovieClips de la clase "Cuadrado", que extiende de MovieClip, y 3 MovieClips de la clase "Circulo", que tambin extiende de MovieClip. El operador isPermite comprobar si una variable o expresin forma parte de un tipo de datos. No solo verifica si un objeto es una instancia de la clase especificada, sino tambin si es una subclase de ella o implementa la misma interfaz. Por ejemplo, si en el escenario que hemos propuesto ponemos:1. 2. for(var i:uint = 0; i < numChildren; i++){3. if (getChildAt(i) is DisplayObject) {4. getChildAt(i).alpha = .15. }6. }7. Obtenemos:Como vemos, "parpadean" crculos y cuadrados, ya que todos son instancias de clases que heredan de DisplayObject. Sin embargo, si ponemos:1. 2. for(var i:uint = 0; i < numChildren; i++){3. if (getChildAt(i) is Cuadrado) {4. getChildAt(i).alpha = .15. }6. }7. vemos que solamente parpadean los cuadrados, ya que los circulos no pertenecen a la misma clase ni heredan de "Cuadrado". El operador asTambin permite comprobar si un elemento es miembro de un tipo de datos. Sin embargo, en lugar de devolver true o false, devuelve el valor de la expresin en lugar de true, y null en lugar de false. Por ejemplo:1. 2. trace(miCirculo as Circulo) //Devuelve: [object Circulo]3. trace(miCirculo as Sprite) //Devuelve: [object Circulo]4. trace(miCirculo as Cuadrado) //Devuelve: null5.

Actionscript 3.0: Colisiones a nivel de pixel1 Etiquetas: complexIntersectionRectangle hitTestObject La funcin hitTestObject(obj:DisplayObject) evala un objeto para comprobar si choca con el objeto obj. Por ejemplo, si tenemos dos objetos "Item1_mc" e "Item2_mc", podemos comprobar si chocan con: 1. 2. Item1_mc.hitTestObject(Item2_mc)3. Esta funcin, tiene el inconveniente de que comprueba los choques entre los contenedores rectangulares de los objetos. Por ejemplo:

por tanto, sin queremos comprobar las colisiones entre dos objetos no rectangulares, puede devolver valores que aparentemente no son correctos. Aqu tenemos un ejemplo en Flash:Si queremos utilizar colisiones a nivel de pixel, podemos crear un objeto bitmapData, superponer los dos objetos en el objeto bitmapData con un filtro de color cada uno, y comprobar si hay pixels que tienen el color de la combinacin de filtros utilizados. En el blog de tink , podemos descargar una clase que nos ahorra todo este proceso y utilizar directamente mtodos que nos devuelven true o false como resultado de la colisin. Por ejemplo, si queremos comprobar la colisin a nivel de pixel entre los dos objetos del ejemplo anterior, pondramos:1. 2. HitTest.complexHitTestObject(Item1_mc,Item2_mc)3. Y si queremos recibir el rectngulo de colisin:1. 2. var rect:Rectangle = HitTest.complexIntersectionRectangle(Item1_mc,Item2_mc);3. El resultado, sera este:Los fuentes, y la clase HitTest de tink, tras el salto.

Comparar pixels de imgenes en Actionscript 3.0 con thresholdEtiquetas: BitmapData clone threshold

La funcin threshold permite hacer comparaciones pixel a pixel en una imagen. Por ejemplo, podemos separar todos los pixels mayores de un color de una imagen, y obtener otra imagen con esos pixels. La funcin threshold tiene 5 parmetros obligatorios (y varios opcionales):threshold(sourceBitmapData:BitmapData, sourceRect:Rectangle, destPoint:Point, operation:String, threshold:uint)-sourceBitmapData: la imagen que vamos a utilizar-sourceRect: rectngulo que define el area de la imagen de origen que vamos a utilizar-destPoint: punto de la imagen de destino que corresponde a la esquina superior izquierda del rectngulo-operation: operacin que vamos a utilizar-threshold: valor con el que comparamos cada pixelPor ejemplo, si queremos separar los pixels mayores de 0xFFCCCCCC de los menores en una imagen, podemos utilizar:1. 2. img1.threshold(img1, new Rectangle(0, 0, 350, 242), new Point(0, 0), ">", 0xFFCCCCCC);3. img2.threshold(img2, new Rectangle(0, 0, 350, 242), new Point(0, 0), "