botao rollover rollout

[Jair Humberto 2]

Olá pessoal,eu estava tentando descobrir como fazer um Botão Roll Over Roll Out a algum tempo atras, e hoje descobri uma formamelhor do que eu havia encontrado, para aqueles que ainda não sabem vou explicar passo a passo:1.crie um retangulo de qualquer cor.2.tranforme-o em movie clip. (seleciona o retangulo,aperta F8, escolhe 'Movie Clip' em Type, e aperta 'ok');3.dê um duplo clique no retangulo, que agora é um mc(Movie Clip), para edita-lo4.para ficar organizado e facil, renomeie a Layer 1 para fundo.(dê dois cliques na layer e digita fundo e aperta enter)5.adicione uma nova layer e a renomeie para 'texto'.6.nessa layer insira um texto qualquer , por exemplo: home, e posicione ele no centro do retangulo.7.adicione uma nova layer e a renomeie para 'area'. agora copie o frame da layer 'fundo' e cole-o no primeiro frame dalayer 'area'.8.transforme o novo retangulo em um button.(seleciona o retangulo,aperta F8, escolhe 'Button' em Type, e aperta 'ok');9.dê um duplo clique no novo retangulo que é agora um botao. e você entrará no modo de ediçao do botãoonde contém 4 frames.10.selecione o ultimo frame,abaixo de 'hit', e aperta 'F6' para criar um KeyFrame. Agora Seleciona o primeiro framee aperte 'Delete'. dessa forma usaremos apenas a area de clique do botão.11.dê um duplo clique em algum lugar vazio ao redor do retangulo para voltar à tela anterior. se você fez tudo correto,agora você verá um retangulo azul transparente no lugar do ultimo retangulo criado. Torne essa Layer invisível paraficar fácil de trabalhar.(clica no ponto da layer abaixo do olho)12.crie uma nova layer e a denomine para actions. aperte 'f9', e digite 'stop();'13.selecione o frame 12 e aperta F6, e aperte F9 e digite 'stop()' novamente;na layer 'area' selecione o frame 12 e aperta F5na layer 'texto' selecione o frame 12 e aperta F514.na layer 'fundo' selecione o primeiro frame e mude o Tween para 'Shape'agora na mesma layer selecione o frame 12 e aperte F6.Nesse frame, mude a cor do retangulo, ou o tamanho, ou faça quaisquer alterações que desejar.15.agora torne novamente visivel a layer 'area' e selecione o retangulo azul transparente e aperte F9.Aqui é a parte interessante.digite o seguinte código:

on(rollOver){	play();}on(rollOut, releaseOutside){	onEnterFrame = function(){		if(_currentframe != 1){			this.prevFrame();		}		if(_currentframe == 1){			delete onEnterFrame;		}	}}on(release){	getURL("index.htm");}

Prontinho. é a primeira vez que crio um tutorial assim, então se ficou um pouco confuso basta perguntar, podem me mandar emails também.a maneira que eu fazia antes era assim.o codigo acima ficava:

on(rollOver){	gotoAndPlay(2);}on(rollOut, releaseOutside){	gotoAndPlay(13);}on(release){	getURL("index.htm");}

e extendia do frame 12 até o 24 fazendo a animação retornar ao ponto um, deu pra entender? :huh: o problema desse metodo é que se eu passo o mouse em um botão rapidamente e retiro, ele jáirá para o frame 13 o que fica meio estranho. Com esse novo botão , se eu passo o mouse rapido e retiro,a animação retrocede gradativamente. :huh: eu acho que vou encerrar o tutorial por aqui que já meperdi nas palavras.Até a Proxima ^_^

[fhermel 0]

Otimo muito bom meu parabens pela iniciativa

[GabrielFerrari 41]

Bem explicado parabens :D

[Lucas Mello 0]

Muito bom o tutorial! ;)

[Jair Humberto 2]

Opa Valeu, antes de vocês falarem achei que tinha ficado confuso, por isso ninguém teria postado nada, mas já que ficou bom vou criar um outro tutorial sobre uma forma mais limpa de fazer um preloader, que eu acho que alguns ainda nao sabem. mas vou tentar postar imagens dessa vez :)

[Lucas Mello 0]

Faz isso mesmo Jair!Acho que todos estão gostando da iniciativa que você esta tomando!Claro que esse do preloader vai ficar melhor que esse não é? ;)falou cara e parabéns pela iniciativa!

[Vinicius R3 0]

muito bom fiz do jeitinhu q você fez e deu certo....eu faço nomeando certo frame como saida e outro frame como entrada, ai coloko no código:on (rollOver){ this.gotoAndPlay("entrada");}on (rollOut) { this.gotoAndPlay("saida");}Mas desse jeito funciono bem legal...valews

[Jair Humberto 2]

opa!da pra fazer um efeito saida e entrada tipo o do AntonioSP ?parece que sim, e nos botoes!! que legal :)

[paunugatu 0]

esse tutorial é muito bom, porem ainda tem um pequeno detalhe pra aperfeiçoar a tecnica do rollover rolloutquando na função rollover é inserido o codigo play(); a o seguinte problema, se passares o mouse sobre o botão no momento de volta da transição ele vai parar onde está.pra resolver esse problema temos que detalhar a função rollover do mesmo modo que declaramos a função rollout..exe:..on(rollOver){onEnterFrame = function(){if(_currentframe != 10){this.nextFrame();}if(_currentframe == 10){delete onEnterFrame;}}}onde 10 representa o frame final da animação.o codigo ficará assim.

on(rollOver){onEnterFrame = function(){if(_currentframe != 10){this.nextFrame();}if(_currentframe == 10){delete onEnterFrame;}}}on(rollOut, releaseOutside){onEnterFrame = function(){if(_currentframe != 1){this.prevFrame();}if(_currentframe == 1){delete onEnterFrame;}}}

espero que tenha ajudado =)

[Jair Humberto 2]

legal!!funciona mesmo. eu estava usando desse modo em alguns menus que eu fazia,mas de um tempo pra ca nao estava funcionando! acho que eu estava fazendo algumacoisa errada.Muito bom

[Michell 0]

E ai galera, tudo beleza? Estou fazendo esse tuto e gostei muito, só queria aprender mais uma coisa, como que eu faço pra quando eu clicar (release) ele fazer uma animação, e quando eu clicar, essa animação volta? Faz um tempinho que procuro e não acho. Deem uma força ai :) Obrigado.

[Lucas Mello 0]

Cara eu acho que a maneira mais facil de fazer isso é usando Label! ;)Abraços

[mug 0]

valeu cara, salvou o dia

[Michell 0]

Vixi, fique na mesma, por acaso você conhece algum tuto ou algo relátivo, que aborde o assunto?

Obrigado. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Lucas Mello 0]

Michell, eu procurei pela net e não achei nada a respeito mas não é dificil de usar!

Vo dar uma resumida!

Label é o nome que você da pra um frame!

 

Vou fazer um exemplo!

Num frame vazio clique sobre ele e no painel das propriedades vai ter uma pequena caixa de texto escrito "frame name"!

nele você digita qualquer coisa como "abre" (sem aspas), na sua ação coloca!

 

ACTIONSCRIPT

this.gotoAndPlay("abre");

 

Quando exportar ele vai começar o video pelo frame "abre", se você colocou o "abre" no frame 15, por exemplo, o filme vai rodar do frame 15 em diante!

 

É mais ou menos isso cara, qualquer dúvida de um toque ai http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

 

Abraços

Lucas Mello

[Murilo Web 0]

Só tentando entender bem o codigo para poder usar ele e edita-lo futuramente:Tem algumas partes do codigo q n consegui entender a logica.. gostaria se possivel que alguemme explica-se os porques.. se possivel.. Obrigado.Fiz comentarios no codigo numa linguagem bem simples de facil entendimento... só me corrijam se os meus raciocinios estão certo ;p:on(rollOut, releaseOutside){ // quando o mouse sair, qdo clicar fora onEnterFrame = function(){ // dentro da sequencia de frame faça a seguinte função if(_currentframe != 1){ // se o frame atual for diferente de 1 this.prevFrame(); // volte para o frame anterior ( tambem n entendi a logica ) } if(_currentframe == 1){ // se o frame atual for igual a 1 delete onEnterFrame; // aqui eu n entendi a logica.. ?? } }

[CNR 0]

valew cara muito bom, me salvou...parabéns tbm pra paunugatu que concertou o probleminha....

[Jair Humberto 2]

Olá Murilo,

 

a lógica é a seguinte:

 

on(rollOut, releaseOutside){ // quando o mouse sair, ou quando soltar o clique fora.
	onEnterFrame = function(){ // dentro da sequencia de frame faça a seguinte função
		if(_currentframe != 1){ // se o frame atual for diferente de 1
			this.prevFrame(); //se o frame for diferente de um ele vai retrocedendo , até chegar ao frame 1
		}
		if(_currentframe == 1){ // se o frame atual for igual a 1
			delete onEnterFrame; /*deleta a função criada, fazendo todo o processo parar. (pra evitar cargas desnecessárias ao processamento do cliente)*/
		}
}

abraços

[Igor Fediczko 0]

Jair,

 

Seu tutorial é de fato ótimo! Eu coloquei em um site que estou fazendo para minha banda, e funcionou perfeitamente, mas to com um problema...

 

Estou querendo, com esse botão, chamar um determinado frame, mas não consigo... A dica do label não funciona, pois ele chama um frame de dentro do movieclip..

 

Tentei assim dentro do botão azul (hit):

 

on(release){
gotoAndPlay(musicas);
}

Mas ele não funciona

 

Tentei dar o "gotoAndplay(_root, musicas)", mas também não funciona.

 

Instanciei o botão como "musicas_btn", e fiz: "musicas_btn.onrelease..." ele funciona, mas a animação não funciona mais...

 

O que fazer, camarada? Valeu desde já!

 

Igor Fediczko

[Igor Fediczko 0]

CONSEGUI!!!!!!!!!!!!

 

estava fazendo besteira.... tinha de usar "_root.gotoAndPlay" em vez de simplesmente "gotoAndPlay"

 

Até que enfim!

 

Valeu galera!