apostila macromedia flash 5 - wrmtech.files.wordpress.com · para a internet, o programa está em...

APOSTILA

MACROMEDIA FLASH 5

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

Sumário

Introdução...........................................................................................................................................07

Iniciar o Flash 5..................................................................................................................................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

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

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

Flash 5

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

Flash 5

Iniciar o Flash 5 Após devidamente instalado o Flash 5 pode ser executado da seguinte maneira.

1. Clique em Iniciar. 2. Posicione o cursor do mouse em Programas, Macromedia Flash 5.

Figura 1.0 3. Clique em Flash 5.

8

Flash 5

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

Flash 5

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 1.3 2. O Flash criará um novo filme em branco.

10

Flash 5

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 1.4 2. A caixa de diálogo Abrir será exibida.

Figura 1.5 3. 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

Flash 5

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 1.6

12

Flash 5

2. A caixa de diálogo Salvar como será apresentada.

Figura 1.7 3. 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

Flash 5

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 1.9

2. Dê um clique no menu Editar, escolha Copiar.

Figura 2.0 3. O objeto será copiado para área de transferência.

14

Flash 5

4. Clique no menu Editar, em seguida escolha Colar.


5. O objeto será duplicado na área de desenho.

15

Flash 5

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 Cria um novo filme Abrir Abre um filme existente Salvar Salva o filme que está sendo desenvolvido naquele momento Imprimir Imprime o filme atual Visualizar impressão Permite visualizar como i projeto será impresso Recortar Recorta um objeto Copiar Copia um objeto Colar Cola um objeto Desfazer Desfaz a última ação executada Refazer Refaz a última ação executada Encaixar Ativa e desativa ajustes de conexão de linhas com a área de

desenho Suavizar Suaviza linhas Acertar Torna a linha mais reta Girar Gira objetos em ângulos Dimensionar Amplia e reduz objetos Alinhar Alinha objetos

16

Flash 5

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

Flash 5

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 2.6 3. Uma nova camada estará disponível na Timeline.

18

Flash 5

Excluir camada Para excluir uma camada.

1. Selecione a camada que deseja excluir.

Figura 2.7 2. Clique no botão ( ) Excluir Camada.

3. A camada selecionada para exclusão será retirada da Timeline.

Figura 2.8

19

Flash 5

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 2.9 2. Agora digite um novo nome e pressione a tecla Enter quando terminar.

Figura 3.0

20

Flash 5

Á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 3.1 2. A caixa de diálogo Propriedades de Filme será apresentada.

Figura 3.2 3. Altere os valores da largura e altura da área de desenho. 4. Clique no botão OK.

21

Flash 5

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 3.3 2. A caixa de diálogo Propriedades do Filme será apresentada.

22

Flash 5

3. Em “Cor de Fundo” clique na seta para baixo para expandir a opção de cores

disponíveis.

Figura 3.4 4. 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

Flash 5

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 3.6 2. A área de desenho fica envolvida por duas réguas (Horizontal e vertical).

Figura 3.7

24

Flash 5

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 3.8

25

Flash 5

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

Flash 5

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 4.1

27

Flash 5

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.


Figura 4.2 3. Clique na opção do painel que deseja ocultar.

28

Flash 5

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 4.3 3. Todos os painéis que estavam sendo exibidos são fechados.

29

Flash 5

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 4.4

3. Solte o botão do mouse. O painel será agrupado.

Figura 4.5

30

Flash 5

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 4.6

2. Arraste a guia para fora da janela.

3. Solte a guia no local desejado.

Figura 4.7

31

Flash 5

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 4.8

32

Flash 5

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 4.9

33

Flash 5

( ) 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

Flash 5

( ) 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

Flash 5

( ) 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

Flash 5

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

37

Flash 5

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 5.0 3. Digite o texto e pressione a tecla Enter para iniciar uma nova linha.

38

Flash 5

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 5.1 2. 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 5.2 4. O texto fica delimitado a largura que você definiu.

39

Flash 5

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 5.3

40

Flash 5

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 5.4

2. O Painel Caractere será exibido.

Figura 5.5 3. Selecione a fonte que será aplicada, a cor do texto o tamanho da fonte.

41

Flash 5

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

Figura 5.6

42

Flash 5

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 6.7 2. 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 5.8

43

Flash 5

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 5.9 4. Insira um valor, em seguida clique no botão OK. 5. Clique na área de desenho e arraste até o local desejado

Figura 6.0

44

Flash 5

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 6.1

3. Desloque a imagem para outra área de desenho.

45

Flash 5

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.


3. 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 6.4 6. 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

Flash 5

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 6.5 2. Na caixa de ferramentas clique no botão ( ) Dimensionar.

3. O objeto ficará envolvido por alças de redimensionamento.


4. 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

Flash 5

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 6.8 2. 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.


5. 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

Flash 5

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 7.1

3. Agora basta pressionara tecla “Delete” no teclado para apagar o objeto.

Figura 7.2

49

Flash 5

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.


3. Pressionar a tecla “Delete” no teclado.

Figura 7.5 4. A cor de preenchimento será removida.

50

Flash 5

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.


4. Clique na linha que deseja remover. Este procedimento selecionará a linha. 5. Pressione a tecla Delete no teclado.

Figura 7.8 6. 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

Flash 5

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 7.9 2. Clique no menu Modificar, posicione o cursor do mouse em Transformar.

Figura 8.0

52

Flash 5

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.


4. Agora solte o botão do mouse.

53

Flash 5

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

Flash 5

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

Flash 5

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 8.6

56

Flash 5

Aplicar preenchimento com gradiente Para aplicar preenchimento com gradiente em objetos, o painel “Preenchimento” deve estar ativo.


Figura 8.7 3. Clique em Preenchimento. 4. O painel Preenchimento será exibido. 5. Clique na seta para baixo, em seguida escolha Gradiente Linear ou Radial.


57

Flash 5

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 9.0

8. 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

Flash 5

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.


3. 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 9.3

59

Flash 5

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

Flash 5

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 e-mails, 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 9.4 2. Clique em Botões.

61

Flash 5

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 9.5 6. Solte o botão do mouse e o botão será inserido em seu filme.

62

Flash 5

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 9.6 2. A caixa de diálogo Propriedades do Símbolo será exibida.

Figura 9.7 3. Digite um nome para o botão, em seguida selecione a opção de comportamento

“Botão”. 4. Clique no botão OK.

63

Flash 5

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 9.8 8. 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 9.9

64

Flash 5

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 10.0 12. Clique novamente no menu Inserir, Quadro-chave.

Figura 10.1

65

Flash 5

13. Altere a aparência do objeto conforme seu desejo.

Figura 10.2 14. Clique novamente no menu Inserir, Quadro-chave.

Figura 10.3

66

Flash 5

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 10.4 16. Após terminar o desenvolvimento do botão, clique no menu Editar, selecione Editar

filme.

Figura 10.5

67

Flash 5

17. Para incluir o botão que foi criado em seu filme, clique no menu Janela, selecione

Biblioteca.

Figura 10.6 18. Na Janela Biblioteca, selecione o botão criado e arraste-o para a área de desenho.

Figura 10.7

68

Flash 5

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 10.8 2. 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

Flash 5

4. Selecione o tipo de ação que o botão fará. Por exemplo, para abrir uma URL, clique

em Get URL.


5. 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

Flash 5

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 11.1 2. Na janela Clipes de Filme escolha o filme que mais lhe agrada e arraste-o para a área

de desenho.

Figura 11.2

71

Flash 5

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

Figura 11.3

72

Flash 5

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 11.4

73

Flash 5

2. A caixa de Importar será apresentada.

Figura 11.5 3. 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 11.6

74

Flash 5

8. Na janela Biblioteca, selecione o arquivo, mantenha o botão do mouse pressionado enquanto arrasta o arquivo para a área de desenho.

Figura 11.7 9. Clique no quadro onde o arquivo de som foi incluído.

Figura 11.8

75

Flash 5

10. Para ajustar os controles de som acesse o menu Janela, posicione o cursor do mouse

em Painéis.

Figura 11.9 11. Clique em som para abrir o painel Som.

Figura 12.0 12. 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

Flash 5

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

Flash 5

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 12.1 2. Selecione a opção “Sons”. 3. A Janela Biblioteca Sons será exibida.

78

Flash 5

4. Selecione o som que deseja inserir em seu filme a arraste-o para a área de desenho.

Figura 12.2 5. Clique no quadro onde o arquivo de som foi incluído.

Figura 12.3

79

Flash 5

6. Para ajustar os controles de som acesse o menu Janela, posicione o cursor do mouse

em Painéis.

Figura 12.4 7. Clique em Som, o painel Som será exibido.

Figura 12.5 8. 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

Flash 5

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-a-quadro. 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

Flash 5

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 12.6 3. No menu Inserir, selecione Quadro.


4. 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 12.9

82

Flash 5

6. Clique no Frame 20 e posicione o objeto na parte superior direita.

Figura 13.0

7. Clique no menu Inserir, Criar Interpolação de Movimento.


83

Flash 5

8. Clique no primeiro quadro, posicione o objeto na parte inferior esquerda.


9. Clique em ( ) Adicionar Camada Guia.

Figura 13.5

10. 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

Flash 5

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 13.6 2. Aproveite e nomeie esta camada como camada texto.

Figura 13.7 3. Clique no botão ( ) Adicionar camada, para adicionar uma nova camada.

85

Flash 5

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 13.8 5. 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 13.9

86

Flash 5

9. Solte o botão do mouse e o botão será inserido em seu filme. Renomeie a camada para

“botao”.

Figura 14.0 10. 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 14.1 12. Para movimentar um objeto, selecione o último quadro da animação. Por exemplo, o

quadro de número 20.

Figura 14.2

87

Flash 5

13. No menu Inserir, selecione o item Quadro.

Figura 14.3 14. 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 5.

16. No menu Inserir, selecione o item “Criar quadro chave”.


17. 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

Flash 5

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 14.6

89

Flash 5

2. O painel será ativado.

Figura 14.7

90

Flash 5

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 Descrição Go To Desloca para um quadro ou cena Play Inicia um filme Stop Interrompe a execução do filme Toggle High Quality Ajuste de qualidade da exibição do filme Stop All Sounds Terminar a execução de todos os sons Get URL Vai para uma URL FSCommand Controle do Flash Player que está executando um filme Load Movie Carrega filmes Unload Movie Descarrega filmes Tell Target Controla filmes e movie clips If Frame Is Loaded Verifica se o frame foi carregado On Mouse Event Define os eventos do mouse

91

Flash 5

Selecionar uma ação Para selecionar uma ação.

1. Clique no botão “+”. 2. No menu que é apresentado escolha uma categoria.

Figura 14.8 3. Em seguida selecione uma ação.

92

Flash 5

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 14.9 2. No menu suspenso, selecione o item Ações.

Figura 15.0

93

Flash 5

4. Na janela “Ações do Quadro”, clique no botão “+”. 3. No menu que é apresentado escolha “Ações Básicas”, em seguida a ação “Stop”.

Figura 15.1 4. 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 15.2

94

Flash 5

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 15.3

3. 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

apostila macromedia flash 5 - wrmtech.files.wordpress.com · para a internet, o programa está em...

Documents