APOSTILA MACROMEDIA FLASH 5

Transcrição

1 APOSTILA MACROMEDIA FLASH 5

2 Apostila: Macromedia Interface: Português Formato: A4 Nível: Iniciante / Intermediário Autor: Leonardo Revisão: Luciano

3 Sumário Introdução...07 Iniciar o...08 O ambiente de trabalho...09 Menu principal...10 Criando um novo filme...10 Abrir arquivo...11 Salvar arquivo...12 Recortar, copiar e colar objetos...14 A barra de ferramentas padrão...16 A Timeline (Linha do tempo)...17 Ocultar a Timeline...17 Camadas...18 Inserir nova camada...18 Excluir camada...19 Nomear camadas...20 Área de desenho...21 Alterando as medidas da área de desenho...21 Alterar a cor da área de desenho...22 Exibir régua...24 Ocultar régua...25 Exibir grade...25 Ocultar Grade...26 Painéis...27 Exibir painéis...27 Ocultar painéis...28 Fechar todos os painéis...29 Agrupar painéis...30 Desagrupar painéis...31 A caixa de ferramentas...32 Modificadores de ferramentas...33

4 Ferramenta Seta...34 Ferramenta Subselecionar...34 Ferramenta Linha...34 Ferramenta Laço...34 Ferramenta Caneta...34 Ferramenta Texto...35 Ferramenta Oval...35 Ferramenta Retângulo...35 Ferramenta Lápis...35 Ferramenta Pincel...35 Ferramenta Tinteiro...36 Ferramenta Balde de tinta...36 Ferramenta Sombreador...36 Ferramenta Apagador...36 Ferramenta Mão...36 Ferramenta Zoom...36 Teclas de atalho para ferramentas...37 Inserir texto...38 Inserir texto com largura definida...39 Formatar texto...40 Aplicar formatação de texto...41 Desfazer e refazer alterações...43 Desenhar retângulos com cantos arredondados...44 Recortar partes de uma imagem...45 Mover objetos...46 Dimensionar objetos...47 Girar um objeto...48 Apagar objetos...49 Apagar a cor de preenchimento de um objeto...50 Apagar partes de um objeto...51 Invertendo objetos...52 Utilizando a ferramenta Apagador...53

5 Seleção de cor de traçado...54 Seleção de cor de preenchimento...55 Preenchimento com gradiente...56 Aplicar preenchimento com gradiente...57 Capturar cor de preenchimento...59 Bibliotecas...60 Trabalhando com botões...61 Inserir botões...61 Criando botões...63 Definir uma ação para o botão...69 Clipes de filme...71 Trabalhando com sons...73 Inserir sons no seu filme...73 Biblioteca de sons...78 Utilizando a Biblioteca de sons...78 Criando filmes...81 Animação com tweening...81 Animação quadro-a-quadro...81 Animando um objeto sobre uma linha...82 Criando uma animação quadro-a-quadro...85 ActionScript...89 Abrir o painel Ações...89 Ações Básicas...91 Selecionar uma ação...92 Interromper a execução do filme...93 Publicar filmes...95

6

7 Introdução Desenvolvido pela Macromedia, o Flash é uma poderosa ferramenta para criação de animações para a Internet. Com ele o usuário desenvolve animações profissionais e sofisticadas com qualidade e tamanho reduzido. Considerado por muitos Web designers como a melhor solução para criação de animações para a Internet, o programa está em sua quinta versão. Esta versão está mais amigável, com a interface organizada em painéis, facilitando a utilização do programa e criação de sites interativos e animados. O ActionScript, uma linguagem semelhante ao JavaScript, que permite ao desenvolvedor trabalhar com variáveis, string, condicionais, comandos e eventos. Esta linguagem está incorporada ao Flash e pode tornar seu site mais interativo para sua audiência. O Flash trabalha com gráficos vetoriais que utiliza linhas e curvas par compor uma imagem. Um gráfico vetorial é criado por fórmulas matemáticas que armazenam a cor, curvas, linhas, etc da imagem. Mesmo que um gráfico vetorial seja redimensionado, ele não perde a qualidade, o que não acontece com os gráficos bitmap, que trabalha com combinações de pontos e perde qualidade no redimensionamento da imagem. 7

8 Iniciar o Após devidamente instalado o pode ser executado da seguinte maneira. 1. Clique em Iniciar. 2. Posicione o cursor do mouse em Programas, Macromedia. Figura Clique em. 8

9 O ambiente de trabalho O ambiente de trabalho do Flash consiste de um menu principal, uma caixa de desenho, área de desenho, barra de ferramentas padrão, linha do tempo (Timeline) e painéis, onde tudo gira em torno dos desenhos, pinturas, e cores que estão sendo utilizadas. Figura 1.1 9

10 Menu principal Como qualquer programa escrito para o Windows, os Menus se encontram na parte superior do ambiente de trabalho. Cada opção do menu contém subitens que permitem, criar um novo filme, copiar, colar, recortar objetos, inseri camadas, etc. Figura 1.2 Criando um novo filme Para criar um novo, filme clique no botão ( ) Novo, ou proceda da seguinte maneira. 1. Clique no menu Arquivo, Novo. Figura O Flash criará um novo filme em branco. 10

11 Abrir arquivo Você pode abrir um arquivo utilizando o botão ( ) Abrir, ou através do menu principal. 1. No menu principal, clique em Arquivo, Abrir. Figura A caixa de diálogo Abrir será exibida. Figura Em Examinar clique na seta para baixo e abra a pasta ou diretório onde o arquivo está armazenado. 4. Selecione o arquivo e clique no botão Abrir. 11

12 Salvar arquivo Depois de salvar um arquivo você pode abri-lo para continuar trabalhando com ele de novo. Quando salvamos um arquivo, estamos, armazenado no disco todas as alterações realizadas até o momento naquele arquivo. Veja como salvar um arquivo no Flash. 1. Clique no menu Arquivo, Salvar. Figura

13 2. A caixa de diálogo Salvar como será apresentada. Figura Clique na seta para baixo e escolha o local para armazenar o filme. 4. No campo Nome do arquivo, digite o nome que deseja dar ao filme. 5. Em Salvar como, escolha o formato no qual o arquivo será salvo. 6. Clique no botão Salvar. 13

14 Recortar, copiar e colar objetos A opção recortar do menu Editar, remove o objeto selecionado. Já a opção Copiar, mantém o objeto no seu local original e permite colar uma copia em outro local da área de desenho. Para copiar e colar objetos. 1. Utilizando a Ferramenta ( ) Seta, clique e arraste o cursor do mouse de forma que envolva todo objeto. Figura 1.8 Figura Dê um clique no menu Editar, escolha Copiar. Figura O objeto será copiado para área de transferência. 14

15 4. Clique no menu Editar, em seguida escolha Colar. Figura 2.1 Figura O objeto será duplicado na área de desenho. 15

16 A barra de ferramentas padrão Logo abaixo dos menus está localizada a barra de ferramentas padrão, que utiliza ícones para realizar os principais recursos como abrir um filme, salvar um filme, imprimir, etc. Figura 2.3 Novo Abrir Salvar Imprimir Visualizar impressão Recortar Copiar Colar Desfazer Refazer Encaixar Suavizar Acertar Girar Dimensionar Alinhar Cria um novo filme Abre um filme existente Salva o filme que está sendo desenvolvido naquele momento Imprime o filme atual Permite visualizar como i projeto será impresso Recorta um objeto Copia um objeto Cola um objeto Desfaz a última ação executada Refaz a última ação executada Ativa e desativa ajustes de conexão de linhas com a área de desenho Suaviza linhas Torna a linha mais reta Gira objetos em ângulos Amplia e reduz objetos Alinha objetos 16

17 A Timeline (Linha do tempo) A Timeline (linha do tempo) permite organizar os frames em seqüências. Os frames são organizados em camadas (ou layers) que são como folhas empilhadas, onde cada uma camada pode conter uma animação. Figura 2.4 (Timeline ou Linha do tempo) Ocultar a Timeline Você pode ocultar a Timeline Pressionando as teclas [Ctrl] + [Alt] + [T]. Pressione as mesmas teclas e a Timeline retorna. 17

18 Camadas As camadas são como folhas de acetato empilhadas uma sobre as outras. Cada camada pode possuir uma série animações independentes entre elas. Inserir nova camada Quando o Flash é executado, ele exibe somente uma Camada na Timeline, mas você pode inserir quantas camadas quiser. Veja como. 1. Clique no botão ( ) Adicionar Camada, ou; 2. Clique no menu Inserir, Camada. Figura 2.5 Figura Uma nova camada estará disponível na Timeline. 18

19 Excluir camada Para excluir uma camada. 1. Selecione a camada que deseja excluir. Figura Clique no botão ( ) Excluir Camada. 3. A camada selecionada para exclusão será retirada da Timeline. Figura

20 Nomear camadas Quando você insere uma nova camada na Timeline, o Flash nomeia essa camada como Camada2. Caso não goste do modo como o Flash nomeia as camadas, saiba que é possível trocar o nome que o Flash sugere por qualquer nome. Veja como proceder para trocar o nome de uma camada. 1. Dê um duplo clique no nome da camada. Figura Agora digite um novo nome e pressione a tecla Enter quando terminar. Figura

21 Área de desenho A área de desenho é o local onde desenha os elementos que farão parte do filme. Todo elemento (desenho, figura, texto, etc) que esteja na área retangular será visualizado no filme e tudo que esteja fora (parte cinza) não fará parte do filme. Alterando as medidas da área de desenho Você pode alterar as mediadas da área de desenho para criar banners ocupando somente uma pequena área da janela do navegador, ou para ocupar toda janela do navegador para exibir filmes. Saiba como alterar as mediadas da área desenho e obter o efeito desejado. 1. Clique no menu Modificar, Filme. Figura A caixa de diálogo Propriedades de Filme será apresentada. Figura Altere os valores da largura e altura da área de desenho. 4. Clique no botão OK. 21

22 Alterar a cor da área de desenho Por questão de gosto ou para combinar com a cor dos objetos, você pode alterar a cor da área de desenho, Veja como, modificar a cor da área de desenho. 1. Clique no menu Modificar, Filme. Figura A caixa de diálogo Propriedades do Filme será apresentada. 22

23 3. Em Cor de Fundo clique na seta para baixo para expandir a opção de cores disponíveis. Figura Selecione uma cor e clique no botão OK. 5. A área de desenho assume a cor selecionada. Figura 3.5 (Área de desenho) 23

24 Exibir régua A exibição de réguas serve para orientar o posicionamento de texto, desenhos e objetos no filme. O Flash conta com duas réguas de orientação. Uma na horizontal, parte superior da área de desenho e a outra na vertical, no canto esquerdo da área de desenho. Para exibir régua. 1. Clique no menu Exibir, Régua. Figura A área de desenho fica envolvida por duas réguas (Horizontal e vertical). Figura

25 Ocultar régua Se desejar ocultar as réguas de orientação, proceda da seguinte maneira. 1. Clique no menu Exibir. 2. Desmarque o item Régua. Exibir grade A utilização da grade tem como finalidade orientar o posicionamento de objetos na área de desenho. A grade não será impressa com o seu desenho, bem como não será visualizada no filme. Para exibir grade na área de desenho. 1. Clique no menu Exibir. 2. Posicione o cursor do mouse em Grade. Figura

26 3. Clique em Mostrar Grade Figura 3.9 Ocultar Grade Se desejar ocultar a grade de posicionamento de objetos, proceda da seguinte maneira. 1. Clique no menu Exibir. 2. Posicione o cursor do mouse em Grade. 3. Desmarque o item Mostrar Grade. 26

27 Painéis Os painéis são janelas flutuantes que podem ser deslocadas para qualquer lugar dentro do ambiente de trabalho. O Flash trabalha com grupos de painéis, cada um com sua finalidade. Portanto, os painéis são utilizados para organizar objetos, formatar texto e alterar elementos de um filme. Por exemplo, o painel caractere tem como finalidade formatar o texto. Figura 4.0 Exibir painéis Você pode trabalhar com vários painéis ao mesmo tempo. Saiba como exibi-los. 1. Clique no menu Janela. 2. Posicione o cursor do mouse em Painéis. Figura

28 3. Clique na opção de painel que desejar exibir. Por exemplo, painel Caractere. Ocultar painéis Se um determinado painel não está sendo usado ou está tomando espaço na área de trabalho, basta ocultá-lo. Veja como. 1. Clique no menu Janela. 2. Posicione o cursor do mouse em Painéis. Figura Clique na opção do painel que deseja ocultar. 28

29 Fechar todos os painéis Você pode fechar todos os painéis de uma só vez, deixando a área de trabalho livre e um melhor campo para área de desenho. 1. Clique no menu Janela. 2. Escolha o item Fechar Todas os Painéis. Figura Todos os painéis que estavam sendo exibidos são fechados. 29

30 Agrupar painéis Caso você queira mover um painel para um grupo de painéis, proceda da seguinte maneira. 1. Clique na guia do painel que deseja desagrupar. 2. Arraste a guia para cima do painel que deseja agrupar. Figura Solte o botão do mouse. O painel será agrupado. Figura

31 Desagrupar painéis Você pode separar os painéis que estejam agrupados, criando assim painéis individuais. Para desagrupar painéis. 1. Clique na guia do painel que deseja desagrupar. Figura Arraste a guia para fora da janela. 3. Solte a guia no local desejado. Figura

32 A caixa de ferramentas A caixa de ferramentas contém ferramentas para desenho, pintura, visualização, modificadores de cores, alteração de atributos, etc. Figura

33 Modificadores de ferramentas Dependendo da ferramenta escolhida, a caixa de ferramenta exibirá modificadores na seção Opções. Estes modificadores permitem alterar os atributos da ferramenta. Por exemplo, selecionado a ferramenta ( ) Pincel, serão exibidos os modificadores de tipo, tamanho e formato de pincel. Figura

34 ( ) Ferramenta Seta Esta ferramenta da formas a um objeto. Permite também selecionar e mover objetos. ( ) Ferramenta Subselecionar Move objetos e altera o formato através de pontos. ( ) Ferramenta Linha Permite criar linhas retas. Utilizada com a tecla Shift pressionada esta ferramenta cria linhas sem serrilhado. ( ) Ferramenta Laço A Ferramenta Laço permite selecionar parte de um objeto. ( ) Ferramenta Caneta Criar linhas ou curvas através de pontos de ligamento. Após criar as linhas pressione a tecla Esc para concluir, isto permite criar novas formas com esta ferramenta. 34

35 ( ) Ferramenta Texto Utilize a Ferramenta Texto para digitar texto na área de desenho. ( ) Ferramenta Oval Com esta ferramenta você pode desenhar círculos e elipses. Mantendo a tecla Shift pressionada enquanto utiliza esta ferramenta cria um círculo perfeito. ( ) Ferramenta Retângulo Utilize esta ferramenta para criar quadrados e retângulos. Mantendo a tecla Shift pressionada enquanto utiliza esta ferramenta cria um quadrado perfeito. ( ) Ferramenta Lápis Utilizar esta ferramenta é como se estivesse desenhando em uma folha de papel com a mão livre. Mantendo a tecla Shift pressionada enquanto utiliza esta ferramenta cria linhas retas horizontais e verticais. ( ) Ferramenta Pincel Essa ferramenta permite criar arte à mão livre.. Mantendo a tecla Shift pressionada enquanto utiliza esta ferramenta cria linhas retas horizontais e verticais. 35

36 ( ) Ferramenta Tinteiro Essa ferramenta criar bordas em objetos e figuras. Clique no interior do objeto para criar uma borda. ( ) Ferramenta Balde de tinta Preenche o interior de um objeto com uma cor preestabelecida ( ) Ferramenta Sombreador Captura uma cor de um objeto para que você possa utilizá-la em outro objeto. ( ) Ferramenta Apagador Apaga desenhos e formas. Selecione Ferramenta Apagador, clique e manter o botão do mouse pressionado enquanto arrasta sobre a área que deseja apagar. ( ) Ferramenta Mão Utilize a Ferramenta Mão para deslocar a área de desenho. Mantenha o botão do mouse pressionado enquanto arrasta a área de desenho. ( ) Ferramenta Zoom Permite ampliar ou reduzir a visualização da área de desenho. Em Opções, selecione o botão ( ) Aumentar para ampliar ou o botão ( ) Reduzir para reduzir a visualização. 36

37 Teclas de atalho para ferramentas Cada ferramenta tem uma tecla de atalho que facilita sua seleção para trabalho. Ferramenta Ferramenta Seta Ferramenta Subselecionar Ferramenta Linha Ferramenta Laço Ferramenta Caneta Ferramenta Texto Ferramenta Oval Ferramenta Retângulo Ferramenta Lápis Ferramenta Pincel Ferramenta Tinteiro Ferramenta Balde de tinta Ferramenta Sombreador Ferramenta Apagador Ferramenta Mão Ferramenta Zoom Atalho V A N L P T O R Y B S K I E H M ou Z 37

38 Inserir texto Para inserir texto em seu filme. 1. Selecione a ferramenta ( ) texto. 2. Clique no local desejado na Área de desenho para inserir o texto. Figura Digite o texto e pressione a tecla Enter para iniciar uma nova linha. 38

39 Inserir texto com largura definida Na medida que você vai digitando, o texto corre para direita ultrapassando a área de desenho. Você pode definir a largura que o texto ocupará. Veja como. 1. Clique na alça redonda sobre o retângulo. Figura Arraste para expandir a largura do bloco de texto. 3. Solte o botão do mouse. Alça redonda se transforma em um retângulo. Figura O texto fica delimitado a largura que você definiu. 39

40 Formatar texto Se você deseja aumentar ou reduzir o tamanho da fonte do texto, modificar a fonte em si, aplicar uma cor ao texto utilize o painel Caractere. Figura

41 Aplicar formatação de texto Para aplicar a formatação de texto você precisa ativar o painel Caractere. 1. Clique no menu Janela, posicione o cursor do mouse em Painéis. Clique em Caractere. Figura O Painel Caractere será exibido. Figura Selecione a fonte que será aplicada, a cor do texto o tamanho da fonte. 41

42 4. Na caixa de ferramentas, selecione a ferramenta ( ) Texto. 5. Basta digitar o texto na área de desenho. Figura

43 Desfazer e refazer alterações Às vezes, você faz alterações, em objetos ou texto e, depois, decide que as alterações feitas em seu filme não saíram como planejado. Por qualquer que seja a razão você pode desfazer as e refazer as suas alterações. Após ter cometido um erro em seu filme, ou talvez esteja fazendo experiências. 1. Clique no menu Editar, escolha Desfazer para desfazer alterações. Figura Você pode desfazer várias vezes as alterações realizadas até o estado original do objeto. 3. Caso deseje refazer uma alteração desfeita, clique no menu Editar, escolha Refazer. Figura

44 Desenhar retângulos com cantos arredondados Utilizando a ferramenta ( ) retângulo para tornar os cantos arredondados. 1. Selecione a ferramenta retângulo. 2. Ainda na caixa de ferramentas, em Opções, clique em ( ) Raio do Retângulo Arredondado. 3. A caixa de diálogo Configurações do Retângulo será exibida. Figura Insira um valor, em seguida clique no botão OK. 5. Clique na área de desenho e arraste até o local desejado Figura

45 Recortar partes de uma imagem Utilizando ( ) a ferramenta laço será possível recortar partes de uma imagem. 1. Selecione a ferramenta laço. 2. Clique na imagem e arraste sobre a área que deseja remover, solte o botão do mouse. Figura Desloque a imagem para outra área de desenho. 45

46 Mover objetos Você pode facilmente mover qualquer tipo de objetos na área de desenho. Para mover um objeto para um novo local na área de desenho utilize a ferramenta seta. 1. Na caixa de ferramenta escolha a ferramenta ( ) Seta. 2. Clique em um local próximo ao objeto e arraste até que todo o objeto esteja selecionado. Figura 6.2 Figura Solte o botão doe mouse. 4. Dê um clique no objeto e mantenha pressionado o botão do mouse. 5. Arraste o objeto para um novo local. Figura Solte o botão do mouse, em seguida clique em um local vazio da área de desenho para retirar a seleção do objeto. 46

47 Dimensionar objetos Caso não goste do tamanho ou a forma de um objeto, você pode dimensionar este objeto para que exiba a forma que deseja. 1. Utilize a ferramenta ( ) Seta para selecionar o objeto. Figura Na caixa de ferramentas clique no botão ( ) Dimensionar. 3. O objeto ficará envolvido por alças de redimensionamento. Figura 6.6 Figura Clique em uma das alças, mantenha o botão do mouse pressionado enquanto arrasta a alça. 5. Quando o objeto exibir o formato e tamanho desejado solte o botão do mouse. 6. Para retirar as alças de redimensionamento, clique em uma área vazia da área de desenho. 47

48 Girar um objeto Para girar um objeto, para que o mesmo assuma um novo ângulo, proceda da seguinte maneira. 1. Selecione o objeto que deseja girar. Para isso, utilize a ferramenta ( ) Seta. Figura Na caixa de ferramentas, clique no botão ( ) Girar. 3. O Objeto passa apresentar algumas alças que permitem girar o objeto em ângulos diferentes. 4. Clique na alça apropriada e gire o objeto na direção desejada. Figura 6.9 Figura Salte o botão do mouse quando o objeto estiver no ângulo desejado. 6. Para retirar as alças, clique em uma área vazia da área de desenho. 48

49 Apagar objetos 1. Na caixa de ferramenta escolha a ferramenta ( ) Seta. 2. Clique em um local próximo ao objeto e arraste até que todo o objeto esteja selecionado. Figura Agora basta pressionara tecla Delete no teclado para apagar o objeto. Figura

50 Apagar a cor de preenchimento de um objeto Se por algum motivo desejar remover a cor de preenchimento de um objeto, proceda da seguinte maneira. 1. Selecione a ferramenta ( ) Seta. 2. Clique no interior do objeto. Este procedimento selecionará a cor de preenchimento. Figura 7.3 Figura Pressionar a tecla Delete no teclado. Figura A cor de preenchimento será removida. 50

51 Apagar partes de um objeto A ferramenta Seta permite selecionar parte de um objeto para remoção. Por exemplo, você pode selecionar uma linha ou traçado para remoção. O procedimento de remoção de uma linha de um objeto é bem simples, veja como proceder. 1. Selecionar a Ferramenta ( ) Seta. 2. Posicione o cursor do mouse próximo à linha que deseja remover. 3. Note que o cursor toma a forma de uma pequena curva. Figura 7.6 Figura Clique na linha que deseja remover. Este procedimento selecionará a linha. 5. Pressione a tecla Delete no teclado. Figura A linha selecionada será removida. Dica Para selecionar duas ou mais linhas. Basta mantenha a tecla Shift pressionada enquanto clica sobre as linhas que deseja remover. 51

52 Invertendo objetos O Flash permite que você gire ou inverta objetos. Você pode selecionar um objeto que queira inverter utilizando a ferramenta Seta. Proceda da seguinte maneira para inverte objetos. 1. Na caixa de ferramenta selecione a ferramenta ( ) Seta, em seguida selecione o objeto desejado. Figura Clique no menu Modificar, posicione o cursor do mouse em Transformar. Figura

53 3. Escolha o tipo de inversão que deseja aplicar. Por exemplo, Inverter Horizontalmente. 4. O Objeto será invertido. Figura 8.1 Utilizando a ferramenta Apagador A ferramenta Apagador é utilizada para apagar áreas de um objeto arrastando o cursor do mouse. Selecionar um modificar fará com que a forma de apagar o objeto se modifique. Para apagar partes de um objeto utilizando a ferramenta Apagador. 1. Selecione a ferramenta ( ) Apagador. 2. Clique no local do objeto que deseja apagar e mantenha o botão do mouse pressionado. 3. Arraste por toda área do objeto para apagar conforme seu desejado. Figura 8.2 Figura Agora solte o botão do mouse. 53

54 Seleção de cor de traçado Quando um novo filme é iniciado, o Flash define uma cor padrão para preenchimento e o traçado dos objetos. Defina você mesmo a cor para o traçado do objeto através dos modificadores para cores. Selecione a cor do traçado do objeto na caixa de ferramentas. Figura 8.4 Após selecionar a cor do traçado, desenhe a forma desejada utilizada a ferramenta correta. 54

55 Seleção de cor de preenchimento Como mencionado anteriormente, o Flash inicia com definições de cores para o traçado e preenchimento de objetos. Selecione uma cor para o preenchimento do objeto através da caixa de ferramentas. Figura 8.5 Após selecionar a cor do preenchimento, desenhe a forma desejada utilizada a ferramenta correta. Dica Para aplicar uma cor de preenchimento em um objeto que já esteja na área de desenho. Utilize a ferramenta ( ) Balde de tinta. 55

56 Preenchimento com gradiente O Flash fornece várias maneiras de aplicar, criar e modificar cores de preenchimento. Usando o painel Preenchimento, você pode escolher as cores a serem aplicadas para preenchimento de um objeto. O preenchimento gradiente e feito selecionando duas cores, e o Flash se encarrega de cria as cores de transição. Este tipo de preenchimento pode ser de duas formas, radial ou linear. Radial Cria gradiente do interior do objeto para fora. Linear Cria gradiente de um lado para o outro do objeto. Figura

57 Aplicar preenchimento com gradiente Para aplicar preenchimento com gradiente em objetos, o painel Preenchimento deve estar ativo. 1. Clique no menu Janela. 2. Posicione o cursor do mouse em Painéis. Figura Clique em Preenchimento. 4. O painel Preenchimento será exibido. 5. Clique na seta para baixo, em seguida escolha Gradiente Linear ou Radial. Figura 8.8 Figura

58 6. Edite as cores que farão parte do intervalo do gradiente. Clique em ( ) Cor de Gradiente. 7. Na caixa de cores, selecione a primeira cor. Figura Repita o processo para selecionar a segunda cor para o intervalo de cores do gradiente. 9. Após selecionar as cores do intervalo, desenhe a forma desejada utilizada a ferramenta correta. 58

59 Capturar cor de preenchimento Você pode capturar a cor que preenche o interior de um objeto e aplicar em outro objeto. Veja como. 1. Selecione a ferramenta ( ) Sombreador. 2. Clique no interior do objeto que contém a cor que deseja capturar. Figura 9.1 Figura Agora posicione o cursor do mouse no interior do objeto na qual a cor capturada será aplicada. Note que o cursor do mouse se transforma em Balde de tinta com um pequeno cadeado. 4. Clique no interior do objeto e a cor será aplicada. Figura

60 Bibliotecas O Flash armazena em um único local, arquivos sonoros, símbolos, clipes de filme, gráficos, entre outros arquivos que podem ser utilizados em suas animações. Estes arquivos são organizados em pastas na biblioteca do Flash, que você acessa através do menu Janela, selecionando Biblioteca. Uma vez que você uma Biblioteca esteja aberta basta selecionar um elemento e arrastá-lo para área de desenho. 60

61 Trabalhando com botões Os botões têm diversas finalidades em páginas Web, pois permitem carregar uma página, executar sons, iniciar animações, enviar s, etc. No Flash, os botões podem ser animados e modificados respondendo a eventos do mouse, executando assim uma ação predeterminada. Inserir botões O Flash conta com uma excelente biblioteca de símbolos, botões e pequenos movie clips interativos que você poderá utilizar para acrescentar em seus filmes. Para inserir um botão em seu filme. 1. Clique no menu Janela, posicione o cursor do mouse em Bibliotecas Comuns. Figura Clique em Botões. 61

62 3. Dê um duplo clique em uma das pasta para expandi-la. 4. Selecione o botão adequado para seu filme. 5. Ainda na janela de biblioteca, clique no centro do botão que deseja inserir no filme, mantenha o botão pressionado enquanto arrasta o mesmo para área de desenho. Figura Solte o botão do mouse e o botão será inserido em seu filme. 62

63 Criando botões Você pode criar seus próprios botões no Flash. Os botões que você cria podem ser personalizados utilizando modificadores de preenchimento e traçado, alterando as formas conforme estado (normal, sobre, pressionado, etc.) do botão criando assim botões animados. 1. Clique no menu Inserir, Novo Símbolo. Figura A caixa de diálogo Propriedades do Símbolo será exibida. Figura Digite um nome para o botão, em seguida selecione a opção de comportamento Botão. 4. Clique no botão OK. 63

64 5. A Timeline exibe quatro quadros (frames): Normal, Sobre, Pressionado e Área. 6. Clique no frame Normal. 7. Utilize uma ferramenta para desenhar seu botão. Exemplo, a Ferramenta ( ) Oval. Figura Utilize os modificadores de Cores de preenchimento e traço do objeto. 9. Clique no segundo quadro (Sobre). 10. Clique no menu Inserir, Quadro-chave para duplicar o conteúdo do primeiro quadro. Figura

65 11. Faça as alterações necessárias. Você pode alterar não somente a cor de preenchimento e traçado, mas também modificar o formato do objeto. Figura Clique novamente no menu Inserir, Quadro-chave. Figura

66 13. Altere a aparência do objeto conforme seu desejo. Figura Clique novamente no menu Inserir, Quadro-chave. Figura

67 15. O Quadro Área não é visível durante a execução do filme, portanto não há necessidade de alterações do objeto neste quadro. Figura Após terminar o desenvolvimento do botão, clique no menu Editar, selecione Editar filme. Figura

68 17. Para incluir o botão que foi criado em seu filme, clique no menu Janela, selecione Biblioteca. Figura Na Janela Biblioteca, selecione o botão criado e arraste-o para a área de desenho. Figura

69 Definir uma ação para o botão Após criar ou incluir botão em seu filme, você notará que este botão não executa nenhuma ação. O botão reage a eventos de mouse, mas por enquanto não é capaz de iniciar uma animação ou enviar o usuário para uma página Web. Para criar uma ação para um botão proceda da seguinte maneira. 1. Clique com o botão direito do mouse sobre o botão no qual desejar inserir uma ação. Figura No menu suspenso, selecione o item Ações. 3. A janela Ações do objeto será apresentada. Clique em uma pasta de ações para expandir as opções. Por exemplo, a pasta Ações Básicas. 69

70 4. Selecione o tipo de ação que o botão fará. Por exemplo, para abrir uma URL, clique em Get URL. Figura 10.9 Figura No campo: URL, digite o endereço da página que será aberta. Janela Escolha um dos seguintes nomes de destino reservados: _self especifica o quadro atual na janela atual. _blank especifica uma nova janela. _parent especifica a origem do quadro atual. _top especifica o quadro de nível superior na janela atual. 6. Feche a janela Ações do Objeto e teste (menu Controlar, Testar Filme) a ação que acabou de criar. 70

71 Clipes de filme Para inserir clipes em seus filmes. 1. Clique no menu Janela, posicione o cursor do mouse em Bibliotecas Comuns, selecione Clipes de Filme. Figura Na janela Clipes de Filme escolha o filme que mais lhe agrada e arraste-o para a área de desenho. Figura

72 3. Solte o botão do mouse e o Clipe será inserido em seu filme. Figura

73 Trabalhando com sons O Flash permite a importação de arquivos de sons para seu filme. Os sons podem ser vinculados a eventos ou tocados continuamente junto com seu filme. Entre os formatos de sons suportados estão o formato MP3 e WAV. Sendo o formato MP3 bastante utilizado devido à redução no tamanho do arquivo, sem que o som perca qualidade. Inserir sons no seu filme Você pode criar uma camada independente em seu filme para executar som. Proceda da seguinte maneira. 1. Clique no menu Arquivo, Importar. Figura

74 2. A caixa de Importar será apresentada. Figura Em Examinar, clique na seta para baixo e escolha a pasta onde o arquivo de som está armazenado. 4. Em Arquivo do tipo, selecione o formato de arquivo de som. Por exemplo, Som WAV (*.wav). 5. Selecione o arquivo e clique no botão Abrir. 6. O arquivo selecionado será importado para a Biblioteca. 7. Para abrir a biblioteca acesse o menu Janela, em seguida escolha Biblioteca. Figura

75 8. Na janela Biblioteca, selecione o arquivo, mantenha o botão do mouse pressionado enquanto arrasta o arquivo para a área de desenho. Figura Clique no quadro onde o arquivo de som foi incluído. Figura

76 10. Para ajustar os controles de som acesse o menu Janela, posicione o cursor do mouse em Painéis. Figura Clique em som para abrir o painel Som. Figura Em Som, selecione o arquivo de som que você importou. 13. Em Efeito, selecione um efeito para o som. A opção Nenhum não aplica quaisquer efeitos ao arquivo de som. Escolha essa opção para remover os efeitos aplicados anteriormente. 76

77 A opção Canal Esquerdo/Canal Direito reproduz o som somente no canal esquerdo ou direito. A opção Fade Esquerda para Direita/ Fade Direita para Esquerda desloca o som de um canal para o outro. A opção Fade-in aumenta gradualmente a amplitude de um som pela sua duração. A opção Fade-out diminui gradualmente a amplitude de um som pela sua duração. A opção Personalizado permite que você crie seus próprios pontos de entrada e de saída do som usando Editar Envelope. 14. Em Sinc: Escolha uma opção de sincronização. A opção Evento sincroniza o som com a ocorrência de um evento. Um evento de som é reproduzido totalmente quando o respectivo quadro-chave inicial é exibido pela primeira vez, independentemente da Linha de Tempo, mesmo se o filme parar. A opção Iniciar é idêntica à Evento, exceto pelo fato de que, se o som já estiver em reprodução, será iniciada uma nova instância desse som. A opção Parar silencia o som especificado. A opção Fluxo sincroniza o som para reprodução em um site da Web. O Flash instrui a animação a acompanhar os fluxos de som. Se ele não conseguir desenhar quadros da animação rápido o suficiente, esses quadros serão ignorados. Ao contrário dos eventos de som, os fluxos de som são interrompidos se a animação parar. Além disso, a reprodução de um fluxo de som nunca pode ultrapassar a duração dos quadros ocupados pelo som. Os fluxos de som são misturados quando o filme é publicado. 15. Em Loop, digite um valor para especificar quantas vezes o som deve ser repetido. 16. Faça os testes necessários executando (menu Controlar, Testar Filme) o filme. Verifique se está tudo conforme planejado. 77

78 Biblioteca de sons Além da possibilidade de importar sons para seu filme, o Flash oferece uma biblioteca de sons para serem usados em seus filmes. Utilizando a Biblioteca de sons Para acessar a biblioteca de sons e inserir um som no seu filme, proceda da seguinte maneira. 1. Clique no menu Janela, posicione o cursor do mouse em Bibliotecas Comuns. Figura Selecione a opção Sons. 3. A Janela Biblioteca Sons será exibida. 78

79 4. Selecione o som que deseja inserir em seu filme a arraste-o para a área de desenho. Figura Clique no quadro onde o arquivo de som foi incluído. Figura

80 6. Para ajustar os controles de som acesse o menu Janela, posicione o cursor do mouse em Painéis. Figura Clique em Som, o painel Som será exibido. Figura Selecione um efeito, o tipo de sincronismo e quantidade de repetições em Loops. 9. Rode o filme e faça os testes necessários. Verifique se o som é executado como planejado. 80

81 Criando filmes A maneira com que o Flash criar as animações é similar ao desenvolvimento de desenhos animados. A animação é uma sucessão de quadros, dando a ilusão de movimentos dos objetos inseridos no filme. Há duas formas de criar animação, utilizando o Flash, animação com tweening e quadro-aquadro. Animação com tweening O desenvolvimento de uma animação com tweening, consiste em criar apenas o primeiro e último quadro do filme, e o Flash se encarrega de criar os demais, criando um efeito de transformação dos quadros intermediários. Utilizando esta forma de animação o tamanho do arquivo ficará bem menor, pois o Flash armazena somente os valores das mudanças dos quadros. Animação quadro-a-quadro O desenvolvimento de animação quadro-a-quadro é bem mais trabalhoso. Aqui o desenvolvedor cria movimentos de deslocamento dos objetos a cada quadro. Utilizando esta forma de animação você não recebe ajuda do Flash, portanto terá maior controla sobre a animação. 81

82 Animando um objeto sobre uma linha 1. Crie um novo filme, acesse o menu Arquivo, Novo. 2. Clique no quadro de número 20. Figura No menu Inserir, selecione Quadro. Figura 12.7 Figura Serão criados 20 quadros de animação. 5. No primeiro quadro desenhe um objeto, por exemplo, um círculo. Para isso utilize a ferramenta ( ) Oval. Figura

83 6. Clique no Frame 20 e posicione o objeto na parte superior direita. Figura Clique no menu Inserir, Criar Interpolação de Movimento. Figura 13.1 Figura

84 8. Clique no primeiro quadro, posicione o objeto na parte inferior esquerda. Figura 13.3 Figura Clique em ( ) Adicionar Camada Guia. Figura Com camada de guia selecionada, utilize ( ) a ferramenta lápis para desenha curvas suaves, que ligue os objetos círculo inferior esquerdo ao circulo superior direito. 11. Teste seu filme (menu Controlar, Testar Filme) e veja se o objeto percorre o caminho que você desenhou. 84

85 Criando uma animação quadro-a-quadro Como mencionado anteriormente, na animação quadro-a-quadro o desenvolvedor cria movimentos de deslocamento dos objetos a cada quadro. Para criar uma animação para um objeto, é necessário criar camadas independentes para cada objeto. Veja o exemplo a seguir. 1. Utilize a ferramenta ( ) Texto e digite um texto qualquer na área de desenho. Por exemplo, Seja bem-vindo. Figura Aproveite e nomeie esta camada como camada texto. Figura Clique no botão ( ) Adicionar camada, para adicionar uma nova camada. 85

86 4. Insira um botão nesta nova camada. Para isso acesse o menu Janela, posicione o cursor do mouse em Bibliotecas comuns, escolha Botões. Figura Clique em Botões. 6. Dê um duplo clique em uma das pasta para expandi-la. 7. Selecione o botão adequado para seu filme. 8. Ainda na janela de biblioteca, clique no centro do botão que deseja inserir no filme, mantenha o botão pressionado enquanto arrasta o mesmo para área de desenho. Figura

87 9. Solte o botão do mouse e o botão será inserido em seu filme. Renomeie a camada para botao. Figura Inclua mais uma camada clicando no botão ( ) Adicionar camada. Renomeie esta camada para introducao. 11. Utilize a ferramenta texto para digitar um texto qualquer. Figura Para movimentar um objeto, selecione o último quadro da animação. Por exemplo, o quadro de número 20. Figura

88 13. No menu Inserir, selecione o item Quadro. Figura Isso faz com que todos os quadros tenham o mesmo objeto. 15. Clique em um quadro intermediário. Por exemplo, o quadro de número No menu Inserir, selecione o item Criar quadro chave. Figura 14.4 Figura Arraste o objeto para um novo local, ou modifique o formato cor, tamanho, etc. 18. Repita o processo para movimentar os demais objetos. 19. Pressione a teclas Ctrl + Enter para testar o filme. 88

89 ActionScript ActionScript é a linguagem utilizada para criar scripts no Flash. Você pode usar a linguagem ActionScript para controlar os objetos em seu filme, utilizando ações para navegação e interagindo com o usuário. Abrir o painel Ações Para abrir o painel e definir uma ação. 1. Clique no menu Janela, selecione Ações. Figura

90 2. O painel será ativado. Figura

91 Ações Básicas O Flash pode escrever ações básicas para você. Estas ações permitem controlar a navegação do usuário. Entre as ações básicas disponíveis estão: Ação Go To Play Stop Toggle High Quality Stop All Sounds Get URL FSCommand Load Movie Unload Movie Tell Target If Frame Is Loaded On Mouse Event Descrição Desloca para um quadro ou cena Inicia um filme Interrompe a execução do filme Ajuste de qualidade da exibição do filme Terminar a execução de todos os sons Vai para uma URL Controle do Flash Player que está executando um filme Carrega filmes Descarrega filmes Controla filmes e movie clips Verifica se o frame foi carregado Define os eventos do mouse 91

92 Selecionar uma ação Para selecionar uma ação. 1. Clique no botão No menu que é apresentado escolha uma categoria. Figura Em seguida selecione uma ação. 92

93 Interromper a execução do filme Você pode criar uma ação para interromper a execução do filme. Veja como. 1. Clique com o botão direito no quadro que deseja inserir a ação. Figura No menu suspenso, selecione o item Ações. Figura

94 4. Na janela Ações do Quadro, clique no botão No menu que é apresentado escolha Ações Básicas, em seguida a ação Stop. Figura Feche a janela Ações do Quadro. 5. Note que o quadro selecionado exibe um pequeno a, indicando que o quadro foi definido como quadro de ação. Figura

95 Publicar filmes Na hora de publicar seu filme, o Flash faz todo o serviço para você, criando um arquivo com extensão swf e a página HTML para exibi-lo. Para criar um filme para ser utilizado na Internet, proceda da seguinte maneira. 1. Abra o filme que deseja publicar. 2. Clique no menu Arquivo, Publicar. Figura Um novo arquivo será criado com extensão swf. 4. O Flash criará o filme e o arquivo HTML necessário para visualizar a animação no navegador padrão. Dica Para ter maior controle na hora de publicar seu filme, selecione o menu Arquivo, clique em Configurações de Publicação. 95