//TUTORIAL
Abrimos una nueva película de Flash. Para empezar, vamos a crear dos capas, una que se llamará "Formulario" y otra "Fondo":
En la capa de "Formulario" creamos un nuevo fotograma clave vacio y otro más donde pondremos el formulario. El primero lo dejamos vacio de momento, ya veremos más adelante para qué lo usaremos. En el segundo fotograma clavecreamos un nuevo campo de texto y le damos las siguientes propiedades:
Insertamos un campo de introducción de texto/ Linea unica/Var "nom" (sin las comillas)
Como veis, tenemos que poner un campo de texto de tipo "introducción de texto", que sea línea única, con el formato de texto que deseemos (tipografía, color, tamaño, alineado, etc...), y muy importante, darle un nombre de variable, en este caso, este campo será para introducir el nombre, y a la variable le hemos dado el nombre "nom".
NOTA:
En la capa "Fondo" pondremos el fondo de cada campo, así que los campos de texto deben ser transparentes, para ello, asegurate de que queda deseleccionado el botón a la izquierda de "Var" en las propiedades.
Añadimos tres campos de texto más, "E-mail", "Empresa", "Motivo del contacto", donde haremos exactamente lo mismo, solo que dandole a las variables los siguientes nombres:
• Campo E-mail: Variable "email"
• Campo Empresa: Variable "empresa"
• Campo Motivo del contacto: Variable "contacto"
Siempre sin comillas.
Ahora vamos a crear el campo de texto para el mensaje, este tiene las propiedades algo distintas:
Insertamos un campo de introducción de texto/ Multilinea/ Nombre de instancia "eltexto" (sin las comillas)
Las diferencias son dos basicamente, le hemos dado el nombre de instancia "eltexto", y ya no es línea única sino multilinea, aparte de que la variable en este campo se llamará "mensaje".
Lo de "eltexto" es para hacer el scroll de este campo, no voy a explicar como se hace el scroll aquí ya que puse un tutorial sobre scroll de texto, lo encontraras aquí.
Con el scroll ya creado, tendremos esto:
Añadimos dos botones, uno el de enviar y otro el de borrar y un nuevo campo de texto donde se mostrará el estado de envío del mensaje, es decir, dirá si el mensaje se ha enviado correctamente o no. Este último campo de texto tendrá estas propiedades:
Texto dinamico/Multilinea/Var "respuesta" (sin las comillas)
Bien, nuestro formulario de contacto web estará más o menos así:
Los campos que están con asterisco (*) serán obligatorios tal y como se indica, es decir, si el usuario los deja vacios el mensaje no se enviará y en el cuadro de estado aparecerá un mensaje de error.
Antes de introducir el código ActionScript necesario, vamos a terminar la presentación del formulario, para ello, en la capa "Fondo", en el segundo fotograma, dibujamos el fondo que deseemos y que coincida en tamaño, forma y posición con los campos de texto. Para el caso, yo he dibujado este fondo:
Ok, con esto hemos terminado la presentación, ahora vamos con el código que hará que todo esto funcione.
Seleccionamos el botón de enviar, y metemos el siguiente código:
on (release) {
if ((nom=='') or (email=='') or (contacto=='') or (mensaje=='')) {
respuesta = "Hay campos obligatorios sin rellenar. Por favor,
revise el formulario.";
} else {
loadVariablesNum ("php2excel_csv.php", 0, "POST");
respuesta = "El formulario ha sido enviado con éxito.
Nos pondremos en contacto con Ud. lo antes
posible. Reciba un saludo.";
}
}
Aquí lo que estamos haciendo es comprobar que los campos obligatorios no estén vacios, si alguno de ellos lo esta, en el campo de texto estado aparecerá el mensaje de error arriba indicado, si no, el correo se enviará y aparecerá el mensaje de envio exitoso.
En el botón borrar ponemos:
on (release) {
nom = "";
email = "";
empresa = "";
contacto = "";
mensaje = "";
respuesta = "";
}
Con lo que al apretar el botón borrar todos los campos de texto se borrarán
Ahora retomamos algo que dejé pendiente al comienzo; en el primer fotograma de la capa "Formulario", donde creamos un fotograma clave vacio, pondremos el siguiente código:
nom=''
email=''
contacto=''
mensaje=''
Esto es para que los campos obligatorios estén vacios cuando se cargue la pelicula de flash. ¿Por qué?, Las variables que se crean se alojarán en un espacio que le asigne el sistema operativo en la memoria ram, si no los inicializamos a "vacio", podrían tener 'basura' con lo que la comprobación de estos campos podría fallar.
Y para terminar, en el segundo fotograma de la capa "Formulario" añadimos la orden:
stop();
Con esto hemos terminado de crear el formulario en Flash, pero aun no funciona, nos queda la parte de php.
Necesitamos tres archivos, uno se llamará php2excel_csv.php, libmail.php y formulario.csv. Los puedes descargar de aquí. Los archivos libmail.php y formulario.csv no hay que tocarlos, donde hay que hacer los cambios para adaptarlo a nuestro formulario es en el otro archivo, ya en el propio archivo he puesto los comentarios, así que abrir php2excel_csv.php y allí lo explico.
El archivo formulario.csv es un archivo de texto que se nos enviará conjuntamente con el email como archivo adjunto, de modo que el email lo recibiremos como siempre, con el texto escrito en el cuerpo del email, y además el mismo email en un fichero adjunto por si queremos guardarlo en el disco duro. Los archivos *.csv son de Microsoft Excel, sin embargo, si lo abrimos con dicho pograma, los caracteres raros como acentos y eñes no se leen bien, así que mejor abrirlos con el block de notas.
Para terminar, un par de cosas a tener en cuenta para no tener problemas:
• Estos tres archivos han de estar en la misma carpeta en la que esté el formulario en Flash.
• El archivo formulario.csv se escribirá cada vez que alguien envíe un correo, con lo que en nuestro servidor, con la opción correspondiente del programa ftp que usemos, tenemos que cambiar los permisos (buscar en el programa la opción 'chmod' o permisos) sobre este archivo a 777.
• Y bueno, aunque es evidente, por si a alguien se le pasó, es imprescindible que nuestro servidor interprete el lenguaje php.
//final
Si lo deseas, puedes descargarte el archivo del ejemplo aquí.
www.scourdesign.com/articulos/tutoriales/flash/descargas/formulario.zip
