Este componente tiene las siguientes propiedades:

• enabled: Valor booleano para establecer si el componente está habilitado o no.
• selectedColor: Con esta propiedad podemos establecer el color que estará seleccionado al inicio. También podemos, por medio de ActionScript, determinar el color que está seleccionad actualmente.
• showTextField: Este componente tiene por default un campo de texto donde se muestra el valor hexadecimal del color seleccionado y donde el usuario puede escribir el valor hexadecimal del color que quiere seleccionar.
• visible: Valor booleano. Si es true el componente ColorPicker se mostrará, si es false el ColorPicker no se verá.

Para conocer todos los métodos, propiedades y eventos que conforman la clase ColorPicker, ingresa a la siguiente página.

Tutorial

En este tutorial mostraremos tres ejemplos prácticos del uso del ColorPicker. En el primero cambiaremos el color de un rectángulo usando el ColorPicker. En el segundo, rellenaremos un rectángulo con degradado (dos colores) utilizando la función beginGradientFill; los colores pasados como parámetros a esta función serán obtenidos de dos componentes ColorPicker. Además, por medio de un Slider, el usuario podrá cambiar la rotación del degradado. En el último, cambiaremos el color de un texto dinámico.

Para este tutorial usaremos el Flash CS4. Abre el programa y crea un nuevo documento de Flash.
En el panel Components (Ctrl + F7), dentro de la sección User Interface, busca el componente ColorPicker y arrastra tres de ellos al área de trabajo. Selecciona el primer ColorPicker que tienes en el área de trabajo y dentro del panel Properties asígnale el nombre de instancia de picker1. A los otros componentes asígnales como nombre de instancia picker2 y picker3, respectivamente. Dentro del mismo panel de Components -> User Interface selecciona un componente Slider y arrástralo al área de trabajo. Ponle como nombre de instancia slider. Además, crea dos textos dinámicos con nombres de instancia color_txt y texto_txt.

Ordena los componentes de tu área de trabajo, de tal forma que te quede como en la siguiente imagen:

Nota: El orden de los ColorPicker(s) va de arriba hacia abajo y de izquierda a derecha, de tal forma que el ColorPicker de hasta arriba es picker1. El texto dinámico que está más arriba es color_txt y el texto dinámico de abajo es texto_txt.

Es momento de pasar al código de nuestra aplicación. Renombra la capa donde se encuentran nuestros componentes (generalmente Layer 1) y ponle de nombre Componentes. Agrega una capa con el nombre de Acciones, dentro de esta capa estará todo nuestro código. A continuación explicaré parte por parte el código; recuerda bajar el archivo del tutorial, el cual se encuentra al final de este post.

En nuestra aplicación necesitaremos detectar cuando el usuario seleccionó otro color en alguno de los ColorPicker, o bien cuando desplazó la barra del Slider. Para lo anterior es necesario importar las librerías ColorPickerEvent y SliderEvent.

Para que podamos pintar con degradado el segundo rectángulo de nuestro ejercicio, haremos uso de las librerías geom y display. Del primero usaremos la clase Matrix; para el segundo usaremos la clase Graphics.

Además, declararemos una variable llamada radianes, en la cual guardaremos el valor de la rotación del degradado. Para este valor debemos usar radianes y no grados, por lo que ten en cuenta que 1° = PI radianes / 180 (profundizaremos sobre este tema más adelante). Por default, el valor de esta variable será cero.

Primer ejercicio

Ahora veremos el código de nuestro primer ejercicio. Primero crearemos un MovieClip llamado cuadrado; el color de inicio de este cuadrado será el negro (0x000000), el cual lo pasaremos como parámetro a nuestra función dibujaCuadrado (del cual mostraré su código más adelante). Además, le asignamos el texto “0x000000” a nuestro campo dinámico color_txt y llamamos la función addChild para agregar el MovieClip al contenedor y visualizarlo.

A continuación veremos el código de la función dibujaCuadrado:

En el código anterior, la función dibujaCuadrado recibe como parámetro el MovieClip donde queremos dibujar el cuadrado y color de relleno de éste. El tipo de dato del color es uint (unsigned integer – entero sin signo), este tipo de dato es utilizado en gran medida para el valor de los colores, ya que su máximo valor es el doble que el del tipo de dato int. Para conocer más sobre uint visita esta página.

La primera línea de código de la función dibujaCuadrado establece el color de llenado del cuadrado por medio de la función beginFill. Esta función recibe como primer parámetro el color de relleno y como segundo parámetro el valor del alfa (transparencia). Recuerda que desde el AS3, los valores de alfa van de 0 a 1 y no de 0 a 100.
La segunda línea dibuja el cuadrado en la coordenada x = 100 y y = 150, y con un ancho (width) y alto (height) de 75 pixeles, usando la función drawRect.
La última línea se encarga de aplicar el relleno al MovieClip.

Si corres la aplicación con lo que llevamos ahorita, verás que aparece un cuadrado de color negro del lado izquierdo del primer ColorPicker. Sin embargo, si haces click en picker1 y seleccionas un color verás que no cambia el color del cuadrado. Esto es porque no hemos ligado los eventos del ColorPicker al color del cuadrado, para lograrlo estableceremos dos listeners, uno sobre el evento ITEM_ROLL_OVER y otro sobre el evento CHANGE. El evento ITEM_ROLL_OVER es accionado cuando el usuario se posiciona sobre cualquier color de la paleta de color (valga la redundancia) del ColorPicker. Este evento lo usaremos debido a que en nuestra aplicación queremos mostrar el cambio de color sobre el MovieClip en el momento de posicionarnos en algún color y no al tener que hacerle click. El evento CHANGE es accionado cuando el usuario hace click sobre un color; utilizaremos este evento para mostrar el valor del color seleccionado en el texto dinámico color_txt.

Al producirse el evento ITEM_ROLL_OVER, se llamará a la función overHandler.
Al producirse el evento CHANGE, se llamára a la función changeHandler.
A continuación, veremos el código de estas dos funciones:

No olvides que, por tratarse de eventos, estas dos funciones reciben como parámetro el evento generado.
En la función overHandler, obtenemos el color seleccionado del componente que generó el evento (en este caso, picker1). Ese color lo almacenamos en una variable local llamada numero la cual es de tipo uint. Después, llamamos a la función dibujaCuadrado (cuyo código lo vimos más arriba) pasándole como parámetro el MovieClip del cuadrado y el color seleccionado.
En la función changeHandler, al igual que en la función anterior, obtenemos el color seleccionado del componente que generó el evento (picker1). En esta función, además de guardar el valor del color seleccionado en formato uint, obtenemos el valor hexadecimal del color seleccionado para mostrarlo en nuestro campo dinámico color_txt (para el usuario es más fácil hacer uso del valor hexadecimal de un color que su valor uint). Posteriormente hacemos la llamada a la función dibujaCuadrado.

Si corres la aplicación verás que al posicionarte encima de un color de la gama de picker1, el MovieClip del cuadrado cambia de color. Además, si seleccionas alguno de los colores, el texto dinámico color_txt muestra el valor del color seleccionado.

Segundo ejercicio

Como lo comenté más arriba, en este segundo ejercicio veremos cómo aplicar un degradado a otro MovieClip cuadrado. Este degradado estará formado por dos colores, los cuales serán obtenidos de los ColorPicker picker2 y picker3. Primero estableceremos el color por default (el cual estará seleccionado desde un inicio) del picker2 y picker3.

Para este ejercicio vamos a crear otro MovieClip en el cual dibujaremos un cuadrado. El MovieClip se llamará cuadraodDeg:

Hasta ahora, el único cambio es que mandamos a llamar la función dibujaCuadradoDegradado, la cual recibirá la referencia del MovieClip y los dos colores que formarán el degradado.

El código de la función dibujaCuadradroDegradado es el siguiente:

Para crear el degradado necesitamos la función createGradientBox, la cual recibe cómo parámetros el ancho y alto del degradado, el valor de rotación del degradado (en radianes) y la distancia en pixeles para trasladar el degradado hacia la izquierda (tx) y hacia abajo (ty). Esta función pertenece a la clase Matrix, por lo tanto declaramos la variable matriz para usar la función.

Posteriormente hacemos uso de la función beginGradientFill. Esta función recibe los siguientes parámetros:

• type: Especifica el tipo de degradado que se va a utilizar (lineal o radial). GradientType.LINEAR, GradientType.RADIAL.
• colors: Arreglo con el valor de los colores que formarán parte del degradado.
• alphas: Arreglo con los valores del alfa (transparencia) de cada uno de los colores del parámetro anterior. El valor del alfa va de 0 a 1.
• ratios: Arreglo con los valores de la proporción de distribución. Este valor define el porcentaje del ancho (width) donde el color se muestra al 100%. El valor puede ir de 0 a 255, donde el 0 representa la posición de hasta la izquierda y 255 representa la posición de hasta la derecha de la caja del degradado.
• matrix: La variable de la clase Matrix que definimos con anterioridad y con la cual utilizamos el método createGradientBox.
• spreadMethod: Especifica el método de propagación (spread) a utilizar. Este valor puede ser PAD (rellenar), REFLECT (reflejo) y REPEAT (repite el degradado a lo ancho de la caja).
• interpolationMethod: Método de interpolación. Su valor puede ser linearRGB y RGB.

Por último dibujamos nuestro cuadrado y usamos el método endFill para aplicar el relleno.
Al igual que en el ejercicio anterior, debemos establecer listeners para el picker2 y picker3. Estos listeners se ejecutarán cuando se presente el evento CHANGE en los ColorPicker y llamarán a la función cambiaDegradado.

La función cambiaDegradado llamará a su vez a la función dibujaCuadradoDegradado, cuyos parámetros son el MovieClip al cual se le aplicará el degradado y los colores seleccionados del picker1 y picker2.

Si corres la aplicación verás que aparece un cuadrado con degradado azul y verde. Si seleccionas otro color de cualquiera de los ColorPicker picker2 y picker3, el degradado cambiará. Ahora solo nos falta programar la función del Slider slider para cambiar la rotación del degradado. A este slider le agregaremos un listener cuando se ejecute el evento THUMB_DRAG, es decir, cuando el slider es presionado y movido por el mouse.

Selecciona el componente Slider que está en tu área de trabajo y en el Inspector de Componentes (Shift + F7) ponle las siguientes propiedades:

Inspector de Componentes del Slider

De la imagen anterior se observa que el valor mínimo del Slider será 0 mientras que el máximo es de 180. Esto es porque queremos que el rango del valor de rotación sea de 0° a 180°. En el momento en que nosotros obtenemos el valor del Slider (cuando se ejecuta el listener) debemos cambiar el valor de grados a radianes, por medio de la fórmula (Math.PI / 180) * grados.

La última línea de la función cambiarRotacion llama a la función dibujaCuadradoDegradado, la cual al ser llamada utilizará el nuevo valor de la variable radianes.

Tercer ejercicio

En este tercer ejercicio cambiaremos el color de un texto dinámico de acuerdo al color seleccionado del ColorPicker picker4. Además, estableceremos el arreglo de colores que queremos mostrar en el picker4.
Primero vamos a ocultar el campo de texto del picker4 para evitar que el usuario introduzca el valor de un color distinto a los mostrados en el arreglo:

Para establecer los colores a mostrar dentro de este componente utilizamos la propiedad colors, la cual recibe un arreglo de colores:

Ahora establecemos el número de colores que queremos mostrar por fila, es decir, la cantidad de columnas de colores a mostrar dentro del ColorPicker. En nuestro caso queremos que sea de 5 en 5.

El color por default de nuestro texto dinámico será negro, por lo tanto seleccionamos el color negro en el picker4.

Para poderle cambiar el color a un texto dinámico, debemos crear una variable de tipo TextFormat. Recuerda que el nombre de instancia de nuestro texto dinámico es texto_txt, y para aplicarle el formato debemos utilizar el método setTextFormat.

Por último solo nos queda añadirle un listener al picker4 y establecer la función que cambiará el color:

Este componente tiene los siguientes parámetros:

• dayNames: Arreglo con los nombres de los días de la semana. Por default y por los nombres en ingles, el valor es [S, M, T, W, T, F, S]
• disableDays: Arreglo con los días de la semana que queremos que aparezcan deshabilitados. Ej. Sábados y Domingos ([0,6])
• firstDayOfWeek: Día de comienzo de la semana. El valor por default es cero y eso significa que el primer día de la semana será el domingo. En caso de querer establecer el lunes como el primer día de la semana, cambia el valor por 1.
• monthNames: Nombre de los meses. Por default los nombres de los meses están en inglés, sin embargo en esta parte los podemos poner en español.
• showToday: Variable booleana para establecer si deseamos señalar el día de hoy en el calendario. Por default el valor es true.

Para conocer todos los métodos, propiedades y eventos que conforman la clase DateField, ingresa a la siguiente página.

Tutorial

Para este tutorial usaremos el Flash 8. Abre el programa y crea un nuevo documento de Flash.
En el panel Components (Ctrl + F7), dentro de la sección User Interface, busca el componente DateField y arrástralo al área de trabajo. Selecciona el DateField que tienes en el área de trabajo y dentro del panel Properties asígnale el nombre de instancia de fecha. Dentro del mismo panel de Components -> User Interface selecciona un componente Button y arrástralo al área de trabajo. Ponle como nombre de instancia mostrar_btn y como label “Mostrar fecha”.

Renombra la capa donde se encuentran estos componentes (generalmente Layer 1) y ponle de nombre Componentes. Agrega una capa con el nombre de Acciones y dentro de esta capa pega el siguiente código:

Lo que hace el código anterior es mostrar en el panel Output el valor de la fecha seleccionada. Si el usuario no seleccionó alguna fecha, el mensaje mostrará el valor de undefined. Observa que de esta forma es fácil validar si el usuario seleccionó una fecha, de la siguiente forma:

Cuando el usuario selecciona una fecha, el valor de esa fecha seleccionada es mostrado dentro del rectángulo del DateField. Haz la prueba y verás que el campo de la fecha te despliega un valor similar al mostrado en la siguiente imagen:

Si haces click en el botón de Mostrar fecha, el valor obtenido por la propiedad selectedDate será: Wed Dec 3 00:00:00 GMT-0600 2008. Es posible que en estos momentos te preguntes de qué le sirve al usuario mostrarle la fecha en ese formato si lo más seguro es que tu usuario final hable español; o peor aún ¿de qué te sirve el formato regresado por la propiedad selectedDate si lo que quieres es guardar el valor en una columna de tipo Date de una base de datos?

Cambiar el formato de la fecha mostrada en el DateField

Para cambiar el formato de la fecha bastará con hacer uso de la propiedad dateFormatter. A esta propiedad hay que establecerle la función o método que se encargará de regresar la fecha en el formato especificado. Supongamos que queremos que la fecha se muestre como 03/12/2008, para eso tendríamos que añadir el siguiente código:

Esta función recibe cómo parámetro la fecha seleccionada por el usuario. De esa fecha podemos obtener el día usando la función getDate(); esta función nos regresa un valor de 1 a 31. Para obtener el número de mes de la fecha seleccionada usamos la función getMonth(); esta función nos regresa un valor de 0 a 11 donde el 0 equivale al mes de Enero y 11 al mes de Diciembre. La función getFullYear() nos regresará el valor del año seleccionado con el formato completo (es decir, de cuatro dígitos. Ej. 2005).
En nuestro ejemplo queremos que el mes y el día tengan dos dígitos, es por eso que en nuestro código verificamos si el número de día o mes es menor que 10, si es así le agregamos un cero al inicio.
Dentro de la función anterior podemos actualizar el valor de una variable global para guardar la fecha en el formato que deseemos de acuerdo a la base de datos que utilicemos o a nuestras necesidades. Por ejemplo, suponiendo que la fecha la tenemos que almacenar de la forma 2008-12-03, podremos considerar el siguiente código:

Deshabilitar días de la semana en el componente DateField

Como lo dije al inicio del tutorial, la propiedad disabledDays nos permite especificar por medio de un arreglo qué días de la semana queremos que aparezcan deshabilitados. Supongamos que queremos realizar una aplicación estilo agenda para anotar nuestras juntas de trabajo. Para evitar equivocarnos, al momento de realizar la selección de fecha, y establecer una junta de trabajo un sábado o domingo, podemos deshabilitar estos días de la siguiente manera:

Del código anterior, el número cero hace referencia al día domingo, mientras que el día seis hace referencia al día sábado.

Deshabilitar fechas o rango de fechas en el componente DateField

Para deshabilitar una fecha o bien un rango de fechas debemos usar la propiedad disabledRanges. Esta propiedad puede ser un arreglo de objetos cuyo tipo de dato es Date, o bien un objeto que contiene las propiedades rangeStart y rangeEnd y cuyos valores deben ser un objeto Date.

Continuando con el ejemplo anterior (el de la aplicación estilo agenda), imaginemos que vamos a salir de vacaciones del 20 al 28 de diciembre, y por lo tanto queremos deshabilitar esos días. El siguiente código nos permitirá hacerlo:

Recuerda que el número de meses comienzan en 0, por lo tanto para el mes de diciembre el número es el 11.

Prácticamente, la forma en la que funciona se resume en que podemos crear clases en PHP, acceder a los métodos de esas clases por medio de Flash, Flex o AIR y obtener los datos retornados por esos métodos. Por ejemplo, podemos crear una clase para conectarnos a una base de datos en MySQL. Esta clase podría contener un método para insertar datos a la base, otro método para generar consultas y obtener en nuestra aplicación de Flash, Flex o AIR los registros regresados por la consulta.

En esta entrada veremos cómo está formado el AMFPHP y cómo acceder a él desde Flash CS3. Para una mejor explicación de cómo acceder a AMFPHP haremos una sencilla clase en PHP la cual no accederá a ninguna base de datos (eso lo dejaremos para nuestro próximo tutorial).

Tutorial

1. Baja el archivo amfphp-1.9.beta.20080120.zip de aquí. El amfphp-1.9 lo podemos usar con ActionScript 3 (Flash CS3, Flex y AIR), mientras que la versión anterior puede ser usada con ActionScript 2.

2. Descomprímelo y ponlo en algún directorio de tu servidor Web, en tu directorio htdocs o www en tu localhost. Si lo deseas, puedes renombrar la carpeta y ponerle AMFPHP1.9.

La estructura del directorio quedaría de la siguiente manera (en mi caso, la carpeta AMFPHP1.9 la puse en la carpeta raíz de mi servidor):

--> root ó carpeta raíz
-->AMFPHP1.9 (D)
--> browser (D)
--> core (D)
--> services (D)
--> gateway.php
--> globals.php
--> json.php
--> phpinfo
--> xmlrpc

Donde (D) indica que se trata de un directorio. Observa la carpeta browser, si accediéramos a él desde el navegador observaremos una aplicación creada en Flex donde nos muestra la lista de servicios que tenemos en AMFPHP, como se muestra en la siguiente liga. Si es la primera vez que accedes al browser, aparecerá la siguiente ventana de configuración:

En esta ventana de configuración deberás asegurarte que la dirección del Gateway es correcta. Después de hacer click en el botón Save te aparecerá la lista de servicios. Por default y cuando todavía no hemos creado ningún servicio nuevo, solamente aparecerá el servicio DiscoveryService. Importante: Cuando tenemos servicios que deben acceder a una base de datos o tratan información importante o crítica, lo mejor será no poner el directorio browser en el servidor. Continuando con nuestra estructura de directorios, como podrás imaginar, todos nuestros servicios (clases en PHP) deberán ir en el directorio services.

3. Vamos a crear una sencilla clase de PHP, la cual simulará las operaciones básicas de una calculadora. Sus métodos serán sumar, restar, multiplicar y dividir. Cada método recibirá como parámetro los dos números sobre los cuales hay que hacer la operación. Nota: Este tutorial es solamente para explicar cómo funciona AMFPHP y cómo podemos acceder a él desde Flash. Es por eso que nuestra clase de ejemplo es muy sencilla y muchos de ustedes dirán que no se requiere de PHP para sumar, restar, multiplicar y dividir dos números =0).
En PHP, al igual que en Flash, el nombre del archivo de una clase deberá tener el mismo nombre de la clase; por lo tanto, crea un nuevo archivo PHP, nómbralo Calculadora.php y guárdalo dentro del directorio services de nuestra carpeta AMFPHP19. Coloca el siguiente código dentro de Calculadora.php:

Observa los comentarios antes de cada función; estos comentarios nos dan una descripción de qué es lo que hace cada método y además le estamos indicando qué es lo que nos regresa cada método (@returns). Si bien estos comentarios no son obligatorios, nos ayudarán a recordar en el momento en que queramos modificar el archivo. Además, dentro de la lista de servicios en el browser, cuando seleccionamos alguno de estos métodos se nos mostrará esta descripción (Como prueba, ingresa al navegador, de la lista de la izquierda selecciona la clase Calculadora y posteriormente selecciona de la ventana de la derecha el método dividir. Observarás que antes de los campos de texto para ingresar los números aparece la descripción del método). Ahora ingresa un número dentro del campo de texto $numeroA e ingresa otro número dentro del campo $numeroB, haz click en el botón Call y observa cómo en el área de resultados (Results) se muestra el resultado regresado por el método dividir de nuestra clase Calculadora en PHP.

4. Dentro de nuestra clase podemos utilizar métodos privados, los cuales no podrán ser utilizados desde el navegador de servicios (browser) ni desde nuestras aplicaciones en Flash, Flex o AIR. Esto es útil cuando dichos métodos realizan operaciones importantes o críticas y que requieran de mayor seguridad. Para establecer que un método es privado, bastará con agregarle un guión bajo (_) antes del nombre. Para hacer la prueba, agrega el siguiente código a la clase Calculadora.php (Insértalo antes de la última llave (}) y del tag de cierre de PHP (?>):

Observa cómo en el código anterior el nombre de la función empieza con guión bajo _, eso quiere decir que se trata de un método privado. El código de este método privado lo que hace es regresarnos la fecha y el tiempo del servidor (por medio del método date).

Desde nuestra clase de PHP podemos acceder a ese método privado por medio de otro método. Para acceder a este método es necesario utilizar la palabra clave $this. A continuación te muestro cómo:

El método obtenFechaServidor hace un llamado a la función esteMetodoEsPrivado y almacena en la variable $fecha_hoy el valor regresado por el método privado. Este valor es regresado por el método obtenFechaServidor.

Ingresa a nuestro navegador de servicios, selecciona la clase Calculadora y observa cómo el método esteMetodoEsPrivado no aparece dentro de los métodos de esta clase. Ahora haz click en el botón obtenFechaServidor y posteriormente en el botón Call. En el área de resultados (Results) se mostrará la fecha y hora del servidor.

Antes de pasar a la interfaz y al código ActionScript, te dejo el código completo del archivo Calculadora.php

5. Crea un nuevo documento de Flash en Flash CS3 ActionScript 3.0. Cambia las dimensiones del área de trabajo por 300px de ancho y 190px de alto. Renombra la única capa que existe y ponle de nombre Forma. Agrega 3 textos, 3 TextInput(s) y 4 botones de tal forma que tu forma quede similar a la de la imagen:

El nombre de instancia de cada uno de los TextInput(s) es (de arriba a abajo):

• numeroA_txt

• numeroB_txt

• resultado_txt

El nombre de instancia de cada uno de los botones es (de arriba a abajo):

• mas_btn

• menos_btn

• por_btn

• entre_btn

6. Agrega otra capa y ponle de nombre Acciones. Agrega el siguiente código a dicha capa:

Revisa con atención el código anterior y los comentarios que están insertados en él. Hasta ahora solamente hemos importado las librerías que necesitamos, hemos declarado e instanciado las variables que usaremos a lo largo del programa.

Coloca el siguiente código debajo del anterior. Aquí estamos declarando cuatro métodos que serán llamados dependiendo de si el usuario hizo click en el botón de mas, menos, por o entre. Observa bien que el código de cada uno de estos métodos sólo cambia en la llamada de los métodos de la clase (la última línea de cada método, antes de }), es por eso que sólo comentaré la primera función (suma).

Después del código anterior solamente nos faltan los métodos respuesta y error, además de las acciones de cada uno de nuestros botones:

A continuación puedes ver el SWF funcionando. A este archivo le añadí un campo de texto dinámico en el lado inferior derecho en el cual muestro el resultado de hacer una llamada al método obtenFechaServidor de nuestra clase Calculadora. No olvides bajar los archivos de este tutorial que se encuentran al final de esta entrada.

El resultado final así como los archivos de los ejercicios los encontrarás al final de esta entrada.

Flash

En este ejemplo haremos una galería de fotos en Flash y cada una de las fotos las mostraremos (en un tamaño mayor con respecto a las del documento de Flash) llamando a una función de JavaScript, la cual a su vez llamará a la función tb_show de ThickBox o activateWindow de LightWindow. Lo único que deberás hacer en Flash es realizar una simple llamada a una función de JavaScript, la cual llamaremos muestraImagen. El archivo de Flash es el mismo tanto para el ejemplo de ThickBox como el ejemplo de LightWindow. Lo único que cambiará es el documento HTML que los contiene.
A continuación pegaré todo el código del documento de Flash, no lo explicaré ya que es el mismo que utilicé en el post de Scroll de imágenes en Flash.

Lo importante de este código y en lo que te debes de fijar es en el código de los botones. Nuestra galería está formada por siete imágenes, cada una de estás imágenes es un MovieClip cuyos nombres de instancia van de foto1 a foto7. Estas fotos a su vez están dentro de un MovieClip con nombre de instancia fotos_mc.
Cada uno de los MovieClips que contienen las fotos llaman a la función en JavaScript muestraImagen, pasándole como parámetro el nombre de la imagen y su descripción.

ThickBox

El código de esta librería lo puedes bajar de aquí. Su característica principal es que está desarrollada sobre la librería jQuery, por lo que si estás realizando una aplicación con jQuery, no tendrás que importar tantos archivos *.js. Debido a lo anterior, deberás tener este archivo (jquery.js) antes de poder usar el ThickBox (no te preocupes, ese archivo lo puedes bajar de la misma página del ThickBox). Para poder hacer uso de las funciones del ThickBox y obtener los efectos deberás importar el archivo thickbox.js y thickbox.css a tu archivo HTML. Estos archivos solamente agregan 15kb a la librería jquery.js, por lo que no te preocupes de los tiempos de descarga que tedrá tu página.

Recuerda que las líneas del código anterior deberán ir entre los tags <head> y </head>. Además, dentro de estos tags deberá estar el código de nuestra función de JavaScript que se encarga de hacer la llamada a tb_show:

Nuestra función muestraImagen recibe dos parámetros:

imagen: es la liga de la imagen o página que queremos mostrar; en nuestro caso las fotos se llaman foto1s.jpg, foto2s.jpg, etc. y se encuentran dentro del directorio fotos
descripcion: información de cada una de las fotos la cual se mostrará en nuestra ventana modal.

El código junto quedaría de la siguiente manera:

Ahora nada mas nos falta embeber el archivo SWF dentro de nuestro HTML.

Para que la ventana secundaria se muestre arriba del documento de Flash, deberás ponerle el parámetro wmode como transparent:

Para evitar que tu documento se vea transparente no olvides ponerle un fondo a tu Flash.

La hoja de estilos del ThickBox (thickbox.css) nos permite personalizar nuestra ventana secundaria de forma rápida y sencilla, y sin la necesidad de meternos en el código de JavaScript; por lo que si deseas cambiar los colores, el tamaño de las fuentes, etc. deberás modificar este archivo. Ten en cuenta que no es necesario que tu página "se oscurezca" con un fondo negro, puedes cambiarlo a un fondo azul, verde, rojo, etc.

LightWindow

El código de esta librería lo puedes bajar de aquí. A diferencia del ThickBox, LightWindow requiere de la librería Prototype, Scriptaculous y de la librería Effects.

Al igual que el ThickBox, LightWindow incluye una hoja de estilos (lightwindow.css) que nos permite personalizar nuestra ventana secundaria de forma rápida y sencilla, sin la necesidad de meternos en el código de JavaScript.

Los archivos JavaScript y Hojas de estilos que debes incluir en tu archivo HTML son los siguientes:

Y, por supuesto, deberemos incluir el código de nuestra función muestraImagen:

En esta ocasión, nuestra función tendrá cuatro parámetros:

imagen: es la liga de la imagen o página que queremos mostrar; en nuestro caso las fotos se llaman foto1s.jpg, foto2s.jpg, etc. y se encuentran dentro del directorio fotos
titulo: un texto alusivo a la imagen que estamos mostrando
descripcion: información de cada una de las fotos la cual se mostrará en nuestra ventana modal.
autor: autor o dueño de la imagen, página, etc. Esta información es opcional, solamente la mostramos para que veas el diseño de esta parte

Al final, nuestro código quedará de la siguiente manera:

Hemos llegado al final del tutorial, espero te haya gustado y no dudes en dejar comentario.
A continuación, están las ligas para cada uno de los ejemplos y para bajar los archivos del ejercicio.

Para fines de este tutorial, se pondrán en el formulario algunos de los componentes que ya vimos en los post pasados. Estos componentes son ComboBox, RadioButton y CheckBox.

Para este tutorial usaremos Flash 8. El ejemplo y los archivos de este tutorial los encuentras al final de esta entrada.

Por razones de seguridad, el ejemplo que se encuentra al final de este post no enviará  ningún correo electrónico (para evitar que se llene el buzón o llegue puro correo basura). En lugar de mandar el correo electrónico mostraré el resultado final de cómo se vería el correo electrónico (tanto en formato HTML como en formato de texto plano). Sin embargo, los archivos de esta entrada y el código aquí pegado, sí tienen la instrucción para enviar el correo electrónico.

Tutorial

I. Haciendo el formulario en Flash

1. Crea un nuevo documento de Flash de 420px por 380px.

2. Arrastra al escenario los siguientes componentes (recuerda que estos componentes están dentro de la sección User Interface del panel Components (Ctrl. + F7) :

• 2 Campos de texto (TextInput)
• 2 Botones de Radio (RadioButton)
• 1 ComboBox
• 5 CheckBoxes
• 1 TextArea
• 1 Botón (Button)

Además, crea 5 textos dinámicos con el (*) como texto (estos los usaremos para mostrar los campos obligatorios que el usuario debe llenar. Para este ejemplo, haremos que todos los datos sean obligatorios). A estos textos, ponles como nombre de instancia msj1, msj2, msj3, etc.

3. Selecciona cada componente que arrastraste al escenario y ponle los siguientes nombres de instancia (dentro del Panel Propiedades):

• 1er Campo de texto (TextInput)  -> nombre_txt
• 2do Campo de texto (TextInput)  -> correo_txt
• 1er Botón de Radio (RadioButton) -> radio1
• 2do Botón de Radio (RadioButton) -> radio2
• ComboBox -> pais_cb
• 1er CheckBox -> check1, 2do CheckBox -> check2, 3er CheckBox -> check3, 4to CheckBox -> check4, 5to CheckBox -> check5
• TextArea -> comentarios_txt
• Botón -> enviar_btn

4. Además, cambia los siguientes parámetros (tercera pestaña del panel Propiedades) a estos componentes:

• radio1: data = F, groupName = sexoGroup, label = Femenino
• radio2: data = M, groupName = sexoGroup, label = Masculino
• check1: label = Flash
• check2: label = Flex
• check3: label = AIR
• check4: label = PHP
• check5: label = Ajax

5. Acomoda todos los componentes anteriores para que te queden similar a la siguiente imagen:

6. Es momento de escribir el código. A la capa (layer) existente asígnale el nombre de Forma. Crea una nueva capa llamada Acciones. En el panel Actions de esta capa escribe lo siguiente:

El código anterior muestra la declaración variables e importación de clases necesarias (en este caso sólo una clase). Ahora nos enfocaremos en las funciones que escribiremos en nuestro código.

Las siguientes funciones son vitales para el tratamiento del formulario:

El siguiente código muestra el script de la función enviarCorreo.

Ese es todo el código que deberá llevar el documento de Flash.

II. Programando el script en PHP para el envío del correo

A continuación pegaré todo el código del archivo enviar_formulario_de_contacto.php. Dentro del código están los comentarios para que puedas entender qué hace cada línea de código.

Hemos llegado al final de este largo tutorial. No olvides ver el ejemplo y bajar el archivo.

Como lo dije al principio del tutorial, por razones de seguridad, el ejemplo que se encuentra a continuación no enviará ningún correo electrónico (para evitar que se llene el buzón o llegue puro correo basura). En lugar de mandar el correo electrónico mostraré el resultado final de cómo se vería el correo electrónico (tanto en formato HTML como en formato de texto plano). Sin embargo, los archivos de esta entrada y el código pegado anteriormente, sí tienen la instrucción para enviar el correo electrónico.