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.
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.
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".
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á.
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.
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.
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.
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.
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.
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
Publicar un comentario