Lista de Exercícios de Flash Instrutor Alexandre

Transcrição

1 ÍNDICE EXERCÍCIO 01 - MOVIMENTEÇÃO ENTRE OBJETOS EXERCÍCIO 02 - MOVIMENTO COM TEXTO EXERCÍCIO 03 - MOVIMENTO SENTIDO HORÁRIO EXERCÍCIO 04 EFEITO FADE EXERCÍCIO 05 ANIMAÇÃO COM DOIS OBJETOS ADD GUIDE LAYER ADICIONAR GUIA A CAMADA(MOTION GUIDE) EXERCÍCIO 06 ADICIONAR GUIA A CAMADA EXERCÍCIO 07 DANÇA DAS LETRAS FORMA DE DEFORMAÇÃO EXERCÍCIO 08 - MOVIMENTO DE DEFORMAÇÃO EXERCÍCIO 09 DEFORMAÇÃO COM TEXTOS EXERCÍCIO 10 DEFORMAÇÃO COM IMAGENS EXERCÍCIO 11 DEFORMAÇÃO COM AUXILIO DE MARCADORES BOTÃO SIMPLES EXERCÍCIO 12 BOTÃO SIMPLES TRATAMENTO DE IMAGENS COMO TRANSFORMAR UMA IMAGEM BITMAP COMO VETORIAL COMO SIMULAR TRANPARENCIA COMO USAR UMA IMAGEM COM TEXTURA COMO USAR IMAGEM EM 3D MOVIE CLIP EXERCÍCIO 13 MOVIE CLIP EXERCÍCIO 14 MOVIE CLIP COM IMAGEM MASK MÁSCARA EXERCÍCIO 15 BANNER ANIMADO I EXERCÍCIO 16 BANNER ANIMADO II EXERCÍCIO 17 BANNER ANIMADO III EXERCÍCIO 18 BANNER ANIMADO IV SOM PAINEL DE SOM EXERCÍCIO 19 SOM EM BOTÃO EXERCÍCIO 20 BOTÃO LIGA/DESLIGA SOM EXERCÍCIO 21 CENAS USANDO GOTO EXERCÍCIO 22 HTML COM FRAMES USANDO GETURL PUBLICAÇÃO PUBLICAR PAGINA HTML PROPRIEDADES DO ARQUIVO.SWF EXERCÍCIO 23 - IMAGENS CARREGANDO EXERCÍCIO 24 IMAGENS CARREGANDO EM PORCENTAGEM EXERCÍCIO 25 ARQUIVO EM FLASH PARA IMPRESSÃO EXERCÍCIO 26 - ARQUIVO EM FLASH COMO SCREENSAVER 1

2 EXERCÍCIO 27 - COMO CRIAR GIF ANIMADO EXERCÍCIO 28 - ACTIONCSRIPT IF FRAME IS LOADED EXERCÍCIO 29 CONTADOR EXERCÍCIO 30 CONTADOR/ MOVIE CLIP EXERCÍCIO 31 AREA RESTRITA EXERCÍCIO 32 SCROOL AREA EXERCÍCIO 33 SCROOL AREA/TEXTO EXTERNO EXERCÍCIO 34 TEXTO E ANIMAÇÕES EXERCÍCIO 35 LOAD VARIABLE EXERCÍCIO 01 - MOVIMENTO ENTRE OBJETOS 01. Desenhe uma bola 02. Selecione a bola > Insert Inserir > Convert to Symbol Converter para Símbolo ou F8 03. Será exibido uma Caixa de Diálogo: 04. Selecione a linha de tempo 50 deste layer camada 05. Insert Inserir > Keyframe Chave de Quadro ou F6 06. Mantendo selecionado a linha de tempo 50, mude a pocição da bola 07. Clique com botão direito do mause entre a linha de tempo 1 e 50 > Create Motion Tweening Criar Movimento entre Objetos 08. Observe que será exibido uma seta entre os dois quadros com fundo roxo 09. Salve a animação como exer01.fla 10. Para testar a animação > File Arquivo > Export Movie Exportar Animação ou Ctrl+Enter, isto é, automaticamente o arquivo exer01.fla será criado um arquivo compactado em shockwave exer01.swf 11. Clique em File - Arquivo > Close - Fechar ou Ctrl+F4 para voltar à Cena 12. Clique com botão direito do mouse em qualquer parte da área de trabalho (cena) > Movie Properties - Propriedades da Animação 13. Background Color - Cor de Fundo > escolha uma cor 14. Clique OK 15. Salve a animação > Ctrl+Enter e teste sua animação 16. Vamos verificar as Propriedades do Quadro! 17. Window - Janela > Panels - Painéis > Frame - Quadro - Label - Rótulo - Tweening - Entre Objetos > Motion - Animação - Easing - Aceleração > está em zero, default do Flash - Rotate - Rotação: Automatic - Automática A Rotação pode ser também Clockwise - Sentido Horário e Counterclockwise - Sentido Anti-Horário - Options - Opções EXERCÍCIO 02 - MOVIMENTO COM TEXTO 01. Digite uma palavra 02. Selecione a palavra > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8 03. Será exibido uma Caixa de Diálogo: Name - Nome: digite texto1 2

3 Behavior - Comportamento > (x) Graphic - Gráfico 04. Selecione a linha de tempo 50 deste layer - camada 05. Insert - Inserir > Keyframe - Chave de Quadro ou F6 06. Mantendo selecionado a linha de tempo 50, mude a posição do texto 07. Clique com botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos 08. Observe que será exibido uma seta entre os dois quadros com fundo roxo 09. Salve a animação como exer02.fla 10. Clique na linha de tempo Selecione o texto > Modify - Modificar > Transform - Transformar > Scale and Rotate - Escala e rotação > Escala: Arraste o texto para fora da Cena, na parte superior à esquerda 13. Salve a animação > Ctrl+Enter e teste sua animação EXERCÍCIO 03 - MOVIMENTO SENTIDO HORÁRIO 01. Desenhe uma bola e pinte de uma cor gradiente, em caso de dúvida de como criar uma cor gradiente, reveja módulo Selecione a bola > Insert - Inserir >Convert to Symbol - Converter para Símbolo ou F8 03. Será exibido uma Caixa de Diálogo: Name - Nome: digite bola2 Behavior - Comportamento > (x) Graphic - Gráfico 04. Selecione a linha de tempo 50 deste layer - camada 05. Insert - Inserir > Keyframe - Chave de Quadro ou F6 06. Mantendo selecionado a linha de tempo 50, mude a posição da bola 07. Clique com o botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos 08. Observe que será exibido uma seta entre os dois quadros com fundo roxo 09. Salve a animação como exer03.fla 10. Clique na linha de tempo Selecione na Barra de Base > Show Instance - Exibir Instância 12. Será exibido o Painel de Instância: 13. Selecione Frame - Quadro 14. No painel dos Frames - Quadro: - Tweening - Entre Objetos > Motion - Animação - Rotate - Rotação: Automatic - Automática mude para Clockwise - Sentido Horário ou se preferir Counterclockwise - Sentido Anti-Horário - Times - Quantas vezes irá rodar > digite Feche o painel do Frame - Quadro 16. Clique em Frame Rate - Medida do Quadro mude a cor de fundo 17. Salve a animação > Ctrl+Enter e teste sua animação EXERCÍCIO 04 - EFEITO FADE 01. Clique em Frame Rate - Medida do Quadro mude a cor de fundo da animação para preto 02. Digite uma palavra em branco 03. Selecione a palavra > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8 04. Será exibido uma Caixa de Diálogo: 3

4 Name - Nome: digite texto2 Behavior - Comportamento > (x) Graphic - Gráfico 05. Selecione o texto > Window - Janela > Panels - Painéis > Align - Alinhar ou Ctrl+K ou e centralize o texto no meio da área de trabalho (Cena) 06. Selecione a linha de tempo 50 deste layer - camada 07. Mantendo selecionado a linha de tempo 50 > com o botão direito do mouse sobre o texto > Panels - Painéis > Effect - Efeito 08. Selecione Alpha > digite 0 (zero) 09. Salve a animação > Ctrl+Enter e teste sua animação EXERCÍCIO 05 - ANIMAÇÃO COM DOIS OBJETOS 01. Clique em Frame Rate - Medida do Quadro 02. Desenhe uma bola com cores gradientes 03. Selecione a bola > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8 04. Será exibido uma Caixa de Diálogo: Name - Nome: digite bola3 Behavior - Comportamento > (x) Graphic - Gráfico 05. Selecione a linha de tempo 50 deste layer - camada 06. Insert - Inserir > Keyframe - Chave de Quadro ou F6 07. Mantendo selecionado a linha de tempo 50, mude a posição da bola 08. Clique com botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos 09. Observe que será exibido uma seta entre os dois quadros com fundo roxo 10. Clique na linha de tempo Selecione na Barra de Base > Show Instance - Exibir Instância 12. Será exibido o Painel da Instância: 13. Selecione Frame - Quadro 14. Salve a animação como exer05.fla 15. No painel dos Frame - Quadro: - Tweening - Entre Objetos > Motion - Animação - Rotate - Rotação: Automatic - Automática mude para Clockwise - Sentido Horário ou se preferir Counterclockwise - Sentido Anti-Horário - Times - Quantas vezes irá rodar > digite Selecione a linha de tempo 51 > Insert - Inserir > Blank KeyFrame - Chave de Quadro em Branco ou F7 17. Desenho um quadrado 18. Selecione o quadrado > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8 19. Será exibido uma Caixa de Diálogo: Name - Nome: digite quadrado Behavior - Comportamento > (x) Graphic - Gráfico 20. Selecione a linha de tempo 1000 deste layer - camada 21. Insert - Inserir > Keyframe - Chave de Quadro ou F6 22. Mantendo selecionado a linha de tempo 100, mude a posição do quadrado 23. Clique com botão direito do mouse entre a linha de tempo 51 e 100 > Create Motion Tweening - Criar Movimento entre Objetos 24. Observe que será exibido uma seta entre os dois quadros com fundo roxo 25. Clique na linha de tempo 51 4

5 26. Selecione na Barra de Base > Show Instance - Exibir Instância 27. Será exibido o Painel da Instância: 28. Selecione Frame - Quadro 29. No painel dos Frame - Quadro: - Tweening - Entre Objetos > Motion - Animação - Rotate - Rotação: Automatic - Automática mude para Clockwise - Sentido Horário ou se preferir Counterclockwise - Sentido Anti-Horário - Times - Quantas vezes irá rodar > digite Salve a animação > Ctrl+Enter e teste sua animação Dicas: - Quando a animação tem na linha de tempo um tempo transcorrido maior, a animação ficará mais lenta - Quando a animação tem na linha de tempo um tempo transcorrido menor, a animação ficará mais rápida - Para aumentar a linha de tempo de uma animação > clique no meio de dois frames - quadros e aperte F5 - Para diminuir a linha de tempo de uma animação > clique no meio de dois frames - quadros e aperte Shift+F5 ADD GUIDE LAYER - ADICIONAR GUIA À CAMADA Add Guide Layer - Adicionar Guia à Camada é um efeito que cria os caminhos por onde passará sua animação, mas para que ocorra esse efeito, é necessário criar primeiramente o Motion Tweening - Movimento entre Objetos EXERCÍCIO 06 - ADICIONAR GUIA À CAMADA 01. Desenhe uma bola 02. Selecione a bola > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8 03. Será exibido uma caixa de Diálogo: Name - Nome: digite bola4 Behavior - Comportamento > (x) Graphic - Gráfico 04. Selecione a linha de tempo 50 deste layer - camada 05. Insert - Inserir > Keyframe - Chave de Quadro ou F6 06. Mantendo selecionado a linha de tempo 50, mude a posição da bola 07. Clique com o botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos 08. Observe que será exibido uma seta entre os dois quadros com fundo roxo 09. Salve a animação como exer06.fla 10. Salve a animação > Ctrl+Enter e teste sua animação 11. Uma vez que esteja rodando a animação, devemos adicionar guia à camada! 12. Clique Ctrl+F4 e volte à Cena Clique no ícone Add Guide Layer - Adicionar Guia à Camada (folha roxa) 13. Clique no ícone Edit Multiple Frame - Editar Múltiplos Quadrados 14. Será exibido duas guias na linha de tempo 15. Arraste as guias para extremidade da animação, ou seja, uma para linha de tempo 1 e a outra para a linha de tempo Será exibido a bola na posição dos dois quadros! 5

6 17. Clique no ícone Pencil Tool - Ferramenta Lápis 18. Clique na ferramenta opcional do Lápis > ícone Pencil Mode - Modo do Lápis > selecione a opção Smooth - Suavizar 19. Desenhe um traçado por onde deseja que passe a bola - Atenção! O traçado deve iniciar no meio do símbolo, no caso a bola, no sinal + da linha de tempo 1 e terminar no meio da outra bola na linha de tempo 50 Dicas: - O traçado deve ser feito sempre com o Layer Guide - Guia à Camada acionado - Nunca faça o traçado no Layer - Camada somente, pois não irá funcionar! 20. Desative o ícone Edit Multiple Frame - Editar Múltiplos Quadros 21. Salve a animação > Ctrl+Enter e teste sua animação - Center Frame - Centralizar Quadro - Onion Skin - Casca de Cebola - exibe a trajetória por onde o objeto irá passar - Onion Skin Outlines - Contornos da Casca de Cebola - exibe a trajetória somente dos contornos do objeto por onde irá passar - Edit Multiple Frame - Editar Múltiplos Quadros - para criar a trajetória entre os objetos - Modify Onion Markers - Modificar os Marcadores da Cebola EXERCÍCIO 07 - DANÇA DAS LETRAS 01. Digite a palavra PAZ em Arial Black, 60 e com espaço entre as letras 02. Selecione o texto > Modify - Modificar > Break Apart - Quebrar ou Ctrl+B, ou seja, a palavra PAZ não é mais uma texto, e sim um objeto 03. Clique em Paint Bucket Tool - Ferramenta Balde e pinte cada letra com uma cor diferente 04. Selecione a letra P > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8 05. Será exibido uma Caixa de Diálogo: Name - Nome: digite P Behavior - Comportamento > (x) Graphic - Gráfico 06. Selecione a letra A > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8 07. Será exibido uma Caixa de Diálogo: Name - Nome: digite A Behavior - Comportamento > (x) Graphic - Gráfico 08. Selecione a letra Z > Insert - Inserir > Convert to Symbol - Converter para Símbolo ou F8 09. Será exibido uma Caixa de Diálogo: Name - Nome: digite Z Behavior - Comportamento > (x) Graphic - Gráfico 10. Selecione a linha de tempo 1 > botão direito do mouse > Copy Frame - Copiar Quadro 11. Clique no ícone Add Layer - Adicionar Camada (folha branca) 12. Clique na linha de tempo 1 do Layer 2 - Camada 2 > botão direito do mouse > Paste Frame - Colar Quadro 13. Clique no ícone Add Layer - Adicionar Camada (folha branca) 14. Clique na linha de tempo 1 do Layer 3 - Camada 3 > botão direito do mouse > Paste Frame - Colar Quadro 15. Conclusão: são três letras e é por isto que criamos 3 layers - camadas 16. Selecione a linha de tempo 50 dos Layers - Camadas 1,2 e Insert - Inserir > Keyframe - Chave de Quadro ou F6 18. Clique no Layer 3 - Camada 3 duas vezes e renomeie para P 6

7 19. Clique no Layer 2 - Camada 2 duas vezes e renomeie para A 20. Clique no Layer 1 - Camada 1 duas vezes e renomeie para Z 21. Com a ferramenta Olho > esconda os Layers - Camadas A e Z 22. Agora vamos trabalhar somente com a Camada P! 23. Selecione a linha de tempo 1 e delete as letras A e Z e mude a posição da letra P 24. Selecione a linha de tempo 50 e delete as letras A e Z e deixe a letra P como está 25. Com a ferramenta Olho > esconda os Layers - Camadas P e Z 26. Agora vamos trabalhar somente com a Camada A! 27. Selecione a linha de tempo 1 e delete as letras P e Z e mude a posição da letra A 28. Selecione a linha de tempo 50 e delete as letras P e Z e deixe a letra A como está 29. Com a ferramenta Olho > esconda os Layers - Camadas P e A 30. Agora vamos trabalhar somente com a Camada Z! 31. Selecione a linha de tempo 1 e delete as letras P e A e mude a posição da letra Z 32. Selecione a linha de tempo 50 e delete as letras P e A e deixe a letra Z como está 33. Salve a animação como exer07.fla 34. Clique com botão direito do mouse na Camada P entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos 35. Clique com botão direito do mouse na Camada A entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos 36. Clique com botão direito do mouse na Camada Z entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos 37. Salve a animação > Ctrl+Enter e teste sua animação 38. Clique Alt+F4 e volta à Cena 39. Agora vamos fazer a Dança das Letras! 40. Clique na ferramenta Olho e esconda as camadas A e Z 41. Selecione a camada P 42. Clique no ícone Add Guide Layer - Adicionar Guia à Camada (folha roxa) 43. Clique no ícone Edit Multiple Frame - Editar Múltiplos Quadros 44. Será exibido duas guias na linha de tempo 45. Arraste as guias para extremidade da animação, ou seja, uma para linha de tempo 1 e a outra para linha de tempo Será exibido a letra P na posição dos dois quadros 47. Clique no ícone Pencil Tool - Ferramenta Lápis 48. Clique na ferramenta opcional do Lápis > ícone Pencil Mode - Modo do Lápis > selecione a opção Smooth - Suavizar 49. Clique Ctrl+Enter e teste sua animação! 50. Clique Alt+F4 e volte à Cena 51. Clique na ferramenta Olho e esconda as camadas P e Z 52. Clique na ferramenta Olho e esconda a trajetória da letra P 53. Selecione a camada A 54. Faça o mesmo procedimento mencionados nos itens 42 à 48 com a camada A 55. Clique Ctrl+Enter e teste sua animação! 56. Clique Alt+F4 e volte à Cena 57. Clique na ferramenta Olho e esconda as camadas P e A 58. Clique na ferramenta Olho e esconda a trajetória da letra A 59. Selecione a camada Z 60. Faça o mesmo procedimento mencionados nos itens 42 à 48 com a camada Z 61. Clique na linha de tempo 50 da camada P > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > Stop 62. Clique Ctrl+Enter e teste sua animação! 7

8 - Quando se trabalha com vários layers - camadas e queira editar somente uma camada, no caso, a camada P, clique nas outras camadas na coluna do olho (veja imagem ao lado) - Se clicar no olho diretamente > esconderá todas as camadas - Sempre que terminar uma animação é recomendável, clicar diretamente no cadeado para trancar as camadas e evitar problemas futuros FORMA DE DEFORMAÇÃO Shape ou Forma de Deformação, conhecido também como morphing, cria deformações entre objetos, mas atenção: os objetos não podem ser símbolos! - Para controlar melhor a deformação é usado Add Shape Hints - Adicionar Marcadores na Forma EXERCÍCIO 08 - MOVIMENTO DE DEFORMAÇÃO 01. Desenhe um quadrado sem borda (Imagem 01) 02. Selecione a linha de tempo 10 deste layer - cama da 03. Insert - Inserir > Keyframe - Chave de Quadro ou F6 04. Com a ferramenta de Seta modifique o formato do quadrado, mas sempre na área do formato original (Imagem 02) 05. Selecione a linha de tempo 20 deste layer - camada 06. Insert - Inserir > Keyframe - Chave de Quadro ou F6 07. Com a ferramenta de Seta modifique o formato do quadrado, mas sempre na área do formato original (Imagem 03) 08. Selecione a linha de tempo 30 deste layer - camada 09. Insert - Inserir > Keyframe - Chave de Quadro ou F6 10. Com a ferramenta de Seta modifique o formato do quadrado, mas sempre na área do formato original (Imagem 04) 11. Selecione a linha de tempo 40 deste layer - camada 12. Insert - Inserir > Keyframe - Chave de Quadro ou F6 13. Com a ferramenta de Seta modifique o formato do quadrado, mas sempre na área do formato original (Imagem 05) 14. Window - Janela > Panels - Painéis > Frame - Quadro ou Ctrl+F 15. Clique entre a linha de tempo 1 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Angular - Distributive - Distributivo - os objetos dos quadros do meio da animação ficam irregulares e suaves - Angular - os objetos dos quadros do meio da animação mantém as linhas e os cantos 17. Clique entre a linha de tempo 11 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Angular 19. Clique entre a linha de tempo 21 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma 8

9 - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Angular 21. Clique entre a linha de tempo 31 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Angular 23. Observe que será exibido uma seta entre os quadros com fundo verde 24. Salve a animação como exer08.fla 25. Salve a animação > Ctrl+Enter e teste sua animação EXERCÍCIO 09 - DEFORMAÇÃO COM TEXTOS 01. Digite a palavra FLASH em arial black, tamanho 48 e em azul 02. Selecione o texto e Modify - Modificar > Break Apart - Quebrar ou Ctrl+B, logo o texto será agora uma imagem! Selecione a linha de tempo 50 deste layer - camada 03. Insert - Inserir > Keyframe - Chave de Quadro ou F6 04. Digite a palavra ANIMAÇÂO em arial black, tamanho 48, vermelho e em outra posição 05. Selecione ANIMAÇÂO e Modify - Modificar > Break Apart - Quebrar ou Ctrl+B, logo o texto será agora uma imagem! 06. Mantendo selecionado a linha de tempo Selecione a palavra FLASH e delete 08. Window - Janela > Panels - Painéis > Frame - Quadro ou Ctrl+F 09. Clique entre a linha de tempo 1 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo 11. Observe que será exibido uma seta entre os quadros com fundo verde 12. Salve a animação como exer09.fla 13. Salve a animação > Ctrl+Enter e teste sua animação EXERCÍCIO 10 - DEFORMAÇÃO COM IMAGEM 01. File - Arquivo > Import - Importar > importe uma imagem > (Imagem 01) 02. Selecione a imagem > Modify - Modificar > Break Apart - Quebrar ou Ctrl+B 03. Selecione a linha de tempo 15 deste layer - camada 04. Insert - Inserir > Keyframe - Chave de Quadro ou F6 05. Com a ferramenta Seta modifique o formato da imagem, mas sempre na área do formato da imagem original (Imagem 02) 06. Selecione a linha de tempo 30 deste layer - camada 07. Insert - Inserir > Keyframe - Chave de Quadro ou F6 08. Com a ferramenta Seta modifique o formato da imagem, mas sempre na área do formato da imagem original (Imagem 03) 09. Selecione a linha de tempo 45 deste layer - camada 10. Insert - Inserir > Keyframe - Chave de Quadro ou F6 11. Com a ferramenta Seta modifique o formato da imagem, mas sempre na área do formato da imagem original (Imagem 04) 9

10 12. Window - Janela > Panels - Painéis > Frame - Quadro ou Ctrl+F 13. Clique entre a linha de tempo 1 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo 15. Clique entre a linha de tempo 16 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo 17. Clique entre a linha de tempo 31 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo 19. Observe que será exibido uma seta entre os quadros com fundo verde 20. Salve a animação como exer10.fla 21. Salve a animação > Ctrl+Enter e teste sua animação EXERCÍCIO 11 - DEFORMAÇÃO COM AUXÍLIO DE MARCADORES 01. Desenhe um quadrado sem borda 02. Selecione a linha de tempo 15 deste layer - camada 03. Insert - Inserir > Keyframe - Chave de Quadro ou F6 04. Selecione a linha de tempo 30 deste layer - camada 05. Insert - Inserir > Keyframe - Chave de Quadro ou F6 06. Selecione a linha de tempo 45 deste layer - camada 07. Insert - Inserir > Keyframe - Chave de Quadro ou F6 08. Selecione a linha de tempo Selecione a ferramenta Imã 10. Selecione a ferramenta Line Tool - Ferramenta Linha 11. Desenhe um triângulo dentro do quadrado 12. Pinte o triângulo de outra cor 13. Selecione a parte fora do triângulo e delete 14. Delete também as bordas do triângulo 15. Selecione a linha de tempo Mantenha selecionada a ferramenta Imã 17. Selecione a ferramenta Line Tool - Ferramenta Linha 18. Desenhe um losângo dentro do quadrado 19. Pinte o losângo de outra cor 20. Selecione a parte de fora do losângo e delete 21. Delete também as bordas do losângo 22. Selecione a linha de tempo Desative a ferramenta Imã 24. Selecione a ferramenta Oval Tool - Ferramenta Oval 25. Desenhe uma bola dentro do losângo 26. Pinte a bola de outra cor 27. Selecione a parte fora da bola e delete 28. Delete também as bordas da bola 29. Window - Janela > Panels - Painéis > Frame - Quadro ou Ctrl+F 10

11 30. Clique entre a linha de tempo 1 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo 32. Clique entre a linha de tempo 16 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo 34. Clique entre a linha de tempo 31 e No painel Frame - Quadro - Tweening - Movimento > Shape - Forma - Easing - Aceleração > deixe como está! - Blend Type - Tipos de Mistura: (x) Distributive - Distributivo 36. Observe que será exibido uma seta entre os quadros com fundo verde 37. Salve a animação como exer11.fla 38. Salve a animação > Ctrl+Enter e teste sua animação 39. Clique Alt+F4 e volte à Cena 40. Agora vamos usar os marcadores para auxiliar a deformação! 41. Selecione a linha de tempo Selecione o quadrado 43. Modify - Modificar > Transform - Transformar > Add Shape Hints - Adicionar Marcadores à Forma 44. Será exibido uma bola vermelha com o marcador A Dicas: - Sempre iniciar com o marcador A na parte superior à esquerda do objeto - Os outros marcadores devem ser inseridos no sentido horário - O Flash permite que você possa inserir até 26 marcadores 45. Arraste o marcador A para uma extremidade do quadrado (na parte superior à esquerda) 46. Clique sobre o marcador A > botão direito do mouse > Add Hints - Adicionar Marcadores 47. Será exibido uma bola vermelha com o marcador B 48. Arraste o marcador B para uma extremidade do quadrado (na parte superior à direita) 49. Repita o mesmo processo e insira os marcadores C e D 50. Selecione a linha de tempo Será exibido o marcador D no meio do polígono 52. Arraste para extremidade do triângulo os marcadores 53. Selecione a linha de tempo Selecione o losângo 55. Repita o mesmo procedimento mencionado nos itens 43 à Selecione a linha de tempo Selecione a bola 58. Arraste para extremidade da bola os marcadores 59. Salve a animação 60. Salve a animação > Ctrl+Enter e teste sua animação Geralmente o botão tem quatro estágios: EXERCÍCIO 12 BOTÃO SIMPLES 11

12 - Up - como o botão aparece na sua forma inicial - Over - como o botão aparece quando o mouse passa por cima do botão - Down - como o botão aparece quando você clica no botão - Hit - define a área "clicável" do botão, ou seja, a área em que ele é acionado Existe duas formas de botão: - Track as Button - Botão é um botão independe ou seja as ações nele inserida não depende de outros botões - Track as Menu Item - Botão Item de Menu é um botão dependente, ou seja, é um submenu de um botão principal Em todos os botões são usados a ActionScript OnMouseEvents EXERCÍCIO 12 - BOTÃO SIMPLES 01. Até agora você criava símbolos, selecionando o objeto e apertando F8 02. Vamos criar um símbolo agora de outra forma, que é a mais recomendável! 03. Window - Janela > Library - Biblioteca ou Ctrl+L 04. Options - Opções > New Symbol - Novo Símbolo 05. Será exibido uma Caixa de Diálogo: Name - Nome: digite botao (sem acento) Behavior - Comportamento > (x) Button - Botão 06. Observe que será aberta uma área para edição do botão com os quatro estágios: Up, Over, Down e Hit 07. Desenhe uma bola sem bordas com cores gradientes em Linear, sendo que uma das cores seja a preta: exemplo azul e preto! (Imagem 1) 08. Selecione a bola > Ctrl+K e centralize a bola no meio do sinal Selecione a bola novamente > Ctrl+D para duplicar 10. Arraste a cópia da bola para fora 11. Selecione a cópia da bola > Modify - Modificar > Transform - Transformar > Scale and Rotate - Escala e Rotação > Escala: 90 Rotação: 180 (Imagem 2) 12. Selecione a cópia da bola > Ctrl+K e centralize a cópia da bola no meio do sinal +, ou seja por cima da bola original (Imagem 3) 13. Digite sobre o botão: Clique (em cor branca) 14. Selecione o texto > Ctrl+K e centralize a bola no meio do sinal Selecione a linha de tempo o estágio Over > F6 16. Selecione a linha de tempo o estágio Down > F6 17. Selecione a linha de tempo o estágio Hit > F6 18. Selecione a linha de tempo o estágio Over > selecione somente o texto e mude a cor do texto 19. Selecione a linha de tempo o estágio Down > selecione somente o texto e mude a cor do texto 20. Selecione a linha de tempo o estágio Over > selecione todo botão 21. Modify - Modificar > Transform - Transformar > Scale and Rotate - Escala e Rotação > Escala: 120 Rotação: Selecione a linha de tempo o estágio Down > selecione todo botão 23. Modify - Modificar > Transform - Transformar > Scale and Rotate - Escala e Rotação > Escala: 80 Rotação: Clique no ícone Scene - Cena e volte à Cena 25. Selecione o botão na Biblioteca e arraste para área da trabalho (Cena) 26. Salve a animação como exer12.htm > Ctrl+Enter e teste sua animação 12

13 (No módulo sobre Botões Avançados, vamos aprender como inserir ações nos botões e como criar botões e submenus) TRATAMENTO DE IMAGENS Para inserir uma imagem em sua animação: 01. File - Arquivo > Import - Importar 02. Selecione a imagem e importe para seu arquivo 03. Window - Janela > Library - Biblioteca e observe que a imagem está armazenada na biblioteca - As extensões de imagem aceitas no Flash são:.bmp,.gif,.jpg e.png - A extensão mais recomendável é a.png com imagem de resolução 72 à 150 dpi - Quando se importa uma gif animada para o Flash, ele aceita toda a sequência da animação e exibe todos os quadros - frames - Imagem transparente em.gif importadas para o Flash também são aceitas - Todas as vezes que vamos testar uma animação no Flash com uma imagem, ou seja, o arquivo.swf; independentemente da extensão original, a extensão da imagem se tornará.jpg COMO TRANSFORMAR UMA IMAGEM BITMAP EM VETORIAL 01. Todas as extensões mencionadas acima são de uma imagem Bitmap 02. Bitmap é uma imagem formada em pixels 03. Vetorial é uma imagem formada por cálculos matemáticos no computador 04. Uma vez importada a imagem Bitmap para a animação 05. Selecione a imagem 06. Modify - Modificar > Trace Bitmap - Traçar Bitmap 07. Será exibido uma caixa de diálogo: - Color Threshold - Percentual de Cores - para controlar cores de tons semelhantes e uma única cor. Default do Flash é 10 e quanto maior for dado para este controle, menor será o controle das cores - Minimum Area - Área Mínima - determina quantidade de pixels em torno de um ponto, ou seja, quanto menor valor, menor será os detalhes que esteja trabalhando com uma imagem - Curve Fit - Ajuste da Curva - determina as curvas da imagem que pode ser: Pixels, Very Tight - Muito Apertado, Tight - Apertado, Normal, Smooth - Suave, Very Smooth - Muito Suave - Corner Threshold - Percentual do Canto - determina os cantos das curvas da imagem que pode ser: Many Corners - Muitos Cantos, Normal e Few Corners - Poucos Cantos COMO SIMULAR TRANSPARÊNCIA 01. Uma vez importada a imagem para o Flash 02. Selecione a imagem 03. Modify - Modificar > Break Apart - Quebrar ou Ctrl+B 04. Selecione a ferramenta Lasso 05. Nas ferramentas opcionais do Lasso > selecione Magic Wand Properties - Propriedades da Varinha Mágica > Default do Flash é Clique em Magic Wand - Varinha Mágica 07. Selecione as cores semelhantes que deseja excluir da imagem 08. Delete 13

14 COMO USAR UMA IMAGEM COM TEXTURA 01. Uma vez importada a imagem para o Flash 02. Selecione a imagem 03. Modify - Modificar > Break Apart - Quebrar ou Ctrl+B 04. Selecione a ferramenta Dropper - Conta Gotas 05. Clique na imagem e a textura será exibida na ferramenta Balde Desenhe uma bola 06. Observe que a textura foi aplicada no preenchimento da bola COMO USAR IMAGEM EM 3D Para usar Imagens em 3D (Tridimensionais) seja estática ou animada existem alguns programas na qual você pode criar suas imagens em 3D e importar para Flash: - Aviel - Illustrate que é um plugin para 3DS Max 2.5 que renderiza a sua animação 3D diretamente em swf em gráficos vetoriais. - Swift 3D - Vecta 3D Dica: - No CD do Flash 5.0 vem um programa chamado Swish na versão demo que cria Efeitos para Textos no Flash - O programa custa US$30 MOVIE CLIP Movie Clip é um trecho de animação criado na edição do Símbolo e inserido na ária de trabalho - Cena EXERCÍCIO 13 - MOVIE CLIP 01. Window - Janela > Library - Biblioteca ou Ctrl+L 02. Options - Opções > New Symbol - Novo Símbolo 03. Será exibido uma Caixa de Diálogo: Name - Nome: digite bola Behavior - Comportamento > (x) Graphic - Gráfico (que será o modelo original para o Movie Clip) 04. Desenhe uma bola e pinte de cor gradiente 05. Selecione a bola > Ctrl+K para centralizar a bola no meio do sinal + na edição do símbolo 06. Options - Opções > New Symbol - Novo Símbolo 07. Será exibido uma Caixa de Diálogo: Name - Nome: digite bola_movie Behavior - Comportamento > (x) Movie Clip 08. Arraste da biblioteca a bola gráfica para edição do movie clip 09. Selecione a bola > Ctrl+K para centralizar a bola no meio do sinal 10. Selecione a linha de tempo 20 na edição do movie clip > F6 11. Window - Janela > Panels - Painéis > Frame - Quadro ou Ctrl+F 12. Clique entre a linha de tempo 1 à No painel do Quadro: 14

15 Tweening - Entre Objetos > Motion - Movimento Counterwise - Sentido Horário Times - Vezes > digite Clique no ícone Scene - Cena e volte à cena 15. Selecione na biblioteca o símbolo bola_movie e arraste para Cena 16. Selecione a linha de tempo 40 da Cena > F5 (inserir frame - quadro) 17. Salve a animação como exer13.htm > Ctrl+Enter e teste sua animação EXERCÍCIO 14 - MOVIE CLIP COM IMAGEM 01. File - Arquivo > Import - Importar e importe a imagem cena1.png\ que seguem, anexo a este módulo 02. Selecione a imagem 03. Modify - Modificar > Break Apart - Quebrar ou Ctrl+B 04. Selecione a ferramenta Lasso 05. Nas ferramentas opcionais do Lasso > selecione Magic Wand Properties - Propriedades da Varinha Mágica > Clique em Magic Wand - Varinha Mágica 07. Clicando na tela do celular 08. Mantendo selecionada a tela do celular > F8 > símbolo > digite: tela (x) graphic - gráfico 09. Clique OK 10. Delete a tela do celular na Cena 11. Window - Janela > Library - Biblioteca ou Ctrl+L 12. Options - Opções > New Symbol - Novo Símbolo 13. Será exibido uma Caixa de Diálogo: Name - Nome: digite tela_movie Behavior - Comportamento > (x) Movie Clip 14. Selecione a biblioteca o símbolo tela e arraste para a edição da tela_movie 15. Selecione a tela > Ctrl+K para centralizar no meio do sinal + na edição do símbolo 16. Selecione a linha de tempo 2 na edição do movie clip > F6 17. Selecione a linha de tempo 3 na edição do movie clip > F6 18. Selecione a linha de tempo 4 na edição do movie clip > F6 19. Selecione a linha de tempo 2 na edição do movie clip > selecione o desenho da tela > botão direito do mouse > Panels - Painéis - Effect - Efeito > Alpha=50% 20. Selecione a linha de tempo 3 na edição do movie clip > selecione o desenho da tela > botão direito do mouse > Panels - Painéis - Effect - Efeito > Alpha = 75% 21. Selecione a linha de tempo 4 na edição do movie clip > selecione o desenho da tela > botão direito do mouse > Panels - Painéis - Effect - Efeito > Alpha = 0% 22. Clique no ícone Scene - Cena e volte à Cena 23. Selecione a biblioteca a tela_movie e arraste exatamente para sua posição original na imagem celular (use as setinha do teclado para posicionar corretamente) 24. Clique no rodapé da área de trabalho a porcentagem da tela de 100% para 400% 25. Selecione a ferramenta Lasso 26. Nas ferramentas opcionais do Lasso > Selecione Magic Wand Propertis - Propriedades da Varinha Mágica > Clique em Magic Wand - Varinha Mágica 28. Clique na lente da câmera digital 29. Mantendo selecionada a tela celular > F8 > símbolo > digite: lente (x) graphic - gráfico 30. Clique OK 31. Delete a lente da câmera digital na Cena 15

16 32. Windows - Janela > Library - Biblioteca ou Ctrl+L 33. Options - Opções > New Sybol - Novo Símbolo 34. Será exibido uma Caixa de Diálogo: Name - Nome: digite lente_movie Behavior - Comportamento > (x) Movie Clip 35. Selecione da biblioteca o símbolo lente e arraste para a edição da lente_movie 36. Selecione a lente > Ctrl+K para centralizar no meio do sinal + na edição do símbolo 37. Selecione a linha de tempo 2 na edição do movie clip > F6 38. Selecione a linha de tempo 3 na edição do movie clip > f6 39. Selecione a linha de tempo 4 na edição do movie clip > f6 40. Clique na área de trabalho a porcentagem da tela de 100% para 400% 41. Selecione a linha de tempo na edição do movie clip > selecione o desenho da lente > botão direito do mouse > Panels - Painéis - Effect - Efeito > Tint - Tinta > selecione a cor vermelha 42. Selecione a linha de tempo 2 na edição do movie clip > selecione o desenho da lente > botão direito do mouse > Panels - Painéis - Effect - Efeito > Tint - Tinta > selecione a cor amarela 43. Selecione a linha de tempo3 na edição do movie clip > selecione o desenho da lente > botão direito do mouse > Panels - Painéis - Effect - Efeito > Tint - Tinta > escolha cor de rosa 45. Clique no ícone Scene - Cena e volte à Cena 46. Clique no rodapé da área de trabalho a porcentagem da tela de 100% para 400% 47. Selecione da biblioteca a lente_movie e arreste exatamente para sua posição original na imagem da câmera digital (use a setinha do teclado para posicionar corretamente) 48. Para que a imagem seja exibida somente do tamanho que foi criada, vamos inserir uma ação FSCommand! 49. Selecione a linha de tempo 1 da Camada 1 > botão direito do mouse > Action - Ações > Basic Actions - Ações Básicas > Duplo clique em FSCommand digite: Command - Comando : allowscale Arguments - Argumentos: false 50. Salve a animação como exer14.htm > Ctrl+Enter e teste sua animação MASK - MÁSCARA Mask ou Máscara são camadas que escondem parte da animação EXERCÍCIO 15 - BANNER ANIMADO I 01. Clique em 12.0 fps e coloque as dimensões de animação: 300x40 e a cor de fundo (background) em azul escuro 02. Clique OK 03. Salve a animação como exer15.fla 04. Digite: BANNER ANIMADO I em arial black, 26 e em laranja 05. Selecione o texto > Ctrl+K e centralize o texto na área de trabalho 06. Selecione a linha de tempo desta camada > botão direito do mouse > Copy Frames - Copiar Quadros 07. Clique na folha branca a baixo das camadas e insira uma nova camada(camada2) 08. Selecione a linha de tempo 1 da Camada 2 > botão direito do mouse > Paste Frames - Colar Quadros 09. Esconda a Camada Troque a cor do texto da Camada 2 para amarelo 16

17 11. Selecione a linha de tempo numero 50 da camada 1 > F5 (Inserir um Frame - Quadro), repita para a camada Clique na folha branca abaixo das camadas e insira uma nova camada (Camada3) 13. Posicione a Camada 3 acima de todas as Camadas 14. Selecione a linha de tempo 1 da Camada 3 e desenhe uma bola sobre a letra B da palavra BANNER 15. Esconda as camadas 1 e Selecione a bola > F8 > símbolo gráfico 17. Exiba as camadas 1 e Selecione a bola e arraste para fora(à esquerda) da palavra BANNER 19. Selecione a linha de tempo 50 da Camada 3 > F6 (Keyframe - Quadro de Chave) 20. Posicione a bola após a palavra ANIMADO I 21. Clique com botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimentos entre Objetos 22. Clique com o botão direito do mouse sobre a camada 3 > Mask - Máscara 23. Para que o banner seja exibido somente do tamanho que foi criado, vamos inserir uma ação FSCommand Na caixa de parâmetros digite: Command - Comando: Allowscale Argumentes - Argumentos: False 25. Observe que será exibido um a (de ação) na linha de tempo Salve a animação > Ctrl+Enter e teste sua animação Dicas: *Quando se aplica uma máscara, o Flash insere automaticamente o cadeado entre duas camadas e sempre a máscara será aplicada na camada da parte de cima sob a camada da parte de baixo *Caso deseja reeditar, você deve destrancar as camadas e assim que concluído a edição, deve-se trancar novamente as camadas EXERCÍCIO 16 - BANNER ANIMADO II 01. Clique em 12.0 fps e coloque as dimensões da animação: 300 x 40 e a cor de fundo (background) em azul claro 02. Clique OK 03. Salve sua animação como exer16.fla 04. Digite: BANNER ANIMADO II em arial black, 26 e em preto > dê Enter digite TESTANDO 1 > dê Enter digite TESTANDO 2 > dê Enter digite TESTANDO 3 > dê Enter digite TESTANDO Selecione o texto > F8 > símbolo gráfico 06. Selecione a linha de tempo 100 Camadas 1 > F6 (Keyframe - Quadro de Chave) 07. Clique na folha branca a baixo das camadas e insira uma nova camada(camada 6) 08. Esconda a camada Desenhe na camada 2 um retângulo do tamanho da área de trabalho 10. Esconda camada Exiba a camada 1 > selecione a linha de tempo Mude a posição do texto para fora na parte inferior área de trabalho 13. Selecione a linha de tempo Mude a posição do texto para fora na parte superior da área de trabalho 15. Clique com o botão direito do mouse entra a linha de tempo 1 e 100 > Create Motion Tweening - Criar Movimento entre Objetos 17

18 16. Clique com o botão direito do mouse sobre a Camada 2 > Mask - Máscara 17. Para que o banner seja exibido somente do tamanho que foi criado, vamos inserir uma ação FSCommand! 18. Selecione a linha de tempo 1 da camada 2 > botão direito do mouse > Actions - Ações > Basic Actions - Ações Básicas > duplo clique em FSCommand digite: Command - Comando: allowscale Arguments - Argumentos: false 19. Salve a animações > Ctrl+Enter e teste sua animação EXERCÍCIO 17 - BANNER ANIMADO III 01. Clique em 12.0 fps e coloque as dimensões da animação: 200 x 150 e a cor de fundo(backgrond) em branco 02. Clique OK 03. Salve sua animação como exer17.fla 04. File - Arquivo > Import - Importar e importe a imagem ipanema.jpg que segure anexo a este módulo 05. Selecione a imagem > F8 > símbolo gráfico 06. Posicione a imagem no canto superior à esquerda, observe que parte da imagem ficará fora da área de trabalho 07. Selecione a linha de tempo 50 da camada 1 > F6 (Keyframe - Quadro de Chave) 08. Selecione a imagem > Modify - Modificar > Transform - Transformar Scale and Rotate - Escala e rotação > Escala: Posicione a imagem no meio da área de trabalho 10. Clique com o botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre objetos 11. Clique na Folha Branca abaixo das camadas e insira uma nova camada (camada 2) 12. Esconda a Camada Desenhe a camada 2 um retângulo do tamanho da área de trabalho 14. Clique com o botão direito do mouse sobre a camada 2 > Mask Máscara 15. Para que o banner seja exibido somente do tamanho em que foi criado, vamos inserir uma ação FSCommand! 16. Selecione a linha de tempo 1 da camada 2 > botão direito do mouse > Action - Ações > Basic Actions - Ações Básicas > duplo clique em FSCommand digite: Command - Comando: allowscale Arguments - Argumentos : false 17. Salve a animação > Ctrl+Enter e teste sua animação EXERCÍCIO 18 - BANNER ANIMADO IV 01. Clique em 12.0 fps e coloque as dimensões da animação: 300 x 40 e a cor de fundo(background) em branco 02. Clique em OK 03. Salve sua animação como exer18.fla 04. Desenhe um retângulo em cinza claro que ocupe a área de trabalho 05. Digite: BANNER ANIMADO IV em arial black, 24 e em preto 06. Selecione o texto > Ctrl+K e centralize o texto na área de trabalho 07. Selecione a linha de tempo 50 > F5 (inserir um Frame - Quadro) 08. Clique na folha a branco a baixo das camadas e insira uma nova camada (camada 2) 18

19 09. Selecione a linha de tempo 1 da camada 2 e desenhe uma bola sobre a letra B da palavra BANNER 10. Esconda a camada Selecione a bola > F8 > símbolo gráfico 12. Exiba as camadas 1 e Selecione a bola e arraste para fora(à esquerda) da palavra BANNER 14. Selecione a linha de tempos 50 da camada 2 > F6(Keyframe- Quadros de Chaves) 15. Posicione a bola após a palavra ANIMADO IV 16. Clique com o botão direito do mouse entre a linha de tempo 1 e 50 > Create Motion Tweening - Criar Movimento entre Objetos 17. Clique com o botão direito do mouse sobre a camada 2 > Masck - Máscara 18. Para que o banner seja exibido somente do tamanho que foi criado, vamos inserir uma ação FSCommand! 19. Selecione a linha de tempo 1 da Camada 2 > botão direito do mouse > Action - Ações > Basic Actions - Ações Básicas > duplo clique em FSCommand. Na caixa de parâmetros digite: Command - Comando: allowscale Arguments - Argumentos: false 20. Clique em 12.0 fps e troque a cor de fundo(backgroud) para preto 21. Salve a animação > Ctrl+Enter e teste sua animação SOM Os sons podem ser inseridos em botões, na linha de tempo, independentemente da animação, mas é um recurso que se deve ter cuidado, pois aumenta consideravelmente o tamanho do arquivo. As extensões aceitas de som são.wav e o mp3 MPEG (Picture Experts Group), mais conhecido como MP3 é um conjunto de técnicas de compressão para áudio e vídeo que reduz o tamanho dos arquivos 1/12 do original. Para tocar um arquivo MP3 é necessário utilizar um player; os mais conhecidos são WinAmp 2.10 e o Microsoft Media Player 4.0 que vem junto com o Windows 98. O Winamp 2.10(shareware) é considerado o melhor player, pois tem mecanismo que transforma um som wav em compressão MP3. *Para transformar um som de wav para MP3 01. Abra o Winamp Menu > Options 03. Preference > Plug-ins 04. Output > Nullsoft Disk Writer 05. Clique em configure > e selecione onde irá armazenar o arquivo.wav Outro programa para Som é o KillerSond que vem no CD do Flash 5 uma versão demo *Como inserir um som no Flash: 01. File - Arquivo > Import - Importar 02. Importe seu arquivo de som.wav ou mp3 03. Windows - Janela > Library - Biblioteca - observe que o arquivo do som está na biblioteca 04. Selecione o som na biblioteca e arraste para sua animação 19

20 05. Uma vez na animação > será exibido na linha de tempo uns riscados em azul, isto é, neste quadro há um som na animação PAINEL DO SOM 01. Clique quadro na linha de tempo onde foi inserido o som 02. Clique com o botão direito do mouse > Panels - Painéis > Sound - Som 03. Será exibido o Painel do Som 04. Neste painel você poderá fazer as configurações e efeitos que desejar: - Sound - Som > nome do arquivo do Som - Effect - Efeitos - Synchronize - Sincronizar - Loops - Quantas vezes irá rodar o som. - Edit Envelope - Editar Envelope *Effect - Efeitos None - Nenhum efeito Left chanel - Canal esquerdo - o som sai na caixa de som da esquerda Right chanel - Canal direito - o som sai na caixa de som da direita Fade Left to Right - Esquerda e desaparece na direita - o som começa na caixa de som à esquerda e termina na direita Fade Right to Left - Direita e desaparece na esquerda - o som começa na caixa de som à direita e termina na esquerda Fade In - Aumentar som - o som vai aumentando aos poucos Fade Out - Diminuir som - o som vai diminuindo aos poucos Custom - Personalizar o efeito *Synchronize - Sincronizar Event - Evento - o som toca até que a animação pare de rodar Start - Iniciar som Stop - Parar som Stream - Corrente - o som toca até terminar, mesmo que a animação não esteja mais rodando *Edi Evelope - Editar envelopes - para mixar som, fazendo as configurações personalizadas EXERCÍCIO 19 - SOM EM BOTÃO 01. Windows - Janela > Library - Biblioteca ou Ctrl+L 02. Option - Opções > New Symbol - Novo Símbolo 03. Será exibido uma Caixa de Dialogo: Name - Nome : digite botão (sem acento) Behavior - Comportamento > (x) Button - Botão 04. Desenhe o botão > Ctrl+K para centralizar no meio do sinal + na edição do símbolo 05. Insira Keyframe - Chave de quadros > F6 nos estágios Over, Down e Hit 06. Os sons são inseridos somente nos estágios Over e Down 07. Selecione o Estágio Over 08. File - Arquivo > Import - Importar e importe um som neste exemplo vamos aproveitar os sons que vem no Flash Windows - Janela > Common Libraries - Bibliotecas comuns Sound - Som 20

21 10. Selecione um som e arraste para cima do botão 11. Selecione o estágio Down 12. Selecione outro som e arraste para cima do botão 13. Clique no ícone Scene - Cena e volte à Cena 14. Selecione o botão na Biblioteca e arraste para área de trabalho(cena) 15. Salve a animação como exer19.htm > Ctrl+Enter e teste sua animação EXERCÍCIO 20 - BOTÃO LIGA/DELIGA SOM 01. Windows - Janela > Library - Biblioteca ou Ctrl+L 02. Option - Opções > New Symbol - Novo Símbolo 03. Será exibido uma Caixa de Diálogo: Name - Nome: digite botão(sem acento) Beharvior - Comportamento > (x) Button - Botão 04. Selecione o botão > Ctrl+K para centralizar no meio do sinal + mas na edição do símbolo 05. Insira Keyframe - Chave de Quadro > F6 nos estágios Over, Down e Hit 06. Option - Opções > New Symbol - Novo Símbolo 07. Será exibido uma Caixa de Diálogo: Name - Nome: digite botao_liga_desliga(sem acento) Behavior - Comportamento > (x) Movie Clip 08. Arraste da biblioteca o símbolo botão para a edição do botão liga/desliga 09. Selecione o botão > Ctrl+K para centralizar no meio do sinal + na edição do símbolo 10. Insira Keyframe - Chave de Quadro > F7 na linha do tempo 10 e Renomeie o layer para botão 12. Selecione a linha do tempo 1 > botão direito do mouse > Action - Ação > Stop 13. Selecione a linha do tempo 10 > botão direito do mouse > Action - Ação > Stop 14. Selecione a linha do tempo 1 > botão direito > Panels - Painéis > Frame - Quadro > Label - Rótulo > digite liga 15. Selecione a linha do tempo 10 > botão direito > Panels - Painéis > Frame - Quadro > Label - Rótulo > digite desliga 16. Observe que será exibido duas bandeirinhas vermelhas marcando os rótulos: liga e desliga 17. Selecione a linha do tempo 1 > clique sobre o botão > Action - Ação > On Mouse Events (x) Press Stop All Sounds Go to > Type - Tipo > Frame label - Quadro Rótulo > Frame - Quadro > digite liga()go to and Play(deixe desmarcado) ficando Go to and Stop 19. Insira um layer - camada abaixo e renomeie som 20. Insira um Blank Keyframe - Cave de Quadro em Branco > F7 > na linha de tempo 10 e Selecione a linha de tempo 1 do quadro som 22. File - Arquivo > Import - Importar um som com extensão.wav ou.mp3 23. Observe que quando se importa um som para o Flash, o som vai para Library - Biblioteca > selecione o som da biblioteca e arraste para o botão 24. Selecione a linha de tempo 1 do layer som > Panels - Painéis > Sound - Som Effect - Efeito > None - Nenhum Synchronize - Sincronização > Event Loops digite Volte à Cena Renomeie o layer para botão_liga_desliga 21

22 27. Arraste da biblioteca o movie clip botão_liga_desliga 28. Insira um layer abaixo e renomeie de peixe 29. Nesta etapa você deveria criar um movie clip, mas vamos aproveitar um movie clip que vem no Flash! 30. Windows - Janela > Common Libraries - Bibliotecas Compartilhadas > Movie clips > selecione Fish Movie Clip - Peixe Movie Clip 31. Arraste da Biblioteca o movie clip do peixe 32. Mantendo selecionada a linha do tempo 1 da camada peixe > Action - Ação > Stop 33. Salve a animação como exer20.htm > Ctrl+Enter e teste sua animação clicando no botão EXERCÍCIO 21 - CENAS USANDO ACTION GO TO 01. Salve sua animação como exer22.fla 02. Desenhe uma bola 03. Selecione a bola > F8 > Símbolo gráfico 04. Selecione a linha de tempo 50 e mude a posição da bola 05. Clique entre a linha de tempo 1 e 50 > botão direito do mouse > Create Motion Tween - Criar movimento entre 06. Insert - Inserir > Scene - Cena 07. Será exibida a Cena Digite CENA Selecione o texto > F8 > Símbolo Gráfico 10. Selecione a linha de tempo 50 e mude a posição do texto 11. Clique entre a linha de tempo 1 e 50 > botão direito do mouse > Create Motion Tween - Criar movimento entre 12. Selecione a linha de tempo Selecione o texto > Modify - Modificar > Transform - Transformar > Scale and Rotate - Escala e Rotação > Escala: Insert - Inserir > Scene - Cena 15. Será exibida a Cena Windows - Janela > Common Libraries - Bibliotecas Compartilhadas > Movie Clip > selecione o Fish Movie Clip - Peixe e arraste para Cena Selecione a linha de tempo 50 e mude a posição do peixe 18. Windows- Janela > Library - Biblioteca 19. Option - Opção > New Symbol - Novo Símbolo 20. Crie um botão escrito SEGUIR 21. Não esqueça de colocar > F6 > nos estágios Over, Down e Hit 22. Option - Opção > New Símbolo - Novo Símbolo 23. Crie um botão escrito VOLTAR 24. Não esqueça de colocar > F6 > nos estágios Over, Down, Hit 25. Volte à Cena Insira um layer - camada acima e arraste da biblioteca o botão SEGUIR 27. Volte à Cena Insira um layer - camada acima e arraste da biblioteca o botões: VOLTAR e SEGUIR 29. Volte à Cena Insira um layer - camada acima e arraste da biblioteca o botão VOLTAR 31. Ctrl+Enter e teste sua animação! 32. Observe que as Cenas são exibidas automaticamente em Loop 22