Nome: n.º 3º AT, BT, CT WEB Barueri, 18 / 08 / 2009 2ª Postagem Disciplina: PRMD AULA 02 MANIPULAÇÃO DE CLIPES DE FILME E CONTROLE DE NAVEGAÇÃO Aluno(a), Este segundo material on-line é dedicado a novos conteúdos referentes ao segundo semestre. Neste material, enfatizamos os temas necessários que prosseguirão o conteúdo articulado no semestre anterior. É importante que as atividades sejam realizadas e entregues no prazo estipulado, pois os conteúdos abordados tanto no próximo material quanto na sala de aula dependem do conhecimento adquirido por meio desta aula. O material necessário para a execução das atividades estão disponíveis no grupo do Yahoo. Bom estudo! Plantão de dúvidas As possíveis dúvidas que você possa ter em relação à realização destas atividades ou sobre qualquer outro assunto pertinente a essa ou outra disciplina que estudamos juntos, terei prazer em respondê-las por e-mail ou pelo MSN prof_bassi@hotmail.com. Instruções para encaminhamento das atividades As atividades são individuais e deverão ser entregues em um único arquivo para o e-mail prof_bassi@hotmail.com. O nome do arquivo deve ser formado pelo nome, número de chamada, série/turma, disciplina e aula. Por exemplo: josé_silva_nº21_3ºat_prmd_aula_02.doc. Favor não enviar o arquivo no formato.docx.
MANIPULAÇÃO DE CLIPE DE FILME FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF A manipulação de clipes de filme (Movie Clips) ocorre por meio de uma gama de comandos Actions Script, que podem ser considerados, analogicamente, como os botões de um controle remoto. Na manipulação de clipes de filme, é comum comandos como play( ), stop( ), nextframe( ), prevframe( ) etc. Cada um deles corresponde ao seguinte comportamento: - play ( ): inicia a execução um Movie Clip; - stop ( ): para a execução de um Movie Clip; - nextframe ( ): avança para o próximo frame do Movie Clip; - prevframe( ): volta para o frame anterior do MovieClip; Exemplo 01 Imagine a seguinte situação. Um clip de filme com cinco frames, em que cada frame contém um número referente ao frame atual. Por exemplo, o frame um exibe o número 1; o frame dois, o número 2 etc. Nesse clip de filme existem quatro botões, de modo que cada um determinado comportamento, conforme demonstra a imagem abaixo: Volta um frame Para a Exibição Inicia a Exibição Avança um frame
Agora vamos atribuir aos botões os comandos referentes aos comportamentos que eles devem executar. Uma vez inseridos os botões no palco (stage), é necessário instanciá-los na barra de propriedades. Os nomes das instâncias são bt_prev, bt_stop, bt_play, bt_prev: Vamos começar pelo botão bt_stop, porque o filme, quando iniciado, irá passar por todos os frames, continuamente. Primeiro, é necessário criar um layer que contenha apenas os Actions Scripst. Uma vez criado esse layer, aperte F9 para que seja aberto o painel Action. Para que o botão bt_stop pare a exibição de um filme, é necessário atribui a ele um Listener, portanto: bt_stop.addeventlistener Como o botão será acessado por meio do mouse, então, o evento ao qual o Listener deverá observar é um evento de mouse. Logo: bt_stop.addeventlistener(mouseevent Não se trata apenas de avisar ao Listener que se trata de um evento de mouse. É necessário especificar qual evento o Listener deve estar atento. Por isso: bt_stop.addeventlistener(mouseevent.click Uma vez indicado ao Listener qual o evento que ele deve estar atento, deve-se indicar também qual função que ele deve executar quando for detectado um clique no botão bt_stop. Portanto: bt_stop.addeventlistener(mouseevent.click, parafilme); Uma vez indicado o nome da função que será executada, deve-se codificar a função que irá parar a execução do Clipe de Filme: function parafilme(e:mouseevent) { stop( ); } O seu painel Action deve ficar como indicado pela imagem a seguir:
Atividade 01 FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF Prazo de entrega: 23/08/2009 A codificação dos outros botões segue o mesmo paradigma do bt_stop, ou seja, é necessário atribuir um Listener e o evento é o mesmo para todos os botões, variando, apenas, o nome da função evocada por cada Listener. Sabendo disso, faça o Script dos botões que faltaram.
VAI PRA ONDE? Um dos recursos mais utilizados tanto no controle de filme quando no controle de navegação é o goto (ir para). O goto é um de navegabilidade que permite ao usuário ir para o frame ou cena que desejar. Esse conceito se manifesta por meio de dois comandos: - gotoandplay( ): vai para um determinado frame e executa o Movie Clip; - gotoandstop ( ): vai para um determinado frame e para o MovieClip. Bom, vamos imaginar que você tenha feito a atividade anterior antes de chegar aqui (kkkkk). Nesse caso, você deve ter percebido que, quando você clica no botão bt_next quando a animação está no frame 1, não acontece nada. Isso (não) acontece, porque não existe nenhum frame antes do frame 1; logo, não há para onde ir. O mesmo acontece com o botão bt_prev. Como o Movie Clip tem apenas cinco frames, ao clicarmos no bt_prev não acontece nada. Vamos, então, resolver o problema do botão bt_next, de modo que, ao atingir o frame 1, o Movie Clip avance para o frame 5. A adaptação da função nextquadro( ) ocorrerá da seguinte forma: Você deve estar se perguntando Quem é currentframe?. O currentframe é uma propriedade do Flash que retorna o número do frame atual. No exemplo acima, estamos verificando se a função está sendo execuatada no frame 1. Se for o caso, então ela avança para o frame 5 e para a animação (gotoandstop(5)), para dar continuidade ao Movie Clip. Se quiséssemos que a animação fosse executada a partir do frame 5, usaríamos gotoandplay(5).
Atividade 02 FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF Prazo de entrega: 23/08/2009 Acho que você já deve saber do que se trata essa atividade. Mas, só para garantir, vamos lá: ajuste a codificação do bt_prev para que o Movie Clip, ao chegar no frame 5, retorne para o frame1.
CONTROLE DE NAVEGAÇÃO FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF Controlar a navegação em Flash não é muito diferente de se manipular um clip de filme. Basicamente, são os mesmos comando. O que vai diferir é o modo de usar o goto e o número de vezes em que ele é usado. Imagine um site com apenas três botões: home, produtos e contato. Provavelmente, se houver pouca animação, esse site pode ser executado em apenas uma timeline. Por exemplo, do frame 1 ao frame 9 se trata do home ; do frame 10 ao frame 30 se tratado produto e do frame 31 ao 35, do contato. Por outro lado, se houver muita animação ou se o site for dividido em diversos compartimentos (se pensarmos em tema/tópico, então, o site teria muitos tópicos e subtópicos), usar apenas uma timeline não seria viável, devido ao trabalho que daria manipular uma timeline tão grande. Tão pouco seria profissional. Para resolver a questão, o Flash permite que se trabalhe com cenas. Trabalhando com cenas O uso de cenas permite organizar a aplicação em Flash de modo mais profissional. Vamos imaginar um site de uma editora pequena, que contenha os seguintes tópicos: home, produtos, serviços, contato. Vamos chamar nossa editora de Editora São. O site dessa editora é feito em Flash e possui a seguinte HP: Tudo bem, de repente você não foi muito com a cara desse site. Mas, tudo bem. A finalidade é mostrar como funcionam alguns controles. Então, vamos lá.
Criando os botões Antes de chegarmos no controle da navegabilidade do tal site, vamos fazer os botões. Esse botão é o mesmo que vimos em Criando botões, só que sem o texto no botão. Esse botão é uma mistura de Button e Movie Clip. Partindo do pressuposto que você já sabe como fazer o botão azul, vamos ao Movie Clip. Uma vez criado o botão, transforme-o em Movie Clip apertando F8. Chame-o de mc_home: Criado o botão, dê dois cliques, de modo que acesse o interior do Movie Clip. Você precisará criar quatro layers: um para os actions, um para o botão, uma para a máscara e um para o texto. Hein? Máscara!? Sim, máscara... calma que a gente chega lá. No layer botão deixe o desenho do botão, no layer texto escreva HOME em duas linhas sobre uma caixa azul de 74 x 74px. Sua tela deve ficar mais ou menos assim:
Agora siga as instruções: 1. copie o fundo azul do layer texto no frame 1 do layer máscara ; 2. trave o layer texto com o cadeado; 3. arraste a caixa azul do layer máscara, de modo que a parte superior da caixa fique debaixo do botão; 4. 5. clique com o botão direito sobre o frame 1 do layer botão e escolha Motion Tween ; 6. clique com o botão direito sobre o frame 1 do layer máscara e escolha Motion Tween ; 7. clique no frame 20 do layer botão e aperte F6; 8. faça o mesmo no layer máscara 9. clique no frame 20 do layer texto e aperte F5; 10. no frame 20 do layer botão, leve o botão para cima da caixa azul do layer texto ; 11. no frame 20 do layer máscara, posicione a caixa azul conforme o item 3 ; o layer texto deve ficar coberto pela caixa azul do layer máscara;
12. copie o frame 1 do layer botão e cole no frame 40; 13. faça o mesmo no layer máscara ; 14. clique no frame 40 do layer texto e aperte F5; 15. clique no frame 1 do layer actions, aperte F9 e digite stop( ) no painel Action. Faça o mesmo no frame 20. 16. clique com o botão direito do mouse sobre o layer máscara e escolha a opção Mask. Ao fazer isso, o layer máscara funcionará como uma máscara, de modo que só ficará visível o espaço interno da caixa azul que serve de máscara. Não entendeu? Então posiciona o cabeçote da timeline no frame 1 e aperta Enter. Conforme a caixa azul do layer máscara se move, ela vai exibindo o conteúdo do layer texto. Observe que o layer texto está encaixado no layer máscara : 17. Volte para o palco principal, vá até a biblioteca do Flash à direita da tela e clique com o botão direito sobre o movie clip mc_home e escolha Duplicate; na caixa de diálogo, digite mc_produtos
18. dê dois cliques no mc_produtos e mude o texto de home para produtos. Se você teve coragem de chegar até aqui, você deve estar com dois botões funcionando. Agora, vamos fazer uma animaçãozinha na home só pra deixar a parada mais interessante. Fazendo a animação da Home Bom, você vai ter quatro layer. Uma contendo os botões, outra com uma imagem de livros, outra com um texto sobre a editora e um layer para inserir os scripts:
Faça o seguinte: 1. clique com o botão direito no frame 1 do layer texto e escolha Motion Tween ; 2. faça o mesmo com o layer livros ; 3. clique no frame 20 do layer texto e aperte F6; 4. faça o mesmo com o layer fotos ; 5. clique no frame 20 do layer botões e aperte F5; 6. no frame 20, posicione os objetos como na imagem abaixo: Bom, agora tudo pronto para começarmos a controlar a navegação. Criando as cenas A primeira coisa que deve ser feita é instanciar os botões no painel de propriedades. Vamos chamar o mc_home de bt_home e o mc_produtos de bt_prod. Feito isso, clique no frame 20 do layer Actions, aperte F7 e, depois, F9. Vamos começar a codificar. O primeiro passo é colocar um stop( ). Depois vamos atribuir dois listeners ao bt_home para que ele volte para a cena home. Hm? Q cena home? Tá... calma... O primeiro listener diz respeito à própria animação do botão, portanto, o evento que será observado por esse listener é quando o mouse está sobre o botão (MOUSE_OVER). Quando o mouse estiver sobre o botão, ele executa uma função (que se chamará exechome ) que dispara a animação do botão:
Vamos precisar criar um listener para quando o usuário clicar no botão home ele volte para a página Home. Mas, antes, vamos criar a cena home. Para criar a cena, aperte SHIFT+F2. Ao fazer isso, irá se abrir uma caixa de diálogo. Dê dois cliques em Scene 1 e renomeir para home : Bom, eu não quero decepcionar você, mas, na verdade, você não criou nenhuma cena... apenas renomeou a que já existia. A verdade é que, ao iniciar um arquivo.fla, o Flash gera automaticamente o uma cena, que é Scene 1. Você até poderia deixar esse nome mesmo, mas para esse pequeno projeto, o ideal é utilizar nomes que estejam de acordo com ele. Agora,vamos criar um listener para que o usuário, ao clicar (CLICK) em Home, volte para esta cena. O nome da função que o listener irá chamar é gohome :
Observe o uso do gotoandplay( ). Ele não apenas indica o frame, mas também a cena em que o Flash deve ir. Execute a animação e perceba que ela sempre volta ao início. Bom, isso não quer dizer grande coisa ainda, por isso, vamos criar uma nova cena. Aperte SHIFT+F2 e clique no ícone Duplicate Scene. Em seguida, renomeie a cena para produtos : Você vai perceber que tudo continua igual. Fizemos isso, porque vamos utilizar o mesmo layout. Clique em home para voltar à cena anterior, abra o painel Action e crie dois listeners para bt_prod, do mesmo modo que foi feito para o bt_home. Um listener para o MOUSE_OVER, que executará uma função chamada execprod e um listener para o CLICK, que executará a função goprod. A função goprod levará o Flash para a cena produtos :
Bom, existe um problema que precisamos resolver. Quando você duplicou a cena, os actions que existem na cena home estão duplicado na cena produtos. Portanto, aperte SHIFT+F2 para ir até a cena produtos e apagar as actions que estão lá, deixando apenas o comando stop ( ). Aproveita a viagem para apagar o layer texto e inverter a animação do layer livros. Agora, crie um novo layer, chamado produtos e insira a imagem produtos.jpg no palco. Faça uma animação para ela, de modo que ela venha em sentido contrários aos livros que já estão no palco: Quando você executar o filme e ficar feliz pra caramba em vê-lo funcionar, você vai perceber que os botões não funcionam na cena produtos. Para resolver esse problema, precisamos fazer alguns ajustes nos scripts. O truque é o seguinte: para que as actions da cena home funcionem na cena produtos, é necessário colocá-las em uma função. Uma vez criada a função, ela deverá ser chamada no início de cada cena, tanto na home quanto na produtos. Portanto, abra a janela Actions na cena home e faça isso:
Para finalizar, insira a linha funciona( ) abaixo do stop ( ) da cena produtos e voi la! Agora você consegue navegar entre duas cenas. Atividade 03 FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF Prazo de entrega: 23/08/2009 1. Complete a animação com os botões serviços e contato. 2. Os botões apresentam um problema. Quando eles sobem, não descem mais. Ou melhor, descem quando o mouse volta sobre eles. Para consertar isso, é necessário colocar um listener para o evento MOUSE_OUT. Faça, portanto, esse ajuste nos scripts dos botões.