Apostila Flash 8

FLASH 8
Departamento de Tecnologias Educacionais

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 2 Departamento de Tecnologias Educacionais

Unidade Higienópolis Jorge Farias
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)

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

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

5. Animação quadro a quadro
a. Clique no primeiro quadro-chave
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 > 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.

6. Interpolação de movimento

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

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

7. Interpolação de forma

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

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

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

i. O intervalo entre os quadros-chave ficará verde.
Uma das etapas de transformação do círculo para o quadrado
j. Tecle Enter

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

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

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

h. Em Tween selecione Shape
i. Tecle Enter

9. Interpolação com transparência

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

e. Agora, selecione o último quadro-chave e repita o passo “c”
f. No desenho do último quadro-chave, clique na aba Properties

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

10. Interpolação com rotação

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

e. Selecione todos os quadros. Para isso, clique no primeiro quadro-chave e, sem soltar o
f. Clique com o botão direito em cima do intervalo preto > Create Motion Tween. O

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

11. Guia de movimento

d. Selecione todos os quadros. Para isso, clique no primeiro quadro-chave e, sem soltar o
e. Clique com o botão direito em cima do intervalo preto > Create Motion Tween. O

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

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.
l. Tecle Enter

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

Text > Font e depois Size

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

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.

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.

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

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á

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

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
quadros-chave ficará preto.

g. Clique com o botão direito em cima do intervalo preto > Create Motion Tween. O
h. Volte para a cena anterior clicando em Scene 1
i. Clique em qualquer camada com o botão direito e selecione Insert > Layer

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)

m. Arraste-a para a cena atual
n. Tecle Enter

Na camada criada, arraste o

objeto até à cena
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

c. Clique com o botão direito no botão desejado e selecione Actions
d. Na janela que aparecer, selecione Global Functions > Timeline Control:

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

Parar
- Clique no botão Stop

- Clique duas vezes em stop
Começar
- Clique no botão Começar

- Clique duas vezes em play

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

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:

- 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

15. Publicando (ou transformando em filme)
a. Após terminar o trabalho, vá ao menu File > Publish Settings
b. Escolha o formato adequado
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
c. Clique em Publish


Apostila Flash 8

Caricato da

Informazioni sul documento

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Apostila Flash 8

Caricato da

Copyright:

Formati disponibili

FLASH 8

Departamento de Tecnologias Educacionais

Colégio Rio Branco 2 Departamento de Tecnologias Educacionais

2. Mudando tamanho e cor do fundo

c. Escolha a cor do fundo (Background color)

Colégio Rio Branco 3 Departamento de Tecnologias Educacionais

Colégio Rio Branco 4 Departamento de Tecnologias Educacionais

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

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

Colégio Rio Branco 5 Departamento de Tecnologias Educacionais

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco 6 Departamento de Tecnologias Educacionais

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

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

Quadro 1 Quadro 2 Quadro 3 Quadro 4

g. Agora tecle Enter.

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco 8 Departamento de Tecnologias Educacionais

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

Colégio Rio Branco 9 Departamento de Tecnologias Educacionais

Colégio Rio Branco 10 Departamento de Tecnologias Educacionais

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco 11 Departamento de Tecnologias Educacionais

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

Colégio Rio Branco 12 Departamento de Tecnologias Educacionais

Colégio Rio Branco 13 Departamento de Tecnologias Educacionais

Colégio Rio Branco 14 Departamento de Tecnologias Educacionais

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

Colégio Rio Branco 15 Departamento de Tecnologias Educacionais

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco 16 Departamento de Tecnologias Educacionais

Colégio Rio Branco 17 Departamento de Tecnologias Educacionais

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

Colégio Rio Branco 18 Departamento de Tecnologias Educacionais

Colégio Rio Branco 19 Departamento de Tecnologias Educacionais

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco 20 Departamento de Tecnologias Educacionais

Colégio Rio Branco 21 Departamento de Tecnologias Educacionais

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

Colégio Rio Branco 22 Departamento de Tecnologias Educacionais

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

Colégio Rio Branco 23 Departamento de Tecnologias Educacionais

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco 24 Departamento de Tecnologias Educacionais

Colégio Rio Branco 25 Departamento de Tecnologias Educacionais

Colégio Rio Branco 26 Departamento de Tecnologias Educacionais

h. Escolha o último quadro-chave.

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

Uma das etapas de rotação

a. Clique no primeiro quadro-chave

b. Desenhe uma forma

Colégio Rio Branco 28 Departamento de Tecnologias Educacionais

Colégio Rio Branco 29 Departamento de Tecnologias Educacionais

Colégio Rio Branco 30 Departamento de Tecnologias Educacionais