Baixe os arquivos para acompanhar (utilizei o Flash CS3 mas salvei em versão 8)
Este é meu primeiro tutorial Flash, espero que goste. Vou ensinar a fazer botões (e o que mais a imaginação quiser – utilizei os mesmos princÃpios tanto em www.upper-agency.com e www.ravimidia.com) que retornam na timeline do Flash, como no bannerzinho acima.
A primeira coisa é definir o seu layout. No meu caso eu escolhi um bem simples: “Cabana†em um fundo preto. Já pensando, é claro, em como será a animação.
Crie um novo arquivo flash. Eu ainda estou usando Action Script 2. Por isso, se quiser seguir este tutorial, escolha esta opção. Vá em “Insert†– “New Symbol†– “Movie Clipâ€. O nome que dei foi Cabana é bacana. Esta será a sua animação. No meu caso, a animação é “Passe o mouse†indo pra baixo e o “Cabana é bacana†aparecendo. Use a criatividade e faça a sua própria.
Olhe abaixo as minhas camadas. A animação está nas três camadas da máscara, uma mascarando outras duas. As outras três camadas você vai criar junto comigo.
Crie a camada “actionâ€, abra o painel de Action Script (F9) e coloque o código “stop();†(sem aspas) na primeiro e no último frame de sua animação. Isto impede que a animação comece sozinha e também faz com que ela pare quando chegar ao fim.
Crie a camada “botão ação†e nela desenhe um quadrado do tamanho do seu botão. Este quadrado será a área de ação do seu botão. No meu caso eu coloquei um do tamanho do swf para que a animação funcione em qualquer lugar onde o mouse estiver.
Crie a camada “retornadorâ€. Aqui está o pulo do gato. Vamos criar nesta camada um movie clip que fará com que a animação retorne. Mais uma vez, vá em “Insert†– “New Symbol†– “Movie Clipâ€. Dê o nome de retornador.
Você deve colocar o nome de instância deste movie clip retornador como “retornador_mc†(sem aspas)
Crie três keyframes e coloque em cada um as seguintes ações (respectivamente):
Frame 1: stop(); //isto impede que este movie clip comece a rodar sozinho e o mantém parado quando não precisarmos dele
Frame 2: _parent.prevFrame(); // _parente indica “o movie clip pai deste onde está o código†e prevFrame() faz este movie clip pai ir para o frame anterior
Frame3: gotoAndPlay(2); // isto faz com que este movie clip volte para o frame 2 e novamente jogue o movie clip pai para o frame anterior. Ou seja, a animação que você criou vai retornando até encontrar o começo novamente.
Para finalizar, volte para a cena principal e coloque este código no movie clip principal:
on(rollOver){
this.retornador_mc.gotoAndStop(1);
this.play(1);
}
// ao passar o mouse em cima, mandamos o retornador ficar parado sem fazer efeito e mandamos a animação rodar
on(rollOut){
this.retornador_mc.gotoAndPlay(2);
}
//ao tirar o mouse, mandamos o retornador começar a fazer sua “mágicaâ€. Ele vai para o frame 2 e começa a fazer com que a animação retorne.
Prontinho. Baixe os arquivos fonte e divirta-se.
Qualquer dúvida ou sugestão, deixe um comentário bacana.
Pablo Cabana
janeiro 15th, 2008 at 20:11
Cara, arrebentou. Tava correndo atrás desse toque já há um tempo.
Valeu mesmo!!
janeiro 15th, 2008 at 21:55
Valeu Flávio! Volta de vez em quando que sempre vai ter tutorial novo. um abraço!
fevereiro 22nd, 2008 at 19:45
Parabéns cara vc foi demais nesse tópico…há tempos procurava por isso…
um abraço!!
maio 1st, 2008 at 19:33
Nossa, adorei o tutorial…sempre quis fazer isso e por outros tutoriais não havia sido bem sucedido!
Funcionou perfeitamente, parabéns!
Fiquei com uma dúvida que reflete na finalização do uso deste tutorial:
Eu tenho um botão com um movieclip; no rollover começa a animação e no rollout ela volta atrás..até aà exatamente como você mostrou no tutorial
mas quando clico no botão para mudar a página(mudar de frame) muda de pagina mas a animação é cortada ao invés d voltar com o rollout.
Gostaria de saber como faço pra animação do rollout acontecer mesmo mudando de página, já que acredito que todo botão ou pelo menos a maioria deles usará este recurso.
PS: exatamente como acontece no link que você postou: http://www.upper-agency.com
abraços
maio 5th, 2008 at 11:03
Valeu Rodrigo!
Acho que você deve estar usando o mesmo Movie Clip para executar as duas funções. Poste aqui o código que você está usando pra gente tentar ajudar.
abraço
maio 6th, 2008 at 1:19
Opa, o problema era que eu estava utilizando um botão e quando mudava a pagina esse botão era substituÃdo por outro, então o rollover do outro automaticamente entrava em função, cortando a animação.
Resolvi o problema adaptando o layout e criando dois botões.
Problema bobo rs.
Mas agradeço a sua atenção, seu blog está nos favoritos.
Abraços
maio 6th, 2008 at 10:38
Blz! Volte sempre. ;)
agosto 20th, 2008 at 22:18
Esse tutorial não ajuda muito sabia?
agosto 21st, 2008 at 0:37
Cara, grande tutorial! demais!
Eu curto esses efeitos de botões com mc.
Só tenho uma dúvida, espero que vc consiga me ajudar.
Criei o botão “contato”, agora quero linkar pra página “contato.html”, como vou fazer isso?
Já tentei um release no action, mas retorna erro dizendo que é comando apenas de botão.
O que vc me sugere?
Valeu. abraço!
agosto 21st, 2008 at 10:49
Oi Felipe, pelo menos ele ajuda um pouquinho né? ;)
Everson, troque rollOut por release e escreva a função getURL.
agosto 26th, 2008 at 20:29
Opa!
Cara valeu pelo retorno!
Mas eu tentei fazer oque vc disse mas não funcionou o botão com o link!
Teria uma outra maneira de vc me ajudar?
Valeuu!
agosto 27th, 2008 at 12:17
Dê uma procurada no google que vc acha rapidinho!
setembro 15th, 2008 at 17:06
Mto legal esse tutorial
tem como disponibilizar ele pro flashMx pra eu dar uma olhada?
estou tendo uma dificuldade pra programar botões…
e ele é o ator pricinpal pra montar site em flash…
eu era do ramo do html e css, agora to partindo pro flash
aprendi algumas programações…
ve so esse q eu fiz recentemente…
http://www.multsaude.com
setembro 15th, 2008 at 21:02
Glauco, Flash MX já era! Dia 29 de setembro já sai o Flash CS4.
outubro 14th, 2008 at 1:48
muito bom. Valeu mesmo!
outubro 14th, 2008 at 1:51
muito bom mesmo… me ajudou muito!!!
Valeu!
outubro 29th, 2008 at 19:28
Cara! gostei muito do tutorial…
Só gostaria de saber como faço para fazer um load usando target.
sera q vc pode me ajudar?
ficaria muito grato.
outubro 30th, 2008 at 10:20
Felipe, não entendi muito bem a sua dúvida.
outubro 31st, 2008 at 19:56
Ja achei uma solução.
mas memso assim obrigado pela atenção.
dezembro 19th, 2008 at 13:44
D+ Parabéns brother! Me ajudou muitoooo!
dezembro 24th, 2008 at 16:08
Sou iniciante. Preciso de ajuda.
Quero criar um botão (até ai eu sei), que tenha a função quando clicado de ir buscar em uma pasta (diretório) um programa executável, por exemplo um antivirus.
Já criei o botão. Não sei como fazer para ele ir até a pasta e executar.
Por favor me ajude