Ayuda ejercicios unidad 19: Formularios - ActionScript



Ejercicio 1: Formulario

  1. Abre el programa Flash CS5.
  2. Crea un nuevo documento haciendo clic en ArchivoNuevo.
  3. Selecciona Documento de Flash en el diálogo que se abrirá y pulsa Aceptar.
  4. Se abrirá un documento en blanco. Lo guardaremos para darle un nombre y poder guardar nuestros progresos de vez en cuando. Para ello haz clic en ArchivoGuardar. Dale un nombre, selecciona una carpeta y pulsa Guardar.

    Ahora podrás guardar el documento siempre que quieras pulsando Ctrl + S o haciendo clic en ArchivoGuardar.
  5. Primero insertaremos los elementos de formulario que vamos a utilizar, para ello antes tendremos que abrir el Panel Componentes desde VentanaComponentes.
  6. Haz clic sobre el elemento User Inteface y arrastra a la Biblioteca los siguientes elementos: Button, CheckBox, ComboBox, Label, RadioButton y TextInput.
  7. Ahora que ya tenemos los elementos que necesitaremos vamos a crear instancias de ellos en el Escenario. Arrastra un elemento TextInput y un Label al Escenario.
  8. En el Panel Inspector de Componentes (Ventana -- Inspector de Componentes) modificaremos el campo text de Label a Nombre:. Le daremos a TextInput el nombre de instancia nombre_txt.
  9. Arrastramos otro TextInput y un Label al Escenario, en el Inspector de Componentes modificamos el campo text de Label a Apellidos: y le damos a TextInput el nombre de instancia apellidos_txt.
  10. Arrastramos otro TextInput y un Label al Escenario, en el Inspector de Componentes modificamos el campo text de Label a E-mail: y le damos a TextInput el nombre de instancia mail_txt.
  11. Arrastramos un elemento ComboBox al Escenario, en el Inspector de Componentes modificamos el campo data y añadimos la siguiente lista de elementos:
    word
    excel
    access
    powerp
    outlook
  12. En el campo labels introduciremos la siguiente lista de elementos:
    Microsoft Word
    Microsoft Excel
    Microsoft Access
    Microsoft PowerPoint
    Microsoft Outlook
  13. Le damos el nombre de instancia producto_cmb.
  14. Arrastramos de la Biblioteca tres componentes RadioButton al Escenario, en el Panel Parámetros les daremos los siguientes valores:
    Botón de opción 1:
    nombre de instancia: buscadores_rdo
    	groupName=encontrar
    	label= Buscadores
    	selected=true
      value=buscadores
    
    Botón de opción 2:
    nombre de instancia: publicidad_rdo
    	groupName=encontrar
    	label= Publicidad
    	selected=false
      value=publicidad
    
    Botón de opción 3:
    nombre de instancia: otros_rdo
    	groupName=encontrar
    	label= Otros:
    	selected=false
      value=
  15. Arrastramos un componente TextInput que situaremos a la derecha del botón de opción Otros, en el Inspector de Componentes le cambiaremos el campo editable a false y le daremos el nombre de instancia otros_txt.
  16. Arrastramos un componente CheckBox al Escenario, en el Inspector de Componentes cambia el campo label a Desea recibir información de nuestras novedades, y el campo selected a true.
  17. Dale el nombre de instancia info_chk.
  18. Arrastra dos componentes Button al Escenario, en el Inspector de Componentes dale a uno el valor Reset en label y el nombre de instancia reset_btn. Al otro llámale enviar_btn y modifica el campo label a Enviar.
  19. Ya tenemos todos los objetos de formulario en la película. Selecciona la herramienta Transformación Libre y modifica los anchos de aquellos elementos que, o bien no se puedan leer completamente, o necesiten más espacio (como los campos apellidos, email y productos).
  20. Una vez tengas el formulario entero haz clic sobre la herramienta Selección y emplaza los objetos de manera correcta.
  21. Ahora pasaremos a crear las acciones. Para ello creamos una nueva capa haciendo clic en el botón Insertar capa en la línea de tiempos y la llamamos acciones.
  22. Seleccionamos el fotograma 1 de la capa acciones y abrimos el Panel Acciones (VentanaAcciones).
  23. Al principio del todo escribimos:
    stop();
    System.useCodepage = true;
    Paramos la animación en la primera línea, no necesitamos que haga nada más porque no existen más fotogramas. Si no lo hiciésemos estaría reproduciéndose todo el rato el fotograma 1 una vez detrás de otra.

    Con la segunda línea hacemos que Flash utilice la página de códigos tradicional del sistema operativo en el que se ejecuta el reproductor para que los acentos y eñes que escribamos se envíen correctamente al archivo php que enviará el formulario por mail.
  24. Ahora escribe lo siguiente:
    nombre_txt.tabIndex = 1;
    apellidos_txt.tabIndex = 2;
    mail_txt.tabIndex = 3;
    producto_cmb.tabIndex = 4;
    buscadores_rdo.tabIndex = 5;
    publicidad_rdo.tabIndex = 6;
    otros_rdo.tabIndex = 7;
    otros_txt.tabIndex = 8;
    info_chk.tabIndex = 9;
    reset_btn.tabIndex = 10;
    enviar_btn.tabIndex = 11;
     
    import fl.managers.FocusManager;
    var def:FocusManager = new FocusManager (this);
    def.defaultButton = enviar_btn;
    
    nombre_txt.stage.focus=nombre_txt;
    Esto hará que se establezca el orden de tabulación. Las últimas líneas establecen el botón Enviar como el botón por defecto y colocan el foco en el campo Nombre.
  25. Seguimos con:
    reset_btn.addEventListener(MouseEvent.CLICK, escuchadorLimpiar);
    function escuchadorLimpiar(event) {
    	nombre_txt.text="";
    	apellidos_txt.text="";
    	mail_txt.text="";
    	producto_cmb.selectedIndex=0;
    	buscadores_rdo.selected=true;
    	otros_txt.text="";
    	otros_txt.editable=false;
    	info_chk.selected=true;
    	salida_txt.text="";
    }
    Para limpiar los campos cuando se pulse el botón Reset. Hemos creado un escuchador asociado al botón reset_btn. Dentro del evento click inicializamos todos los campos a sus estados iniciales.
  26. Después escribimos:
    otros_rdo.addEventListener(Event.CHANGE, escuchadorOtros);
    function escuchadorOtros(event) {
    	if (otros_rdo.selected) {
    		otros_txt.editable=true;
          otros_txt.stage.focus = otros_txt;
    	} else {
    		otros_txt.text="";
    		otros_txt.editable=false;
    	}
    }
    Aquí hemos configurado un escuchador para el boton otros_rdo, si este se encuentra seleccionado otros_txt será editable y el foco se pasara allí. Si no se encuentra seleccionado, se vacía el contenido de otros_txt y deja de ser editable.
  27. Ahora escribe la parte de envío:
    enviar_btn.addEventListener("click", verificar);
    function verificar(event) {
    	salida_txt.text="";
    	if (nombre_txt.text.length==0) {//Verificación del Nombre
    		salida_txt.text="No ha Introducido su nombre";
    		nombre_txt.stage.focus=nombre_txt;
    		return false;
    	} else if (apellidos_txt.text.length == 0) {//Verificación del Apellido
    		salida_txt.text="No ha Introducido sus apellidos";
    		apellidos_txt.stage.focus=apellidos_txt;
    		return false;
    	} else if (!esMail(mail_txt.text)) {//Verificación del correo
    		salida_txt.text="No ha Introducido un correo electrónico válido";
    		mail_txt.stage.focus=mail_txt;
    		return false;
    	} else if (otros_rdo.selected && otros_txt.text.length == 0) {//Verificación de otros_txt
    		salida_txt.text="Indique dónde nos econtró";
    		otros_txt.stage.focus=otros_txt;
    		return false;
    	}
    
    	//Guardamos las variables para el envio
    	var envio:URLVariables = new URLVariables();
    	envio.nombre=nombre_txt.text;
    	envio.apellidos=apellidos_txt.text;
    	envio.email=mail_txt.text;
    	envio.producto=producto_cmb.selectedItem;
    	if (buscadores_rdo.selected) {
    		envio.encontrar=buscadores_rdo.value;
    	} else if (publicidad_rdo.selected) {
    		envio.encontrar=publicidad_rdo.value;
    	} else if (otros_rdo.selected) {
    		envio.encontrar=otros_txt.text;
    	}
    	envio.masinfo=info_chk.selected;
      //Envio a la pagina .php
    	// var urlPhp:URLRequest=new URLRequest("https://www.aulaclic.es/flash-cs5/flash_ejemplos/formulario/enviarCorreo.php");
    	urlPhp.method=URLRequestMethod.POST;
    	urlPhp.data=envio;
    
    	var enviar:URLLoader = new URLLoader();
    	enviar.addEventListener( Event.COMPLETE, enviado );//Si es enviado, realizara la función enviado
    	enviar.addEventListener( IOErrorEvent.IO_ERROR, erroNoEnvio );//Si ocurre un error, realizara la función errorNoEnvio
    	enviar.load( urlPhp );
    
    	trace(envio);
    
    
    }
    //Función para vereificar el correo
    function esMail(mail:String) {
    	if (mail.indexOf("@")>0&&mail.indexOf("@")==mail.lastIndexOf("@")) {
    		if (mail.lastIndexOf(".")>mail.indexOf("@")+1&&mail.lastIndexOf(".")) {
    			return true;
    		} else {
    			return false;
    		}
    	} else {
    		return false;
    	}
    }
    
    //Función si és enviado
    function enviado( e:Event ):void {
    	escuchadorLimpiar();
    	salida_txt.text="Mensaje enviado!";
    }
    //Función si no és enviado
    function erroNoEnvio( e:IOErrorEvent ):void {
    	salida_txt.text="Error intenta nuevamente.";
    }
    Hemos configurado un escuchador para el botón Enviar. Cuando se hace clic en él se ejecuta todo este código.

    Presta especial atención a la validación del email.
  28. El archivo enviarCorreo.php podría tener esta estructura:
    <?php
    header("Cache-Control: no-cache, must-revalidate");
    $mensaje = $_POST['nombre'] . " " . $_POST['apellidos'] . " ";
    $mensaje .= "(" . $_POST['email'] . ")\r\n\n";
    $mensaje .= "Quiere información sobre: " . $_POST['producto'] . "\r\n\n";
    $mensaje .= "Conoció la web a través de " . $_POST['encontrar'] . "\r\n\n";
    $mensaje .=  ($_POST['masinfo'] ? "Sí" : "No") . " quiere más información.\r\n";
    $cabeceras = "From: webmaster@dominio.com" . "\r\n" . "Reply-To: webmaster@dominio.com" . "\r\n";
    mail('nombre@correo.com', 'Formulario', $mensaje, $cabeceras);
    echo ("exito=true");
    ?>
    Pero esto queda totalmente en tus manos.


Volver






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.