Baixe Edição de filmes Flash: dividir cenas, botões interativos e importar sons e outras Notas de estudo em PDF para AutoCAD, somente na Docsity!
LIÇÃO 4: CENAS, AÇÕES E BOTÕES
OBJETIVOS
Quando você terminar essa lição, você entenderá:
- porque desmembrar um filme em cenas economiza tempo
- os quatro estados de botão
- como ações tornam botões interativos
e você terá aprendido:
- como inserir uma cena
- como usar o Inspetor de cena
- como renomear uma cena e como alterar a ordem das cenas
- como anexar uma ação a um quadro
- como anexar uma ação a um estado de um botão
- como usar os comandos Parar e Ir para
EXERCÍCIOS
CENAS
Cenas fornecem uma maneira de dividir e dominar um grande projeto para que ele não fique fora de
controle. Você pode usar cenas para organizar o filme tematicamente. Como cada cena tem suas
próprias camadas e Linha de tempo, você trabalhará com trechos menores e mais manejáveis—
especialmente importante quando você começar a revisar e a efetuar mudanças. Você pode
facilmente ver quanto tempo desperdiçaria rolando por uma Linha de tempo com 1000 quadros ou
mais de 50 camadas.
Cada cena também tem seu próprio trabalho ilustrativo, então,
quando ele for compartilhado entre as cenas, certifique-se de
usar símbolos. Sem símbolos, o trabalho ilustrativo deverá ser
duplicado, tornando seu filme final maior e mais lento.
Nesse exercício, você criará uma cena para a ilustração da
praia que você rastreou na lição 2.
Para usar cenas para organizar um filme:
- Abra boat21.fla da pasta Lesson4.
- Selecione Inserir > Cena para criar uma nova cena (Veja a figura 4-1). Figura 4- Criando uma nova cena.
A nova cena tem um Palco vazio com o segundo plano amarelo claro selecionado para o filme, uma Linha de tempo vazia e uma camada vazia. A Biblioteca está inalterada. No topo da Linha de tempo está uma guia com o nome de uma nova cena, Cena 2 (Veja a figura 4-2).
Figura 4- A nova cena tem uma Linha de tempo vazia e uma camada vazia.
- Selecione o ícone Editar cena. Está no canto superior esquerdo da sua tela, acima da Linha de tempo. Parece com as claquetes usadas para indicar Tomada 1 quando se faz um filme. Duas cenas estão listadas no menu pop-up Edição de cena: Cena 1 e Cena 2.
- Clique em Cena 1 no menu pop-up Edição de cena para voltar para Cena 1 (Veja a figura 4-3).
Figura 4- Clique em Cena 1 no menu pop-up Edição de cena para voltar para Cena 1.
- Arraste para baixo na parte inferior da Linha de tempo para expandi-la até que você possa ver todas as seis camadas.
- Clique no primeiro quadro da camada Beach.
- Clique com o botão direito do mouse (PC) ou com Cmd (Mac) no quadro realçado e selecione Copiar quadros do menu pop-up (ou selecione Editar > Copiar quadros).
Para renomear cenas e alterar sua ordem:
- Abra boat23.fla na pasta My Work ou na pasta Lesson4.
- Selecione Janela > Inspetores > Cena e, então, realce a Cena 1.
- Clique no botão Propriedades. A caixa de diálogo propriedades da cena se abre. Digite o novo nome da cena, Boat, na caixa de texto Nome e clique em OK (Veja a figura 4-6). O rótulo na guia acima das camadas agora exibe “Boat” (você talvez tenha que mover a caixa de diálogo Propriedades da cena para ver o rótulo).
Figura 4- Digite Boat na caixa de texto Nome de Propriedades da cena.
- No Inspetor de cena, realce Cena 2 e clique no botão Propriedades. A caixa de diálogo Propriedades da cena se abre. Digite o novo nome,
beach , na caixa de texto Nome e clique em OK.
O rótulo na guia, acima das camadas, exibe “Beach.”
- Posicione o cursor sobre “Beach” no Inspetor de cena. Pressione o botão do mouse e mantenha-o pressionado enquanto arrasta Beach para o topo da lista (Veja a figura 4-7). Agora Beach é a primeira cena do filme.
Você adicionará quadros estáticos à Linha de tempo de
Beach para que a imagem fique na tela tempo suficiente
para ser vista.
- Selecione Quadro 10 da camada Beach. Clique com o botão direito do mouse (PC) ou com Cmd (Mac) e selecione Inserir quadro (ou selecione Quadro do menu Inserir).
- Salve o arquivo como boat24.fla na pasta My Work. Feche o arquivo. Figura 4- Arrastando a cena Beach para o topo da lista.
AÇÕES
Se o divertimento, no Flash, está na arte e nas animações, o poder está nas ações. Use ações para
fazer algo acontecer quando o filme chegar a um determinado quadro ou quando o participante
visualizador interagir com o filme pressionando um botão ou digitando informações em um formulário.
O Flash forneceu algumas ações simples que você pode configurar com um clique de mouse. No Flash
4, os profissionais de desenvolvimento têm o conjunto de ferramentas que necessitam para criar
ações muito sofisticadas. Configurar ações sofisticadas exige conhecimento de programação e está
além do escopo dessas lições.
No próximo exercício, você aprenderá a anexar uma ação a um quadro para que a ação seja ativada
quando o filme chegar àquele quadro. Ações também são, muitas vezes, anexadas a botões para que
quando o cursor passar por cima de um botão, a ação seja ativada.
Criar uma camada separada para ações, como a camada Actions and Labels no exercício abaixo, é
uma boa idéia.
No filme terminado, o filme acaba no fim da cena Beach. Para reproduzir a cena Boat, o visualizador
participante precisa clicar no botão Duckhead, que estará posicionado ao final da cena Beach. Nesse
momento, seu filme não pára ao final da cena Beach, mas nesse exercício, você criará uma ação para
parar o filme. Mais tarde você configurará o botão Duckhead para que ele inicie a próxima cena.
Para anexar uma ação a um quadro:
- Abra boat24.fla na pasta My Work ou na pasta Lesson4.
- Selecione Controle > Reproduzir todas as cenas. Então, pressione Ctrl+Alt+R (PC) ou Cmd+Opt+R (Mac) para rebobinar o filme e pressione Enter (PC) ou Return (Mac) para reproduzir todas as cenas no filme. O filme reproduz, movendo da primeira cena (Beach) para a segunda cena (Boat) sem pausa.
- Selecione a cena Beach do menu pop-up Cena. Clique no ícone Adicionar uma camada na parte inferior da Linha de tempo. Ele parece um sinal de mais em uma folha de papel com um canto dobrado na parte inferior à direita.
4. Dê um duplo clique no nome da camada e renomeie-a Actions and Labels. Selecione o Quadro 10
da camada Actions and Labels. Clique com o botão direito do mouse (PC) ou com Cmd (Mac) e selecione Inserir quadro-chave (ou selecione Quadro-chave do menu Inserir).
BOTÕES
Parar o filme anexando uma ação a um quadro foi fácil. Agora você deseja adicionar navegação ao seu
filme para que o usuário possa escolher avançar para a próxima cena. Você está pronto para botões.
No próximo exercício, você fará um botão de um símbolo gráfico existente. Então, você editará a
ilustração para que o botão tenha uma aparência diferente quando você mover seu cursor sobre ele,
quando você clicar no botão e quando você liberá-lo. Mais tarde você adicionará uma ação ao botão.
Primeiro você fará uma cópia do símbolo do clipe do filme Duckhead e alterará o comportamento do
símbolo de clipe de filme para botão.
Para fazer um botão:
- Abra boat25.fla na pasta My Work ou na pasta Lesson4. A cena da praia é aberta.
- Clique no ícone Adicionar uma camada na parte inferior da Linha de tempo à esquerda.
Dê dois cliques no nome da camada para renomeá-la Duck Button.
- Selecione Quadro 1 na camada Duck Button. Selecione Inserir > Novo símbolo. Denomine o
novo símbolo como Duck Button e selecione Botão como seu novo comportamento.
A janela de edição de símbolo se abre, exibindo uma nova Linha de tempo com uma camada e um quadro-chave.
O botão Linha de tempo é diferente dos outros que você já viu. Ele tem quatro rótulos—Para cima,
Sobre, Pressionado e Tocar—que correspondem aos quatro estados de botão, a seguir (Veja a figura 4-
11).
Figura 4- O botão Linha de tempo e quatro rótulos: Para cima, Sobre, Pressionado e Tocar.
- Para cima: O estado do botão quando ele estiver no Palco.
- Sobre: O estado ativado quando rolar sobre o botão com o cursor.
- Pressionado: O estado ativado quando você clicar no botão.
- Tocar: Define a área do botão que está ativa—ou seja, a área que você pode clicar para ativar a ação.
Primeiro, você precisa importar e centralizar a imagem duckhead.swf.
- Selecione Arquivo > Importar e importe duckhead.swf da pasta Lesson4. Selecione a ferramenta Seta e desenhe uma moldura de caixa de seleção para selecionar a ilustração.
- Selecione Janela > Inspetores > Objeto. Selecione Usar Ponto central e digite 0 para as posições x e y. A ilustração é centralizada na cruz no centro do Palco.
Somente o primeiro quadro no botão Linha de tempo, rotulado Para cima, tem um quadro-chave. Você
precisa adicionar quadros-chave aos outros quadros e você precisa modificar a ilustração para que o
botão tenha uma aparência diferente nos diversos estados. Você pode deixar a ilustração como ela
está para o estado Para cima. Para o estado Sobre, você alterará a cor da ilustração nos próximos
passos. Então, no próximo exercício, você anima o estado Pressionado do botão com o clipe de filme
de Interposição de forma que você criou na lição 3.
Primeiro, você precisa inserir um quadro-chave nos outros três quadros.
- Selecione o quadro Sobre e pressione F6 para inserir um quadro-chave. Um ponto preto aparece no quadro Sobre, indicando que ele é um quadro-chave e que tem conteúdo (a ilustração da cabeça do pato).
- Selecione o quadro Pressionado e pressione F6 para inserir um quadro-chave. Selecione o quadro Tocar e pressione F6 para inserir um quadro-chave. Agora você tem seus quadros-chave e cada um contém a ilustração Duck Button.
Lembre-se que o quadro Tocar é diferente dos outros, ele define a área na qual você pode clicar para
ativar a ação. Você define a área Tocar desenhando um retângulo um pouco maior que o botão no
Palco.
- Selecione a ferramenta Retângulo com o preenchimento atualmente selecionado e desenhe um retângulo no Palco um pouco maior que a ilustração do botão.
- Selecione o quadro Sobre e selecione a Lata de tinta (U) da barra de ferramentas de desenho. Clique no modificador de Preenchimento e selecione um azul claro acinzentado da paleta de cores. A cor no modificador de Preenchimento altera para o azul que você selecionou.
- Com a ilustração do pato selecionada, selecione Modificar > Desmembrar. O preenchimento está pontilhado e as linhas estão listradas.
- Agora, utilize a Lata de tinta para alterar o preenchimento para azul. Essa ilustração é para o estado Sobre do botão; quando você mover o cursor sobre o botão, você verá o contorno do pato com um fundo azul (Veja a figura 4-12).
- Agora você pode testar seu botão. Primeiro, feche a janela atual clicando na guia Beach, pressionando Ctrl+E (PC) ou Cmd+E (Mac) ou selecionando Editar > Filme.
- Selecione Controle > Ativar botões (Veja a figura 4-
- e selecione o Quadro 10 da cena Beach. Mova seu cursor sobre o botão Duck. O botão se altera. O botão agora é um contorno da cabeça do pato com um fundo azul claro.
- Selecione o menu Controle novamente e cancele a seleção de Ativar botões. Salve seu arquivo como
boat26.fla na pasta My Work. Feche o arquivo.
Obs.: Quando Ativar botões estiver selecionado, você não poderá selecionar e editar um botão no Palco.
Figura 4- A cor alterada do botão e do contorno para o estado Sobre.
Figura 4- Selecione Controle > Ativar botões antes de testar seus botões.
Para ver como o clipe de filme funciona, você deve testar o filme. Clipes de filme não exibem quando
você reproduz o filme no Palco.
- Pressione Ctrl+Enter (PC) ou Cmd+Return (Mac) para testar o botão. Como você anexou uma ação Parar ao Quadro 10, o filme pára ao final da cena Beach.
- a. Olhe o botão antes de mover o cursor em sua direção. A cabeça do pato está verde e seu corpo marrom claro. Esse é o estado Para cima. b. Role o cursor sobre o botão. A cabeça e o corpo do pato aparecem como contornos contra um fundo azul claro. Esse é o estado Rollover. c. Clique no botão e segure. O clipe de filme é reproduzido. Esse é o estado Pressionado. O botão ainda não funciona porque ele não tem uma ação anexada a ele. Você anexará a ação no próximo exercício. d. Libere o botão e afaste o mouse do botão. O botão está novamente em seu estado Para cima com o pato verde e marrom claro.
10. Salve o arquivo como boat27.fla na pasta My Work.
ADICIONANDO UMA AÇÃO DE BOTÃO
É claro que o real objetivo de botões é o de adicionar interatividade. No próximo exercício, você usará a ação Ir para para configurar a navegação do último quadro da cena de Carregamento para o primeiro quadro na cena de Introdução. Enquanto o filme estiver precarregando, seu visualizador talvez olhe para outro lugar ou até mesmo vá embora. Você deseja que os visualizadores cliquem no botão Duck para começar a introdução de modo que você saiba que você tem sua atenção.
Para preparar para a ação, você adicionará um rótulo denominado Build ao Quadro 1 da cena Boat. Adicionar um rótulo é uma boa idéia para que você possa usar um rótulo ao invés de um número de quadro para especificar o quadro para o qual você deseja ir.
Usar um rótulo de quadro é freqüentemente mais confiável porque as revisões acarretam alterações nos números dos quadros. Como o rótulo é exibido na Linha do tempo, você poderá facilmente diagnosticar e solucionar problemas de uma ação Ir para que seja desviada. Muitas pessoas acham o rótulo mais fácil para recordar com precisão, o que ajuda a prevenir erros de programação por descuido.
Depois de criar o rótulo, você configurará a ação na guia Ações da caixa de diálogo Propriedades. Ir para é um dos conjuntos de ações que você pode “programar” sem conhecer código algum, pois o Flash configurou opções de menu para ajudá-lo a construir o código passo a passo.
O Flash 4 contém um completo conjunto de ferramentas de ações para os profissionais de
desenvolvimento usarem. Ações mais sofisticadas exigem que você conheça o básico de
programação.
Para adicionar uma ação de botão:
- Abra boat27.fla na pasta My Work ou na pasta Lesson4.
- Selecione a cena do barco do menu pop-up Cena acima da Linha de tempo. Agora você está na cena Boat, com a Linha de tempo de Boat exibida.
- Clique no ícone Adicionar camada na base da Linha de tempo para adicionar uma camada ao seu
rótulo. Dê dois cliques no nome da camada e digite Actions and Labels como o nome dela.
Selecione Quadro 1 na camada Actions and Labels e clique com o botão direito do mouse (PC) ou com Cmd (Mac). Do menu pop-up, selecione Propriedades. A caixa de diálogo Propriedades do quadro se abre.
4. Selecione a guia Rótulo e digite begin na caixa de texto Nome. Selecione Rótulo como o
Comportamento e, então, clique em OK (Veja a figura 4-16).
Figura 4- A guia Rótulo da janela Propriedades do quadro.
Uma pequena bandeira vermelha aparecerá no Quadro 1 e a palavra “begin” será exibida ao lado do quadro (Veja a figura 4-17).
Figura 4- A Linha de tempo, exibindo o rótulo e a bandeira.
- Clique na cena Beach no pop-up cena para abrir a Linha de tempo da Cena Beach. Selecione Quadro 10. Clique uma vez no botão Duck no Palco para selecioná-lo. Clique com o botão direito do mouse (PC) ou com Cmd (Mac) no botão e selecione Propriedades do menu pop-up (ou selecione Modificar > Ocorrência). A caixa de diálogo Propriedades da ocorrência se abre.
- Localize Ir para e Parar (1) no topo do painel Ações. No painel Parâmetros, clique na seta para baixo ao lado da caixa de seleção de Cena e selecione Boat como o nome da cena para onde você deseja que a cena vá. No painel Ações, a segunda linha de código altera para Go to and Stop [Boat, 1], o que significa que você deverá ir para a cena Boat, quadro 1.
- Na área do Quadro do painel Parâmetros, selecione Rótulo e selecione Begin da lista de rótulos (é o único rótulo nessa cena). O código no painel Ações altera para Go to and Stop [Boat, “Begin”], o que significa que você deverá ir para a cena Boat, para o quadro rotulado “Begin”.
Obs.: As aspas em “begin” dizem ao programa que a palavra não é um comando de programação e
sim, uma seqüência (nesse caso, uma seqüência de letras) que você digitou. Uma seqüência também
pode ser uma série de números ou uma mistura de letras e números.
- Na parte inferior do painel Parâmetros, selecione a caixa ao lado de Ir para e Reproduzir. A segunda linha de código altera para Go to and Play [Boat, “Begin”] (Veja a figura 4-20). Isso é como programar com um amigo “soprando” o código correto no seu ouvido—ou melhor ainda, já que você não pode incorrer em erro de ortografia.
Figura 4- A guia Ações após você ter feito suas opções.
- Clique em OK para fechar a caixa de diálogo e, então, pressione Ctrl+Enter (PC) ou Cmd+Return (Mac). Seu filme reproduz a cena Beach e pára. Quando você clica no botão Duck, o filme navega até a cena Boat e a reproduz até o fim.
11. Selecione Janela > boat27.fla para voltar ao arquivo Flash. Salve seu arquivo como boat28.fla na
pasta My Work.
TAREFA DA SEÇÃO
- Altere a ação da ocorrência Duck Button no Quadro 10 da cena Beach para que você vá para o último quadro da cena Boat quando você liberar o botão.
- Altere a cor do estado Rollover do botão Duck.
Obs.: Você deve estar com Controle > Ativar botões desativado antes que você possa selecionar e
editar um botão.
No próximo exercício, você adicionará um som de gansos em uma lagoa que reproduzirá quando o
visualizador pressionar o botão Duck e ativar o estado Pressionado. A ação do visualizador é chamada
de “evento”, e um som ativado por um evento é chamado “som de evento”. Um som de evento é como
um clipe de filme pois ele é inserido em um quadro e é reproduzido até terminar, independentemente
do que mais esteja ocorrendo na Linha de tempo de filme.
Ambos os sons que você importará são arquivos estéreo de 16-bits e 44kHz. Isso lhe dará uma série
de opções na hora de compactar, que virá na lição Publicar a seguir.
Para adicionar som a um evento:
- Abra boat28.fla na pasta My Work ou na pasta Lesson5.
- Clique no botão Lista de símbolos do lado superior direito da Linha de tempo e, então, clique no símbolo Duck Button. Uma nova janela se abre, onde você pode editar o símbolo.
- Clique no ícone Adicionar camada para adicionar uma nova camada. Dê dois cliques na camada e
nomeie-a sound.
- Selecione a quadro Pressionado da camada do som. Pressione F6 para inserir um quadro-chave.
- Selecione Arquivo > Importar. Se você estiver trabalhando em um PC, selecione WAV como o tipo de arquivo e abra o arquivo de som geese.wav. Se você estiver trabalhando em um MAC, selecione AIFF como o tipo de arquivo e abra o arquivo de som geese.aif. Nada altera no Palco, mas o som é adicionado à Biblioteca.
- Pressione Ctrl+L (PC) ou Cmd+L (Mac) para abrir a Biblioteca. Com a quadro Pressionado selecionado, arraste o som geese.aif ou geese.wav e libere-o no Palco. Procure a onda sonora na quadro Pressionado. Ela parece uma linha reta.
- Clique na guia Beach para voltar ao filme ou selecione Filme da lista Editar cena do lado superior direito da Linha de tempo. Pressione Ctrl+Enter (PC) ou Cmd+Return (Mac) para testar o filme. Quando o botão Duck for pressionado, o som será ativado. Seu botão animado tem uma aparência e som incríveis.
8. Salve seu arquivo como boat29.fla na pasta My Work. Feche o arquivo.
O som que acompanha a cena Boat é tratado diferentemente. O som do oceano será “fluido” durante o
download para que a primeira parte do som possa tocar enquanto o download do resto do som está
sendo feito.
Para adicionar um som fluido:
1. Abra boat29.fla na pasta My Work ou na pasta Lesson5.
- Selecione o ícone Lista de cenas do lado superior direito da Linha de tempo e selecione a cena Boat.
- Prolongue o filme arrastando o último quadro de cada camada (exceto a camada Actions) para o Quadro 60. Para arrastar um quadro, clique para selecioná-lo, libere o botão do mouse e, então, arraste. Observe que a Interposição de movimento está ativa e gera os quadros adicionais exigidos sem nenhum esforço da sua parte. Isso dará ao barco um pouco mais de tempo para navegar pelos movimentos um tanto extremos para cima e para baixo do guia de movimento.
4. Adicione uma camada. Então, dê dois cliques na camada e nomeie-a Sound.
- Selecione Arquivo > Importar. Se você estiver trabalhando com um PC, selecione WAV como o tipo de arquivo e abra o arquivo de som ocean.wav. Se você estiver trabalhando com um MAC, selecione AIFF como o tipo de arquivo e abra o arquivo de som ocean.aif.
- Dê dois cliques em Quadro 1 para abrir a caixa de diálogo Propriedades do quadro. Clique na guia Som. Do menu pop-up Som, selecione ocean.wav (PC) ou ocean.aif (Mac).
Na caixa de diálogo Propriedades do quadro de som existem dois painéis exibindo o som: esses são
os canais direito e esquerdo do som. Entre os dois painéis existe uma Linha de tempo que pode ser
medida em quadros ou segundos (veja a Figura 5-1). Quando a Linha de tempo de Sound estiver
definida em Quadros, ela corresponderá à Linha de tempo de Movie.
No início e no fim da Linha de tempo existem barras verticais cinzas, os controles Tempo de entrada e
Tempo de saída.
Obs.: O som começa no ponto de Entrada e termina no ponto de Saída.. Os controles Tempo de
entrada e Tempo de saída são usados para alterar o ponto de Entrada e o ponto de Saída do loop.
Lembre-se que se você não pretende usar certas porções do som em qualquer lugar do filme, você
deverá retirá-las antes de trazer o som para o Flash. Criar loop no som não aumenta significativamente
o tamanho do arquivo.
Figura 5- A Linha de tempo de som.
- Pare um minuto para familiarizar-se com o painel Som. reproduza o som. Clique no ícone Mais zoom para aumentar as ondas sonoras e, então, use a barra de rolagem para ir e vir. Esse som tem um pouco menos que um segundo de duração. Clique no ícone Quadros para alterar a exibição da Linha de tempo de segundos para quadros. Esse som tem 45 quadros de duração.
- Clique em OK e feche a janela Propriedades do quadro e volte para o filme.
- Use a barra de rolagem na Linha de tempo para rolar até o fim dessa cena. A cena Boat tem 60 quadros de duração.
- Rebobine o filme e reproduza a cena. A animação é mais longa que o som que você acaba de adicionar. Você precisa fazer o som durar mais tempo para que dure até o fim da animação.
Linha de tempo
Para controlar as transições do seu som:
- Abra seu arquivo boat30.fla da pasta My Work ou Lesson5. Certifique-se que a camada Sound 1 esteja ativa. Dê dois cliques em qualquer quadro que contenha o som para abrir a caixa de diálogo Propriedades do quadro. A Linha de tempo de Sound deveria estar configurada em quadros e não segundos.
- Selecione Fade-out do menu pop-up Efeito.
Olhe para a linha de envelope a 35 quadros. A linha começa a descer da alça do Envelope,
alcançando seu ponto mais baixo no final do primeiro loop. O envelope continua em uma linha plana
até o final do segundo loop. Você deseja iniciar o Fade-out mais tarde para que o som não desapareça
completamente até o fim da sua animação.
- Arraste uma das alças superiores do envelope para o início do segundo loop (talvez você tenha que diminuir para visualizar o segmento inteiro no qual você está trabalhando).
- Arraste uma das alças inferiores do envelope para o final do segundo loop para criar um Fade-out que durará até o final da animação (veja a Figura 5-3). O Efeito altera para Custom quando você manipular o envelope.
- Defina Sinc para Stream e clique em OK para fechar a janela.
Figura 5- A linha do envelope, que indica volume.
- Rebobine e reproduza o filme. Agora seu som dura tanto quanto a animação e, então, desaparece gradualmente.
7. Salve seu arquivo como boat31.fla na pasta My Work.
Alça do envelope
Linha do envelope
TAREFA DA SEÇÃO
- Anexe um som ao estado Sobre do botão Duck.
- Adicione um som ao primeiro quadro da cena Beach.
