Rádio Play e Stop no Flash 8  - Tutorial passo a passo

Autor: Hugo Dias

Recursos:

• Para fazer este tutorial, antes faça o download do arquivo .fla inicial -> audio_inicio.fla
• Confira a versão final do .fla -> audio.fla

Organizando o arquivo

1. Provavelmente você gostaria de ver o resultado final do exercício aqui.
2. Abra o documento audio_inicio.fla
3. Observe a camada Actions com stop();
   A camada layout com um layout exemplo para o “site”
   E a camada audio que é onde vamos principalmente trabalhar
   
4. Na camada Audio temos 2 bitmaps representando os botões play e stop
5. Vamos trabalhar esse mini sistema de navegação dentro de um MovieClip, por isso, selecione cuidadosamente os 2 bitmaps (play e stop) e pressione F8 para converter em um MovieClip de nome mcAudio
   
6. Clique duas vezes no MovieClip criado para edita-lo
7. Renomeie a camada Layer 1 do movie clip , que contém os bitmaps, para bt design
8. Crie mais 3 camadas acima:
   • bt hit à onde vamos colocar os símbolos botão para o click
   • bt claro à onde vamos dar a impressão de que, enquanto a música está tocando, o botão play está desativado, clareando sua aparência
     
   • actions à Para manter o Movie Clip parado com stop();
9. Extenda a camada bt design até o frame 2, clicando no frame 2 e pressionando F5
   (O design dos botões ficarão visíveis nos 2 momentos da interação)
10. Coloque um stop(); no primeiro keyframe da camada Actions

Preparando a aparência dos botões play e stop

1. Desenhe um círculo branco na camada bt hit do tamanho do botão play
2. Converta para um símbolo gráfico de nome grClaro
   
3. Coloque um keyframe (F6) no frame 2 da camada bt claro e ajuste a instância de grClaro no tamanho e posição do botão stop
   

Criando os botões reais

2. Trave todas as camadas e destrave a camada bt hit. Está na hora de criarmos os botões reais.
3. Selecione a camada bt hit
4. Abra a biblioteca (F11)
5. Selecione o primeiro Keyframe da camada bt hit
6. Arraste uma instância de grClaro para o palco
7. Converta(F8) grClaro em um símbolo botão de nome btHit

8. Clique duas vezes no símbolo btHit criado para edita-lo

9. Arraste o keyframe que está no estágio UP para o estágio HIT.
   (queremos somente uma área sensível do botão para o click sem nada visível)
10. Retorne para a edição do MovieClip mcAudio
    
11. Ajuste o btHit no tamanho e posição do desenho de stop
    
12. Crie um Keyframe (F6) no frame 2, ainda da camada bt hit
13. Ajuste a instância de btHit no tamanho e posição do desenho de play
    

Colocando a música de fundo

1. Crie uma nova camada abaixo da camada Actions com o nome Audio (lá vamos colocar a música de fundo)
2. Certifique que esta camada só tenha um keyframe no 1 e sem extensão até o frame 2.
   
   
3. Selecione o Keyframe 1 e defina o arquivo de audio bgsound.mp3, já na biblioteca, usando a barra de propriedades.
4. Marque a opção loop no campo sync
   
5. Pressione Ctrl + Enter para conferir se a música está tocando
6. feche o preview e vamos continuar

Incluindo ações nos botões

1. Trave todas as camadas e destrave a camada bt hit
2. Selecione, clicando uma única vez, a instancia de botão sobre o desenho de stop
3. Acesse o painel de ações (F9)
   
4. Insira as seguines ações com evento on (Release):
   • stopAllSouds(); (para todos os sons)
   • gotoAndStop(); (apontando para o frame 2, que não tem audio, lembra?)
     
5. Feche o painel de ações
6. Vá até o frame 2 e selecione, clicando uma única vez, a instancia de botão sobre o desenho de play
7. Insira a ação gotoAndPlay() com o evento on(Release); (apontando para o frame 1, que tem a música, lembra?)
   

Resultado final

1. Veja se seu resultado ficou igual ao modelo que está aqui.

Resumão

1. Preparamos a radio m movie clip com um stop no frame 1
2. Dentro dele o visual dos botões e os botões clicáveis, sendo que o play só fica disponível quando o som está parado e o stop só fica disponível quando o som está reproduzindo
3. Para deixar mais atraente vamos dar um efeito como se o botão indisponível estivesse mais claro, ou inativo. Para isso usamos um símbolo gráfico com alpha.
4. Quando clicamos no botão stop, damos um stopAllSounds(); e mandamos o usuário para o frame 2, que não tem música.
5. Quando clicamos no botão play, damos um gotoAndPlay(1); forçando a reprodução novamente.

Conclusão

Espero que tenham aparoveitado. Dúvidas, sugestões e críticas -> escrevam para hugodias@meetweb.com.br