professoreuler

Informática - Curso Flash 4.0
Professor Berger Euler

CURSO DE FLASH 4.0 ON LINE

Bibliografia: Beto Marques © 1999
http://www.betomarques.com/flash4
webmaster@betomarques.com

ÍNDICE

INTRODUÇÃO
MENUS DO FLASH
FERRAMENTAS DO FLASH
OUTRAS FERRAMENTAS DO FLASH
CONCEITOS FUNDAMENTAIS
EFEITO TWEENING MOTION
EFEITO ADD MOTION GUIDE
EFEITO SHAPE
SÍMBOLOS
BOTÃO ANIMADO
EFEITO MASK - MÁSCARA
SOM
BOTÕES AVANÇADOS E CENAS
TRATAMENTO DE IMAGENS
ACTIONS - AÇÕES
NOÇÕES DE FLASH SCRIPT
FORMULÁRIO
COMO PUBLICAR UMA ANIMAÇÃO EM HTML
COMO CRIAR ARQUIVO EXECUTÁVEL
TRATAMENTO DE IMAGENS
MOVIE CLIP
DRAG MOVIE CLIP
TELL TARGET
IF FRAME IS LOADED
LOAD / UNLOAD MOVIE
CALL
LOJA VIRTUAL
CHAT ANIMADO
DICAS FINAIS

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

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
Links
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
Move Behind mandar para trás
Send to Back
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 – Tipos de Borracha :
* 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

Ferramentas Auxiliares do Zoom

Zoom ( + ) - para ampliar visualização do objeto
Zoom ( - ) - para reduzir visualização do objeto

OUTRAS FERRAMENTAS

FERRAMENTA PARA CORES EM GRADIENTE

• Clique no ícone Fill Color ( Cor de Preenchimento )

• Clique no ícone Gradiente

• Abrirá Caixa de Diálogo > 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

• Clique na ferramenta Transform Fill

• Clique sobre o objeto e movimente as arestas para modificar a luminosidade
• Deselecione a ferramenta Transform Fill

CENAS E SÍMBOLOS

Scene 1 - Visualiza Cena

1. Para adicionar nova Cena : Insert > Scene
2. Seleciona Símbolo para ser reeditado
3. Para criar novo símbolo : Insert > New Symbol ou
4. Seleciona objeto > F8

Symbol 1 - Seleciona Símbolo para ser reeditado
Para criar novo símbolo : Insert > New Symbol ou
Seleciona objeto > F8
Symbol - Visualiza Símbolo

LAYER CAMADA

Olho - visualizar o 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
1 - determina quantos frames tem a animação
12.0 fps - determina quantos frames / segundo
0.0s - determina o tempo de duração da animação

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 TWEENING MOTION

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 ) ;
3. 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 : bola ; behavior : graphic ;
Observe que quando se cria um símbolo , aparece um sinal ( + ) dentro do objeto
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 a bola ; para outra posição
9. 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
10. Salve sua animação , neste caso , exer01.fla
11. 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
12. 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
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
24. Salve o arquivo como exer03.fla
25. Crtl + Enter e teste sua animação
26. 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
Clique na ferramenta Arrow ( Seta ) ;
2. 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 primeiro layer e renomeie para M
17. Clique duas vezes sobre o primeiro layer e renomeie para O
18. Clique duas vezes sobre o primeiro 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 Arrow ( Seta ) 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, escondendo 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 )

EFEITO 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 )
Será exibido uma bola amarela com a letra B
13. Arraste o B para uma extremidade do quadrado
14. Repita as instruções mencionadas nos itens 12 à 14 e insira os hints C , D , E
15. Selecione a linha do tempo = 30
16. Será exibido uma bola verde E no meio do polígono , arraste para extremidade cada hints
17. Salve sua animação , neste caso , exer10.fla
18. Crtl + Enter
19. Para voltar à área de trabalho > Crtl + F4

SÍMBOLOS

Os símbolos podem ser : graphic ( gráfico ) , button ( botão ) e 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 )

WINDOWS > 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

Subir ou descer para o próximo símbolo
Aumentar a área de visualização sobre os símbolos
Diminuir a área de visualização sobre os símbolos
Ir para o primeiro 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
Keep Use Counts Update
Keep Use Counts Now

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 )
Switch Symbol

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
( outros detalhes sobre as ações, veja o capítulo sobre Ações )

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 Align to Page
9. Selecione a linha do tempo os estágios Over, Down e Hit
10. F6 ou Insert > Keyframe
11. Selecione na linha do tempo o estágio Over
12. Selecione somente a palavra CADASTRO
13. Selecione a ferramenta de Texto e troque a cor para azul
14. Selecione na linha do tempo o estágio Down
15. Selecione somente a palavra CADASTRO
16. Selecione a ferramenta de Texto e troque a cor para amarelo
17. Deixe o estágio Hit como está , ou seja , igual ao estágio Up
18. Clique em Scene 1 para voltar a Cena 1
19. Arraste da Library ( Biblioteca ) o desenho do botão 2 para área de trabalho
20. Salve o arquivo como exer14.fla
21. Crtl + Enter e teste sua animação
22. Passe o mouse sobre o botão
23. Crtl + F4 para voltar a área de trabalho

EFEITO MASK – MÁSCARA

O Efeito de Máscara cria layers ( camadas ) que escondem parte de outros layers que estejam abaixo do layer em que foi criada a máscara

EXERCÍCIO 15 – EFEITO PADRONAGEM

1. Clique em 12.0 fps em modifique o tamanho da animação para 320 x 240 pixels
2. Selecione a ferramenta Brush ( Pincel ) e pinte com várias cores a área de trabalho
3. Selecione a linha do tempo = 40 e insira um frame > F5
4. Renomeie este layer como padronagem
5. Insira um layer acima e renomeie de texto
6. Clique no olho para esconder o layer da padronagem
7. Volte ao layer do texto e digite a palavra : E F E I T O em arial black , 28
8. Selecione o texto > F8 para transformar em símbolo gráfico
9. Mova o texto para parte superior à esquerda
10. Insira um keyframe na linha do tempo = 10 e mova o texto para parte superior à direita
11. Insira um keyframe na linha do tempo = 20 e mova o texto para parte inferior à esquerda
12. Insira um keyframe na linha do tempo = 30 e mova o texto para parte superior à direita
13. Insira um keyframe na linha do tempo = 40 e mova o texto para parte superior à esquerda
14. Selecione a linha do tempo 1 até 49 > Create Tweening
15. Clique no olho novamente do layer padronagem para que ele seja exibido
16. Clique sobre o layer texto > botão direito do mouse > Mask ( Máscara )
17. Observe que automaticamente os dois layers foram trancados ( cadeado )
18. Salve o arquivo como exer15.fla
19. Crtl + Enter para testar a animação
20. Crtl + F4 para voltar à area de trabalho

Observação : Neste exemplo pode-se também inserir uma imagem como padronagem, de preferência em extensão png com 72 dpi de resolução , e fazer o mesmo efeito

EXERCÍCIO 16 – EFEITO SPOTLIGHTS – HOLOFOTE

1. Nomeie o layer de texto
2. Desenhe um quadrado e pinte de cinza
3. Retire as bordas
4. Selecione o quadrado > Crtl + K
5. Vertical > Align > marque terceiro botão
6. Horizontal > Align > marque terceiro botão
7. Match Size > marque o botão da cruz
8. (x ) Align to Page
9. Digite : Testando ; em Arial Black , cor preta e tamanho 28
10. Selecione o Texto > Crtl + K
11. Vertical > Align > marque terceiro botão
12. Horizontal > Align > marque terceiro botão
13. Match Size > marque o botão do X
14. (x ) Align to Page
15. Selecione o texto > F8 > Name = texto ; behavior = graphic
16. Insira um frame na linha 40 > F5
17. Insira um layer acima
18. Nomeie o layer de spot
19. Clique no lápis desde layer > botão à direita > Modify Layers > Hidden Others para esconder o layer texto
20. Desenhe uma bola pintada de azul
21. Selecione a bola > F8 > Name = bola ; behavior = graphic
22. Clique no lápis desde layer > botão à direita > Modify Layers > Show All para mostrar o layer texto
23. Arraste a bola para antes da palavra Testando
24. Insira um keyframe na linha 40 e arraste a bola para depois da palavra Testando
25. Selecione a linha do tempo 1 > Create Motion Tweening
26. Mantendo selecionada a linha do tempo 1 deste layer ( Spot ) > clique sobre o layer com botão direito do mouse > Mask ( Máscara )
27. Clique no botão 12.0 fps e mude a cor do background para preto
21. Salve o arquivo como exer16.fla
28. Crtl + Enter e teste sua animação
29. Crtl + F4 para voltar à area de trabalho

EXERCÍCIO 17 – MÁSCARA COM LISTAS

1. Desenhe uma padronagem , ou seja , colunas de duas cores : azul e mostarda
mas atenção ela tem que começar uma cor e terminar as listas com a outra cor
2. Insira um frame na linha do tempo 40
3. Selecione tudo e agrupe a padronagem Crtl + G
4. Crtl + K para centralizar na área de trabalho
5. Renomeie o layer de padronagem 1
6. Selecione a padronagem > Crtl + C para copiar padronagem
7. Insira um layer acima e renomeie de padronagem 2
8. Esconda o layer padronagem 1
9. Selecione a linha do tempo 1 do layer padronagem 2
10. Crtl + V para colar a padronagem
11. Mantendo a padronagem seleciona > Crtl + K para centralizar e
Modify > Transform > Flip Horizontal
12. Esconda o layer padronagem 2
13. Insira outro layer acima e renomeie de texto
14. Digite FLASH em arial black , tamanho 28 e arraste para o lado esquerdo
15. Selecione o texto > F8 e crie um símbolo gráfico
16. Insira outro keyframe na linha 40
17. Arraste o texto para um lado direito
30. Selecione a linha do tempo 1 > Create Motion Tweening
31. Mantendo selecionada a linha do tempo 1 deste layer ( Spot ) > clique sobre o layer texto com botão direito do mouse > Mask ( Máscara )
32. Exiba todos os layers
22. Salve o arquivo como exer17.fla
33. Crtl + Enter e teste sua animação
34. Crtl + F4 para voltar à area de trabalho

EXERCÍCIO 18 - EFEITO VÍDEO

1. Este exemplo é uma simulação de uma imagem estática transformando numa cena de vídeo , ou seja, não é uma gif animada
2. O tamanho do arquivo será de 200 x 150
3. File > Import e importe uma imagem com extensão png , resolução 72 dpi
4. Com a imagem selecionada > F8 e transforme em símbolo gráfico : foto
5. Renomeie o layer de foto
6. Insira um keyframe na linha do tempo 60
7. Com a imagem selecionada > Modify > Transform > Scale e Rotate
8. Scale = 60 e Rotate = 0
9. Centralize a imagem no centro da tela
10. Selecione a linha do tempo 1 > Create Motion Tweening
11. Insira um layer acima
12. Renomeie de retângulo
13. Desenhe um retângulo que ocupe 90% da tela e pinte de qualquer cor
14. Clique no frame 1 deste layer > Properties > Actions
15. FSCommand > Command = allowscale e Arguments = false
16. Clique no layer retângulo com o botão direito do mouse > Mask
17. Salve o arquivo como exer18.fla
18. Crtl + Enter e teste sua animação
19. Crtl + F4 para voltar à area de trabalho

EXERCÍCIO 19 - EFEITO DE TEXTO

1. Digite o texto : EFEITO DE TEXTO , arial black , tamanho 26 e pinte de dourado
2. Selecione o texto > Crl + K para centralizar
3. Crtl + C para copiar o texto
4. Renomeie o layer de texto 1
5. Selecione a linha do tempo 50 e insira frame
6. Esconda o layer texto 1
7. Insira um layer acima e renomeie de texto 2
8. Crtl + V para colar o texto
9. Crtl + K para centralizar o texto
10. Pinte o texto com uma cor amarela mais clara
11. Esconda o layer de texto 2
12. Insira um layer acima e renomeie de oval
13. Desenhe uma bola oval que seja tamanho de uma letra do texto
14. Seleciona a bola oval > F8 símbolo gráfico : oval
15. Exiba os layers texto 1 e texto 2
16. Arraste o símbolo oval para o início do texto
17. Insira um keyframe na linha do tempo 50 do layer oval
18. Arraste o símbolo oval para o final do texto
19. Clique entre a linha do tempo 1 e 50 > Create Motion Tweening
20. Clique no layer oval > Mask ( Máscara )
21. Clique em 12.0 fps e mude o fundo para preto
20. Salve o arquivo como exer19.fla
21. Crtl + Enter e teste sua animação
22. Crtl + F4 para voltar à area de trabalho

S O M

O Flash aceita somente as extensões wav e aif e não importa MP3 . O Flash 4.0 ao gerar um arquivo .swf, ele pega os arquivos wav ou aif e usa a compressão do MP3 para compactá-lo

EDITORES DE WAV - que transformam mid em wav

http://www.goldwave.com
http://www.soundforge.com

NOÇÕES SOBRE MP3

MPEG ( Picture Experts Group ) , mais conhecido com MP3 é um conjunto de técnicas de compressão para áudio e vídeo que reduz o tamanho dos arquivos 1/12 do original
Para tocar um arquivo MP3 é necessário utilizar um player ; os mais conhecidos são o WinAmp e o Microsoft Media Player 4.0 que vem junto com o Windows 98.

NOÇÕES SOBRE WINAMP

O Winamp 2.10 é considerado o melhor player , isto é , permite transformar um som wav em compressão MP3. Ele é um shareware e pode ser obtido :

http://www.winamp.com

Uma vez instalado no seu computador, todas as vezes que for aberto uma arquivo em MP3, o WinAmp é aberto e roda a música.

COMO TRANSFORMAR UM WAV EM COMPRESSÃO MP3

1. Abra o Winamp 2.10
2. Menu > Options
3. Preference > Plugin-ins
4. Output > Nullsoft Disk Writer
5. Clique em configure > e selecione onde irá armazenar o arquivo.wav

SITES SOBRE MP3

http://www.mp3.com
http://www.emusic.com
http://www.mp3place.com

COMO INSERIR SOM NO FLASH

1. File > Import e importe o som em wav para cima da animação
2. Clique na linha do tempo que foi inserido o som
3. Frame Properties > Sound
4. Abrirá uma Caixa de Diálogo onde estão as propriedades do SOM
5. No item : Sound está o nome do arquivo do som
6. No item dos gráficos onde você pode alterar o volume do som

EFFECTS - EFEITOS
None Nenhum efeito
Left Channel O som sai na caixa de som da esquerda
Right Channel O som sai na caixa de som da direita
Fade Left to Right O som começa na caixa de som à esquerda e termina na direita
Fade Right to Left O som começa na caixa de som à direita e termina na esquerda
Fade In O som vai aumentando aos poucos
Fade Out O som vai diminuindo aos poucos
Custom Default do Flash

SYNC - SINCRONIZAÇÃO
Event O som toca até que terminar de rodar a animação
Start Iniciar som
Stop Parar som
Stream O som toca até terminar, mesmo que a animação não esteja mais rodando

No item Loops – determina quantas vezes o som irá tocar

Observação : Sons em botões devem ser no estágio Over e Down

TRILHA SONORA

Para criar uma trilha sonora , siga os seguintes passos :

1. Crie uma animação
2. Selecione a linha do tempo que quiser inserir uma música
3. File > Import e importe um arquivo em wav para a animação
4. Com o botão direito do mouse sobre esta linha do tempo > Properties > Sounds
5. No item Sync escolha a opção Start ( Iniciar som )
6. Suponhamos que na linha do tempo 20 você queira parar este som, repita o mesmo procedimento mencionado acima e escolha a opção no item Sync Stop ( Parar som )
7. Suponhamos que queira inserir outro som na linha do tempo 21, , repita o mesmo procedimento mencionado acima e escolha a opção no item Sync Play ( Iniciar som )
8. Lembre-se de criar os efeitos disponíveis no item Effects

EXPORTAR SONS COM COMPRESSÃO MP3 NO FLASH

1. Crie uma animação som som em extensão em wav
2. File > Publish Settings ou Arquivo > Ajuste de Publicação
3. Clique no item Flash
4. Audio Stream ou Audio Event clique em Set ( Ajustar )
5. Caixa de Diálogo Sound Settings ( Ajuste do Som )
6. No item compression escolha a opção MP3 ; a compressão MP3 é indicada para trilhas sonoras
7. No item Bit Rate deixe em 16 kbps e
8. Nesta opção você não pode converter o som de Stereo para Mono
9. No item Quality é recomendável que deixe em Fast ( Rápida )

Observações : Existe mais duas formas de compressão ADPCM e Raw

1. ADPCM é indicada para sons pequenos
2. Nesta opção você pode converter o som de Stereo para Mono
3. No item Sample Rate define em khz o som , é recomendável que se deixe em 22 Khz

1. Raw é a compressão que exporta o som na sua forma orginal
2. Nesta opção você pode converter o som de Stereo para Mono

Dicas de Sites de Som WAV

http://www.wavcentral.com
http://www.triage.easynet.co.uk/just.htm
http://www.soundz.com
ftp://ftp.htc.dk/pub/WAV
http://www.stoutman.com/wavs/index.html

ACTIONS - AÇÕES

GO TO AND STOP
seleciona que deve ir para determinada parte da animação e parar
Scene – selecione a cena
Frame – seleciona o frame
Label – seleciona o label ( rótulo )
Expression – seleciona a expressão em javascript ; abrirá uma caixa onde é inserido a expressão ; clicando no botão da direita abrirá o editor de javascript
Next Frame – seleciona próximo frame
Previous Frame – seleciona o frame previsto
Go to and Play – caso seja selecionado, que deve ir para determinada parte da animação e rodar a animação

PLAY
determina que em determinado frame a animação irá rodar

STOP
determina que em determinado frame a animação irá parar

TOGGLE HIGH QUALITY
retirar serrilhamento da animação em alta resolução

STOP ALL SOUNDS
para todos os sons da animação

GET URL

Determina uma página em html a ser linkada , um email ¸ ou para onde irá os dados de um formulário
URL digite : http://www.betomarques.com/flash4 ; ou
mailto:webmaster@betomarques.com ou
http://www.abc.com/cgi-bin/formmail.pl

Windows – caso a página seja em frame , determina o target ( alvo ) do frame
Variables – determina qual o método de envio do formulário : Post ou Get

FSCOMMAND
Determina comandos especiais no Flash
Commands Arguments Definição

For StandAlone Player

fullscreen
true / false Animação será exibida ou não na tela todo do monitor

allowscale
true / false Animação será exibida do tamanho que ela foi criada e não será redimensionada
showmenu true / false
exec -
quit - Em arquivos executáveis , um botão com comando quit , fecha todo o arquivo

LOAD / UNLOAD MOVIE
determina que em determinado frame irá rodar ou não uma animação

Action Load movie into location
Unload movie from location
Load variables into location
URL
Location Level
Target
Variables – uso do método post ou get para envio de dados de formulário

TELL TARGET

Determina a instância de um símbolo movieclip, um mesmo símbolo movieclip pode ter várias instâncias com ações diferentes; quando se insere um símbolo movieclip na área de trabalho > seleciona o símbolo > Properties > Definition > Instance Name : digita um nome para instância ; exemplo : bola1; selecione a linha do tempo > Properties > Action > Tell Target , observe que no lado direito está a instância bola1 ; clique nela duas vezes que ela irá para parte de baixo, no campo target ( alvo ) : /bola1

IF FRAME IS LOADED
determina que a animação irá rodar. Somente quando for totalmente carregada ;
efeito : “ Imagens Carregando ....”
Scene determina a cena
Frame determina o frame
Expression determina o script

ON MOUSE EVENTS
determina um efeito quando o mouse passa sobre o símbolo botão
Press pressionar
Release clicar dentro da área botão ( default do Flash ) ; a ação é exercida quando aperta o botão no estágio Down
Outside Release clicar fora da área do botão
Roll Over passar por cima do botão ; usado em menus com submenus ( Track as Menu )
Roll Out sair de cima do botão ; acontece quando o cursor sai de cima do estágio Hit do botão
Drag Over clicar em qualquer parte e arrastar para dentro do botão
Drag Out clicar dentro do botão e arrastar para fora do botão
Key Press Pressionar determinada chave

IF
Condition Caso uma ação seja verdadeira, determina uma ação
Add Else / Else If clause Adicionar outra / adicionar outra se

LOOP
Condition Determina uma ação, enquanto for uma condição for verdadeira

CALL
Frame Chamar determinado frame

SET PROPERTIES
Set Determina propriedades do movie clip
Target Determina o alvo
Value Determina valores às propriedades do movie clip

SET VARIABLES
Variable Determina variáveis
Value Determina valores às variáveis

DUPLICATE / REMOVE MOVIE CLIP
duplica ou remove um símbolo movie clip
Action Determina ação
Target Determina o alvo
New Name Determina novo nome
Depth

DRAG MOVIE CLIP
arrasta Movie Clip
Start drag operation início da operação para arrastar
Target Alvo
Constrain into rectangle
Left Esquerda
Top Na parte superior
Right Direita
Bottom na parte inferior
Lock mouse to center Trancar mouse no centro
Stop drag operation Terminar a operação para arrastar

TRACE
Message Determina o valor de uma expressão ou string

COMMENT
Comment Insere comentário

ACTION SCRIPT

TIPOS DE ATRIBUIÇÃO À UMA VARIÁVEL
String Determina um valor que não foi atribuído a uma variável, que pode ser uma expressão ou um valor númerico
Numeric Literal Determina um valor numérico à string ícone 123
Expression Determina uma expressão à string ícone =
Expression Editor Editor de Expressões

EDITOR DE EXPRESSÕES - TIPOS DE OPERADORES

OPERADOR GERAL
() define expressão ou seja a variável

OPERADORES NUMÉRICOS
+ adição
- subtração
* multiplicação
/ divisão
= igual
<> desigual
| Ou
> Maior
>= Maior ou igual
< Menor
<= Menor ou igual

OPERADORES DE STRING
‘””’ Determina a string
& E para strings
eq Igual para strings
Ne Desigual para strings
It Menor para strings
gt Maior para strings
le Menor ou igual para strings
ge Maior ou igual para strings

OPERADORES LÓGICOS
and E
or ou
not não

EDITOR DE EXPRESSÕES - TIPOS DE FUNÇÕES
é um conjunto de ações armazenadas até serem executadas

FUNÇÕES GERAIS
eval Determina valor da variável
false Falso
true Verdadeiro
newline Nova linha
GetTimer Determina milésimo de segundos que a animação começou a rodar

FUNÇÕES NUMÉRICAS
Int (var ) Declaração de uma variável com números inteiros
Random Cria um número entre 0 e -1

FUNÇÕES DA STRING
Substring Determina uma substring
Length Determina comprimento da string
Chr Determina em ASCII valores à string
Ord Determina à string valores em ASCII

PROPRIEDADES
GetProperty Determina a propriedade de origem do Movie Clip
_x Determina posição x do MovieClip
_y Determina posição y do Movie Clip
_width Determina largura do Movie Clip
_height Determina altura do Movie Clip
_rotation Determina rotação do Movie Clip
_target Determina o alvo do Movie Clip em caso de uso de frames
_name Determina nome da instância do Movie Clip
_url Determina a URL de um botão Movie Clip
_xscale Determina valor em porcentagem de x do Movie Clip
_yscale Determina valor em porcentagem de y do Movie Clip
_currentframe Determina o frame corrente do Movie Clip
_totalframes Determina o número de frames do Movie Clip
_framesloaded Determina o número de frames carregados do Movie Clip
_alpha Determina a quantidade de alpha do Movie Clip
_visible Determina a visibilidade do Movie Clip
_droptarget Determina que o Movie Clip seja arrastado para outro Movie Clip

PROPRIEDADES GLOBAIS
_highquality
_focusrect
_soundbuftime

FUNÇÕES MULTIBYETE DA STRING

MBString
MBLength
MBChr
MBOrd

BOTÕES AVANÇADOS

EXERCÍCIO 20 - BOTÃO COM SOM

1. Window > Library > Options > New Symbol
2. Name : botão ; behavior : button
3. Desenhe um botão
4. Crtl K para centralizar o botão meio do sinal ( + ) na edição do símbolo
5. Selecione na linha do tempo os estágios Over, Down e Hit
6. Insert > Keyframe ou F6
7. Selecione o estágio Over
8. Libraries > Sounds
9. Selecione o som Brick Drops ou importe um som com extensão wav
10. Arraste o desenho do som para cima do botão
11. Selecione o estágio Down
12. Selecione o som Camera Shutter ou importe um som com extensão wav
13. Arraste o desenho do som para cima do botão
14. Volte para Scene 1 ( Cena 1 )
15. Arraste da Library seu botão para área de trabalho
16. Clique sobre o botão > Properties > Action
17. Clique em ( + ) Get URL
18. Suponhamos o botão tenha link para página pesquisa.htm
19. No item URL digite : pesquisa.htm
No item Window digitaria o target ( alvo ) caso está pa;agina fosse exeibida dentro de frames ;
se fosse o botão para email, no item URL digitaria : mailto:nome@provedor.com.br
20. Salve o arquivo como exer20.fla
21. Crtl + Enter e teste sua animação
22. Crtl + F4 para voltar à area de trabalho

EXERCÍCIO 21 - BOTÃO LIGA E DESLIGA SOM

1. Clique me 12.0 fps e cloque o fundo em preto
2. Window > Library > Options > New Symbol
3. Name : bola ; behavior : graphic
4. Desenhe uma bola em gradiente
5. Selecione a bola > Crtl K para centralizar
6. Window > Library > Options > New Symbol
7. Name : flash ; behavior : movie clip
8. Digite a palavra texto com tamanho 48
9. Crtl + K para centralizar
10. Crtl + B para transformar o texto em imagem
11. Com a ferramenta balde, pinte o texto em cor gradiente
12. Insira um frame na linha do tempo 50
13. Insira um layer acima e renomeie de bola
14. Arraste da library o símbolo bola para o lado esquerdo do texto na parte superior
15. Insira um keyframe na linha do tempo 50
16. Arraste a bola para parte de baixo
17. Clique sobre a bola com o botão direito do mouse > Properties > Collor Effects
Alpha : 0
18. Window > Librray > Options > New Symbol
19. Name : botão liga/desliga ; behavior : movie clip
20. Libraries > Buttons > Round Yellow
21. Arraste este símbolo para a edição do símbolo botão liga/desliga
22. Crtl K para centralizar
23. Modify > Transform > Scale and Rotate
24. Scale : 50 ; rotate : 0
25. Insira um blanck keyframe na linha do tempo 10 e 20
26. Renomeie o layer para botão
27. Selecione a linha do tempo 1 > Properties > Label : liga e Action > Stop
28. Selecione a linha do tempo 10 > Properties > Label : desliga e Action > Stop
29. Selecione a linha do tempo 1 > clique sobre o botão > Properties
On Mouse Events
( x ) Press
Stop All Sounds
Go to and Stop
( x ) Label : desliga
30. Selecione a linha do tempo 1 > clique sobre o botão > Properties
On Mouse Events
( x ) Press
Go to and Stop
( x ) Label : liga
31. Insira um layer abaixo e renomeie som
32. Insira um blank keyframe na linha do tempo 10 e 20
33. Selecione a linha do tempo 1
34. Import um som com extensão wav para cima do botão;
quando se importa um som para o Flash , o som vai para Library > da library você arrasta o som para o botão
35. Selecione a linha do tempo 1 do layer som > Properties > Sounds
Effect : Custom ; Syn : Event e Loops : 500
36. Volte a Cena 1
37. Renomeie o layer para botão liga/desliga
38. Arraste da Libray o movie clip botão liga/desliga
39. Insira um layer abaixo e renomeie de flash
40. Arraste da Library o movie clip flash
41. Mantendo selecionada a linha do tempo 1 do layer flash > Properties
Action > Stop
42. Salve o arquivo como exer21.fla
43. Crtl + Enter e teste sua animação
44. Crtl + F4 para voltar à area de trabalho

EXERCÍCIO 22 - BOTÃO COM MÁSCARA

1. Windows >Library > Options > New Symbol
2. Name : texto ; behavior : graphic
3. Digite :
CLIQUE AQUI PARA
OBTER INFORMAÇÕES
DE NOSSOS SERVIÇOS ...
NOSSOS CLIENTES ...
PROMOÇÕES ...
E AS ÚLTIMAS NOVIDADES !!!!
4. Selecione o texto > Crtl K para alinhar
5. Vertical > Align ( x ) terceiro botão
6. Horizontal > Align ( x ) terceiro botão
7. Match Size marque ( x )
8. Marque Align to Page
9. Windows > Library > Options > New Symbol
10. Name : máscara ; behavior : movie clip
11. Selecione o símbolo texto e arraste para a área de trabalho do símbolo máscara
12. Selecione o texto > Crtl K para alinhar
13. Vertical > Align ( x ) terceiro botão
14. Horizontal > Align ( x ) terceiro botão
15. Match Size marque ( x )
16. Marque Align to Page
17. Insira um keyframe na linha do tempo 40 e arraste o texto para cima
18. Selecione a linha do tempo 1 até 39 > Properties > Create Motion Tweening
19. Renomeie o layer de texto
20. Insira um layer acima do texto
21. Renomeie o layer de retângulo
22. Desenhe um retângulo por onde irá passar o texto em vermelho
23. Selecione o retângulo de modo que ele esteja no início do texto
24. Clique sobre o layer retângulo > botão direito do mouse > Mask ( Máscara )
25. Windows > Library > Options > New Symbol
26. Name : botão ; behavior

Piczo