Veja também

Related Posts Plugin for WordPress, Blogger...

Redes Sociais

terça-feira

Simples formulário de login com o ActionScript 3.0




Agora vou mostrar como criar um formulário de login do cliente simples utilizando apenas AS3. Você só precisa de dois campos de texto de entrada, um botão de login e algumas linhas de código. Então, vamos começar!


1. Crie um novo documento Flash CS 3. Tamanho: 400 x 250.


2. Nomeie a primeira camada de "background", pegue a ferramenta retângulo, desativar a cor do traço e para escolher a cor de preenchimento gradiente radial. Escolha as cores que você gosta.


3. Crie uma nova camada chamada "inputs". Crie dois campos de entrada de texto com o mesmo tamanho. Dê o primeiro campo de texto o nome de instância "username" e "senha" de segunda. Você pode ver que eu fiz algum projeto para os formulários. Você pode fazer o mesmo ou apenas fazer o download do exemplo e meu uso.

Agora temos que fazer nosso campo de texto de status. Criar um novo campo de texto dinâmico com "statusTxt" nome de instância.

Não se esqueça de incorporar a fonte de todos os campos de texto:




4. Crie nova camada chamada "botão", pegue a ferramenta retângulo e desenhe um retângulo. Crie um campo de texto estático e escreva "login". Selecione o retângulo e tanto o campo de texto e convertê-los em Movie Clip. Dê-lhe um nome de instância "loginBtn".


5. Crie nova camada chamada "ações". Antes de ir para o ActionScript temos que completar os últimos passos. Então, selecione o segundo quadro da primeira camada e arraste para o último:




Se você fez a seleção converter corretamente os quadros selecionados nos quadros principais. Agora, temos de mudar alguns dos quadros segundo. Delete tudo do "inputs" camada e crie um texto estático, dizendo ao usuário que está logado com sucesso. Selecione a camada "botão", delete o botão de login e crie o mesmo botão para sair e dar-lhe um nome de instância "logoutBtn".


6. Agora vamos ao código. Selecione o primeiro quadro das "ações" camada e abra o painel de ações.

//we don't want to go to the second frame immediately
stop();

//In order to secure the login form we must hide the context menu
var cMenu:ContextMenu = new ContextMenu();
cMenu.hideBuiltInItems();
contextMenu = cMenu;

//here we hide the password
password.displayAsPassword = true;
//we want a hand cursor for our button movie clip
loginBtn.buttonMode = true;
//adding event listener to the login button
loginBtn.addEventListener(MouseEvent.CLICK, loginFunction);

function loginFunction(e:MouseEvent):void{
 //if both username and password are correct the user is logged in
 if(username.text == "flash" && password.text == "advanced"){
  gotoAndStop(2);
 }else{
  //else an error message shows up
  var fmt:TextFormat = new TextFormat();
  //we need a text format to change the color to red
  fmt.color = 0xff0000;
  statusTxt.text = "Incorrect username or password";
  statusTxt.setTextFormat(fmt);
 }
}


7. Agora vá para o segundo quadro da camada de ações e entrar neste bloco de código:

stop();

logoutBtn.buttonMode = true;
logoutBtn.addEventListener(MouseEvent.CLICK, gotoPrevious);

function gotoPrevious(e:MouseEvent):void{
 gotoAndPlay(1);
}


Agora vamos ver o resultado final 


Use "flash" para usuário e "avançado" para a senha.
 

 


Fonte:
http://www.flashperfection.com/tutorials/Simple-login-form-with-ActionScript-3.0-19362.html

Download:
http://www.flashadvanced.com/wp-content/upload/login/login.zip

Nenhum comentário :

Postar um comentário