Taller de Flash: Formulario de contacto

Y llegamos por fin al Formulario de Contacto… una parte esencial en muchas webs. De hecho todos los sitios deben ofrecer algún tipo de forma de contacto, ya sea un mail, un formulario o incluso un ¿teléfono? No, eso ya pasó de moda.

¿Se pusieron a pensar en los beneficios que tiene un formulario de contacto? Para empezar, puedes saber qué mensajes fueron enviados desde tu sitio web, puedes guiar a los usuarios para que completen los datos que tú deseas. El formulario de contacto es una parte esencial de un sitio Flash. Junto a Adobe te enseño a construir un formulario de contacto sencillo, profesional y a prueba de errores.
Antes de empezar a hacer este tutorial me tomé el tiempo de leer el tutorial oficial de la página de Adobe. El tutorial es casi inexistente, sólo un zip con los archivos y arreglate… En base a mis conocimientos y esos archivos voy a intentar que entiendas realmente cómo se hace un formulario de contacto.

Armando el formulario (la parte divertida)

Un formulario tiene tres instancias:

• Escritura: donde se escribe el mensaje y hacemos clic en Enviar.
• Envío: donde el sistema muestra una barra de estado indicando que el mensaje se está enviando.
• Agradecimiento: donde le agradecemos a la persona por enviarnos un mensaje.

Vamos a crear cada una de estas instancias en un frame diferente, dentro de un mismo SWF.

ESCRITURA

Hagamos el primero (la escritura) incluyendo un campo para el e-mail, uno para el asunto y otro para el mensaje:

1. Crea un nuevo archivo con las dimensiones que vaya a tener nuestro formulario.
2. Nombra el archivo como formulario.fla
3. En una o varias capas genera el esquema del formulario, con el fondo, colores, bordes, etc.
4. En una capa nueva superior a la que llamaremos “formulario” escribe los títulos sobre cada campo: “e-mail”, “asunto”, “mensaje”.
5. Dentro de esa misma capa crea tres campos de texto de entrada (Input text) para cada campo.
   En el campo de mensaje puedes dar un máximo de caracteres si quieres limitar el largo del mensaje.
   Además deberías agregar un scroll bar al lado del campo del mensaje. Adobe Flash trae scroll bars en sus Componentes.
6. En esa misma capa agrega el botón Enviar.
7. También en la capa “Formulario” crea una nueva película con un mensaje de error y un texto que diga algo como “POR FAVOR COMPLETA TODOS LOS CAMPOS”. Proponemos una duración aproximada de 15 frames.
   a) El primer frame déjalo vacío, con la acción stop().
   b) En el segundo frame crea el mensaje de error, justo al lado del botón Enviar.
   c) Crea un nuevo fotograma clave en el frame 5, también con la acción stop().
   d) Crea un nuevo fotograma clave en el frame 15 donde el mensaje se vea invisible.
   e) Genera interpolación de movimiento y listo… ¡Ya tenemos el mensaje de error!
8. El código lo dejamos para el final…

ENVÍO

En el segundo frame vamos a hacer la instancia donde se muestra el envío del mensaje. Sólo deberás agregar:

1. Un texto que indique que el mensaje se está enviando.
2. Una animación se mueva para ilustrar la acción.

AGRADECIMIENTO

Sólo mostrarás un mensaje que indique que el mensaje ya ha sido enviado.

Código rapidito en Flash

Tenemos todo listo, sólo falta agregar el código para que las acciones se disparen y funcione el envío del mensaje. Primero vamos a ponernos de lleno con el código dentro del archivo FLA.

Primero démosle nombres a nuestros huérfanos símbolos:

• Campo de texto para ingreso de email: email_box
• Campo de texto para asunto: subject_box
• Campo de texto para mensaje: message_box
• Botón Enviar: send_btn
• Película con mensaje de error: error_clip

Finalmente, crea una nueva capa (la nombramos “acciones”). Lo único que va a tener esta capa son acciones en el primer fotograma.

En el campo donde se pide el nombre de la Variable, destilda la opción Expression y escribe:

email_box.onSetFocus

En el campo donde se pide el nombre del Valor (Value), tilda la opción Expression y escribe:

subject_box.onSetFocus=message_box.onSetFocus=function

Ahora el código:

stop();send_btn.onRelease = function() {my_vars = new LoadVars(); my_vars.sender = email_box.text;

my_vars.subject = subject_box.text; my_vars.message = message_box.text;

if (my_vars.sender != "" and my_vars.subject != "" and my_vars.message != "") { 	my_vars.sendAndLoad("mailer.php", my_vars, "POST");

gotoAndStop(2); } else {

error_clip.gotoAndPlay(2); }

my_vars.onLoad = function() { 	gotoAndStop(3);

};};

email_box.onSetFocus = subject_box.onSetFocus=message_box.onSetFocus=function () { if (error_clip._currentframe != 1) {

error_clip.gotoAndPlay(6); }

};

Código en PHP (cuesta más)

Ahora la idea es relacionar es hacer que el archivo SWF realmente envíe el formulario. Para eso vamos a usar PHP…

¿Creían que los iba a hacer sufrir con PHP? A continuación, todos los archivos para que descargues, incluyendo el .PHP. Abre el archivo que está comentado así puedes entender qué hace cada parte del código. Todos los archivo se alojan en el mismo lugar.

Haz clic para descargar el ZIP >>
El ZIP (43 KB) contiene los archivos formulario.fla, formulario.swf, mailer.php
Todos los archivos son adaptaciones de los archivos originales que provee Flash App Servers.

Antes que te vayas, un adelanto aproximado de cómo quedaría tu formulario de contacto.

En los archivos puedes realizar varias modificaciones, para empezar todo lo que tiene que ver con tamaños, colores, tipografías y textos, agregar una foto de fondo, el logo de tu empresa. Puedes incluso cambiar el mensaje de error, la película que muestra el progreso del envío, establecer un número máximo de caracteres…

Sin embargo, el nombre de los componentes y símbolos está relacionado con el código y el envío del formulario por lo que no es recomendable hacer modificaciones ahí.

¡Nos vemos la clase que viene que es… LA ÚLTIMA CLASE!