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


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)


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


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


6

5. Animação quadro a quadro

a. Clique no primeiro quadro-chave

b. Desenhe uma forma


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.


8

6. Interpolação de movimento




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


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


11

7. Interpolação de forma




12



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


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




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


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


16

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




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



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


19

h. Em Tween selecione Shape

i. Tecle Enter


20

9. Interpolação com transparência




21

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




22

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

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


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


24

10. Interpolação com rotação




25

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




26

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



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


28

11. Guia de movimento




29



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



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


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.


32

12. Máscara


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

Text > Font e depois Size


33



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

selecione Insert Layer


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.


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.


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


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á


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


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


quadros-chave ficará preto.


40

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


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)


42

m. Arraste-a para a cena atual

n. Tecle Enter

Na camada criada, arraste o objeto até à cena


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


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:


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


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


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


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:


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


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

Apostila Flash 8

Documents

Transcript of Apostila Flash 8