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
março 9th, 2009 at 18:32
caraca….
Tu é Phoda… Muito bom… Clareou a mente aqui…
valew.. abraço.. e Congratulations
março 25th, 2009 at 16:22
eii pablo voce poderia colokar mais imagens, ou fazer video pq eu n entendi quase nada
:(
maio 8th, 2009 at 0:19
ia pablo blz .seguinte perdi a visalização dos layer da timiline, cara ja fiz de tudo mas não consiguo voltar a visualizar os layers para editar as animações .
da uma força ai meu guri …abraço
maio 8th, 2009 at 12:11
Gue e Cleido, tem que estudar um pouquinho o Flash…
maio 26th, 2009 at 20:55
…estou a procura de informação e aprendizado…no flash..
foi muito bom ficar aqui com v/c um pouco
abraço.te
maio 26th, 2009 at 21:53
Volto sempre Wash!
maio 27th, 2009 at 22:36
agora eu entendi :D
era porque no meu flash nao tava funcionando a aba ações ficava desativada na frame, nos botoes.
reinstalei e deu certo
msm assim vlw:)
julho 28th, 2009 at 22:48
Venho estudando o flash, o meu maior problema é linkar o botão na animação. Gostaria de saber se pra linkar o botão tenho que criar uma CAMADA AÇÕES, e se os códigos tem que estar linkado na ação?
Um grande abraço e, esse seu blog é muito bom!!
julho 29th, 2009 at 11:10
Fernando, só estudando um pouquinho mais…
setembro 22nd, 2009 at 22:12
Cara, parabéns. Simples e funcional. Pra dar uma encrementada, no motion fica legal mudar o ease in/out (100 e -100)… mas assim tb ta bom.
novembro 16th, 2009 at 16:34
muito loco esse efeito, estou procurando algo parecido, mais o efeito que quero é o seguinte, quando eu clicar em outro botão, ae sim quero que o retornador volta, qual comando devo usar no lugar do rollout.
novembro 17th, 2009 at 13:38
onRelease !!!
maio 18th, 2010 at 16:31
Bem legal!!!
Obrigado pela contribuição ao nosso conhecimento!!!
julho 28th, 2010 at 16:33
Muito obrigado pela dica.
Só que estou com uma duvida, estou precisando que o movimento complete ao retirar o mouse, tem como???
agosto 3rd, 2010 at 12:26
Tem sim, Anderson. Use o evento onMouseOut.
agosto 10th, 2010 at 1:33
CARALHO, QUANDO VCS VAO COMEÇAR A USAR ACTION SCRIPT 3.0????????????????
agosto 10th, 2010 at 11:42
Boa pergunta, Tiago. Mas não precisa de tanta agressividade. :)
Contudo, é bom lembrar que AS2 ainda tem seu lugar. Muitos sites não aceitam AS3 para banners de propaganda. Outro dia mesmo tive que desenvolver um desses em AS2.
Além disso, AS3 é uma linguagem muito mais robusta e muitos designers não precisam de tantos recursos. Nesse caso, AS2 tem uma curva de aprendizado bem mais fácil.
agosto 12th, 2010 at 16:26
Muito bom tutorial…
parabens
setembro 6th, 2010 at 16:05
Fera! vê só , eu fui colocar esse método num trabalho, só que apareceram algumas dúvidas, como faço caso seja 4 botões em um menu com animação, para que quando clique e volte ele abra um filme especifico de cada botão no menu? como vc fez num site link acima
outubro 13th, 2010 at 14:33
Não sei se ainda está ativo. Mas seguinte estou começando nessa área. Só que não quero que a animação volte, quero q ela toque um filme diferente. Tipo isso aqui – http://www.hypertemplates.com/templates/30598.html
saca? Quando boto o mouse em cima faz uma animação e quando tiro o mouse de cima toca uma animação diferente ajuda ai véi.
novembro 26th, 2010 at 21:45
Puts que porcaria, eu faço tudo certo mas sempre da um erro -_-
abril 20th, 2011 at 13:33
é estou como esse comentario do pots…..
meu não consigo fazer nada no meu flash cs3 que porcaria alguma eu consegui mais esses tipo que ném o seu só da erro o meu fica sem ação os codigos fala que esta errados é tenho que ter muita calma nesta hora afff……
me add no meu msn por favor:
kellyhorio2010@hotmail.com
maio 2nd, 2011 at 9:40
Boas Cabana…
Estou com uma dúvida em relação a este tutorial: tenho uma animação de um botão com um som beep. Está a funcionar perfeitamente, mas queria que ao tirar o rato não reproduzisse o som. É possÃvel? Tipo esta referência http://www.templatehelp.com/preset/pr_preview.php?i=32618&pr_code=BzB8f19m970I5ozM7lfx2tguxlr68f
Obrigadão
maio 2nd, 2011 at 20:13
Muito legal cara adorei será que vc sabe algo sobre codificar botões em flash pra mim é uóóóóóóó!!!
maio 19th, 2011 at 17:36
Adorei, o efeito funciona super bem, testado OK … más como faço para rodar meus botões que estão dentro deste lindo MC ? Me dá uma luz please !!!
Tenho alguns botões que fora do MC tão perfeitos funcionando, más dentro deste MC mágico param de rodar, até o efeito up/over/down/hit e a Action de ir para o frame tal … Fala como eu faço vai !!! não acho essa dica em lugar algum !
rsss … bjs e agradeço muitoooo ;o))
maio 20th, 2011 at 21:09
Eu de novo … putz … estou quebrando a cabeça e nada … tudo funciona menos os meus botões que clicando vão para um determinado framezinho e pronto, nem precisam mais mudar de cor nem nada onOver, já até desisti disso ! rsss ! não consigo fazer nenhuma action funcionar digo rodar dentro do MC, (o MC roda lindo) más os botoes dentro – nadica, já tentei endereçar _root/parent, daqui e dali, tudo que poderia e nada .. não imagino o que posso estar fazendo de errado, estou usando o CS3, me ajuda vai ! eu estou há 3 dias nisso e não sei mais o que fazer, vc não imagina quantos milhares de arquivos e testes eu já fiz ! H E L P !