¿Como hacer un login para mi web? - programar un sistema de login - programación basica #3

in #spanish6 years ago

programandoando.png

separador2.png

Uno de los mejores momentos de un programador, es cuando aprende a hacer un "login", pues esto a pesar de ser básico es muy llamativo, causa gran satisfacción dar este paso. Hoy quiero que sientas esa "emoción" y te ensañare como programar un formulario basico en el cual un usuario accedera a una información/juego/etc.

Solo podremos acceder con un usuario y contraseña, haremos nuestro login con flash y action script 3.0 (el cual lo utilizaremos dentro de flash), la interfaz puede hacerse con un programa externo si asi lo deseamos, como photoshop por ejemplo, al igual los botones y textos.

Parte 1

Parte 2

separador2.png

Creamos nuestro documento en el formato "action script 3.0", ajustamos las medidas de nuestra area de trabajo y hacemos dos capas, una para el fondo y otra para el texto, creamos los texto estaticos que vamos a utilizar como: "usuario", "contraseña" y los demás que nosotros queramos agregar. Luego agregamos también dos cuadros de introducción de texto, en los cuales el usuario ingresara.

Es importante agregar un texto dinamico en color rojo (o el que quieras), este para mostrar al usuario que se ha equivocado en caso de introducir mal los datos

1.png

2.png

3.png

4.png

5.png


Agregamos algunos otros fotogramas, y introducimos un fotograma clave vacio, esto para borrar los texto de nuestro login, hacemos una breve animación la cual aparecerá en cuanto el usuario ingrese con nuestro login. Podemos también solo poner otro fotograma con la información (depende de ti, recuerda hacerlo ver lo mejor posible)

Para mi animación, simplemente hice una barra de carga, la cual demora menos de 5 segundos reproduciendo

Aprende a hacer animaciones aquí

6.png

7.png

8.png


Agregamos los nombres de instancia a cada cosa, es importante llevar un orden pues esto lo usaremos mientras programamos

9.png

10.png

11.png

12.png



Agregamos un "stop();" al inicio, de esta manera no se reproducira

13.png



Empezamos a programar, el resulto final seria esto:

14.png

separadorbibnari.png

En está parte estamos haciendo que el texto de error desaparezca, esto para que solo se presente al haber un error al logear, damos también la función a nuestro boton de entrar, es decir, la estructura con la cual haremos que funcione

15.png

Y en está parte daremos sentido a la función anterior, agregando el "if" daremos al boton la opción de pasar al fotograma dos y dar inicio a la animación (gotoAndPlay solo si se cumple con el nombre y usuario escogidos dentro del cuadro de texto), además agregaremos una opción alterna (else), en la cual se cumplira la acción de mostrar el cuadro de texto dinamico (de error) en caso tal de que no se encuentre lo requerido en los cuadros de texto

16.png

separadorbibnari.png

Y para finalizar:
17.png

18.png

separador2.png


descargalaaa.png

Archivos editables y resultado final

Sort:  


¡Felicitaciones tu publicación ha sido seleccionada para recibir el Upvote y Resteem del Proyecto de Curación @Codebyte!

comments.png

Si deseas apoyarnos y saber mas sobre este proyecto puedes seguirlo y estar atento a sus publicaciones. Ingresando aquí podrás ver el reporte en donde tu publicación ha sido destacada.

Excelente informacion, bien resumida y de sencilla aplicacion.

Coin Marketplace

STEEM 0.27
TRX 0.11
JST 0.031
BTC 71153.91
ETH 3862.44
USDT 1.00
SBD 3.51