Apostila Flash 4

Departamento de Tecnologias Educacionais Jorge Farias

Sumário 1. Abrindo o Flash.............................................................................. 3 2. Mudando tamanho e cor do Fundo ....................................................... 3 3. Inserindo imagens .......................................................................... 3 4. Desenhando figuras......................................................................... 4 5. Animação quadro a quadro ................................................................ 7 6. Interpolação de movimento ............................................................... 9 7. Interpolação de forma ....................................................................11 8. Interpolação com mudança de cor ......................................................14 9. Interpolação com rotação ................................................................17 10. Guia de movimento ......................................................................19 11. Máscara ....................................................................................22 12. Clipe de filme.............................................................................26 13. Botões......................................................................................30 14. Adicionando Som .........................................................................34 15. Publicando.................................................................................35

Colégio Rio Branco Unidade Higienópolis

2

Departamento de Tecnologias Educacionais Jorge Farias 2009

1. Abrindo o Flash a. Clique em Iniciar > Todos os Programas > Macromedia Flash 4 > Flash 4 b. Clique em Arquivo > Novo

2. Mudando tamanho e cor do Fundo Clique em Modificar > Filme

Tamanho do fundo: 640 pixels x 480 pixels

Escolha a cor do fundo

3. Inserindo imagens a. Clique em Arquivo > Importar

Colégio Rio Branco Unidade Higienópolis

3

Departamento de Tecnologias Educacionais Jorge Farias 2009

b. Para diminuir ou aumentar a figura, clique com o botão direito sobre ela e selecione Redimensionar c. Para girar a figura, clique com o botão direito sobre ela e selecione Girar

4. Desenhando figuras

Use a Barra de Ferramentas de Desenho Seta –seleção de objetos Linha – criação de linhas retas Oval – criação de elipses e círculos Lápis – desenho à mão livre Tinteiro –colore o contorno dos objetos Selecionar Cor – Adiciona a cor selecionada Mão – movimentação da cena na tela Encaixar – ajusta os objetos na grade do filme Laço – seleciona um objeto pelo contorno Texto – inserção de texto Retângulo – cria uma figura de retângulo Pincel – desenho à mão livre em forma de pincel Balde de Tinta – preenche objetos Borracha – apaga linhas e/ou preenchimentos Lupa – controle de visualização do filme

Colégio Rio Branco Unidade Higienópolis

4

Departamento de Tecnologias Educacionais Jorge Farias 2009

a. Selecione a linha, quadrado ou retângulo

Defina a cor da linha do contorno Defina a espessura Defina o estilo da linha

b. Selecione a linha, quadrado ou retângulo

Defina a cor do preenchimento

Paleta de cores

Preenchimento degradê

Colégio Rio Branco Unidade Higienópolis

5

Departamento de Tecnologias Educacionais Jorge Farias 2009

c. Para fazer efeitos degradê:

Clique aqui

Escolha Gradiente

Clique e arraste à direita para adicionar um novo nível de gradiente

Escolha a intensidade da cor

Escolha Linear ou Radial

Escolha a cor desejada

Insira a nova cor na tabela

Colégio Rio Branco Unidade Higienópolis

6

Departamento de Tecnologias Educacionais Jorge Farias 2009

5. Animação quadro a quadro

a. Clique no quadro-chave

que aparece

b. Desenhe uma forma

c. Crie mais 3 quadros-chave. Para isso, clique com o botão direito do mouse em cima do quadro número 2 > Inserir quadro-chave

Colégio Rio Branco Unidade Higienópolis

7

Departamento de Tecnologias Educacionais Jorge Farias 2009

d. Agora você tem 4 quadros-chave com a mesma forma desenhada. e. Em cada quadro, mova o objeto de forma que fiquem diferentes entre si, isto é, no quadro 2 mova a imagem para a direita e para baixo. No quadro 3, mova mais e no quatro 4, mais ainda. Quadro 1

Quadro 2

Quadro 3

Quadro 4

f. Agora tecle Enter.

Colégio Rio Branco Unidade Higienópolis

8

Departamento de Tecnologias Educacionais Jorge Farias 2009

6. Interpolação de movimento

a. Clique no quadro-chave

que aparece

b. Desenhe uma forma

c. Crie um segundo quadro-chave, mas distante do primeiro

Colégio Rio Branco Unidade Higienópolis

9

Departamento de Tecnologias Educacionais Jorge Farias 2009

d. Selecione todos os quadros. Para isso, clique no primeiro quadro-chave e, sem soltar o botão do mouse, arraste até o outro quadro-chave, e solte. O intervalo entre os dois quadros-chave ficará preto.

e. Clique com o botão direito em cima do intervalo preto > Criar Interpolação de Movimento. A linha do tempo ficará lilás.

f. Tecle Enter

Colégio Rio Branco Unidade Higienópolis

10

Departamento de Tecnologias Educacionais Jorge Farias 2009

7. Interpolação de forma

a. Clique no quadro-chave

que aparece

b. Desenhe uma forma

c. Crie um outro quadro-chave distante, mas com uma forma diferente

Colégio Rio Branco Unidade Higienópolis

11

Departamento de Tecnologias Educacionais Jorge Farias 2009

d. Clique no quadro-chave 1 e vá em Modificar > Desmembrar

e. Clique no último quadro-chave e também vá ao menu Modificar > Desmembrar f. Selecione todos os quadros. Para isso, clique no primeiro quadro-chave e, sem soltar o botão do mouse, arraste até o outro quadro-chave, e solte. O intervalo entre os dois quadros-chave ficará preto.

Colégio Rio Branco Unidade Higienópolis

12

Departamento de Tecnologias Educacionais Jorge Farias 2009

g. Clique com o botão direito em cima do intervalo preto > Propriedades > aba Interpolação > Forma > OK

h. O intervalo entre os quadros-chave ficará verde.

Uma das etapas de transformação do círculo para o quadrado

g. Tecle Enter

Colégio Rio Branco Unidade Higienópolis

13

Departamento de Tecnologias Educacionais Jorge Farias 2009

8. Interpolação com mudança de cor a. Clique no quadro-chave

que aparece

b. Desenhe uma forma

c. Clique na forma que você desenhou e vá ao menu Inserir > Converter em símbolo > Gráfico

Colégio Rio Branco Unidade Higienópolis

14

Departamento de Tecnologias Educacionais Jorge Farias 2009

d. Selecione todos os quadros. Para isso, clique no primeiro quadro-chave e, sem soltar o botão do mouse, arraste até o outro quadro-chave, e solte. O intervalo entre os dois quadros-chave ficará preto.

e. Clique com o botão direito no intervalo preto e selecione Criar Interpolação de Movimento. A linha do tempo ficará lilás.

f. Agora, selecione o desenho do último quadro-chave

Colégio Rio Branco Unidade Higienópolis

15

Departamento de Tecnologias Educacionais Jorge Farias 2009

g. Vá ao menu Modificar > Instância > Efeito de Cor

h. Existem os seguintes efeitos vá ao menu Modificar > Instância > Efeito de Cor Brilho: torna o objeto mais claro ou escuro; Tonalidade: muda o tom ou seleciona outra cor; Alpha: torna o objeto transparente; Especial: modifica os quatro anteriores juntos.

Processo no qual o objeto passa da mudança de tonalidade ao alpha

Colégio Rio Branco Unidade Higienópolis

16

Departamento de Tecnologias Educacionais Jorge Farias 2009

9. Interpolação com rotação

a. Clique no quadro-chave

que aparece

b. Agora crie sua forma

c. Clique na forma que você desenhou e vá ao menu Inserir > Converter em símbolo > Gráfico

Colégio Rio Branco Unidade Higienópolis

17

Departamento de Tecnologias Educacionais Jorge Farias 2009

d. Selecione todos os quadros. Para isso, clique no primeiro quadro-chave e, sem soltar o botão do mouse, arraste até o outro quadro-chave, e solte. O intervalo entre os dois quadros-chave ficará preto.

e. Clique com o botão direito no intervalo preto e selecione Criar Interpolação de Movimento. A linha do tempo ficará lilás.

f. Selecione o desenho do último quadro-chave g. Vá ao menu Janela > Inspetores > Transformar h. Insira 180º na caixa Girar e clique em Aplicar. Tecle Enter.

Colégio Rio Branco Unidade Higienópolis

18

Departamento de Tecnologias Educacionais Jorge Farias 2009

10. Guia de movimento

a. Clique no quadro-chave

que aparece

b. Agora crie sua forma

c. Crie um segundo quadro-chave, mas distante do primeiro

Colégio Rio Branco Unidade Higienópolis

19

Departamento de Tecnologias Educacionais Jorge Farias 2009

d. Selecione todos os quadros. Para isso, clique no primeiro quadro-chave e, sem soltar o botão do mouse, arraste até o outro quadro-chave, e solte. O intervalo entre os dois quadros-chave ficará preto.

e. Clique com o botão direito no intervalo preto e selecione Criar Interpolação de Movimento. A linha do tempo ficará lilás.

f. Clique com o botão direito na camada que contém o desenho e selecione Adicionar Guia de Movimento

Colégio Rio Branco Unidade Higienópolis

20

Departamento de Tecnologias Educacionais Jorge Farias 2009

g. No primeiro quadro-chave da Guia de Movimento desenhe com o lápis a trajetória que o objeto fará

h. Agora, na camada da bolinha, leve o objeto do último quadro-chave à outra posição

i. Certifique-se que os objetos nos dois quadros-chave estão “grudados” na trajetória. Ao clicar no desenho, o botão Encaixar deve estar ativado.

j. Tecle Enter

Colégio Rio Branco Unidade Higienópolis

21

Departamento de Tecnologias Educacionais Jorge Farias 2009

11. Máscara

a. Clique no quadro-chave

que aparece

b. Escreva um texto no primeiro quadro-chave e crie um segundo quadro-chave, mas distante do primeiro

c. Clique com o botão direito na camada e selecione Inserir Camada

Colégio Rio Branco Unidade Higienópolis

22

Departamento de Tecnologias Educacionais Jorge Farias 2009

d. Clique duas vezes em cada camada para nomeá-las.

e. Na nova camada, no primeiro quadro-chave, faça um desenho que servirá de máscara.

f. Na camada da máscara, crie um quadro-chave distante, com a mesma distância da camada do texto.

Colégio Rio Branco Unidade Higienópolis

23

Departamento de Tecnologias Educacionais Jorge Farias 2009

g. No último quadro-chave da camada da máscara, posicione o objeto na posição final

h. Selecione todos os quadros. Para isso, clique no primeiro quadro-chave e, sem soltar o botão do mouse, arraste até o outro quadro-chave, e solte. O intervalo entre os dois quadros-chave ficará preto.

i. Clique com o botão direito em cima do intervalo preto > Criar Interpolação de Movimento. A linha do tempo ficará lilás.

Colégio Rio Branco Unidade Higienópolis

24

Departamento de Tecnologias Educacionais Jorge Farias 2009

j. Clique com o botão direito sobre a camada da máscara e selecione Máscara

Sem efeito de máscara

Com efeito de máscara

Colégio Rio Branco Unidade Higienópolis

25

Departamento de Tecnologias Educacionais Jorge Farias 2009

12. Clipe de filme * Nosso exemplo será raios do sol

a. Vá ao menu Inserir > Novo símbolo > Clipe de filme, e dê um nome para a cena

b. Uma nova cena se abrirá

Colégio Rio Branco Unidade Higienópolis

26

Departamento de Tecnologias Educacionais Jorge Farias 2009

c. Desenhe ou importe uma figura. Para desenhar, use a barra de ferramentas. Para Importar, vá ao menu Arquivo > Importar. Nesse caso, arraste a imagem escolhida para a cena

d. Selecione a imagem e vá ao menu Inserir > Converter em Símbolo > Gráfico

e. Crie um quadro-chave distante e mude a posição ou sentido da imagem (botão direito na figura – Girar)

Colégio Rio Branco Unidade Higienópolis

27

Departamento de Tecnologias Educacionais Jorge Farias 2009

f.

Selecione todos os quadros, depois clique com o botão direito sobre o intervalo e selecione Criar Interpolação de Movimento

g. Volte para a Cena1 clicando nela

h. Vá ao menu Inserir > Camada

Colégio Rio Branco Unidade Higienópolis

28

Departamento de Tecnologias Educacionais Jorge Farias 2009

i. Clique duas vezes na camada nova e renomeie

j. Clique no primeiro quadro-chave da camada nova e vá ao menu Janela > Biblioteca k. Procure na caixa que aparece a cena que você criou (no nosso caso, Raios) l. Arraste-a para a cena atual, ajuste e tecle Enter.

Colégio Rio Branco Unidade Higienópolis

29

Departamento de Tecnologias Educacionais Jorge Farias 2009

13. Botões Adicionando um botão pronto a. Vá ao menu Biblioteca > Botões

b. Escolha e arraste o botão desejado para sua cena

Colégio Rio Branco Unidade Higienópolis

30

Departamento de Tecnologias Educacionais Jorge Farias 2009

c. Clique com o botão direito no botão desejado e selecione Propriedades

d. Na aba Ações defina qual será a ação do botão

Os mais usados: Play – inicia a animação automaticamente na cena e/ou quadro desejado Stop – para a animação Go To – define que cena e/ou quadro o botão levará Loop – manterá a animação funcionando por tempo indeterminado, em repetição

Colégio Rio Branco Unidade Higienópolis

31

Departamento de Tecnologias Educacionais Jorge Farias 2009

Fazendo um botão novo a. Desenhe o botão ou importe uma figura. Para importar, vá ao menu Arquivo > Importar

b. Transforme seu desenho ou figura em botão: Inserir > Converter em Símbolo > Botão

c. Clique com o botão direito do mouse no botão e selecione Editar no Local

Colégio Rio Branco Unidade Higienópolis

32

Departamento de Tecnologias Educacionais Jorge Farias 2009

Normal Não é necessário alterar; Sobre

Pode substituir o desenho fazendo outro, ou diminuir, aumentá-lo etc. Quando o mouse passar por cima, o botão assumirá a forma criada;

Pressionado Igual ao Sobre, mas a ação acontecerá quando o botão for pressionado; Área

Faça um quadrado ou círculo em volta do local (botão) onde o mouse passará e a ação acontecerá.

d. Volta para a acena anterior clicando nela e tecle Enter

Colégio Rio Branco Unidade Higienópolis

33

Departamento de Tecnologias Educacionais Jorge Farias 2009

14. Adicionando Som a. Vá ao menu Arquivo > Importar. Selecione o som e clique em abrir. Não aparecerá o som e provavelmente dará um erro. É normal.

b. Escolha o quadro-chave onde o som se iniciará e clique com o botão direito sobre ele, selecionando Propriedades

c. Na aba Som escolha a música e clique em OK

Obs: o Flash 4 só importa sons em formato WAV ou AIFF. Colégio Rio Branco Unidade Higienópolis

34

Departamento de Tecnologias Educacionais Jorge Farias 2009

15. Publicando (ou Transformando em filme) a. Após terminar o trabalho, vá ao menu Arquivo > Definições de Publicação

b. Escolha o formato adequado

swf = só poderá ser visualizado caso o computador tenha instalado o plug-in do Flash Player html = transforma o arquivo em uma página compatível com a Internet exe = possibilita o arquivo ser executado em qualquer computador, como um filme, independente do plug-in mov = formato exclusivo da Apple, mas funciona em computadores com Windows e player QuickTime Colégio Rio Branco Unidade Higienópolis

35

Departamento de Tecnologias Educacionais Jorge Farias 2009