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.

camadas

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.

camadas retornador

Você deve colocar o nome de instância deste movie clip retornador como “retornador_mc” (sem aspas)

instância retornador

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

Compartilhe:Share on Facebook1Tweet about this on Twitter1Share on Google+0Pin on Pinterest0Share on LinkedIn0Share on Tumblr
14 de janeiro de 2008 por Pablo Cabana

55 Responses to “Retornar a timeline no flash (crie botões mais bacanas)”

  • nossa muito obrigado por esse tutorial estava procurando uma forma de fazer esse efeito nos botões do meu site valew pela dica.

  • legal. mas eu tenho uma situação que nao consigo resolver.
    tenho em um frame que ao entrar ele monta um mapa do brasil.
    ao clicar em um estado, atraves de AS ele monta um novo mapa na mesma regiao. ate ai tudo bem pois se clico em voltar ele gera o mapa do brasil novamente. o problema começa quando preciso clicar em uma regiao do mapa do estado pois ele gera um novo mapa na mesma regiao pegando somente aquela regiao selecionada (tipo norte sul leste oeste) ja dividida no mapa do estado. ai se clico em voltar ele nao volta para o mapa do estado e sim para o mapa do brasil. nao consigo fazer com que ele volte para o mapa da regiao do estado. gotoandplay ele volta para o mapa do brasil. prevframe ele refaz o mesmo mapa regional. ele nao volta para o mapa do estado. tem alguma ideia de como me ajudar.

  • Pablo, achei MUITO bom o seu tutorial. Mas eu estou com uma dúvida agora… dá pra fazer esse botão linkar para alguma página da internet? eu estava tentando fazer esse botão no meu site mas não consegui de jeito nenhum fazer ele linkar para alguma página e a animação ainda funcionar. Me ajude por favor!!!

  • Olá, muito bom o toque!
    Fiz no AS3, e alterei apenas umas coisinhas, já que a navegação acontece pelas setas…
    Obrigada!!! =)

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>