App inventor 2 en español
Cómo programar los teléfonos móviles con Android
mediante App inventor 2 - Juan Antonio Villalpando

-- Tutorial de iniciación de App Inventor 2 en español --

Volver al índice del tutorial

___________________________

51D.- Estudio del color. Separar colores RVA. Opacidad.

p51D_estudio_color.aia

- Presentación.

- Sabemos que para construir una suma de color necesitamos tres componentes Rojo, Verde y Azul (RVA), en inglés Red, Green y Blue (RGB).

- Cada uno de esos componentes tendrá un valor entre 0 y 255, por lo cual se puede combinar 256 x 256 x 256 = 16.777.216 colores, ni nuestros ojos y ni las pantalla pueden ver esa cantidad de colores.

- Por otra parte App inventor traduce este trío de colores a un número de valor:

N = (A + 256 V + 65.536 R) + (16^8 - 2^24)

N = (A + 256 V + 65536 R) + 4.278.190.080

- Esta expresión sirve cuando la opacidad es 255, es decir si solo intervienen los colores RVA. [Más adelante veremos qué es la opacidad y pondré otra expresión.]

- Es decir, si tenemos los colores R = 240, V = 130 y A = 80, App inventor lo traducirá al número:

N = (80 + 256 x 130 + 65536 x 240) + 4.278.190.080 = 4.293.952.080

_________________
- Diseño.

- La Etiqueta1 la ponemos de Alto: 80 pixels.

- En los Bloques veremos "crear color" y "separar color":

_________________

- Obtención del número de color.
- Bloques.

- Creo el color naranja. Rojo = 240, Verde 130 y Azul = 80

- Cuando pulso el Botón1, la Etiqueta1 toma ese ColorDeFondo.

- Además en la Etiqueta1 aparece el número de ese color (4293952080) obtenido automáticamente.

- Calculo el número de ese color mediante la fórmula anterior:

numero_color = (A + 256 V + 65.536 R) + 4.278.190.080

- Esta expresión sirve cuando la opacidad es 255, es decir si solo intervienen los colores RVA. Más adelante veremos qué es la opacidad y pondré otra expresión.

- Observo en la Etiqueta2, que ese número coincide con el obtenido automáticamente (4293952080) obtenido mediante cálculo.

_________________

- Separación de colores.
- Bloques.

- En este caso utilizo el bloque "separar color". Este bloque obtiene en una lista los números correspondiente a cualquier color. Por ejemplo, en mi caso obtendría:
R = 240, V = 130 y A = 80

- El bloque "separar color" toma el color y pone cada uno de ellos en una lista.

- El correspondiente al índice 1 es el Rojo, el correspondiente al 2 el Verde y el correspondiente al 3 el Azul.

- Es decir, toma un color por ejemplo: 4.293.952.080 y obtenemos los cuatros que lo compone: 240, 130, 80 y 255.

- Fíjate que la opacidad es 255.

_________________

- Opacidad.
- Bloques.

- En la tabla anterior, observamos que aparece un cuarto elemento llamado "opacidad".

- La opacidad me dará el color más o menos transparente.

- Hasta ahora, siempre he indicado que los colores están formado por tres números, uno para el Rojo, otro para el Verde y otro para el Azul, pero hay otra más correspondiente a la "opacidad", es decir que el color sea más o menos transparente. Este número de opacidad puede variar de 0 hasta 255.
- Normalmente está establecido en 255, lo que significa que es totalmente opaco.
- Si fuera de opacidad 0, sería totalmente transparente y no se vería.

- El valor de la opacidad es el cuarto elemento de la lista de "separar color".

- Para estudiar la opacidad, consultamos el código del Deslizador, observamos que establecemos como valor de opacidad el que indica la PosiciónDelPulgar del Deslizador. Observamos que ahora para crear un color utilizamos los valores RVA y además la opacidad.

- Al mover el cursor del Deslizador, se observa como varía el color de la Etiqueta1, aunque sigue siendo naranja (240, 180, 30), varía su transparencia.

- Se observa en la Etiqueta7 que cambia el número de color cuando varía la opacidad, se presenta el número del color obtenido automáticamente.

- Si ponemos un dibujo como fondo de pantalla Screen1, veremos que el color naranja ocultará más o menos a ese dibujo según la transparencia que pongamos en el Etiqueta1.

- Se calcula N, esta es la expresión general del color incuyendo la opacidad.

N = A + (V + (R + (256 x opacidad)) x 256 ) x 256

- Se observa en la Etiqueta8 que el número de color obtenido mediante la expresión anterior coincide con el obtenido automáticamente.

_________________

- En un lienzo.
- Bloques.

- Ponemos un lienzo de color naranja (240, 130, 80, 255), activado en el Botón1.

- Luego pulsamos sobre cualquier punto de ese lienzo y obtenemos su color.

- En la Etiqueta9 aparece el número de color obtenido automáticamente.

- En la Etiqueta10 aparece el número de color obtenido mediante la expresión, observa que debemos restar 4294967296.

_________________
- Comentarios.

- Ahora que hemos visto que un color lo forman cuatro número (del 0 al 255), vamos a estudiar de nuevo cómo se obtiene el número de cada color incluido su opacidad. (Recuerda si utilizamos colores sin tener en cuenta la opacidad, ésta será 255).

- Veamos esta tabla adaptada de uno de enlaces.

        N = A + (V + (R + ( 256 x Opacidad) ) x 256 ) x 256

_________________
- Propuesta.

- Prueba poner colores en el Bloque "Crear color" con una lista de 4 números, es decir RVA y opacidad, deja los valores RVA y cambia la opacidad. Lo puedes hacer con 4 Deslizadores.

- En el siguiente tutorial estudiaremos la Opacidad.

__________________________________