LeoBaraldi – Ejemplos Flash, Ejemplos actionscript, Tutoriales Flash, Tutoriales actionscript, actionscript 3, curso de actionscript

Recursos y ejemplos de actionscript, Flash, AIR, Flex, CSS y HTML. Tutoriales de actionscript 2 y actionscript 3

Pintar movieClip con ActionScrip usando la clase colorTransform

| 12 Comments

Como sabrán en las versiones de flash MX la clase color nos permitía cambiar el color de un movieClip desde AS, esta clase a quedado inutilizada desde la versión 8 en adelante y ha sido reemplazada por la clase ColorTransform.
Para ver un ejemplo concreto de cómo trabaja dicha clase, vamos a dibujar un movieCip en nuestro escenario y le cambiaremos el color desde el ActionScript. A esto le vamos a sumar la posibilidad de que el usuario pueda elegir el color a pintar.
Algo a tener en cuenta antes de continuar es saber que la clase color utilizaba como “color” un valor hexadecimal y en cabio la clase “ColorTransform” usa un valor RGB (rojo, verde y azul) por lo tanto vamos a tener que hacer una función que se encargue de transformar nuestro valores hexadecimales a RGB.
A continuación expongo el código con los cometarios de cada sección:

Actionscript:
  1. //importamos las clases necesarias
  2. import flash.geom.Transform;
  3. import flash.geom.ColorTransform;
  4. //creamos una variable para Transform y le asignamos el elemento a pintar
  5. var trans:Transform = new Transform(rect);
  6. //creamos una variable con el color inicial
  7. var color:Number = 000000;
  8. //llamamos la función encargada de pasar nuestro color hexadecimal a RGB
  9. var ConvColor:Object = deEXaRGB(color);
  10. //Esta es la función que se encarga de traspasar el modo HEX a RGB
  11. function deEXaRGB(valor) {
  12. var pre = "0x";
  13. var RGB = new Object();
  14. RGB.red = (pre+valor>> 16) & 0xFF;
  15. RGB.green = (pre+valor>> 8) & 0xFF;
  16. RGB.blue = pre+valor & 0xFF;
  17. return RGB;
  18. }
  19. //creamos una función cosa que podamos volver a llamarla cada ves
  20. //que cliquemos el colorPikup
  21. function pintar() {
  22. //acá almacenamos los valores RGB, como pueden ver recuperamos los valores desde un objeto
  23. //"ConvColor" y simplemente concatenamos el objeto con el atributo, ejmp: ConvColor.red (rojo)
  24. var blueColorTransform:ColorTransform = new ColorTransform(0, 1, 1, 1, ConvColor.red, ConvColor.green, ConvColor.blue, 0);
  25. trans.colorTransform = blueColorTransform;
  26. }
  27. //pintamos por primera vez
  28. pintar();
  29. //creamos un detector para nuestro Color picker
  30. cpicker.addListener(this);
  31. this.change = function(evt:Object) {
  32. //almaceno el color seleccionado
  33. color = evt.getRGB();
  34. //hago la conversion
  35. ConvColor = deEXaRGB(color);
  36. //vuelvo a pintar el cuadrado
  37. pintar();
  38. };
  39. //NOTA: PARA ESTE EJEMPLO USE UN COLOR PICKER DE "sephiroth", ESTE ES UN COMPONENTE
  40. //QUE PUEDEN DESCARGARLO DESDE ESTA URL: http://www.sephiroth.it/file_detail.php?id=147#

Author: LeoBaraldi

Diseñador gráfico y programador en Web, con experiencia profesional en el rubro desde 1998. Experto en diseño de interfaces Frontend y Backend, sitios, portales y dispositivos móviles. Experto en estándares, CSS y HTML, amplios conocimientos en CEO. Desarrollador de sitios multi plataformas, HTML5, CSS3 y JQuery. Experto programador en Adobe Flex, AIR y ActionScript 3.0. Conocimientos en lenguajes como PHP, Javascript y bases de datos MySQL. Profesor de Diseño y Diseño Web en la Escuela Superior de Diseño Aguas de la Cañada, asesor y colaborador para medios gráficos, editoriales y revistas afines. Actualmente Jefe de Producción en Manifesto solutions.

12 Comments

  1. no tenias una foto tuya mas bonita? O alguna que estes peinado aunque sea...Un abrazo y felicitaciones por las siete mil visitas.

    fulano
    http://www.elmundosegunfulano.blogspot.com

  2. mm tengo una duda.. si quiero cambiarle el color a dos movieclips a la vez, que es lo que tengo que cambiar?

  3. te queria preguntar como agregaste el cpicker, hablando si yo quiero hacerlo de 0, sin copiar el AdvColorPicker

  4. Marcos, el colorPicker es un componente para flash8 ya que este no tiene dicho componente, ya en la versión 9 y as3 viene un colorpicker nativo de flash muy bueno y recomendable, pero es solo para AS3. Así que sino sabes AS3 puedes usar el componente que esta en mi ejemplo!

  5. Quisiera saber como puedo una vez pintado un mc un texto me diga bien o mal, es decir validar la respuesta de color
    Mil gracias, llevo un año intentandolo

  6. mddr te envie los files por email, pero seria algo asi:

    Actionscript:
    1. //aqui almacenas los colores, por cada color le corresponde un nombre y el valor, asi como los campos
    2. //de textos y picket en el scenario, cada grupo es asi: {texto:"Rojo", color:0xFF0000}
    3. var colores:Array = new Array({texto:"Rojo", color:0xFF0000}, {texto:"Azul", color:0x0000FF});
    4.  
    5. //preparamos la interactividad
    6. for (var i:Number = 0; i<colores.length; i++) {
    7.     var cont = i+1;
    8.     var textcolor = this["palabara"+cont+"_txt"];
    9.     var resultText = this["resultado"+cont+"_txt"];
    10.  
    11.     textcolor.text = colores[i].texto;
    12.     textcolor.textColor = colores[i].color;
    13.  
    14.     var pik = this["cpicker"+cont];
    15.     pik.campoc = textcolor;
    16.     pik.resultc = resultText;
    17.     pik.addListener(pik);
    18.     pik.change = function(evt:Object) {
    19.         color = evt.getRGB();
    20.         evaluar(color,this.campoc,this.resultc);
    21.     };
    22. }
    23.  
    24. //funcion que detecta el color
    25. function evaluar(color, campoc, resultc) {
    26.     if (campoc.textColor == Number("0x"+color)) {
    27.         resultc.text = "Correcto!!!!";
    28.     } else {
    29.         resultc.text = "Intentalo nuevamente";
    30.     }
    31. }

  7. hola amigos queria saber como puedo hacer si tengo un dibujo de winnie pooh por ejemplo y quiero escojer el color de un valdecito y pintar al winnie del color que elija, si pueden ayudarme creo que tendria que dibujarlo y convertirlo como movie clip o grafico y tengo que hacerlo en archivos as en clases, porfa ayudenme ggracias

  8. El código es perfecto, pero se me plantea otro problema: Si tengo un mc en el escenario y lo tengo que pintar de rojo, eligiendo entre varios colores, como pongo el código de color en el if para que me funcione, el código que tengo es asi:

    var my_color:Color = setRGB(0x000000);

    my_color = new Color(bola);
    my_color1 = new Color(cuadro);

    cambiar.onPress = function() {

    my_color.setRGB(0xFF0000);
    my_color1.setRGB(0xFF0000);
    };

    cambiar1.onPress = function() {
    my_color.setRGB(0x00ff00);
    };
    //my_color.setRGB(0x00FF00);!

    //control de resposta:
    control.onPress = function() {
    if (my_color == 0xff0000) {
    c1 = "BEN";
    trace("BOBO");
    } else {
    c1 = "MAL";
    }
    };

  9. Hola, tengo que hacer un sistema de armadod e camisetas de futbol, en el cual se peudan elegir los colores de cada parte d ela camiseta, como el cuello, si tiene algun detalle, etc.
    el tema es que me tira un error si quiero utilizar un switch o un if con el codigo que pasastes ahi, que solucion me podrias dar?

    muchas gracias!

  10. Mi consulta es simple, como puedo hacer un boton en actionscript al que yo puedo asignarle los colores del over mediante un archivo XML?

  11. Hola, buenos días,
    Me gustó mucho el ejemplo, era lo que necesitaba, pero me hace falta algo quiero que me muestre los números o los valores de los colores RGB en la pantalla, que función le agregó al script para hacer esto posible,
    Muchas gracias...

  12. Necesito hacer exactamente eso que pones en el tutorial pero cambiando el color a dos objetos, esto como lo haría?

Deja un comentario

Required fields are marked *.

*