botao rollover rollout
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 ^_^
Discussão (28)
Carregando comentários...