Apostila Flash 8

FLASH 8

Departamento de Tecnologias Educacionais

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

2

1. Abrindo o Flash................................................................. 3 2. Mudando tamanho e cor do fundo........................................... 3 3. Inserindo imagens.............................................................. 4 4. Desenhando figuras ............................................................ 5 5. Animação quadro a quadro ................................................... 6 6. Interpolação de movimento .................................................. 8 7. Interpolação de forma .......................................................11 8. Interpolação com mudança de cor .........................................16 9. Interpolação com transparência ............................................20 10. Interpolação com rotação ..................................................24 11. Guia de movimento .........................................................28 12. Máscara .......................................................................32 13. Clipe de filme ................................................................37 14. Botões .........................................................................43 15. Publicando (ou transformando em filme)................................50

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

3

1. Abrindo o Flash

a. Clique em Iniciar > Todos os Programas > Macromedia > Flash 8

b. Selecione Flash Document

2. Mudando tamanho e cor do fundo

a. Clique no menu Modify > Document

b. Ajuste o tamanho (Dimensions):

Largura: 640 / Altura: 480

c. Escolha a cor do fundo (Background color)

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

4

3. Inserindo imagens

a. Clique em File> Import > Import to Stage

b. Para diminuir ou aumentar a figura, clique com o botão direito sobre ela e selecione Free

Transform

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

5

4. Desenhando figuras

Use a Barra de Ferramentas de Desenho

Selection –seleção de objetos / Subselection – seleciona e permite alterar a forma

Free Transform – muda o tamanho / Gradient Transform – efeito gradiente

Line - criação de linhas retas / Lasso – seleciona um objeto livremente

Pen – desenho com vetores / Text – caixa de texto

Oval / Rectangle - criação de elipses e quadriláteros

Pencil – desenho à mão livre/ Brush – desenha com pincel

Ink Bottle - colore o contorno dos objetos / Paint Bucket - colore o preenchimento

Eyedropper – seleciona qualquer cor e a deixa disponível / Eraser – apaga

Hand – movimentação da cena / Zoom – aproxima, aumentando o tamanho da visualização Stroke – escolhe a cor do contorno

Fill – escolhe a cor do preenchimento

Selecione a linha, oval ou retângulo

Defina a cor da linha do contorno

Defina a cor do preenchimento

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

6

5. Animação quadro a quadro

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

7

c. Crie mais 3 quadros-chave. Para isso, clique com o botão direito do mouse em cima do

quadro número 2 > Insert KeyFrame

d. Crie quadros-chave no 3 e no 4 também.

e. Agora você tem 4 quadros-chave com a mesma forma desenhada.

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

g. Agora tecle Enter.

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

8

6. Interpolação de movimento

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

9

c. Crie um segundo quadro-chave, mas distante do primeiro. Para isso, clique com o botão

direito do mouse em cima do quadro número 10 (por exemplo) > Insert KeyFrame

d. Mova o desenho (do quadro-chave 10) para outro lugar

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

10

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

f. Clique com o botão direito em cima do intervalo preto > Create Motion Tween. O

intervalo ficará lilás.

g. Tecle Enter

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

11

7. Interpolação de forma

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

12

c. Crie um segundo quadro-chave, mas distante do primeiro. Para isso, clique com o botão

direito do mouse em cima do quadro número 10 (por exemplo) > Insert KeyFrame

d. Apague a imagem e coloque/faça outra

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

13

e. É necessário “quebrar” as imagens. Para isso, vá ao quadro-chave 1 e clique com o botão

direito do mouse na imagem > Break Apart

repita no quadro-chave 10

Quadro 1 Quadro 10

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 Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

14

g. Clique com o botão direito em cima do intervalo preto > Actions

h. Abaixo, aparecerá uma caixa chamada Properties. No campo Tween selecione Shape

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

15

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

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

j. Tecle Enter

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

16

8. Interpolação com mudança de cor

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

17

c. Caso sua imagem esteja agrupada (com um quadrado azul em volta) você deve

desmembrar (quebrar) a imagem. Para isso clique com o botão direito do mouse na

imagem > Break Apart

d. Crie um segundo quadro-chave, mas distante do primeiro. Para isso, clique com o botão

direito do mouse em cima do quadro número 10 (por exemplo) > Insert KeyFrame

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

18

e. Agora, selecione o último quadro-chave

f. Mude a cor da imagem usando o Paint Bucket (Balde de Tinta) ou aplique um efeito

g. Para aplicar o movimento, selecione todos os quadros-chave e clique na aba Properties

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

19

h. Em Tween selecione Shape

i. Tecle Enter

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

20

9. Interpolação com transparência

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

21

c. Clique com o botão direito na imagem e selecione Convert to Symbol > Movie Clip

d. Crie um segundo quadro-chave, mas distante do primeiro. Para isso, clique com o botão

direito do mouse em cima do quadro número 10 (por exemplo) > Insert KeyFrame

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

22

e. Agora, selecione o último quadro-chave e repita o passo “c”

f. No desenho do último quadro-chave, clique na aba Properties

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

23

g. Abra a caixa Color e selecione Alpha, com valor 0%

h. Depois, selecione todos os quadros-chaves, e na caixa Tween selecione Motion

i. Tecle Enter

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

24

10. Interpolação com rotação

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

25

c. Clique na forma que você desenhou com o botão direito > Convert to Symbol > Graphic

d. Crie um segundo quadro-chave, mas distante do primeiro. Para isso, clique com o botão

direito do mouse em cima do quadro número 10 (por exemplo) > Insert KeyFrame

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

26

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

f. Clique com o botão direito em cima do intervalo preto > Create Motion Tween. O

intervalo ficará lilás.

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

27

g. Vá ao menu Window > Transform

h. Escolha o último quadro-chave.

i. Na caixa Align & Inormação, insira o valor 180º

j. Tecle Enter

Uma das etapas de rotação

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

28

11. Guia de movimento

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

29

c. Crie um segundo quadro-chave, mas distante do primeiro. Para isso, clique com o botão

direito do mouse em cima do quadro número 10 (por exemplo) > Insert KeyFrame

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 > Create Motion Tween. O

intervalo ficará lilás.

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

30

f. Clique com o botão direito na camada que contém o desenho e selecione Add Motion

Guide

g. Será criada uma guia (Guide) pela qual o objeto irá percorrer o caminho

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

31

l. Tecle Enter

h. No primeiro quadro-chave da Guia de Movimento, desenhe com o lápis

a trajetória que o objeto fará

i. Agora leve o objeto do último quadro-chave à outra posição

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

ativado.

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

32

12. Máscara

a. Clique no primeiro quadro-chave

b. Escreva um texto no primeiro quadro-chave. Para mudar a fonte e tamanho, selecione

Text > Font e depois Size

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

33

c. Crie um segundo quadro-chave, mas distante do primeiro. Para isso, clique com o botão

direito do mouse em cima do quadro número 10 (por exemplo) > Insert KeyFrame

d. Faça uma nova camada. Para isso, clique com o botão direito na camada já existente e

selecione Insert Layer

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

34

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

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

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

camada do texto.

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

35

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

i. Na camada da máscara, selecione todos os quadros. Para isso, clique no primeiro quadro-

chave e, sem soltar o botão do mouse, arraste até o último quadro-chave, e solte. O

intervalo entre os dois quadros-chave ficará preto.

j. Clique com o botão direito em cima do intervalo preto > Create Motion Tween. A linha

do tempo ficará lilás.

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

36

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

l. Tecle Enter

Sem efeito de máscara

Com efeito de máscara

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

37

13. Clipe de filme

* Nosso exemplo será raios do sol...

Obs: no exemplo foram criadas duas camadas, uma para o sol e outra para a onda.

a. Vá ao menu Insert > New symbol > Movie Clip, e dê um nome para a cena

b. Uma nova cena se abrirá

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

38

c. Desenhe ou importe uma figura. Para desenhar, use a barra de ferramentas. Para

Importar, vá ao menu File > Import > Import to Stage

d. Clique com o botão direito na imagem e selecione Convert to Symbol > Grafic

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

39

e. Crie um quadro-chave distante e mude a posição ou sentido da imagem

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 Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

40

g. Clique com o botão direito em cima do intervalo preto > Create Motion Tween. O

intervalo ficará lilás.

h. Volte para a cena anterior clicando em Scene 1

i. Clique em qualquer camada com o botão direito e selecione Insert > Layer

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

41

j. Clique duas vezes na camada nova e renomeie

k. Vá ao menu e selecione Window > Library

l. Procure na caixa que aparece a cena que você criou (no nosso caso, Raios)

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

42

m. Arraste-a para a cena atual

n. Tecle Enter

Na camada criada, arraste o objeto até à cena

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

43

14. Botões

- Adicionando um botão pronto

a. Vá ao menu Window > Common Libraries > Buttons

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

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

44

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

d. Na janela que aparecer, selecione Global Functions > Timeline Control:

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

45

e. Escolha Script Assist para facilitar o trabalho

f. Para os botões mais usados:

Retroceder

- Clique no botão Retroceder

- Clique duas vezes em goto

- Selecione Go to and stop

- Escolha Previous Frame

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

46

Parar

- Clique no botão Stop

- Clique duas vezes em stop

Começar

- Clique no botão Começar

- Clique duas vezes em play

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

47

Avançar

- Clique no botão Avançar

- Clique duas vezes em goto

- Selecione Go to and stop

- Escolha Next Frame

- Fazendo um botão novo

a. Clique em File> Import > Import to Stage

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

48

b. Clique com o botão direito no desenho / imagem > Convert Simbol > Button

c. Clique com o botão direito do mouse no botão e selecione Edit in Place

d. Aparecerá a seguinte tela:

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

49

- Up

Não é necessário alterar;

- Over

Crie um quadro-chave e modifique o desenho do botão. Pode substituí-lo, fazendo

outro desenho, ou diminuir, aumentá-lo etc. Quando o mouse passar por cima, o

botão assumirá a forma criada;

- Down

Crie um quadro-chave e modifique o desenho do botão. Pode substituí-lo, fazendo

outro desenho, ou diminuir, aumentá-lo etc. O botão assumirá a forma criada

quando o botão for pressionado;

- Hit

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

ação acontecerá.

e. Volte para a cena anterior clicando duas vezes na tela

Colégio Rio Branco Departamento de Tecnologias Educacionais Unidade Higienópolis Jorge Farias

50

15. Publicando (ou transformando em filme)

a. Após terminar o trabalho, vá ao menu File > Publish Settings

b. Escolha o formato adequado

c. Clique em Publish

Flash (.swf) = só poderá ser visualizado caso o computador tenha instalado o plug-in do flash player

HTML (.html) = transforma o arquivo em uma página da Internet

Windows Projector (.exe) = possibilita o arquivo ser executado em qualquer computador, como um filme, independente do plug-in

Quick Time (.mov) = formato exclusivo da Apple, mas funciona em computadores com Windows e player QuickTime