Professional Documents
Culture Documents
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]
Pág. 1
Computación Gráfica – Gráficas Primitivas
El blanco y el negro
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
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);
}
Pág. 14 Pág. 3
Computación Gráfica – Gráficas Primitivas M.Sc. Ecler Mamani Vilca
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);
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
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