Formulario de contacto para Flash
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:
- Crea un nuevo archivo con las dimensiones que vaya a tener nuestro formulario.
- Nombra el archivo como formulario.fla
- En una o varias capas genera el esquema del formulario, con el fondo, colores, bordes, etc.
- En una capa nueva superior a la que llamaremos “formulario” escribe los títulos sobre cada campo: “e-mail”, “asunto”, “mensaje”.
- 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. - En esa misma capa agrega el botón Enviar.
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!- 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:
- Un texto que indique que el mensaje se está enviando.
- 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 con el archivo FLA en versión MX »
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.
Si tienes problemas con el archivo FLA en versión MX, descarga aquí el ZIP con los archivos en versión CS3 »
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í.
FUENTE: Elwebmaster.com
Related posts:
