Continuando o nosso tutorial anterior, temos o fundo e o texto do frame Over com as cores diferentes do frame Up.

Caso você tenha testado a sua animação, você viu que quando clicado, o botão fica como seu estado normal, não é? E nós não queremos isso! Fiz isso de propósito, para vocês irem se acostumando com “remendos” ou correções que temos que fazer às vezes.
Assim, vamos selecionar o frame Over das duas camadas, como na figura ao lado.

Com os dois frames selecionados, pressione Alt e com o mouse, arraste os dois frames para o frame Down e solte. Você pode notar que o símbolo do mouse ficará com um pequeno + desenhado nele.
Teste seu filme (Ctrl+Enter) e veja que agora seu botão, quando pressionado, fica igual a quando o mouse passa por cima dele.

*Essa técnica de copiar keyframes pressionando o Alt e arrastando será muito usada daqui pra frente e acaba economizando muito tempo de desenvolvimento.

Agora selecione o frame Down das duas camadas e abra o painel Scale and Rotate em Modify > Transform > Scale ou Rotate ou pelo atalho Crtl+Alt+S (esse é um atalho que vale a pena decorar – provavelmente você usará bastante mais pra frente). Bom, esse painel mexe com a proporção escalar do objeto, bem como a rotação em graus do mesmo. Em 100%, o objeto fica do mesmo tamanho (100% do seu tamanho, o que parece óbvio, mas não é). Cuidado para não colocar 0% e sumir com seu objeto hehehehe.
Vamos deixá-los com 10% a menos de tamanho. Então, deixe 90%. Com isso, quando passarmos o mouse por cima do botão ele mudará de cor e, quando apertarmos o botão, ele diminuirá de tamanho em 10% de seu tamanho original!
Mas agora temos um outro problema: pra que serve um botão que só diminui quando apertamos??? E é isso que precisamos fazer, arranjar um motivo para a existência desse botão
Então voltemos para a cena principal (lembre-se: é só dar um clique duplo em algum espaço vazio que não em cima do botão, ok?).

De volta à cena principal, crie mais duas camadas: actions e animacao.

Na camada animação, vamos colocar um número em cada frame para indicar qual frame estamos. Pegue a ferramenta de texto (Text tool) e escreva 1 no primeiro frame da camada animacao.
Mas antes de continuar, crie um frame utilizando o atalho F5 no frame 5 da camada botao (você pode clicar com o botão da direita do mouse sobre o frame 5 da camada botao e selecionar Insert Frame). Isso fará com que o botão se “repita” até o frame 5 (para mais detalhes, cheque o tutorial Diferença entre frames…).

Agora, clique no frame 2 da camada animacao e arraste até o frame 5 (como na imagem ao lado). Iremos criar 4 quadros em branco (blank keyframes) de uma vez só.

Agora, utilizando o atalho F7, você criará 4 quadros em branco (você pode clicar com o botão da direita do mouse e selecionar Insert Blank keyframe também, mas comece a dar preferência para os atalhos).

Pronto! O que temos que fazer agora é selecionar cada um dos frames da camada animacao e inserir o número respectivo a ele. Assim, no frame 2 da camada animacao colocaremos o número 2. Faça o mesmo para os outros frames, terminando pelo número 5 no frame 5.

Com todos os números na camada animacao, vamos selecionar os frames de 2 a 5 da camada actions (ações) e criar quadros em branco.

Lembre-se do atalho F7! Sua linha do tempo tem que estar como a da figura ao lado.

Agora vamos para a parte mais legal da animação! hehehehe
Não se assustem, essa “programação” a gente já viu. Eu coloquei programação entre aspas porque mandar o flash parar com stop(); não dá nem pra falar que já estamos programando, né?
Então, selecione o frame 1 da camada actions e abra o painel de ações em Window > Actions ou pelo atalho F9. Escreva apenas stop(); e selecione o frame 2. No frame 2, repita o processo de escrever stop(); n> e faça isso em todos os frames da camada actions.

Sua linha do tempo tem que ficar como a da figura ao lado, com a ação stop(); em cada um dos frames da camada actions.

E agora, para finalizar, daremos a razão tão esperada para o nosso tão querido botão!
Selecione o botão com a ferramenta de seleção (Selection tool) e abra o painel de ações (atalho: F9).

Escreva:

on(release) {
play();
}

Nesse código, você está falando para o flash: quando o botão for solto, “toque”! hehehe, essa tradução ficou meio feia, mas o negócio é que a palavra release quer dizer soltar, liberar (o botão, no caso). Então, ao soltar o botão (clicar e soltar) a animação vai rodar (play, como no video cassete, som ou dvd).
Teste sua animação (Ctrl+Enter) que você terá uma idéia melhor do que está havendo.
Note que dentro das chaves {} você coloca a ordem para o flash. O on(release) diz a que momento você quer que aquilo seja feito!

Lição de casa: Criar uma bolinha que vai de um canto a outro da tela (com aquele loop infinito que conhecemos bem!) e criar dois botões – um de play(); e outro de stop(); – para que sua animação seja controlada por esses dois botões! E aí, fácil, né?