FLASH 4.0
Introdução
Este Curso tem por objetivo ensinar criar animações com o programa Flash 4.0 da Macromedia e é aceito sem plugin no Windows 98, Internet Explorer 4.0 (ou superior) e Netscape 4.5 (ou superior).
Versões anteriores destes browsers necessitam de plugin que pode ser obtido no próprio site da Macromedia.
Para puxar o Flash 4.0 versão demo de 30 dias : Site da Macromedia - http://www.macromedia.com/flash
MENU DO FLASH
File Arquivo
New criar novo arquivo
Open abrir arquivo
Open as Library abrir arquivo com biblioteca
Close fechar arquivo
Save salvar arquivo
Save as salvar arquivo como
Revert voltar para a última vez que salvou arquivo
Import importar imagens ou sons
Export Movie exportar animação , ou seja , arquivo.swf
Export Image exportar imagem
Publish Settings parâmetros para publicar
Publish Preferences preferências para publicar
Publish publicar
Page Setup parâmetros da página
Print Preview previsão da impressão
Print imprimir
Send enviar
Preferences preferências
Assistant assistente
Edit Editar
Undo voltar à ultima modificação
Redo avançar para próxima modificação
Cut recortar
Copy copiar
Paste colar
Paste in Place colar no lugar
Paste Special colar especial
Clear deletar
Duplicate duplicar
Select All selecionar tudo
Deselect All deselecionar tudo
Copy Frames copiar frames
Paste Frames colar frames
Edit Symbol editar símbolo
Edit Selected editar seleção
Edit All editar tudo
Insert Object inserir objeto
View Visualizar
Go to ir para
100% visualizar o tamanho original da animação
Show Frames exibir frames
Show All exibir tudo
Outlines exibir contornos
Fast
Antialias não exibir serrilhamento no objeto
Antialias Text não exibir serrilhamento no texto
Timeline exibir linha do tempo
Work Area exibir área de trabalho
Rulers exibir réguas
Grid exibir grade
Snap exibir imã
Show Shape Hints exibir shape hints, quando se usa o efeito Shape
Insert Inserir
Convert to Symbol transformar para símbolo
New Symbol criar novo símbolo
Layer inserir camada
Motion Guide inserir efeito Motion Guide
Frame inserir frame (quadro)
Delete Frame deletar (quadro)
Keyframe inserir novamente o mesmo objeto do último frame (quadro)
Blank Keyframe inserir um frame (quadro) vazio
Clear Keyframe deletar frame (quadro)
Create Motion Tweening criar efeito Motion Tweening
Scene inserir cena nova
Remove Scene remover cena
Modify Modificar
Instance modificar instância
Frame modificar frame (quadro)
Layer modificar layer (camada)
Scene modificar cena
Movie modificar animação
Font modificar fonte
Paragraph modificar parágrafo
Style modificar estilo da fonte : plano, negrito , itálico e alinhamento
Kerning modificar espaço entre as linhas do texto
Text Field modificar campo de preenchimento
Transform Scale modificar escala
Rotate modificar rotação
Scale and Rotate modificar escala e rotação
Rotate Left rotacionar à esquerda
Rotate Right rotacionar à direita
Flip Vertical rotacionar 180º na vertical
Flip Horizontal rotacionar 180º na horizontal
Remove Transform remover modificações
Edit Center editar centro
Remove Colors remover cores
Add Shape Hints adicionar Shape Hints ( Efeito Shape )
Remove Shape Hints remover Shape Hints ( Efeito Shape )
Arrange Bring to Front trazer para frente
Move Ahead mandar para frente
Move Behind mandar para trás
Send to Back levar para trás
Lock trancar
Unlock All destrancar tudo
Curves Smooth
Straighten
Optimize otimizar
Lines to Fills
Expand Shape
Soften Edges
Frames Reverse reverter frames ( quadros )
Synchronize Symbols sincronizar símbolos
Trace Bitmap Align alinhar
Group agrupar
Ungroup desagrupar
Break Apart modificar imagem ou transformar texto em imagem para ser reeditado no Flash
Control Controlar
Play rodar animação
Rewind voltar a animação
Step Forward ir à próxima cena da animação
Step Backward voltar à última cena da animação
Test Movie testar animação ( Crtl + Enter )
Test Scene testar animação ; selecionar 1º frame da Cena ( Enter )
Loop Playback
Enable Frame Actions ativar ações do frame
Enable Buttons ativar botões
Mute Sounds parar todos os sons
Libraries Bibliotecas
Buttons botões
Buttons-Advanced botões avançados
Graphics gráficos
Movie Clips trechos de animações
Sounds sons
Window Janela
New Window nova janela
Arrange All
Cascade
Toolbar exibir os ícones das ferramentas
Inspectors
Object
Frame
Transform
Scene
Generator
Controler
Colors
Output
Generator Objects abrir objetos do Generator , caso tenha este programa instalado no seu computador
Library abrir sua biblioteca
Help Ajuda
Flash Help Topics tópicos de ajuda sobre o Flash
Register Flash registrar o Flash on line
Flash Developers Center visitar o site do Centro de Desenvolvedores de Flash on line
Lessons lições
Samples exemplos
About Flash sobre o Flash
FERRAMENTAS DO FLASH
Todas as ferramentas do Flash possuem ferramentas auxiliares
Ferramenta Arrow ( Seta ) selecionar objeto
Ferramentas Auxiliares da Seta
Snap Imã , para desenhar polígono quadrado e oval perfeitos manter a ferramenta imã ativada
Smooth suavizar o contorno
Straigthen modificar cantos do contorno
Rotate rotacionar objeto
Scale aumentar ou diminuir tamanho do objeto
Duplo clique sobre objeto seleciona todo o objeto
Um clique sobre objeto seleciona somente a parte do objeto que está sendo clicada
Shift + clique clique nas partes do objeto que queira adicionar na seleção
Ferramenta Lasso ( Laço ) seleciona parte do objeto com a mesma tonalidade ou seleciona parte do objeto manualmente
Ferramentas Auxiliares do Laço
Magic Wand ( Varinha Mágica ) seleciona parte do objeto com a mesma tonalidade
Magic Wand Properties
( Propriedades da Varinha Mágica ) determina área de abrangência da seleção
Polygon Mode (Varinha Mágica Poligonal) seleciona manualmente parte do objeto
Ferramenta Line ( Linha ) desenhar linha
Ferramentas Auxiliares da Linha
Line Color Cor do contorno
Stroke color focus
Line Thickness Tipos de Contornos
Line Style Estilo de Contornos
Ferramenta Text ( Texto ) inserir texto
Ferramentas Auxiliares do Texto
Font tipo de fonte
Font Size tamanho da fonte
Text Color cor do texto
Bold negrito
Italic itálico
Alignment Alinhamento : à esquerda , centralizado , à direita e justificado
Paragraphs redimensionar parágrafos
Text Field Inserir campo de preenchimento para formulários
Ferramenta Oval inserir polígonos redondos
Ferramentas Auxiliares da Oval
Line Color Cor do contorno
Stroke Color Focus
Line Thickness Tipos de Contornos
Line Style Estilo de Contornos
Fill Color Cor do preenchimento
Fill Color Focus
Ferramenta Rectangle ( Retângulo ) inserir polígono retangular
Ferramentas Auxiliares do Retângulo
Line Color Cor do contorno
Stroke Color Focus
Line Thickness Tipos de Contornos
Line Style Estilo de Contornos
Fill Color Cor do preenchimento
Fill Color Focus
Round Rectangle Radius Inserir cantos arredondados para polígono retangular
Ferramenta Pencil ( Lápis ) desenhar à mão livre
Ferramentas Auxiliares do Lápis
Pencil Mode Tipos de lápis
Straigthen
Smooth
Ink Tinta Nakin
Line Color Cor do contorno
Stroke Color Focus
Line Thickness Tipos de Contornos
Line Style Estilo de Contornos
Ferramenta Brush ( Pincel ) desenhar com pincel
Ferramentas Auxiliares do Pincel
Brush Mode :
* Paint Normal pintar normal
* Paint Fills pintar preenchimentos
* Paint Behind pintar atrás
* Paint Selection pintar seleção
* Paint Inside pintar dentro
Fill Color cor de preenchimento
Brush Size tamanho do pincel
Brush Shape tipo de pincel
Ferramenta Nankin pintar contornos
Ferramentas Auxiliares do Nankin
Line Color Cor do Contorno
Stroke Color Focus
Line Thickness Tipos de Contornos
Line Style Estilo de Contornos
Ferramenta Paint Bucket (Balde de Tinta) pintar parte de dentro do objeto
Ferramentas Auxiliares do Balde de Tinta
Fill Color Cor de preenchimento
Gap Size : ( Controle de Preenchimento )
* Don’t Close Gaps não pinta dentro da imagem que tiver o caminho aberto ( path ) do polígono
* Close Small Gaps pinta dentro imagem que tiver um pequeno caminho aberto ( path ) do polígono
* Close Medium Gaps pinta dentro imagem que tiver caminho médio aberto ( path ) do polígono
* Close Large Gaps pinta dentro imagem que tiver um grande caminho aberto ( path ) do polígono
Transform Fill em cores gradientes determinar posição da luz
Ferramenta Dropper ( Conta Gotas ) captar cor usada no objeto
Ferramenta Eraser ( Borracha )
Ferramentas Auxiliares da Borracha
Eraser Mode
* Erase Normal borracha normal
* Erase Fills apagar preenchimentos
* Erase Line apagar linhas
* Erase Selected Fills apagar preenchimentos selecionados
* Erase Inside apagar dentro do objeto
Faucet (Torneira) apagar áreas fechadas do preenchimento
Eraser Shape Tipos de Borracha
Ferramenta Hand ( Mão ) movimentar objeto
Ferramenta Zoom visualizar objeto
OUTRAS FERRAMENTAS DO FLASH
Ferramenta para Cores em Gradiente
* Clique no ícone Fill Color ( Cor de Preenchimento )
* Clique no ícone Gradiente
1.Clique em New ( Novo ) para criar novo gradiente ( opcional )
2.Formas de Gradiente : Linear ou Radial
3.Paletas de cores
4.Cores em RGB ; caso ( x ) Hex - Cores em Hexagonal
5.Seletor de Cores
6.Intensidade da Cor
7.Outras formas da Cor :
Add Colors adicionar cor
Replace Colors recolocar cor
Load Default Colors carregar cores default
Save Colors salvar cor
Save as Default salvar cor como default
Clear Colors deletar cor
Web 216 usar 216 cores para Web
Sort by Color tipo de cor
Ferramenta Transform Fill para mudar posição da luz no objeto
1.Clique na ferramenta Transform Fill
2.Clique sobre o objeto e movimente as arestas para modificar a luminosidade
3.Deselecione a ferramenta Transform Fill
CENAS E SÍMBOLOS
Visualiza Cena
1.Seleciona Cena ; Para adicionar nova Cena : Insert > Scene
2.Seleciona Símbolo para ser reeditado: Para criar novo símbolo : Insert > New Symbol ou Seleciona objeto > F8
LAYER - CAMADAS
Olho visualizar ou esconder layer
Cadeado trancar ou destrancar layer
Quadrado exibir ou não somente os contornos do layer
Add Layer ( folha branca ) adicionar layer ( camada )
Add Layer Guide ( folha lilás ) adicionar layer guide , usado no efeito Add Motion Guide
Delete Layer deletar layer ( camada )
FRAMES - QUADROS
Center Frame Frame que está sendo selecionado
Onion Skin ( Casca de Cebola ) para fazer Add Motion Guide
Onion Skin Outlines
( Contornos da Casca de Cebola ) para visualizar os contornos do Add Motion Guide
Edit Multiples Frames
( Edita Múltiplos Frames ) para selecionar os frames que serão editados em Add Motion Guide
Modify Onion Markers
( Modifica Marcadores da Cebola ) :
* Always Show makers exibir sempre os marcadores
* Anchor Onion exibir cebola ancora
* Onion 2 exibir cebola dois
* Onion 5 exibir cebola cinco
* Onion All exibir todas as cebolas
CONCEITOS FUNDAMENTAIS
TIMELINE - LINHA DO TEMPO
Bolinha preta - Keyframe , isto é , há desenho na linha do tempo = 1
Bolinha branca - Blank Keyframe , isto é , não há desenho na linha do tempo = 5
Linha preta - Frame , isto é , repete a penúltima linha do tempo na linha = 10 que pode ser um keyframe ou blank keyframe
ALINHAMENTO DE DESENHO
Para alinhar > seleciona o desenho > Crtl K ou Modify > Align
Alinhamento pode ser na Vertical , Horizontal e Tamanho da Área de Trabalho ( Match Size )
X - não alinha desenho
Space Evently - alinha o espaço entre desenhos
Cruz que está no Match Size - expande o objeto para o tamanho da tela
Align to Page - alinha o desenho no meio da Área de Trabalho
TAMANHO DA ÁREA DE TRABALHO
Para modificar o tamanho da área de trabalho > clique em 12.0 fps
Frame Rate - define quantos frames por segundo , por default 12.0
Dimensions - define as dimensões da área de trabalho
Match - Printer - define tamanho exato da impressão
Match - Contents - reajusta o tamanho da tela para somente o espaço que foi ocupado a animação
Grid Spacing - define tamanho da grade
Grid - exibir ou não a grade para auxiliar a desenhar a animação
Colors - Grid - define a cor da grade
Colors - Background - define a cor do fundo da animação
TÉCNICA PARA MODIFICAR FORMA DO DESENHO
1. Desenhe uma bola
2. Clique na ferramenta seta ( Arrow ) e arraste uma das bordas para fora para redefinir forma do desenho
EFEITO MOTION TWEENING
O efeito Motion Tweening é a animação de um objeto em duas sequências em linha reta ; Rotação : Automatic ( Automática ) , Clockwise ( Sentido Anti-Horário ) e Counterclockwise ( Sentido Horário ) ; Easing ( Aceleração )
Exercício 01 - Motion com Objeto
1. Desenhe uma bola
2. Clique na ferramenta Arrow ( Seta ) ;
Clique duas vezes sobre a bola para selecionar toda a bola ( contorno e preenchimento )
3. Aperte a tecla F8 para transformar a bola em símbolo
4. Abrirá uma Caixa de Diálogo : Name : bola ; behavior : graphic ;
Observe que quando se cria um símbolo , aparece um sinal ( + ) dentro do objeto
5. Selecione a linha do tempo = 50
6. Insira um keyframe na linha do tempo = 50 ou seja aperte a tecla F6 ou
botão direito do mouse > Insert > Keyframe
7. Quando se insere um keyframe, estamos repetindo o objeto do frame anterior ; mas para que haja animação devemos mudar a posição do objeto referente a linha do tempo = 50 , no caso a bola ; para outra posição
8. Selecione a linha do tempo = 1 ; botão direito do mouse > Create Motion Tweening , para inserir o efeito tweening motion ; observe que na linha do tempo entre a linha 1 até 49 foi exibido uma linha em cor preta, significando que nesta
etapa da animação há um Tweening Motion
9. Salve sua animação , neste caso , exer01.fla
10. Há duas maneiras de exportar a animação ou seja para rodar a animação :
* Crtl + Enter > exer01.fla se transforma em exer01.swf ou
* File > Export Movie > exer01.fla se transforma em exer01.swf
11. Para voltar à área de trabalho > Crtl + F4
Exercício 02 - Motion com Texto
1. Selecione a ferramenta Text ( Texto ) ; Escolha fonte Arial Black, tamanho 28 e cor azul
2 . Digite a palavra : FLASH
3 . Clique na ferramenta Arrow ( Seta ) ; Clique sobre o texto
4. Aperte a tecla F8 para transformar o texto em símbolo
5. Abrirá uma Caixa de Diálogo : Name : texto ; behavior : graphic ; Observe que quando se cria um símbolo , aparece um sinal ( + ) dentro do texto
6. Selecione a linha do tempo = 50
7. Insira um keyframe na linha do tempo = 50 ou seja aperte a tecla F6 ou botão direito do mouse > Insert > Keyframe
8. Quando se insere um keyframe, estamos repetindo o objeto do frame anterior ; mas para que haja animação devemos mudar a posição do objeto referente a linha do tempo = 50 , no caso o texto ; para outra posição
9. Selecione a linha do tempo = 1 ; Selecione o texto > Modify > Transform > Scale and Rotate ; Scale : 10 e Rotate : 0
10. Selecione a linha do tempo = 1 ; botão direito do mouse > Create Motion Tweening , para inserir o efeito tweening motion ; observe que na linha do tempo entre a linha 1 até 49 foi exibido uma linha em cor preta, significando que nesta
etapa da animação há um Tweening Motion
11. Salve sua animação , neste caso , exer02.fla
12. Há duas maneiras de exportar a animação ou seja para rodar a animação :
* Crtl + Enter > exer02.fla se transforma em exer02.swf ou
* File > Export Movie > exer02.fla se transforma em exer02.swf
13. Para voltar à área de trabalho > Crtl + F4
Exercício 03 - Motion com Texto e Objeto
1. Selecione a ferramenta Oval ; Escolha contorno em preto e preenchimento em azul claro
2. Desenhe uma bola no lado esquerdo, na parte superior
3. Clique na ferramenta Arrow ( Seta ) ; Clique duas vezes sobre a bola para selecionar toda a bola ( contorno e preenchimento )
4. Aperte a tecla F8 para transformar a bola em símbolo
5. Abrirá uma Caixa de Diálogo : Name : bola1 ; behavior : graphic ; Observe que quando se cria um símbolo , aparece um sinal ( + ) dentro do objeto
6. Clique sobre a bola1 com o botão direito do mouse > Properties
7. Colors Effects > Alpha > Alpha : 40
8. Selecione a linha do tempo = 50 > F6 para inserir keyframe
9. Crtl + K para centralizar a bola : Vertical > Align > selecione o terceiro botão ;
Horizontal > Align > selecione o terceiro botão ; Match Size > selecione o primeiro botão ( x ) ; ( x ) marque Align to Page
10. Modify > Transform > Scale and Rotate : Scale : 900 ; Rotate : 0
11. Clique duas vezes sobre o layer 1 e renomeie para bola1
12. Clique no ícone Add Layer ( folha branca ) criando o layer 2
13. Clique duas vezes sobre o layer 2 e renomeie para texto1
14. Selecione a linha do tempo = 1
15. Selecione a ferramenta Text ( Texto ) ; fonte : verdana ; tamanho 48 ; cor : vinho Digite : Testando
16. Crtl + K para centralizar o texto : Vertical > Align > selecione o terceiro botão ; Horizontal > Align > selecione o terceiro botão ; Match Size > selecione o primeiro botão ( x ) ; ( x ) marque Align to Page
17. Selecione a ferramenta Arrow ( Seta ) Clique sobre o texto
18. Aperte a tecla F8 para transformar o texto em símbolo
19. Abrirá uma Caixa de Diálogo : Name : texto1 ; behavior : graphic ; Observe que quando se cria um símbolo , aparece um sinal ( + ) dentro do texto
20. Selecione a linha do tempo = 50 > F6 para inserir keyframe
21. Selecione a linha do tempo = 1
22. Selecione o texto > Modify > Transform > Flip Vertical
23. Clique sobre a linha do tempo 1 > botão direito do mouse > Create Tweening
25. Salve o arquivo como exer03.fla
24. Crtl + Enter e teste sua animação
25. Crtl + F4 para voltar a área de trabalho
Exercício 04 - Motion com Clockwise
1. Clique duas vezes no ícone 12.0 fps Background mude o fundo da animação para preto
2. Desenhe uma bolinha com a cor azul
3. Selecione a ferramenta Arrow ( Seta ) e clique sobre a borda da bolinha ; delete a borda
4. Clique sobre a bolinha > Crtl + D para duplicar
5. Usando seu teclado , clique na tecla das setinhas e arraste sua bolinha para fora
6. Pinte a segunda bolinha de verde
7. Selecione a bolinha verde > Crtl + D para duplicar
8. Usando seu teclado , clique na tecla das setinhas e arraste sua bolinha para fora
9. Pinte a terceira bolinha de vermelho
10. Selecione a bolinha vermelha > Crtl + D para duplicar
11. Usando seu teclado , clique na tecla das setinhas e arraste sua bolinha para fora
12. Pinte a quarta bolinha de roxo
13. Selecione a bolinha roxa > Crtl + D para duplicar
14. Usando seu teclado , clique na tecla das setinhas e arraste sua bolinha para fora
15. Pinte a quinta bolinha de laranja
16. Selecione a bolinha laranja > Crtl + D para duplicar
17. Usando seu teclado , clique na tecla das setinhas e arraste sua bolinha para fora
18. Pinte a sexta bolinha de amarelo
19. Selecione cada bolinhas separadamente e faça um círculo com elas usando a tecla das setinhas do seu teclado
20. Selecione todas as bolinhas > F8 para transformar em símbolo
21. Name : bolinhas ; behavior : graphic
22. Selecione a linha do tempo = 40 > F6 para inserir keyframe
23. Selecione a linha do tempo = 1 > Create Motion Tweening
24. Clique o botão direito do mouse sobre a linha do tempo = 1 > Properties
25. Tweening > Motion > Rotate : Clockwise e digite 999 times ( vezes ) ; No item Easing ( aceleração ) : In > a animação fica rápida e no final devegar Out > a animação fica devegar e no final rápida Geralmente deixar em default, isto é, no meio entre In e Out
26. Salve o arquivo como exer04.fla
27. Crtl + Enter e teste sua animação
28. Crtl + F4 para voltar a área de trabalho
Exercício 05 - Efeito Fade com Texto
1. Clique duas vezes no ícone 12.0 fps Background mude o fundo da animação para preto
2. Selecione a ferramenta Text ( Texto ) ; fonte : arial black ; tamanho 48 ; cor : branco ; digite : FLASH
3. Selecione a ferramenta Arrow ( Seta ) Clique sobre o texto
4. Aperte a tecla F8 para transformar o texto em símbolo
5. Abrirá uma Caixa de Diálogo : Name : texto2 ; behavior : graphic ; Observe que quando se cria um símbolo , aparece um sinal ( + ) dentro do texto
6. Selecione a linha do tempo = 50 > F6 para inserir keyframe
7. Selecione a linha do tempo = 1 > Create Motion Tweening
8. Clique sobre o texto com o botão direito do mouse > Properties
9. Colors Effects > Alpha > Alpha : 0
10. Salve o arquivo como exer05.fla
11. Crtl + Enter e teste sua animação
12. Crtl + F4 para voltar a área de trabalho
EFEITO ADD MOTION GUIDE
O efeito Add Motion Guide é a maneira que você cria os caminhos por onde passará sua animação ,mas para que ocorra o Add Motion Guide, você deve criar primeiramente o Motion Tweening ( conforme mencionamos no capítulo anterior )
Exercício 06 - Add Motion Guide
1. Desenhe uma bola
2. Clique na ferramenta Arrow ( Seta ) ;
Clique duas vezes sobre a bola para selecionar toda a bola ( contorno e preenchimento )
3. Aperte a tecla F8 para transformar a bola em símbolo
4. Abrirá uma Caixa de Diálogo : Name : bola ; behavior : graphic ;
Observe que quando se cria um símbolo > aparece um sinal ( + ) dentro do objeto
5. Selecione a linha do tempo = 50
6. Insira um keyframe na linha do tempo = 50 ou seja aperte a tecla F6 ou botão direito do mouse > Insert > Keyframe
7. Quando se insere um keyframe, estamos repetindo o objeto do frame anterior ;
mas para que haja animação devemos mudar a posição do objeto referente a linha do tempo = 50 , no caso a bola ; para outra posição
8. Selecione a linha do tempo = 1 ; botão direito do mouse > Create Motion Tweening , para inserir o efeito tweening motion ; observe que na linha do tempo entre a linha 1 até 49 foi exibido uma linha em cor preta, significando que nesta
etapa da animação há um Tweening Motion
9. Clique na folha lilás ( Add Guide )
10. Clique no ícone Edit Multiple Frames ( Editar múltiplos frames )
11. Na linha do tempo ao clicar o ícone Edit Multiple Frames aparecerá um marcador em cinza que deve ser arrastado para cada eixo da animação, isto é , um para linha do tempo = 1 e o outro para linha = 50
12. Clique na ferramenta Pencil ( Lápis ) e escolha o modo Smooth (traçado suave)
13 . As duas bolas devem estar selecionada
14. Selecione a ferramenta imã
15. Desenhe o caminho por onde passará a bola , iniciando dentro do sinal ( + ) de uma das bolas e terminando no eixo ( + ) da outra bola
16. Sempre ao terminar o Add Motion Guide > desativar o ícone Edit Multiple Frames
17. Salve sua animação, neste caso, exer06.fla
18. Há duas maneiras de exportar a animação ou seja para rodar a animação :
* Crtl + Enter ou
* File > Export Movie
19. Para voltar à área de trabalho > Crtl + F4
Exercício 07 - Dança das Letras
1. Digite em Arial Black ; tamanho 48 , azul ,a palavra : A M O R ( com espaço )
2 .Selecione a ferramenta Arrow ( Seta )
3. Crtl + K para centralizar no meio na página
4. Mantenha o texto selecionado > Ctrl + B ou Modify > Break Apart, para transformar o texto em imagem
5. Selecione somente a letra A > F8 > symbol : A ; behavior : graphic
6. Selecione somente a letra M e usando a ferramenta balde, pois a palavra deixou de ser texto e é uma imagem e pinte de vermelho
7. Mantenha o M selecionado > F8 > symbol : M ; behavior : graphic
8. Selecione somente a letra O e usando a ferramenta balde, pois a palavra deixou de ser texto e é uma imagem e pinte de verde
9. Mantenha o O selecionado > F8 > symbol : O ; behavior : graphic
10. Selecione somente a letra R e usando a ferramenta balde, pois a palavra deixou de ser texto e é uma imagem e pinte de laranja
11. Mantenha o R selecionado > F8 > symbol : R ; behavior : graphic
12. Selecione a linha do tempo = 1 > botão direito do mouse > Copy Frame ( Copiar Frame )
13. Clique no ícone Add Layer ( Adicionar Layer ) três vezes , pois a palavra tem quatro letras e como já tínhamos um layer, precisamos de mais três layers
14. Selecione a linha do tempo = 1 de cada layer récem-criado separadamente > botão direito do mouse > Paste Frame ( Colar Frame )
15. Clique duas vezes sobre o primeiro layer e renomeie para A
16. Clique duas vezes sobre o segundo layer e renomeie para M
17. Clique duas vezes sobre o terceiro layer e renomeie para O
18. Clique duas vezes sobre o quarto layer e renomeie para R
19. Selecione a linha do tempo = 50 dos quatro layers > F6 para inserir keyframe
20. Clique no ícone olho para esconder o layer M , O , R
21. Selecione a linha do tempo = 1 do layer A
22. Selecione na área de trabalho as letras M , O , R > delete
23. Selecione a linha do tempo = 50 do layer A
24. Selecione na área de trabalho as letras M , O , R > delete
25. Mantendo a linha do tempo 1 coloque a letra A na parte superior à direita da tela
26. Clique na linha do tempo = 1 > botão direito do mouse > Create Tweening
27. Clique na folha lilás ( Add Guide )
28. Clique no ícone Edit Multiple Frames ( Editar múltiplos frames )
29. Na linha do tempo ao clicar o ícone Edit Multiple Frames aparecerá um marcador em cinza que deve ser arrastado para cada eixo da animação, isto é , um para linha do tempo = 1 e o outro para linha = 50
30. Selecione a letra A nas duas posições
31. Selecione a ferramenta imã
32. Selecione a ferramenta Pencil ( Lápis ) e desenhe o caminho por onde passará a bola , iniciando dentro do sinal ( + ) de um A e terminando no eixo ( + ) do outro A
33. Windows > Controller para abrir o Controlador e aperte play para testar a movimentação da letra A , caso não tenha feito a movimentação desenhada por você > Crtl + Z e volte a desenhar o caminho novamente
34. Sempre ao terminar o Add Motion Guide > desativar o ícone Edit Multiple Frames
35. Esconda também o Layer : Guide A
36. Repita o mesmo procedimento com as outras letras, encondendo sempre os layers das letras que não esteja trabalhando ; siga as instruções dos itens 20 ao 33, selecionando em cada letra na linha do tempo = 1 com posições diferentes.
37. Terminando todas as letras clique no olho para visualizar todos os layers
38. Salve sua animação, neste caso , exer07.fla
39. Crtl + Enter
40. Para voltar à área de trabalho > Crtl + F4
EFEITO SHAPE
O efeito Shape transforma um objeto em outro, conhecido também como morphing;
Os objetos não podem ser símbolos
Tipos de Mistura ( Blend Type ):
* Distributive - os desenhos dos frames do meio da animação ficam irregulares e suaves
* Angular - os desenhos dos frames do meio da animação mantém as linhas e os cantos
Easing ( Aceleração )
Add Shape Hints
Para controlar melhor a deformação do morphing é usado o Efeito Add Shape Hints através de marcadores, mas ele só funciona se criar primeiro um shape entre dois objetos
Exercício 08 - Shape com Polígonos
1. Desenhe um quadrado
2. Clique na ferramenta Arrow ( Seta ) ; Selecione o contorno do quadrado e delete
3. Selecione a linha do tempo = 15 > F6 para inserir um Keyframe
4. Clique na ferramenta do imã ativa para que ela esteja ativada
5. Desenhe um triângulo sobre o quadrado e pinte de outra cor
6. Selecione as partes restantes do quadrado e o contorno do triângulo e delete
7. Selecione a linha do tempo = 30 > F6 para inserir um Keyframe
8. Desative a ferramenta imã
9. Desenhe uma bola sobre o triângulo
10. Selecione as partes restantes do triângulo e o contorno da bola e delete
11. Selecione a linha do tempo = 1 até 29
12. Botão direito do Mouse > Properties > Tweening > Shape > Distributive
13. Salve sua animação , neste caso , exer08.fla
14. Crtl + Enter
15. Para voltar à área de trabalho > Crtl + F4
Exercício 09 - Efeito de Imagem com Texto
1. File > Import e importe uma imagem com extensão png e 72 dpi de resolução
2 . Selecione a ferramenta Arrow ( Seta )
3 . Selecione a imagem > Crtl + B ou Modify > Break Apart para transformar a imagem em bitmap
4. Insira um keyframe na linha do tempo = 50
5. Deselecione a imagem
6. Digite sobre a imagem : E F E I T O em arial back, 48 e pinte de uma cor
7. Clique sobre a imagem e delete
8. Selecione o texto > Crtl + B ou Modify > Break Apart para transformar o texto em bitmap
9. Selecione a linha do tempo = 1 até 49
10. Botão direito do Mouse > Properties > Tweening > Shape > Angular
11. Salve sua animação , neste caso, exer09.fla
12. Crtl + Enter
13. Para voltar à área de trabalho > Crtl + F4
Exercício 10 - Add Shape Hints com Polígono
1. Desenhe uma quadrado
2. Clique na ferramenta Arrow ( Seta ) ; Selecione o contorno do quadrado e delete
3. Selecione a linha do tempo = 30 > F6 para inserir um Keyframe
4. Clique na ferramenta do imã para desativar
5. Desenhe uma bola sobre o quadrado
6. Selecione as partes restantes do quadrado e o contorno da bola e delete
7. Selecione a linha do tempo = 1 até 29
8. Botão direito do Mouse > Properties > Tweening > Shape > Distributive
9. Selecione a linha do tempo = 1
10. Modify > Transform > Add Shape Hints ; será exibido uma bola amarela com a letra A
11. Arraste o A para uma extremidade do quadrado
12. Clique sobre A > botão direito do mouse > Add Hints ( Adicionar Hints )
13. Será exibido uma bola amarela com a letra B
14. Arraste o B para uma extremidade do quadrado
15. Repita as instruções mencionadas nos itens 12 à 14 e insira os hints C , D , E
16. Selecione a linha do tempo = 30
17. Será exibido uma bola verde E no meio do polígono , arraste para extremidade cada hints
18. Salve sua animação , neste caso , exer10.fla
19. Crtl + Enter
20. Para voltar à área de trabalho > Crtl + F4
SÍMBOLOS
Os símbolos podem ser :
graphic ( gráfico )
button ( botão )
movie clip ( pequena animação )
Libraries estão as bibliotecas do Flash
- buttons ( botões )
- buttons-advanced ( botões avançados )
- graphics ( gráficos )
- movie clips ( pequenas animações )
- sounds ( sons )
Window > Library
onde fica armazenado os símbolos criados por você
File > Import ( Arquivo > Importar )
quando se importa uma imagem, o Flash faz uma cópia automaticamente na sua biblioteca
Como personalizar sua Library ( Biblioteca )
Caso você queira armazenar seus símbolos preferidos de maneira personalizada
1. Crie um arquivo novo no Flash
2. Salve com seu nome : exemplo : beto.fla em Arquivos de Programas ou Program Files > Macromedia >
Flash 4 > Libraries
3. Crie seus símbolos preferidos e salve seu arquivo
4. Feche seu arquivo personalizado
5. Crie uma nova animação
6. Libraries > seu_nome ( neste caso beto )
7. Escolha o símbolo que queira inserir na nova animação
Como criar um símbolo
1. Window > Library ( Janela > Biblioteca )
2. Options > New Symbol ( Opção > Novo Símbolo )
3. Name : digite o nome símbolo
4. Behavior : escolha o tipo do símbolo
5. Desenhe um símbolo
6. Terminado a edição do símbolo;
clique em Edit Scene ( Editar Cena ) ;
caso queira voltar na edição do símbolo > Edit Symbols ( Editar Símbolo )
7. Observe que o símbolo recém construído fica automaticamente dentro da Library ( Biblioteca )
8. Para inserir o símbolo para Cena :
selecione na Library o símbolo ; clique no desenho do símbolo e arraste para sua Cena
Outras ferramentas para Símbolos
- New Symbol > criar novo símbolo
- New Folder > criar nova pasta
- Properties > propriedades do símbolo
- Delete > deletar símbolo
Options ( Opções do Símbolo )
New Symbol - criar novo símbolo
New Folder - criar nova pasta , ou seja , serve para organizar os símbolos por categorias
Rename - renomear símbolo
Move to New Folder - mover para nova pasta
Duplicate - duplicar símbolo
Delete - deletar símbolo
Edit - editar símbolo
Properties - propriedades do símbolo
Select Unused items - selecionar símbolos que não estão sendo usados
Update - atualizar símbolos
Play - rodar símbolo ( movie clip , botão e som )
Expand Folder - expandir pasta
Collapse Folder - fechar pasta
Expand All Folders - expandir todas as pastas
Collapse All Folders - fechar todas as pastas
Propriedades de um Símbolo
Definition ( Definição )
Behavior ( Comportamento ) - Graphic , Button , Movie Clip
Play Mode Option ( maneira para rodar a animação )
Graphic - determina quantas vezes irá rodar o símbolo gráfico :
Loop ( infinitamente ) , Play Once ( rodar uma vez ) , Single Frame ( símbolo fica estático )
Button - determina como funcionar o botão : Track as Button , Track as Menu Item
Movie Clip - determina a instância de um símbolo , ou seja, um símbolo
movie clip pode ter várias instâncias , mas com ações diferentes
Instance Name ( Nome da Instância )
Edit Symbol - editar símbolo
Duplicate Symbol - duplicar símbolo
Color Effect ( Efeito de Cor ) Um mesmo símbolo pode ter cores diferentes na área de trabalho
None - nenhuma mudança da forma original do símbolo
Brigthness - dar ou retirar brilho do símbolo
Tint - pintar o símbolo de outra cor
Alpha - clarear o símbolo
Special - especificar a cor em RGB
Action ( Ação )
somente o símbolo button se dá uma ação no próprio botão , para os outros símbolos as ações são inseridas na linha do tempo
Exercício 11 - Símbolo Movie Clip
1. Neste exemplo vamos criar uma árvore de natal
2. File > Import e importe uma imagem de uma árvore em extensão png com resolução de 72 dpi
3. Window > Library > Options > New Symbol para criar novo símbolo
4. Name: bolinhas ; behavior : movie clip
5. Desenhe uma bolinha pequena de cor vermelha gradiente
6. Selecione a borda e delete
7. Crtl + K para alinhar a bola no centro ( em cima do sinal + )
Vertical > Align > selecione o terceiro botão ; Horizontal > Align > selecione o terceiro botão ; Match Size > selecione o primeiro botão ( x ) ; ( x ) marque Align to Page
8. Selecione a linha do tempo = 2 > F6 ou Insert > Keyframe
9. Com a ferramenta balde pinte a bolinha de verde gradiente
10. Selecione a linha do tempo = 3 > F6 ou Insert > Keyframe
11. Com a ferramenta balde pinte a bolinha de cinza gradiente
12. Selecione a linha do tempo =4 > F6 ou Insert > Keyframe
13. Com a ferramenta balde pinte a bolinha de azul gradiente
14. Volte para edição da Cena 1 > Edit Scene
15. Arraste a bolinha movie clip da library para a árvore por várias vezes
16. Selecione a linha do tempo = 40 > F5 ou Insert > Frame
17. Salve o arquivo como exer11.fla
18. Crtl + Enter e teste sua animação
19. Crtl + F4 para voltar a área de trabalho
Exercício 12 - Símbolo Movie Clip
1.Neste exemplo vamos fazer a tela de um computador mudar de cor
2. File > Import e importe uma imagem de computador em extensão png com resolução de 72 dpi
3. Selecione a imagem > Crtl B ou Modify > Break Apart para transformar a imagem em bitmap
4. Selecione a ferramenta varinha mágica
5. Clique na segunda varinha mágica > Magic Wand Properties ( Propriedades da Varinha Mágica )
6. Threshold : 10 e Smoothing : Normal
7. Selecione a primeira varinha mágica > Magic Wand ( Varinha Mágica )
8. Clique sobre a tela da imagem do computador , caso ela não selecione toda a tela, volta à segunda varinha mágica e aumente o Threshold para 20 e assim sucessivamente até que selecione toda a tela
9. Aperte F8 e transforme a tela em símbolo movie clip
10. Name: tela ; behavior : movie clip
11. Window > Library ( Janela > Biblioteca )
12. Selecione o símbolo tela e clique duas vezes sobre o desenho da tela
13. Insira um keyframe na linha do tempo = 2 e pinte de uma outra cor
14. Insira um keyframe na linha do tempo = 3 e pinte de uma outra cor
15. Insira um keyframe na linha do tempo = 4 e pinte de uma outra cor
16. Volte para edição da Cena 1 > Edit Scene
17. Selecione a linha do tempo = 50 > F5 ou Insert > Frame
18. Salve o arquivo como exer12.fla
19. Crtl + Enter e teste sua animação
20. Crtl + F4 para voltar a área de trabalho
BOTÃO ANIMADO
Estágios do Botão
O botão tem quatro estágios :
Up - como o botão aparece sem passar o mouse
Over - como o botão aparece quando o mouse passa por cima do botão
Down - como o botão aparece quando você clica no botão
Hit - define a área " clicável " do botão, ou seja, a área em que ele é acionado
Observação : Quando se transforma um objeto em botão , ele tem uma opção : Tracking Options que possui duas opções : Track as Button que evita que outros botões recebam a Ação " On Mouse Events " enquanto o mouse está no estágio down ; Track as Menu Item que permite que outros botões recebam a Ação " On Mouse Events - Release " .
Exercício 13 - Botão 1
1. Window > Library > Options > New Symbol
2. Name : botão1 ; behavior : button
3. Desenhe uma bola em azul
4. Clique duas vezes sobre a bola para selecionar o polígono e o contorno
5. Crtl + D ou Edit > Duplicate para duplicar a bola
6. Com as setinhas do teclado arraste a cópia da bola para fora totalmente
7. Modify > Transform > Scale and Rotate
8. Scale : 90 ; Rotate : 0
9. Com as setinhas do teclado arraste a cópia da bola para o meio da primeira bola
10. Selecione a duas bolas > Crtl + G ou Modify > Group para agrupar as duas bolas, tornando-as um só polígono
11. Digite em branco e Arial Black no botão a palavra ENTRE
12. Selecione o botão > Crtl K para centralizar no sinal ( + ) o símbolo botão1
13. Vertical > Align > selecione o terceiro botão ; Horizontal > Align > selecione o terceiro botão ; Match Size > selecione o primeiro botão ( x ) ; ( x ) marque Align to Page
14. Selecione a linha do tempo os estágios Over, Down e Hit
15. F6 ou Insert > Keyframe
16. Selecione na linha do tempo o estágio Over
17. Modify > Transform > Scale and Rotate
18. Scale : 120 ; Rotate : 0
19. Selecione somente a palavra Entre
20. Selecione a ferramenta de Texto e troque a cor para amarelo
21. Selecione na linha do tempo o estágio Down
22. Modify > Transform > Scale and Rotate
23. Scale : 80 ; Rotate : 0
24. Selecione somente a palavra Entre
25. Selecione a ferramenta de Texto e troque a cor para verde
26. Deixe o estágio Hit como está , ou seja , igual ao estágio Up
27. Clique em Scene 1 para voltar a Cena 1
28. Arraste da Library ( Biblioteca ) o desenho do botão 1 para área de trabalho
29. Salve o arquivo como exer13.fla
30. Crtl + Enter e teste sua animação
31. Passe o mouse sobre o botão
32. Crtl + F4 para voltar a área de trabalho
Exercício 14 - Botão 2
1. Window > Library > Options > New Symbol
2. Name : botão2 ; behavior : button
3. Selecione a ferramenta Rectangle
4. Clique na ferramenta auxiliar do retângulo > Round Rectangle Radius e no item Corner Radius digite 10
5. Desenhe uma retângulo em vermelho
6. Digite em branco e Arial Black no botão a palavra CADASTRO
7. Selecione o botão > Crtl K para centralizar no sinal ( + ) o símbolo botão2
8. Vertical > Align > selecione o terceiro botão ;
Horizontal > Align > selecione o terceiro botão ;
Match Size > selecione o primeiro botão ( x ) ;
( x ) marque Ali
