Ir al contenido principal

Usando Componentes de Flash: Paleta de Colores / Using the Flash Components: Color PIcker

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Al desarrollar en Flash Professional encontraremos un sinfin de ventajas, una de ellas son las prestaciones visuales, es decir la calidad visual de los elementos que se pueden integrar y también la interactividad y diversidad de ellos.

Cuando es necesario podemos crear nosotros mismos los elementos que necesitemos dependiendo de las características, comportamientos, vista, etc. Para nuestra fortuna existen ya varios elementos de antemano fabricados y diseñados para su correcto funcionamiento e implementación, dichos elementos se llaman "Componentes" y los podemos encontrar en el panel del mismo nombre.

Este es el primer post de una serie donde se platicará de manera práctica acerca de lo sdiferentes componentes que ya incluye Flash. En esta ocasión hablaremos del Color Picker o "Seleccionador de Color".

En este post, usaremos un ColorPicker para dibujar un círculo del color que se haya seleccionado del ColorPicker, y veremos las maneras de obtener esta información de él.

Paso 1. Agregar el Color Picker

Generemos un nuevo archivo en Flash Professional, por supuesto ActionScript 3.0; en el menú "Ventana" o "Window" encontraremos una opción que dice "Componentes" o "Components", dando click aparecerá el panel que necesitamos para agregar nuestro componente (es importante haber generado un archivo de ActionScript 3.0, ya que si se usa 2.0 este panel cambia).

En este panel enconrtaremos 3 diferentes categorías: Flex, User Interface (UI), Video. En este momento solamente abriremos la categoría de User Interface, ahí encontraremos el ColorPicker.



Paso 2. Dar nombre de instancia

Ahora lo arrastramos y colocamos en algún punto en el escenario, para entonces seleccionarlo y darle un nombre de instancia en el panel de propidades, en esta caso usaré "myColorPicker". Ya podemos visualizar la película y ver al ColorPicker funcionando.

En este mismo panel de propiedades podremos darnos cuenta de algunas otras cualidades del componente, desde las básicas como la posición ( X,Y), dimensiones ( W,H ), pero en la parte inferior veremos la sección "Component Parameters" donde tenemos las siguientes opciones:

enabled: En el caso de que queramos que se visualice, pero no funcione nustro ColorPicker desactivemos esta casilla, de manera prederterminada está activada.

selectedColor: Este es el color que se mostrará de manera predeterminada en el ColorPicker.

showTextField: Recordemos que al dar click a este componente aparece un campo de texto mostrando en hexadecimal el color seleccionado, con esta opción se determina si deseamos mostrar este texto o no.

visible: Esta propiedad determina si se visualizará el componente o no.

Cada una de estas propiedades también se pueden definir usando AS3, basta con escribir el nombre de la instancia con un punto y despues la propiedad, por ejemplo: "myColorPicker.visible=false".


Paso 3. Algo de Acción !!!

Bueno, es hora de agregar interacción; para esto coloquemos una nueva capa donde no colocaremos ningún otro elemento y nos servirá para colocar las acciones; lo que deseamos es detectar cuando el usuario utilice el ColorPicker, y para eso podríamos usar el evento MouseEvent.CLICK, pero por lo general los componentes tienen maneras mas correctas de usar su interacción y se encuentran en diferentes librerías que se deben agregar para funcionar; en este caso debemos agregar "import fl.events.ColorPickerEvent;" en el único frame de la capa para acciones.

Ahora agregemos un "listener" para que "escuche" el evento de cuando el usuario ya haya dado click y también haya seleccionado un color, claro generamos una función "changeHandler" que responda a este evento, que por el momento solo mostrará un mensaje para Flash.


Ahora al reproducir la película cada vez que seleccionemos un color, un mensaje se mostrará.

Paso 4. Obtengamos el color

Ahora que ya está lista la función que recibe como parámetro el evento de nuestro ColorPicker, podemos acceder a el mismo evento para ver la información. Así que cambiemos un poco el código para mostrar el color selecionado en cada ocasión que el usuario lo haga.

Ahora podemos saber el color que se selecciona del ColorPIcker, cabe señalar que aquí vemos el color seleccionado en su código numérico en base 10, aunque normalmente se usa en hexadecimal, no tendremos problema al usarlo así; más adelante veremos la manera de obtener el código del color en hexadecimal también.

Paso 5. Dibujemos algo.


Ahora ya que tenemos el color seleccionado utilicémoslo para colorear algo, en este post usaremos un Sprite para dibujar un círculo y re-colorearlo del color que tenga el ColorPicker. Para esto colocaremos unas líneas más primero para dibujarlo de un sólo color y después haremos unos cambios.


Expliquemos el código:

"var mySprite:Sprite=new Sprite();" : Creamos una nueva instancia Sprite llamada mySprite;

"mySprite.graphics.clear();" : Le indicamos a la nueva instancia que debe borrar todos los gráficos creados con código, esto servirá para "resetear" nuestro Sprite con cada color y no agregar nuevos elementos siempre.

"mySprite.graphics.beginFill(0xFF0000);" :  Le indicamos a "mySprite" que el relleno que se usará será de color 0xFF0000, el "0x" indica que es hexadecimal, y al usar el sitema RGB (Red, Green, Blue) se usan 2 caracteres para cada color, de esta forma "FF" está al máximo y los demás en "0".

"mySprite.graphics.drawCircle(0,0,50);" : Aquí hacemos a "mySprite" dibujar un círculo en las posiciones x=0, y=0 y 50 pixeles de radio.

"mySprite.graphics.endFill();" : Terminamos de usar el relleno.

"mySprite.x=250;" : Asignamos la posición X del Sprite (no la del círculo) a 250.
"mySprite.y=250;" : Asignamos la posición Y del Sprite (no la del círculo) a 250.

"addChild(mySprite);" : Agregamos "mySprite" al escenario.

Ahora notemos que hay una sección de código entre líneas de comentarios: "//----- comienza sección de dibujar" y "//----- termina sección de dibujar".

Esta es la sección que moveremos a una función que será la encargada de dibujar el círculo de diferentes colores. Llamaremos a esta función "dibujarCirculo".

Dicha función la llamaremos justo después de enviar el mensaje del ColorPicker.


Ahora cada vez que seleccionemos un color se re-dibujará un círculo rojo en el escenario, es posible que no lo apreciemos debido a la velocidad en que lo hace.

Paso 6. Pongamos color!!!

Para asignar un color al dibujar el círculo daremos como parámetro a la función "dibujarCirculo" el color que obtenemos al utilizar el ColorPicker. Por lo tanto debemos modificar la función para que reciba un parámetro que será de tipo "int" (número entero) y lo use para definir el relleno, y también modificaremos la manera en que llamamos la función después de mostrar el mensaje del ColorPicker.






Listo!!!

Hemos generado el código para utilizar un ColorPicker y usar el color seleccionado para dibujar una figura; ahora sólo mostraré unos cambios posibles.

Color en Hexadecimal y Decimal

Para obtener el color sleccionado en formato hexadecimal se puede usar la propiedad "hexValue" del ColorPicker, en cambio para hacer lo mismo pero con formato decimal usamos la propiedad "selectedColor", debemos señalar que en nuestro ejemplo usamos el color que obtenemos del Evento (e.color), pero este valor no lo podemos usar en otra función ya que la variable "e" solo existe dentro de esta función.


Mostrar sólo algunos colores


Existe la manera de definir exactamente qué colores mostrar en un ColorPicker y es con la propiedad "colors", donde se le asigna a manera de "array" los colores que usará. A continución se muestra también cómo asignar sólo 3 colores y predeterminar cuál mostrar incialmente.


De esta manera hemos logrado manipular el componente ColorPicker de manera básica. Los siguientes post serán también de otros componentes y su uso correcto. Si tienen algún tema en especial en mente no duden en contactar.

Gracias y felices linéas de código.

Comentarios

Entradas populares de este blog

Uso de XML con Flash y Actionscript 3.0 / Using XML with Flash and Actionscript 3.0

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

En el manejo de tecnologías web, existe una muy importante que nos permite organizar y visualizar información, esta tecnología es el XML que significa algo así como Lenguaje de Marcas (ó etiquetas mas bien) Extensible, si quieren conocer un poco más del tema aquí hay un link (español) y aquí otro (inglés).

Una ventaja de usa esta tecnología es que la información que coloquemos es este tipo de archivos se puede usar para visualizarse en diferentes interfaces con diferente tecnología, por ejemplo: un mismo archivo XML nos puede servir para almacenar el inventario de una tienda y que sea visualizado en una página web usando HTML, al mismo tiempo en una aplicación de escritorio usando AIR ( proximamente un post al respecto ) y hasta un archivo swf local, todas estas aplicaciones utilizando el mismo XML de manera qu…

Efecto "Colorear" en Flash

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

Hace un par de meses tuve que generar para un banner el efecto de una imagen en tonos de grises que al pasar el mouse encima se vaya "coloreando", este ejercicio me pareció divertido e interesante y por esta razón decidí colocarlo en este blog.

Puedes comenzar a iluminar la imagen de la tortuga en cuanto aparezca.

Para generar este sencillo efecto utilizaremos elementos de: máscaras dinámicas, Sprite, UILoader, además claro de MovieClips y Listeners.

Bueno, pues definamos y acotemos el problema:


Permitir que el usuario pueda "colorear" una imagen con el mouse.Se debe mostrar una imagen inicial y una final ( mo importa si son iguales o no ).Las imágenes deben de ser externas al flash para optimizar su tamaño.Cuando el usuario presione el mouse y luego lo mueva sobre la imagen inicial deberá ir …

Galería de videos AS3

NOTA: Si te interesa aprender de manera presencial los temas fundamentales AS3 y vives en la Ciudad de México, puedes inscribirte aquí al curso sabatino que daré los sabados.

A petición del público (mas bien al amigo Fernando Rojas): una galería de videos!


Bueno primero definamos y delimitemos el problema:

I. Hacer una galería de videos que sea "fácil" de actualizar

II. Que los botones de los videos, tengan una imagen a manera de thumbnail.

III. Pare este ejemplo usaremos 4 videos en formato FLV con sus 4 imagenes respectivas.

Perfecto, en este ejemplo usaremos el componente FLVPlayback de Flash, que es el reproductor de videos nativo de flash, si desean saber un poco más acerca de este componente lo pueden revisar en este link.

Primer Paso: Generar Los Botones.

Debemos crear un MovieClip que llamaremos video_btn, que será la base para los botones de los diferentes videos. en este MC, dibujaremos un cuadro con las esquinas redondeadas de 150x120 y agregamos un UILOADER (¿?…