M.Sc.

Ecler Mamani Vilca

I. Gráficas Primitivas
Tema Colores
La descripción RGB (del inglés Red, Green, Blue; "rojo, verde, azul") de un color
hace referencia a la composición del color en términos de la intensidad de los
colores primarios con que se forma: el rojo, el verde y el azul. Es un modelo de
color basado en la síntesis aditiva, con el que es posible representar un color
mediante la mezcla por adición de los tres colores luz primarios. El modelo de
color RGB no define por sí mismo lo que significa exactamente rojo, verde o azul,
por lo que los mismos valores RGB pueden mostrar colores notablemente
diferentes en diferentes dispositivos que usen este modelo de color. Aunque
utilicen un mismo modelo de color, sus espacios de color pueden variar
considerablemente. [http://es.wikipedia.org/wiki/Modelo_de_color_RGB]

Codificación hexadecimal del color

La codificación hexadecimal del color

permite expresar fácilmente un color
concreto de la escala RGB, utilizando la
notación hexadecimal. Se utiliza, por
ejemplo, en el lenguaje HTML, Actionscript
y JavaScript.

Este sistema utiliza la combinación de tres

códigos de dos dígitos para expresar las
diferentes intensidades de los colores
primarios RGB (Red, Green, Blue, rojo,
verde y azul).

Pág. 1
 Computación Gráfica – Gráficas Primitivas

El blanco y el negro

Negro #000000 Los tres canales están al mínimo 00, 00 y 00

Blanco #ffffff Los tres canales están al máximo ff, ff y ff

En el sistema de numeración hexadecimal, además de los números del 0 al 9 se

utilizan seis letras con un valor numérico equivalente; a=10, b=11, c=12, d=13,
e=14 y f=15. La correspondencia entre la numeración hexadecimal y la decimal u
ordinaria viene dada por la siguiente fórmula:

decimal = primera cifra hexadecimal * 16 + segunda cifra hexadecimal

La intensidad máxima es ff, que se corresponde con (15*16)+15= 255 en decimal,

y la nula es 00, también 0 en decimal. De esta manera, cualquier color queda
definido por tres pares de dígitos.

Los tres colores básicos

Rojo #ff0000 El canal de rojo está al máximo y los otros dos al mínimo

Verde #00ff00 El canal del verde está al máximo y los otros dos al mínimo

Azul #0000ff El canal del azul está al máximo y los otros dos al mínimo

Las combinaciones básicas

Amarillo #ffff00 Los canales rojo y verde están al máximo

Cyan #00ffff Los canales azul y verde están al máximo

Magenta #ff00ff Los canales rojo y azul están al máximo

Pág. 2
 Computación Gráfica – Gráficas Primitivas M.Sc. Ecler Mamani Vilca

Objeto: Gris claro #D0D0D0 Los tres canales tienen la misma intensidad
Clip de película dentro de él botón:
Gris oscuro #5e5e5e Los tres canales tienen la misma intensidad
on (release)
{ A partir de aquí se puede hacer cualquier combinación de los tres colores.
iColor = new Color(this);
iColor.setRGB(_root.fillColor);
//Destruye la referencia de objeto Modificadores de color
delete iColor;
} setRGB (color);
Clip de Película:
on (release) {
var nuevo_color:Color = new Color(cuadrado); Antes Después
// la instancia es cuadrado
nuevo_color.setRGB(0xFF0000);
}

setTransform(conjunto de colores + alpha);

I: Pincel Establece la información de transformación para un objeto Color. El parámetro

colorTransformObject es un objeto genérico que usted crea desde el constructor
new Object. Incluye parámetros que especifican los valores de porcentaje y
desplazamiento para los componentes rojo, verde, azul y alfa (transparencia) de
un color, introducidos en el formato 0xRRGGBBAA.

Los parámetros de un objeto de transformación de color corresponden a la

configuración del cuadro de diálogo Efecto avanzado y se definen de la siguiente
forma:

• ra es el porcentaje del componente rojo (de -100 a 100).

• rb es el desplazamiento del componente rojo (de -255 a 255).
• ga es el porcentaje del componente rojo (de -100 a 100).
• gb es el desplazamiento del componente rojo (de -255 a 255).
• ba es el porcentaje del componente rojo (de -100 a 100).
• bb es el desplazamiento del componente rojo (de -255 a 255).

Pág. 14 Pág. 3
 Computación Gráfica – Gráficas Primitivas M.Sc. Ecler Mamani Vilca

• aa es el porcentaje de alfa (de -100 a 100). mouse_txt.selectable = false;

• ab es el desplazamiento de alfa (de -255 a 255). // initialize the new gradient swatch
var myMatrix:Matrix = new Matrix();
myMatrix.createGradientBox(200, 200, 0, 50, 50);
Ejemplo: var depth:Number = this.getNextHighestDepth();
var mc:MovieClip = this.createEmptyMovieClip("mc_"+depth, depth);
var colors:Array = [0xFF0000, 0xFFFFFF];
var alphas:Array = [100, 100];
var ratios:Array = [0, 0xFF];
mc.beginGradientFill("linear", colors, alphas, ratios, myMatrix);
mc.lineTo(0, 400);
mc.lineTo(400, 400);
mc.lineTo(400, 350);
mc.lineTo(0, 350);
// move it into place
mc._x = 10;
mc._y = -335;

APLICACIÓN COLOR 02 FORMA CORTA

CONTROL
ClipEvent (load)
{
Mouse.hide();
//Cambiar colores }
on (release) { onClipEvent (enterFrame)
{
nuevo_color = new Color(cuadrado); _root.brush._x = _root._xmouse;
colorea = new Object(); _root.brush._y = _root._ymouse;
colorea = {ra:100, rb:0, ga:50, gb:0, ba:100, bb:0, aa:50, ab:0}; //Actualiza la visualización
nuevo_color.setTransform(colorea); //(independientemente de los fotogramas por segundo establecidos para la película
updateAfterEvent();
} }

Colores
on (release)
{
_root.fillColor = 16711680;
//valor convertido a decimal
_root.Puntapincel
}

Pág. 4 Pág. 13
 Computación Gráfica – Gráficas Primitivas M.Sc. Ecler Mamani Vilca
mc.beginGradientFill("linear", colors, alphas, ratios, myMatrix);

mc.lineTo(0, 400);
APLICACIÓN JUEGO PINTAR OPCION 01
mc.lineTo(400, 400);
mc.lineTo(400, 350);
mc.lineTo(0, 350);
// create bitmapdata to allow us to get pixel data of new gradient sample
myBitmapGradient = new BitmapData(mc._width, mc._height, true, 0x00FFFF);
//Snapshot the movie clip that contains the external file we loaded
myBitmapGradient.draw(mc);
my_pixelColor = myBitmapGradient.getPixel(1, 1);
myhexGradient = "0x"+(my_pixelColor).toString(16);
//trace(myhexGradient);
}
if (mc.hitTest(_xmouse, _ymouse, false)) {
var point:Object = {x:_xmouse, y:_ymouse};
mc.globalToLocal(point);
// get the local point on the gradient swatch when clicked
my_pixelColor = myBitmapGradient.getPixel(point.x, point.y);
myhexGradient = "0x"+(my_pixelColor).toString(16);

var table_str:String = "<textformat tabstops='[50,100]'>";

//table_str +=
"<b>Position</b>\t"+"x:"+container._xmouse+"\t"+"y:"+container._ymouse+newline;
table_str += "<b>Color Value</b>\t"+myhexGradient+newline;
table_str += "</textformat>";
mouse_txt.htmlText = table_str;
// change the color of the swatch
var colorTransGradient:ColorTransform = new ColorTransform();
colorTransGradient.rgb = myhexGradient; Paso 01: Dibujar y mantener las líneas que no pintaran en una capa separada:
var transGradient:Transform = new Transform(swatch);
transGradient.colorTransform = colorTransGradient;
//trace(targetPath(mc));
}
};
Mouse.addListener(mouseListener);
// move the cross hairs to the top of the pile
puntero_mc.swapDepths(container);
// debug field
this.createTextField("mouse_txt", 999, 0, 250, 150, 40);
mouse_txt.html = true;
mouse_txt.wordWrap = true;
mouse_txt.border = true;
mouse_txt.autoSize = true;

Pág. 12 Pág. 5
 Computación Gráfica – Gráficas Primitivas M.Sc. Ecler Mamani Vilca

Paso 01: Generar instancias por cada parte del gráfico que deseas pintar o cambiar de color, cada myBitmap = new BitmapData(container._width, container._height, true, 0x00FFFF);
gráfico debe ser agrupado como clip de película: //Snapshot the movie clip that contains the external file we loaded
myBitmap.draw(container);
pixelColor = myBitmap.getPixel(150, 150);
myhex = "0x"+(pixelColor).toString(16);
//trace(myhex);
}
// Create a mouse listener object
I: cuatro_btn var mouseListener:Object = new Object();
I: uno_btn
I: dos_btn I: tres_btn // Every time the mouse cursor moves within the SWF file,
//update the position of the crosshair movie clip
//instance on the Stage.
mouseListener.onMouseMove = function() {
if (container.hitTest(_xmouse, _ymouse, false)) {
I: cinco_btn puntero_mc._x = _xmouse;
puntero_mc._y = _ymouse;
}
I: siete_btn };
I: ocho_btn // When you click the mouse, check to see what was clicked
I: seis_btn
mouseListener.onMouseDown = function() {
// see if the user clicked the color pallet
if (container.hitTest(_xmouse, _ymouse, false)) {
I: nueve_btn
// find the x,y within the container mc
I: once_btn var point:Object = {x:_xmouse, y:_ymouse};
container.globalToLocal(point);
I: diez_btn // check inside the bitmap for the pixel data
pixelColor = myBitmap.getPixel(point.x, point.y);
myhex = "0x"+(pixelColor).toString(16);
//trace(myhex);
Paso 02: Generar instancias para el pincel y las acuarelas:
var colorTransMBD:ColorTransform = new ColorTransform();
colorTransMBD.rgb = myhex;
var transMBD:Transform = new Transform(swatch);
transMBD.colorTransform = colorTransMBD;
// lets report some stuff to the screen
var table_str:String = "<textformat tabstops='[50,100]'>";
I: punta_mc //table_str +=
(dentro del pincel) "<b>Position</b>\t"+"x:"+container._xmouse+"\t"+"y:"+container._ymouse+newline;
table_str += "<b>Color Value</b>\t"+myhex+newline;
I: pincel_mc table_str += "</textformat>";
mouse_txt.htmlText = table_str;
// redraw the gradient from clicked color to white
var colors:Array = [myhex, 0xFFFFFF];
var alphas:Array = [100, 100];
var ratios:Array = [0, 0xFF];

Pág. 6 Pág. 11
 Computación Gráfica – Gráficas Primitivas M.Sc. Ecler Mamani Vilca

Paso 03: Crear módulos o funciones

APLICACIÓN CUENTA GOTAS
Se observado que en cualquier programa grafico tiene un opción para absorber el color de una
imagen. function colorear(item) {
this.createEmptyMovieClip(item+"_color");
item_color = new Color(item+"_btn");
Paso 01: poner una imagen jpg con el nombre de ; imagen_ecler.jpg, en un carpeta, para el
if (pincel_mc.punta_mc.violeta) {
ejemplo (d:\cgotas)
item_color.setRGB(0xFFFFFF);
}
Paso 02: Guardar el archivo fla dentro de la carpeta antes mencionada
if (pincel_mc.punta_mc.verde) {
item_color.setRGB(0x009900);
Paso 03: Crear una cruz y dar la instancia de puntero_mc }
if (pincel_mc.punta_mc.rojo) {
Paso 04: Insertar el código en el fotograma principal item_color.setRGB(0xCA252C);
import flash.display.BitmapData; }
import flash.geom.ColorTransform; if (pincel_mc.punta_mc.lila) {
import flash.geom.Transform; item_color.setRGB(0xF4D7FD);
import flash.geom.Matrix; }
//create a movie clip to hold the external file color pallet created with photoshop if (pincel_mc.punta_mc.amarillo) {
var container:MovieClip = this.createEmptyMovieClip("container", item_color.setRGB(0xF6C815);
this.getNextHighestDepth()); }
//move the container into place if (pincel_mc.punta_mc.marron) {
container._y = 70; item_color.setRGB(0xF79A1E);
container._x = 10; }
// sample swatch that will preview the final clicked color if (pincel_mc.punta_mc.azulclaro) {
swatch._x = 413; item_color.setRGB(0x689CFF);
swatch._y = 15; }
swatch._height = 220; if (pincel_mc.punta_mc.azuloscuro) {
swatch._width = 50; item_color.setRGB(0xF04265);
/* }
Use the MovieClipLoader class so we can be told if (pincel_mc.punta_mc.naranja) {
when the external file loads or fails to load item_color.setRGB(0xCC923C);
*/ }
loader = new MovieClipLoader(); delete item_color;
//Give us status updates by firing events }
loader.addListener(this); //La punta del pincel esta invisible
//Load the external file into the holding movie clip pincel_mc.punta_mc._visible = false;
loader.loadClip("imagen_ecler.jpg", container); //el pincel se arrastra con el mouse
//this function is called by the 'loader' object when the file is loaded and ready to use startDrag("pincel_mc", true, 0, 0, 790, 570);
function onLoadInit() { //Creo el objeto Color y donde esta ubicado
/* elColor = new Color(pincel_mc.punta_mc);
Create a new bitmap object in memory that is the same size as
the loaded file and fill it with transparent pixels
*/

Pág. 10 Pág. 7
 Computación Gráfica – Gráficas Primitivas M.Sc. Ecler Mamani Vilca
//Elijo el color elColor.setRGB(0xFFFFFF);
amarillo_btn.onRelease = function() { pincel_mc.punta_mc.createEmptyMovieClip("violeta", 1);
pincel_mc.punta_mc._visible = true; };
//le coloco color y lo convierto en MC //llamo a la funcion colorear para cada area
elColor.setRGB(0xF6C815); uno_btn.onRelease = function() {
pincel_mc.punta_mc.createEmptyMovieClip("amarillo", 1); colorear("uno");
}; };
azulclaro_btn.onRelease = function() { dos_btn.onRelease = function() {
pincel_mc.punta_mc._visible = true; colorear("dos");
elColor.setRGB(0x689CFF); };
pincel_mc.punta_mc.createEmptyMovieClip("azulclaro", 1); tres_btn.onRelease = function() {
}; colorear("tres");
azuloscuro_btn.onRelease = function() { };
pincel_mc.punta_mc._visible = true; cuatro_btn.onRelease = function() {
elColor.setRGB(0xF04265); colorear("cuatro");
pincel_mc.punta_mc.createEmptyMovieClip("azuloscuro", 1); };
}; cinco_btn.onRelease = function() {
lila_btn.onRelease = function() { colorear("cinco");
pincel_mc.punta_mc._visible = true; };
elColor.setRGB(0xF4D7FD); seis_btn.onRelease = function() {
pincel_mc.punta_mc.createEmptyMovieClip("lila", 1); colorear("seis");
}; };
marron_btn.onRelease = function() { siete_btn.onRelease = function() {
pincel_mc.punta_mc._visible = true; colorear("siete");
elColor.setRGB(0xFF9C00); };
pincel_mc.punta_mc.createEmptyMovieClip("marron", 1); ocho_btn.onRelease = function() {
}; colorear("ocho");
naranja_btn.onRelease = function() { };
pincel_mc.punta_mc._visible = true; nueve_btn.onRelease = function() {
elColor.setRGB(0xCC923C); colorear("nueve");
pincel_mc.punta_mc.createEmptyMovieClip("naranja", 1); };
}; diez_btn.onRelease = function() {
rojo_btn.onRelease = function() { colorear("diez");
pincel_mc.punta_mc._visible = true; };
elColor.setRGB(0xCA252C); once_btn.onRelease = function() {
pincel_mc.punta_mc.createEmptyMovieClip("rojo", 1); colorear("once");
}; };
verde_btn.onRelease = function() {
pincel_mc.punta_mc._visible = true;
elColor.setRGB(0x009900);
pincel_mc.punta_mc.createEmptyMovieClip("verde", 1);
};
violeta_btn.onRelease = function() {
pincel_mc.punta_mc._visible = true;

Pág. 8 Pág. 9