Paleta de colores en Flash con Actionscript 2

En éste sencillo(mas o menos) tutorial, vamos a realizar una paleta de colores seleccionable con BitmapData. En éste caso, usaré Flash 8, y los archivos del tutorial, serán en ese formato.

Necesitamos:

• La imagen de la paleta a usar.
  
• Un clip de película llamado en instancia, "paleta_mc"
  
• Otro clip de película llamado en instancia, "punto_mc"
  
• Y otro clip llamado en instancia "selec_mc"
  
• Un cuadro de texto dinámico, llamado en instancia, "valores_txt"

Asi es como quedará al final:

Paleta de colores seleccionable en Flash con AS2

Vamos a crear un clip de película en la línea de tiempo principal, llamado en instancia "paleta_mc", que contendrá en su interior la fuente de donde se van a obtener los valores de color. En nuestro caso, he puesto una imagen de un espectro de colores cogida de internet, pero la primera vez use una captura de pantalla de la paleta de colores de Paint (jejejeje) y funcionó a la perfección.

Además, en una capa superior, vamos a incluir el clip "punto_mc", con forma de cruz que es el que vamos a desplazar por el tapiz.

Colocando el código

Éste es el código de la aplicación, que además es el único de toda la película, solo hay que situarlo en un primer fotograma.

Código :

//esta función es la que comprueba el color y se lo asigna a la muestra
function comprobar_color():Void {
   import flash.display.BitmapData;
   import flash.geom.ColorTransform;
   import flash.geom.Transform;
   // creamos un objeto bipmapdata con el contenido del clip de colores 
   var bitmap_1:BitmapData = new BitmapData(paleta_mc._width, paleta_mc._height);
   bitmap_1.draw(paleta_mc);
   // 
   // desplazamos el puntero de cruz y nos aseguramos de que no se salga del picker 
   punto_mc._x = Math.round(_root._xmouse);
   punto_mc._y = Math.round(_root._ymouse);
   if (punto_mc._x>paleta_mc._width-1) {
      punto_mc._x = paleta_mc._width-1;
   }
   if (punto_mc._y>paleta_mc._height-1) {
      punto_mc._y = paleta_mc._height-1;
   }
   if (punto_mc._x<0) {
      punto_mc._x = 0;
   }
   if (punto_mc._y<0) {
      punto_mc._y = 0;
   }
      // 
      // asignmos el color elegido al rectángulo de muestra 
   var color_sample:Color = new Color(selec_mc);
   color_sample.setRGB(bitmap_1.getPixel(punto_mc._x, punto_mc._y));
   // mostramos los valores RGB en la caja de texto
   var colorSeleccionado = deEXaRGB(bitmap_1.getPixel(punto_mc._x, punto_mc._y));
   valores = "RGB ("+colorSeleccionado.red+", "+colorSeleccionado.green+", "+colorSeleccionado.blue+")";
}
// cuando presionamos el clip de colores, ocultamos el ratón,
//  y ejecutamos la función comprobar_color() ,definida anteriormente
paleta_mc.onPress = function() {
   Mouse.hide();
   comprobar_color();
   delete _root.onMouseMove;
   _root.onMouseMove = function() {
      comprobar_color();
      updateAfterEvent();
   };
};
// paramos al liberar el ratón
paleta_mc.onRelease = function() {
   delete _root.onMouseMove;
   Mouse.show();
};
paleta_mc.onReleaseOutside = paleta_mc.onRelease;
// función auxiliar para convertir de hexadecimal a RGB
function deEXaRGB(valor:Number):Object {
   var RGB = new Object();
   RGB.red = (valor >> 16) & 0xFF;
   RGB.green = (valor >> 8) & 0xFF;
   RGB.blue = valor & 0xFF;
   return RGB;
}
stop();

Y ésto es todo...es fácil de entender y de modificar a gusto de cada uno. Espero que os haya gustado.

PD: Una aplicación posible, en una empresa de decoración, es cambiar el mc "selec_mc", por algún tipo de mueble/ropa/etc...y asi cambiarle el color...solo habría que profundizar un poco mas en el tema.

Y éste es el resultado, clickead con el cursor y arrastradlo por los colores:


Ejemplo del tutorial

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.