Tutorial FLASH - Formularios en Flash con validación.

Versión Flash: MX y superiores   |   Compatible con ActionScript 1.0 y 2.0   |   Nivel: Avanzado   |   Hits: 170780

En este tutorial os vamos a enseñar a crear un formulario en Flash como el que tienen en www.ivi-concept.com

Antes de comenzar debeís entender que Flash de por sí no puede enviar los datos introducidos en el formulario, para poder hacerlo necesitamos que trabaje en asociación o alguna tecnología de servidor como PHP, ASP o CGI. En este tutorial se os va a explicar como hacer la parte que le afecta a Flash, es decir, el interfaz gráfico y la comprobación de los valores introducidos por el usuario. Para la parte del servidor vosotros tendreís que hacer un archivo que mande los datos y que le responda al flash error=0 en caso de el email con los datos se haya enviado bien.

COMO HACERLO.
Como podeís ver, el formulario es muy sencillo y está compuesto únicamente por cuadros de introducción de texto. En la parte inferior derecha tenemos un área reservada para mostrar alguna posible alerta y los botones de enviar y borrar todo.

Para organizar los elementos del formulario vamos a crear dos movieclips. El primero, llamado formulario_mc, va a contener los cuadros de introducción de texto con sus respectivas etiquetas, además del titular del formulario y el texto explicativo que queraís. En el segundo clip, llamado submitForm_mc, estarán los botones y el espacio para mostrar la alerta.

Lo primero que tenemos que hacer es maquetar el título, las etiquetas y los cuadro de introducción de texto dentro de formulario_mc, según añadimos cuadros, les asignamos un nombre de instancia y una variable asociada. En nuestro caso también le hemos añadido unas flechitas que se posicionarán a la altura del campo que esté seleccionado.

// código en fotograma 1 de formulario_mc
// colores empleados en el formulario
colorCampos = 0x506682;
colorFondo = 0x254063;
colorDestacado = 0x112142;
resetCampos(); //definida más abajo
// aparece seleccionado el nombre de inicio.
nombre.backgroundcolor = colorDestacado;
Selection.setFocus("nombre");
nombre.tabIndex = 1;
email.tabIndex = 2;
localidad.tabIndex = 3;
empresa.tabIndex = 4;
tel.tabIndex = 5;
consulta.tabIndex = 6;
// cuando seleccionamos un campo movemos
// las flechitas
nombre.onSetFocus = function() {
moverMarker(155, this);
};
email.onSetFocus = function() {
moverMarker(202, this);
};
localidad.onSetFocus = function() {
moverMarker(249, this);
};
empresa.onSetFocus = function() {
moverMarker(297, this);
};
tel.onSetFocus = function() {
moverMarker(344, this);
};
consulta.onSetFocus = function() {
moverMarker(391, this);
};
// constantes globales para realizar el
// movimiento elástico de la flecha
_global.f2 = 0.5;
_global.r2 = 0.3;
// función para mover las flechitas y
// colorear el campo seleecionado
moverMarker = function (guiaV, campo) {
resetCampos();
campo.backGroundColor = colorDestacado;
marker.onEnterFrame = function() {
marker._y = marker.guia;
marker.Yevel = marker.Yevel*f2+(guiaV-marker.guia)*r2;
marker.guia += marker.Yevel;
if (marker._y == guiaV) {
campo.backGroundColor = colorDestacado;
delete marker.onEnterFrame;
}
};
};
// inicializa el aspecto de los campos
function resetCampos() {
nombre.border = true;
nombre.borderColor = colorCampos;
email.border = true;
email.borderColor = colorCampos;
localidad.border = true;
localidad.borderColor = colorCampos;
empresa.border = true;
empresa.borderColor = colorCampos;
tel.restrict = "0-9+"; //sólo numeros
tel.border = true;
tel.borderColor = colorCampos;
consulta.border = true;
consulta.borderColor = colorCampos;
nombre.background = true;
nombre.backgroundcolor = colorFondo;
email.background = true;
email.backgroundcolor = colorFondo;
localidad.background = true;
localidad.backgroundcolor = colorFondo;
empresa.background = true;
empresa.backgroundcolor = colorFondo;
tel.background = true;
tel.backgroundcolor = colorFondo;
consulta.background = true;
consulta.backgroundcolor = colorFondo;
}

Vamos a explicar el código. Primero definimos los colores que vamos a emplear en las cajas. Después llamamos a resetCampos() para inicializar el aspecto de los cuadros de texto. En las siguientes líneas indicamos que el campo nombre debe aparecer seleccionado, después con tabIndex definimos el orden de selección al pulsar TAB. Luego con los onSetFocus ejecutamos la función moverMarker() que es la que dota a las flechitas de movimiento. Si trabajaís con Flash 8, esta función podeís recodificarla usando la clase Tween.

Con esto hemos definidos varios aspectos del formulario: su apariencia, el orden del tabulador y el movimiento de las flechitas. Pero todavía nos quedan unas cuantas cosas.

Dentro del clip submitForm_mc, tenemos los botones y el cuadro de alerta. La alerta es el mensaje que le vamos a mostrar al usuario si detectamos la omisión de un dato obligatorio o un email mal escrito sintácticamente. La alerta va a consistir en un cuadro de texto dinámico que mostrará el mensaje con un efecto de máquina de escribir. El código para mostrar la alerta lo incluimos en el primer fotograma del clip. Este código se basa en el efecto del tutorial Efecto de máquina de escribir.

// código en fotograma 1 de submitForm_mc
function avisar(msg) {
count = 0;
mensaka = msg;
telon.gotoAndStop(1);
warning = "";
this.onEnterFrame = function() {
this.warning += mensaka.charAt(count);
count++;
if (count == mensaka.length) {
telon.play();
delete this.onEnterFrame;
}
};
}

Tenemos que realizar dos comprobaciones distintas. Comprobar si se ha introducido un campo obligatorio y comprobar que el email introducido tenga una sintaxis correcta. Para ello vamos a definir dos funciones globales isBlank() e isMail().

// funciones globales, podemos definirlas donde queramos
// por ejemplo en la línea de tiempo principal
// función para comprobar si un campo está en blanco
_global.isBlank = function(valor) {
if (valor == "" || valor == undefined || valor == null || valor.length<1) {
return true;
} else {
return false;
}
};
// función para validar el email ------------------------------------------
_global.isMail = function(arg) {
// compruebo que no este vacía la cadena exaustivamente
if (arg == "" || arg == null || arg == "null" || arg == undefined || arg == "undefined") {
return false;
// trace("cadena vacía");
// compruebo si hay una arroba y solo una
} else if (arg.indexOf("@") == -1 || arg.indexOf("@") != arg.lastIndexOf("@")) {
return false;
// trace("núm de @ erróneo");
} else {
// dividimos la direccion en usuario y dominio
var partes = arg.split("@");
var usuario = partes[0];
var dominio = partes[1];
// compruebo usuario
if (usuario.length<1) {
return false;
// trace("usuario vacío");
} else {
// compruebo si hay algún carácter raro
var caracteresProhibidos = new Array("º", "ª", "!", "#", "$", "%", "&", "¬", "/", "(", ")", "=", "?", "¿", "¡", ",", ";", ":", "[", "]", "{", "}", "á", "é", "í", "ó", "ú", "Á", "É", "Í", "Ó", "Ú");
var numCaracteresProhibidos = 0;
for (var k = 0; caracteresProhibidos[k]; k++) {
if (usuario.indexOf(caracteresProhibidos[k]) != -1) {
numCaracteresProhibidos++;
}
}
if (numCaracteresProhibidos>0) {
// trace("caracteres prohibidos encontrados");
return false;
// compruebo dominio
} else if (dominio.indexOf(".") == -1 || dominio.length<1) {
return false;
// trace("núm de puntos erróneo en dominio");
} else {
var partes_dominio = dominio.split(".");
var extension = partes_dominio[partes_dominio.length-1];
// compruebo que el dominio tenga como mínimo 3 chr antes del punto
if (dominio.length-extension.length<4) {
// trace("dominio menor de 3 chr");
return false;
} else if (extension.length<2 || extension.length>4) {
// trace("longitud de extension errónea");
return false;
} else {
//trace("mail correcto");
return true;
}
}
}
}
};

La función isMail() está basaba en el tutorial Validar email en formularios Flash.

Ya tenemos todas las piezas necesarias para que el formulario sea operativo, sólo nos queda definir la función enviarFormulario() que es la que las une. Esta función es relativa al clip formulario_mc por lo que podemos incluirla en el primer fotograma del clip a continuación del código que ya tenemos o en su onClipEvent(load).

onClipEvent (load) {
function enviarFormulario() {
// compruebo que el campo nombre y apellidos no esté vacío
if (isBlank(nombreV)) {
_parent.submitForm_mc.avisar("Es necesario rellenar el campo Nombre y Apellidos");
Selection.setFocus("nombreV");
Selection.setSelection(0, 0);
} else {
// compruebo que el correo electrónico no esté vacío
if (isBlank(emailV)) {
_parent.submitForm_mc.avisar("Es necesario rellenar el campo Correo Electrónico");
Selection.setFocus("emailV");
Selection.setSelection(0, 0);
} else {
// compruebo que el correo electrónico esté bien escrito
if (!isMail(emailV)) {
_parent.submitForm_mc.avisar("El campo Correo Electrónico no es correcto");
Selection.setFocus("emailV");
Selection.setSelection(0, emailV.length);
} else {
// como localidad y empresa y teléfono no son obligatorios no compruebo nada
if (isBlank(consultaV)) {
_parent.submitForm_mc.avisar("Es necesario rellenar el campo Consulta");
Selection.setFocus("consultaV");
Selection.setSelection(0, 0);
} else {
if (isBlank(telV)) {
datosUser.telefono = "No cumplimentado";
} else {
datosUser.telefono = telV;
}
if (isBlank(localidadV)) {
datosUser.localidad = "No cumplimentado";
} else {
datosUser.localidad = localidadV;
}
if (isBlank(empresaV)) {
datosUser.empresa = "No cumplimentado";
} else {
datosUser.empresa = empresaV;
}
datosUser.nombre = nombreV;
datosUser.email = emailV;
datosUser.consulta = consultaV;
datosUser.sendAndLoad("tuASP.asp", respuesta, "POST");
// el asp debe responder error=0 si el envío se hizo bien
}
}
}
}
}
}

Como se ve, al finalizar las comprobaciones se almacenan los datos en un objeto LoadVars y se envían empleando la tecnología de servidor que tengaís disponible.

Podéis descargaros este mismo ejemplo y ver cómo está hecho: formulario.fla

Tutoriales Flash relacionados

Tutorial efecto de máquina de escribir en Flash.
Tutorial para validar email en formularios Flash.
Animación de clips con ActionScript. La clase Tween.