apostila flash cs3

Adobe Flash CS3

Animao Multimdia

Adobe Flash CS3 Animao Multimdia

2 2008 Processor Alfamdia LTDA.

Todos os direitos reservados para Processor Alfamdia LTDA.

AVISO DE RESPONSABILIDADE

As informaes contidas neste material de treinamento so distribudas NO ESTADO EM QUE SE ENCONTRAM, sem qualquer garantia, expressa ou implcita. Embora todas as precaues tenham sido tomadas na preparao deste material, a Processor Alfamdia

LTDA. no tm qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito

responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou

indiretamente, pelas instrues contidas neste material ou pelo software de computador e

produtos de hardware aqui descritos.

12/2007 Verso 1.1

Processor Alfamdia LTDA

(51) 2111-1666

http://www.alfamidia.com.br



A Alfamdia d Boas Vindas aos seus clientes e deseja um

excelente treinamento.

Benefcios ao aluno

- Suporte ps-treinamento via e-mail (3 consultas por 90 dias aps o trmino do curso) para

tirar dvidas do contedo ministrado em aula, atravs do e-mail

[email protected] ;

- Acesso a extranet www.alunoalfamidia.com.br para verificao de agenda e pontos do

PROGRAMA FIDELIDADE;

- Convnio com o estacionamento do prdio (desconto);

- Avaliaes de acompanhamento e final de curso (em cada mdulo) durante todo o

treinamento, garantindo a qualidade do curso.

Observaes Importantes

- obrigatrio que sejam salvos todos os trabalhos efetuados durante a aula, no servidor

indicado pelo instrutor.

- No permitido entrar em sala de aula com alimentos ou bebidas de qualquer espcie ou

fumar nas dependncias da Alfamdia;

- No permitida a instalao de outros Hardwares ou Softwares que no sejam os

utilizados em treinamento;

- O preenchimento da avaliao final de curso/mdulo condio obrigatria para que o

aluno possa acionar a garantia do curso, conforme previsto na ficha de matrcula;

- Somente ser fornecido certificado ao aluno com assiduidade igual ou superior a 75% do

treinamento;

- Qualquer necessidade de alterao na agenda ou cursos contratados inicialmente, consulte

os Termos de Contratao na Ficha de Matrcula;

- Contatos com a Alfamdia podem ser feitos atravs dos e-mails:

[email protected] dvidas aps contratao

[email protected] novas contrataes




UNIDADE 1 ADOBE FLASH CS3 ANIMAO MULTIMDIA .................................................................................... 7

1.1 SOBRE O CURSO ............................................................................................................................... 7 1.2 ESTRUTURA DO CURSO .................................................................................................................... 7

UNIDADE 2 O AMBIENTE DE TRABALHO DO FLASH CS3 ....................................................................................... 8

2.1 A TELA INICIAL (START PAGE) ........................................................................................................ 9 2.2 O LAYOUT DO FLASH ..................................................................................................................... 10 2.3 PERSONALIZANDO A INTERFACE .................................................................................................... 13 2.4 PAINEL PROPERTIES ....................................................................................................................... 15 2.5 A TIMELINE .................................................................................................................................... 16 2.6 A BARRA TOOLS ............................................................................................................................ 17 2.7 FLA E SWF.................................................................................................................................... 20

UNIDADE 3 COMPONDO NO FLASH CS3 ................................................................................................................. 21

3.1 INICIANDO A MONTAGEM DO SITE ................................................................................................. 21 3.2 MODO OBJECT DRAWING ............................................................................................................... 22 3.3 USANDO O PAINEL ALIGN .............................................................................................................. 24

3.3.1 Snap Align ................................................................................................................................ 27

UNIDADE 4 TRABALHANDO COM CAMADAS ......................................................................................................... 29

4.1 AS CAMADAS (LAYERS) ................................................................................................................. 29 4.2 FERRAMENTA TEXT TOOL .............................................................................................................. 30 4.3 DISTRIBUINDO ELEMENTOS EM UMA CAMADA .............................................................................. 32 4.4 CRIANDO E APLICANDO PREENCHIMENTOS ................................................................................... 34

4.4.1 Gradiente Transform Tool ........................................................................................................ 37

UNIDADE 5 ANIMAES ............................................................................................................................................ 40

5.1 CONHECENDO A TIMELINE ............................................................................................................. 40 5.2 ANIMAO QUADRO A QUADRO .................................................................................................... 42

5.2.1 Onion Skin ................................................................................................................................ 43 5.3 CONHECENDO OS SMBOLOS DO FLASH ......................................................................................... 44

5.3.1 Biblioteca .................................................................................................................................. 46 5.4 INTERPOLAO DE MOVIMENTO .................................................................................................... 49 5.5 ATRIBUTOS DA ANIMAO ............................................................................................................ 51

5.5.1 Animao com Rotao ............................................................................................................ 51 5.5.2 Animao com Transparncia .................................................................................................. 51 5.5.3 Acelerao e Desacelerao de Movimento ............................................................................. 52

5.6 COPIAR E COLAR MOVIMENTOS ..................................................................................................... 56 5.7 IMPORTANDO MDIAS .................................................................................................................... 58

UNIDADE 6 ANIMAO DE FORMAS ........................................................................................................................ 63

6.1 ANIMAO SHAPE ......................................................................................................................... 63 6.1.1 Shape Hints ............................................................................................................................... 64

6.2 TRANSIO ENTRE TEXTOS ............................................................................................................ 66 6.3 UTILIZANDO BREAK APART EM BITMAP ........................................................................................ 67

UNIDADE 7 TRAJETRIAS......................................................................................................................................... 69



7.1 MOTION GUIDE .............................................................................................................................. 69 7.2 DESENHANDO CAMINHOS COM A FERRAMENTA PEN TOOL ........................................................... 72 7.3 SUBSELECT TOOL ........................................................................................................................... 74

UNIDADE 8 MSCARAS NA ANIMAO .................................................................................................................. 77

8.1 USANDO MSCARAS ...................................................................................................................... 77 8.2 EFEITO PREENCHIMENTO ............................................................................................................... 81 8.3 MSCARA COM GUIA DE MOVIMENTO ........................................................................................... 85 8.4 MSCARA ARRSTAVEL ................................................................................................................ 89 8.5 MSCARA COM GRADIENTE ........................................................................................................... 91

UNIDADE 9 APLICANDO EFEITOS ............................................................................................................................ 95

9.1 APLICANDO SOMBRAS ................................................................................................................... 95 9.2 SOMBRA PROJETADA ................................................................................................................... 100 9.3 EFEITO BLUR ............................................................................................................................... 103 9.4 EFEITO GLOW .............................................................................................................................. 105 9.5 EFEITO BEVEL .............................................................................................................................. 106 9.6 EFEITO GRADIENT GLOW ............................................................................................................. 107 9.7 EFEITO GRADIENT BEVEL ............................................................................................................ 108 9.8 ADJUST COLOR ............................................................................................................................ 108 9.9 COPIANDO E COLANDO FILTROS .................................................................................................. 110

UNIDADE 10 CRIANDO BOTES .......................................................................................................................... 112

10.1 O SMBOLO BOTO ...................................................................................................................... 112 10.2 ANIMANDO OS BOTES ................................................................................................................ 114 10.3 BOTES DA BIBLIOTECA .............................................................................................................. 115

UNIDADE 11 INTERAES COM O MOUSE ........................................................................................................ 118

11.1 PERSONALIZANDO O CURSOR ....................................................................................................... 118

UNIDADE 12 CARREGANDO IMAGENS EXTERNAS .......................................................................................... 120

12.1 IMPORTANDO IMAGENS EXTERNAS .............................................................................................. 120

UNIDADE 13 NAVEGAO NO FLASH ................................................................................................................ 127

13.1 TRABALHANDO COM CENAS ........................................................................................................ 127 13.2 CARREGANDO ARQUIVOS EXTERNOS .......................................................................................... 131 13.3 NAVEGAO NA TIMELINE .......................................................................................................... 137 13.4 USANDO LABEL ........................................................................................................................... 140 13.5 CRIANDO ROLAGEM DE CONTEDO ............................................................................................. 141 13.6 COMPONENTE SCROLLPANE ........................................................................................................ 147 13.7 ALTERANDO AS CORES DO SCROLLPANE ..................................................................................... 150

UNIDADE 14 TRABALHANDO COM TEXTOS DINMICOS ................................................................................ 158

14.1 BUSCA DE VARIVEIS EM UM ARQUIVO DE TEXTO ...................................................................... 158 14.2 TEXTO COM FORMATAO HTML .............................................................................................. 161

UNIDADE 15 BANNERS ANIMADOS .................................................................................................................... 165

15.1 CRIANDO UM BANNER ................................................................................................................. 165 15.2 BANNER EXPANSVEL .................................................................................................................. 171

UNIDADE 16 TRANSIES COM ACTION SCRIPT 3.0 ....................................................................................... 178

16.1 EFEITO BLINDS ............................................................................................................................ 178 16.2 EFEITO PIXELDISSOLVE ............................................................................................................... 180 16.3 EFEITO DE ZOOM .......................................................................................................................... 181



UNIDADE 17 UDIO NO FLASH ............................................................................................................................ 186

17.1 IMPORTANDO UDIO PARA O FLASH ............................................................................................ 186 17.2 CARREGANDO UDIO EXTERNO .................................................................................................. 192 17.3 CONTROLE DE VOLUME ............................................................................................................... 194 17.4 INSERINDO UDIO EM BOTES..................................................................................................... 197

UNIDADE 18 IMPORTANDO VDEO ...................................................................................................................... 200

18.1 IMPORTANDO VDEOS PARA O FLASH ........................................................................................... 200 18.2 MSCARAS EM VDEOS ................................................................................................................ 209 18.3 DOWNLOAD PROGRESSIVO........................................................................................................... 210 18.4 CRIANDO UM VDEO COM COMPONENTES .................................................................................... 215 18.5 VDEO EM TELA CHEIA ................................................................................................................ 218 18.6 VDEO COM FUNDO TRANSPARENTE ............................................................................................ 222

UNIDADE 19 PRELOADER NO FLASH CS3 ......................................................................................................... 225

19.1 CONSTRUINDO UM PRELOADER .................................................................................................... 225

UNIDADE 20 CRIANDO UM FORMULRIO .......................................................................................................... 228

20.1 UTILIZANDO COMPONENTES ........................................................................................................ 228 20.2 CONFIGURANDO O ENVIO DE DADOS ........................................................................................... 233

UNIDADE 21 CRIANDO MODELOS E COMANDOS NO FLASH.......................................................................... 235

21.1 TORNANDO O FILME UM MODELO (TEMPLATE) ........................................................................... 235 21.2 USANDO OS COMMANDS .............................................................................................................. 237

UNIDADE 22 PUBLICANDO DOCUMENTOS DO FLASH .................................................................................... 241

22.1 CONFIGURAES DE PUBLICAO ............................................................................................... 241 22.2 FLASH .......................................................................................................................................... 242 22.3 HTML ......................................................................................................................................... 245 22.4 GIF .............................................................................................................................................. 247 22.5 PNG ............................................................................................................................................. 248 22.6 FULL SCREEN ............................................................................................................................... 250



Unidade 1 Adobe Flash CS3 Animao Multimdia

1.1 Sobre o Curso

O Curso Adobe Flash CS3: Animao Multimdia apresenta aos alunos as

principais ferramentas da ltima verso do programa, fornecendo inmeras dicas e

tcnicas para a aplicao do Design.

O curso de Flash CS3 trs o que de mais atual a linguagem ActionScript 3.0 trouxe

para esta verso do programa. O aluno se surpreender com a facilidade e a

eficincia que o Adobe Flash CS3 pode realizar em projetos multimdia.

Para o profissional de Design, o curso fundamental por fornecer uma base para

entender a animao 2D.

1.2 Estrutura do Curso

As primeiras unidades apresentam a interface grfica deste software, como fazer

uma animao bsica e visualiz-la. Agrega, tambm, as ferramentas de desenho e

as formas geomtricas deste software.

As unidades seguintes abordam tpicos como: animao com mscaras, filtros e

efeitos, botes e carregamentos de arquivos externos. Tambm, ser montado um

site inteiro em Flash, com recursos de udio, vdeo e utilizao de componentes.

O curso trs exerccios para criar e manipular elementos visuais como: transies

atravs de programao, efeito de zoom e criao de banners.

Durante o transcorrer de todo o curso o aluno aprender a trabalhar de forma

autnoma e criativa com este software, conhecendo as mudanas e novidades

incorporadas ao programa.


________________________________________________________________________________________ Anotaes 8 2008 Processor Alfamdia LTDA.

Unidade 2 O Ambiente de Trabalho do Flash CS3

As animaes para Web, tempo atrs, eram feitas principalmente com GIFs

animados. A principal dificuldade para os desenvolvedores do Flash era a

necessidade de plugin, entretanto a quantidade de usurios que possui o plugin

cresceu tanto que o software se tornou o principal meio para a produo de

animaes para Web.

Na verso CS3 o Flash no vem mais com dois programas distintos. Possui apenas

a verso Adobe Flash CS3 Professional.

Fig 1. TELA DE INICIALIZAO DO ADOBE FLASH CS3 PROFESSIONAL



2.1 A Tela Inicial (Start Page)

Fig 2. START PAGE

Quando iniciamos o Adobe Flash CS3 aparece tela inicial, aonde podemos

escolher entre abrir um dos trabalhos recentes criados com o Flash, criar um

arquivo em branco e escolher entre as seguintes possibilidades:

- Flash File: novo documento bsico do Flash em branco, opo que utiliza a

estrutura de criao tradicional do programa. Temos esta opo tanto para a verso

2.0 quanto 3.0 do ActionScript.

- Flash File (Mobile): utilizada para criar um arquivo compatvel com o Flash Lite

(Flash para dispositivos mveis).

- ActionScrit File: gera outro documento numa espcie de editor de texto dentro

do Flash para digitarmos scripts do Flash. Este arquivo possui a extenso . as.

- ActionScript Communication File: funciona da mesma forma que a opo

anterior, mas destinado a escrever scripts para o Flash Media Server (servidor para

aplicaes server) O arquivo gerado ter a extenso . asc.



- Flash Javascript File: permite criar scripts que controlem e auxiliem a utilizao

do programa. O arquivo ter a extenso JSFL.

- Flash Project: Um projeto Flash pode agrupar e organizar diversos arquivos e

posteriormente public-los no servidor de hospedagem que for configurado.

possvel ainda criar um trabalho baseado num modelo (Template) preexistente.

2.2 O Layout do Flash

O layout do Flash desenvolvido para o melhor aproveitamento do espao,

facilitando sua utilizao.

Na tela inicial crie um novo documento (Flash File ActionScript 3.0).

Fig 3. REA DE TRABALHO DO FLASH

Do lado direito temos os painis juntos. Podemos expandi-los ou retra-los apenas

clicando nas setas ao lado direito superior .

Ao escolher esta opo vemos os painis em forma de cones:



Fig 4. PAINIS EM FORMA DE CONES

Alguns painis possuem opes adicionais que podem ser chamadas clicando no

cone a sua direita no topo:

Fig 5. VISUALIZAO DO MENU POP-UP DOS PAINIS

Para abrir um painel que no esteja na tela, clique no menu Window, e entre suas

opes escolha o painel desejado.

Tambm, possvel alterar a posio de um painel bastando arrast-lo pela sua

barra superior.

Para remover um painel do local em que se encontre encaixado, basta arrast-lo

para fora de sua rea, primeiro aproximando o cursor do topo do painel, em

seguida pressionando o boto do mouse e arrastando a janela para a rea desejada.



Para anex-lo a alguma rea, basta mov-lo e quando estiver em um local que

possa ser encaixado, a rea ser realada.

Se solt-lo em uma rea que no ficou realada, o painel ficar flutuante na tela:

Fig 6. PAINEL FLUTUANTE NA TELA DO FLASH

Se em algum momento desejarmos que todos os painis (exceto o painel Timeline)

sejam escondidos, basta clicarmos na tecla F4.



Fig 7. TELA DO FLASH COM OS PAINIS OCULTOS

2.3 Personalizando a Interface

importante a customizao da interface do Flash de acordo com seu foco de

trabalho, que ir permitir uma maior produtividade do seu trabalho.

Temos na parte superior do Flash uma rea chamada Workspace, que

responsvel por escolher e gerenciar os layouts de rea de trabalho como: forma e

posicionamento dos painis.

Fig 8. VISUALIZAO DA AREA WORKSPACE



possvel gravar as configuraes que tenhamos criado para escolh-la

posteriormente. Depois de configurar como queremos que os painis estejam

distribudos na rea de trabalho, escolhemos a opo Save Current.

Na janela digite um nome para este layout de painis:

Fig 9. JANELA SAVE WORKSPACE LAYOUT

A partir deste momento podemos encontrar essa opo nas opes da rea da

Workspace e tambm no menu Window > Workspace Layout.

Fig 10. VISUALIZAO DA REA DE TRABALHO SALVA

Caso queira renomear ou remover um modelo de layout criado na rea de

Workspace basta escolher a opo Manage e definir as opes desejadas na

janela:

Fig 11. JANELA MANAGE WORKSPACE LAYOUTS



2.4 Painel Properties

No painel properties encontram-se as principais opes do elemento que estiver

selecionado. Esse painel se subdivide em trs partes (separadas por pequenas

abas): Properties, Parameters e Filters.

Fig 12. PAINEL PROPERTIES

Uma rea muito importante no Flash o palco (Stage). Somente os elementos que

estiverem nessa rea aparecero do filme gerado pelo programa.

O Stage semelhante lente de uma filmadora, pois apenas o que estiver no seu

foco ser apresentado como resultado final do filme.

Quando no estivermos com nenhum objeto selecionado no palco a opo Size

fica ativa. Nessa janela temos a opo de metadados, que servem para anexar

informaes nos arquivos SWF, facilitando a indexao em sites de busca.

Fig 13. JANELA DOCUMENT PROPERTIES



Em Title digitamos o ttulo do nosso arquivo e em Description colocamos uma

descrio.

Na rea Dimensions definimos Largura (Width) e altura (Height) do Stage do

Flash.

Na rea Match podemos fazer com que as dimenses do Stage se modifiquem de

acordo com a rea de impresso (Printer), que acomodem todos os elementos em

cena (Contents) ou que utilizem dimenso padro (Default).

Em Background color escolhemos a cor do Stage do Flash.

Se desejarmos que essas configuraes sejam a padro para os novos filmes do

Flash (exceto os metadados, que devem ser criados para cada filme), basta

clicarmos no boto Make Default.

2.5 A Timeline

Permite controlar o tempo e a estrutura de qualquer projeto. Mostra onde os

elementos se encontram a cada momento, conforme o tempo passa.

Fig 14. A TIMELINE DO FLASH CS3

A Timeline funciona como um roteiro cronometrado que controla o momento em

que o elemento deve estar em determinadas posies, indicadas nessa janela por

intermdio de quadros-chave.

Para recolher esse painel, devemos clicar no boto Hide Timeline , localizado

na parte inferior esquerda do painel.

Para expandir esse painel, basta clicarmos novamente neste boto.

A linha do tempo funciona como uma seqncia de quadros que, ao se deslocar em

funo do tempo, passa a impresso de que est ocorrendo um movimento.

Sua velocidade medida pela quantidade de quadros que passa a cada segundo

(frames por segundo) e quanto maior a quantidade de quadros por segundo, mais

rpida a animao estar.



Para configurarmos essa velocidade, no painel de propriedades, basta alterarmos o

valor do Frame Rate:

Fig 15. VISUALIZAO DO FRAME RATE NO PAINEL PROPERTIES

2.6 A Barra Tools

Essa barra contm as ferramentas necessrias para desenharmos, criarmos objetos

e definirmos cores no Flash.



Fig 16. BARRA TOOLS DO FLASH CS3

Esse painel pode ser exibido de duas formas: como uma nica coluna de

ferramentas ou como duas colunas:



Fig 17. VISUALIZAO DOS DOIS MODOS DE EXIBIO DA BARRA TOOLS

Para alterarmos entre as formas, basta clicarmos na seta localizada na parte

superior do painel, que est apontando para a direita (quando a forma atual for de

uma coluna) ou para a esquerda (quando a forma atual for de duas colunas).



2.7 FLA e SWF

Os arquivos editveis do Adobe Flash possuem o formato.fla, entretanto, por

guardarem todas as informaes necessrias para edio, possuem tamanhos

maiores que o ideal para Web.

Quando finalizamos um filme, geramos um arquivo extremamente leve que ser

levado para Web, o formato swf (Shockwave Flash).

O swf pode ser importado para um novo filme, mas no pode ser editado.

Fig 18. VISUALIZAO DOS CONES DOS FORMATOS DE ARQUIVOS



Unidade 3 Compondo no Flash CS3

3.1 Iniciando a Montagem do Site

Podemos criar desenhos e layouts no Flash e todos os tipos de objetos, sem

precisarmos importar de algum programa vetorial ou de tratamento de imagem.

Suas ferramentas de desenho so de fcil manuseio e podem ser usadas para criar

os mais complexos layouts. bom ressaltar que a criatividade e a prtica vo

definir a qualidade de cada profissional.

1- Crie um novo documento no Flash.

2- Na opo Size configure a janela Document Properties como na imagem

abaixo:

Fig 19. CONFIGURAO DA JANELA DOCUMENT PROPERTIES

Agora nosso palco est com fundo preto e com as dimenses que especificamos.



3- Salve este arquivo na pasta site como index.fla

Antes de comearmos a desenhar formas no Flash vamos ver o Modo Object

Drawing.

3.2 Modo Object Drawing

Por padro (quando o modo Object Drawing estiver desativado) as formas que

criarmos no sero consideradas como objetos separados. Por exemplo, quando

desenhamos duas formas (uma em cima da outra) as informaes do desenho que

ficaro por trs so descartadas (sendo as duas formas de cores diferentes):

Fig 20. FORMAS COM O MODO OBJECT DRAWING DESATIVADO

Importante: Se as duas formas forem de cores iguais e estiverem com o modo

Object Drawing desativado as formas se unem:



Fig 21. FORMAS DE CORES IGUAIS E COM O MODO OBJECT DRAWING DESATIVADO

Quando trabalhamos com o modo Object Drawing ativado , os objetos que

criarmos sero tratados como objetos separados, os quais podem ser sobrepostos a

outros sem haver a perda de nenhuma informao.

Fig 22. FORMAS COM CORES IGUAIS E COM O MODO OBJECT DRAWING ATIVADO

Um objeto criado por este modo diferenciado na tela por uma rea retangular

envolvendo-o.

4- Na Barra Tools selecione a forma Rectangle Primitive

5- Na barra Properties desmarque o cadeado (para no fazer as alteraes em

todos os lados) e digite como na imagem abaixo, escolhendo uma cor de

preenchimento sem contorno:



Fig 23. PAINEL PROPERTIES COM AS OPES DA FORMA RECTANGLE PRIMITIVE

6- Clique e arraste o mouse no palco na parte superior para desenhar a forma:

Fig 24. FORMA DESENHADA

7- Para especificar a largura e altura desta forma selecione a ferramenta Free

Transform .

Quando habilitamos esta ferramenta o painel properties muda.

8- Coloque a largura e altura como na imagem:

Fig 25. ESPECIFICAES DA FORMA RECTANGLE PRIMITIVE

3.3 Usando o Painel Align

Para alinharmos esta forma em relao ao palco vamos usar o painel Align.

8- Para habilitar este painel clique no menu Window > Align e posicione o painel:



Fig 26. PAINEL ALIGN POSICIONADO

O atalho CTRL + K permite acessar rapidamente o painel.

Quando a opo To stage estiver selecionada indica que todas as modificaes

sero aplicadas em relao Stage:

Fig 27. VISUALIZAO DO PAINEL ALIGN

A opo Align poder ser efetuada das seguintes formas:



Fig 28. OPO ALIGN

Alinhamento pela esquerda, pelo centro, pela direita, pelo topo, pelo centro, pela

base.

Fig 29. OPO DISTRIBUTE

A opo Distribute bastante utilizada quando necessrio distribuir elementos

selecionados no palco de maneira que seus pontos centrais ou bordas fiquem com

espaos uniformes.

Fig 30. OPO MATCH SIZE

Com a opo Match size possvel alterar os tamanhos e posies dos objetos.

Fig 31. OPO SPACE

Na opo Space podemos configurar o espaamento entre trs ou mais objetos no

palco.

9- No painel Align deixe habilita a opo To Stage.

10- Selecione a forma que criamos e clique na opo: Align horizontal center e

depois clique na opo: Align top edge no painel Align.

11- Desa um pouquinho nossa forma geomtrica como na imagem abaixo:



Fig 32. FORMA POSICIONADA NO STAGE

12- Salve seu arquivo.

3.3.1 Snap Align

Temos uma facilidade no Flash quanto temos mais de um elemento no palco.

Enquanto arrastamos algum objeto aparecem linhas pontilhadas indicando um

possvel alinhamento em relao a outro elemento:

Fig 33. MOVENDO OBJETOS NO STAGE DO FLASH



Para ativar este ajuste, escolha a opo de menu: View > Snapping > Snap Align

(por padro esta opo j vem habilitada)



Unidade 4 Trabalhando com Camadas

4.1 As Camadas (Layers)

As camadas (Layers) correspondem a um mtodo de trabalho muito prtico em

qualquer tipo de software que se utilize de imagens grficas, sejam elas vetoriais

ou bitmap. Elas permitem organizar mais facilmente contedos e localizar

elementos.

Fig 34. VISUALIZAO DE UMA LAYER

Um projeto em Flash mais facilmente organizado e composto graas s camadas.

As camadas podem ser ainda, subdivididas em pastas, que permitem dividir e

organizar todas as categorias de objetos em um projeto de maior amplitude.

O manuseio de camadas no Flash feito de forma idntica ao de diversos outros

programas de edio de imagem. Entretanto, temos algumas opes especiais:

Fig 35. CONES DAS OPES DAS CAMADAS DO FLASH

- Insert Layer : permite adicionar uma nova camada a lista;

- Add Motion Guide : adiciona uma opo de guia de movimento, criando uma

camada especificamente para este fim.

- Insert Layer Folder : insere uma nova pasta para organizar as camadas

correspondentes.

- Delete Layer : remove uma ou mais camadas selecionadas.



- Show/Hide All Layers : serve para determinar se as camadas estaro visveis

ou no no documento. Ao clicar no olho as camadas ficaro ocultas e ao clicar

novamente, sero exibidas. Podemos escolher apenas uma camada desejada,

bastando clicar na bolinha correspondente da camada.

- Lock/Unlock All Layers : cria uma trava na(s) camada(s), impedindo que os seus objetos sejam modificados (movidos, deletados, selecionados).

- Show All Layers as Outlines : possibilita esconder a visualizao dos

preenchimentos e contornos do objeto, deixando-os visveis apenas atravs de uma

fina borda colorida. uma alternativa a opo de ocultar completamente a

camada, uma vez que com essa opo no perdemos a noo do local e tamanho

do objeto.

Ao selecionar uma camada, observe a presena de um pequeno lpis, indicando

que a camada ativa a ser editada:

Fig 36. CAMADA SELECIONADA

Ao bloquear a camada, um risco vermelho aparece sobre o lpis, determinando que

aquela camada no pode ser editada por encontrar-se bloqueada:

Fig 37. CAMADA BLOQUEADA

extremamente importante desenvolvermos o costume de sempre atribuir nomes

s camadas criadas, uma vez que esse procedimento otimiza a busca de objetos.

Para nomear ou renomear uma camada basta clicarmos duas vezes sobre seu nome

e digitar o nome desejado. Para aplicar o nome s clicar em Enter:

Fig 38. CAMADA SENDO RENOMEADA

1- Abra o arquivo index.fla na pasta site.

2- Renomeie a camada que contm a forma geomtrica para topo e clique em Enter para aplicar o nome.

4.2 Ferramenta Text Tool

Essa ferramenta utilizada para inserirmos textos no Flash



Existem duas opes para esta ferramenta: podemos clicar na rea que o bloco de

texto deve iniciar e depois digitar ou podemos clicar na rea em que o bloco de

texto deve iniciar e depois, mantendo o boto do mouse pressionado, arrastar at a

rea final do bloco, criando uma rea predeterminada que o texto deve utilizar.

Clicando na Text Tool podemos configurar o texto utilizando as configuraes

disponveis na janela de propriedades:

Fig 39. OPES DO TEXTO NO PAINEL PROPERTIES

O primeiro elemento a ser configurado o tipo de texto com as seguintes opes:

- Static Text: texto simples que no aceita entrada nem alterao.

- Dynamic Text: texto que podemos alterar por meio de ActionScript.

- Input Text: caixa de entrada de texto.

No painel Properties temos as seguintes opes:

- Letter Spacing (espaamento de caracteres) aceita um valor entre:

-60 e 60.

- Change Orientation of Text (orientao do texto): horizontal, vertical da

esquerda para direita e vertical da direita para a esquerda.

- Character Position (posio do caractere): normal,

superscript (acima da linha base) e subscript (abaixo da linha base).

- Auto Kern : espaamento automtico.

- Selectable : se marcado, faz com que, ao passar o mouse sobre o texto (no

filme final), o cursor mude e possamos selecionar o texto desejado.

- URL :

neste campo podemos digitar um link e em Target escolher a opo do frame no

HTML em que ser aberta a pgina para qual o link apontar.



Quando criamos um texto, podemos utilizar diferentes mtodos para renderiz-lo,

escolhendo entra suas opes na rea Font rendering method:

- Use device fonts: faz com o que o filme procure no computador do usurio a

fonte que escolhemos na rea Font (no incorpora a fonte no filme), deixando o

filme com um tamanho menor.

- Bitmap Text (No Anti-Alias): remove a opo de suavizao de serrilhado,

acentuando o serrilhado da fonte. No recomendada para textos com fontes

pequenas.

- Anti-Alias for Animation: boa opo para textos envolvidos em animao,

melhora a animao e suaviza o desenho.

- Anti-Alias for Readability: deixa mais fcil a leitura dos textos, principalmente

os que utilizam fontes menores.

- Custom Anti-Alias: nesta opo podemos personalizar a suavizao de

serrilhado.

Temos tambm a opo Edit Format Options na qual possvel definir em

pixels uma identao (Indent), espaamento entre as linhas que compem um

bloco de texto (Line spacing), uma margem esquerda (Left Margin) e uma

margem direita do texto (Right margin).

4.3 Distribuindo Elementos em uma Camada

3- No arquivo index.fla selecione a ferramenta Text Tool e clique do lado

esquerdo do layout digitando: Home

4- Configure as opes do texto como na imagem:

Fig 40. CONFIGURAO DO TEXTO

5- Clique logo abaixo da palavra Home com a Text Tool e digite Produtos.

6- Repita estes passos digitando: Vdeos e Clientes



7- Utilize o painel Align para alinhar os textos:

Fig 41. TEXTOS DOS MENUS DIGITADOS

Agora nossos textos esto alinhados. Observe que todos os textos esto na mesma

camada junto com a forma, que esta na camada topo.

Iremos distribuir cada texto em uma camada distinta.

8- Selecione todos os textos e clique no menu: Modify > Timeline > Distribute to

layers.

Observe como ficaro nossas layers:

Fig 42. TEXTOS DISTRIBUDOS NAS CAMADAS

Quando aplicamos o comando Distribute to Layers, a camada criada assume

automaticamente o nome que atribumos ao elemento. Quando trabalhamos com

textos e os distribumos em camadas, as camadas assumem os nomes dos textos.

9- Clique no cone Insert Layer Folder e renomei-a para menus:



Fig 43. NOVA PASTA CRIADA NAS CAMADAS DO ARQUIVO INDEX.FLA

10- Clique em cima das camadas que contm os textos e arraste para dentro da

pasta menus.

11- Ordene as camadas de textos na mesma ordem do menu do layout:

Fig 44. CAMADAS DE TEXTOS DENTRO DA PASTA MENUS

Observe que no lado esquerdo da pasta temos uma pequena seta branca. Quando a

seta aponta para baixo, indica que a pasta est aberta, exibindo todas as camadas

do seu interior. Para fech-la, basta clicar na seta. A pasta se contrai e esconde

todas as camadas que esto dentro dela.

4.4 Criando e Aplicando Preenchimentos

No Flash podemos criar algumas opes de preenchimentos que podem ser

aplicados em diversos tipos de objetos.

Alm das cores slidas, o Flash cria preenchimentos de gradientes e

transparncias, que nos permitem a criao de elementos mais sofisticados e com

melhor acabamento.

12- Crie um retngulo, em uma nova camada, de 700px por 20px e posicione na

parte inferior do Layout (use o painel Align, se necessrio):



Fig 45. RETNGULO CRIADO NO STAGE E POSICIONADO NA PARTE INFERIOR

13- Renomeie esta camada para baixo.

14- Habilite o painel Color: Window > Color (Shift +F9).

As configuraes de cor e preenchimento esto neste painel:

Fig 46. PAINEL COLOR

Nas caixas de texto R, G e B colocamos valores entre 0 e 255 para vermelho,

verde e azul respectivamente. possvel tambm escolher as opes Black e

White e Swap Color (troca s cores do trao e preenchimento).

Na opo Alpha define-se a quantidade de visibilidade que a cor ter, bastando

escolhermos um valor entre 0 (transparente) e 100 (totalmente visvel).



Na opo Type escolhemos o estilo de preenchimento desejado:

- Solid: esse estilo de preenchimento aceita uma nica cor para cada objeto.

- Linear: esse tipo permite a definio de duas ou mais cores e o Flash calcula

todas as cores e tons necessrios para passar de uma cor a outra.

Para alterar uma das cores, basta clicar no quadrado pequeno da cor duas vezes e a

caixa de cor se abre.

Fig 47. SELEO DA COR

Para adicionar um novo ponto de cor, movimente o mouse na mesma linha. Repare

que ir aparecer um sinal de + abaixo do cursor do mouse. Basta clicarmos no

local onde desejamos a nova cor e um novo quadrado ir aparecer.

Fig 48. QUATRO CORES NA OPO LINEAR

Para remover um ponto de cor, devemos clicar no quadrado referente a ela e

mantendo o boto do mouse pressionado arrastar com o mouse para baixo.

Temos, tambm, nesse painel a opo Overflow que indica o que ocorrer com o

que exceder rea de atuao do gradiente: repete-se a ltima cor do gradiente, se

repete o gradiente em sentido oposto ou se recomea o gradiente.

- Radial: esse tipo permite a definio de duas ou mais cores e o Flash calcula

todas as cores e tons necessrios para passar de uma cor a outra. Esse tipo de efeito

ocorre em forma circular de dentro para fora.

- Bitmap: utiliza uma imagem bitmap como padro para o preenchimento.



4.4.1 Gradiente Transform Tool

Essa ferramenta utilizada para modificar as configuraes do preenchimento de

gradiente.

Para modificar um gradiente linear, devemos clicar no preenchimento com essa

ferramenta selecionada .

Aparecero trs controles: um crculo ao centro que representa o ponto central do

gradiente, um quadrado com uma seta ao centro de uma das linhas, o qual

podemos movimentar para dentro e para fora fazendo com que diminua ou

aumente a rea de abrangncia do gradiente e um crculo com uma pequena seta

numa das pontas que serve para girar a rea do gradiente:

Fig 49. MODIFICAO DO GRADIENTE LINEAR

Se alterarmos nosso preenchimento para Gradiente Radial aparecero quatro

controles e uma seta: um crculo ao centro que representa o ponto central da rea

do gradiente, um quadrado com uma seta ao longo do crculo representativo da

rea do gradiente, que serve para ajustar a distncia entre seus pontos inicial e

final, uma pequena ala circular que podemos movimentar para dentro e para fora

fazendo com que diminua ou aumente a rea de abrangncia do gradiente, uma

outra ala circular que serve para rotacionar a rea do gradiente e a seta para

ajustar o ponto central da transformao de cores do gradiente.



Fig 50. MODIFICAO DO GRADIENTE RADIAL

15- Com o retngulo selecionado escolha a opo linear (de preto para vermelho).

16- Selecione a ferramenta Gradiente Transform Tool para modificar seu

preenchimento:

Fig 51. GRADIENTE DO RETNGULO MODIFICADO



Unidade 5 Animaes

5.1 Conhecendo a Timeline

O processo de animao do Flash orientado pela janela Timeline, na qual se

situam as layers e, mais importante, na qual se encontram os frames.

Uma animao uma seqncia de quadros que se altera em funo do tempo,

dando uma iluso de movimento.

Podemos configurar a quantidade de quadros (frames) que passar a cada segundo.

Na parte superior da timeline esto os nmeros em intervalos de cinco em cinco

que servem para localizar a quantidade de quadros presente na animao.

Fig 52. TIMELINE DO FLASH CS3

Na reta de cada layer temos os frames correspondentes a ela. A cada cinco frames

eles esto pintados de cinza para simples referncia, mas este fato no altera nada

na animao.

Logo do incio podemos perceber um crculo vazado no primeiro quadro, o que

indica que nesse frame no foi desenhado nada nele, o quadro-chave vazio

(Blank Keyframe):

Fig 53. QUADRO-CHAVE VAZIO



Vamos desenhar um quadrado no palco do Flash. Repare que o crculo

representando o Keyframe (quadro-chave) no est mais vazado e sim preenchido,

indicando que esse Keyframe possui algum objeto:

Fig 54. QUADRO-CHAVE PREENCHIDO COM UM OBJETO

Para prolongar a permanncia desta forma na tela durante a animao, devemos

acrescentar frames a sua layer. Para isso basta clicar com o boto direito no ltimo

quadro em que deseja a forma visvel e escolher a opo Insert Frame:

Fig 55. ESCOLHENDO A OPO DE INSERT FRAME NO FRAME 30 DA TIMELINE

Podemos, ainda, usar a tecla de atalho que o F5.

Caso deseje remover alguns frames da timeline, devemos clicar no quadro que

desejamos remover, mantendo o boto do mouse pressionado, arrast-lo,

selecionando todos os frames que queremos retirar e clicar com o boto direito mo

mouse escolhendo a opo Remove Frames.

Fig 56. QUADROS-CHAVES SELECIONADOS COM E OPO REMOVE FRAMES MARCADA

Na janela da Timeline existe um quadrado vermelho na rea numerada com uma

linha fina vermelha abaixo. Esta a cabea leitora do filme. Ao passar pelos

quadros, ela faz a varredura de todos os elementos em cena, exibindo-os.



Fig 57. VISUALIZAO DA CABEA LEITORA DO FILME

Observe que quando a cabea leitora passa pelos quadros, ela faz a varredura das

informaes deles. Na opo Current Frame, localizada na parte inferior da

Timelime, podemos visualizar o nmero do quadro atual, a quantidade de Frame

Rate e a quantidade de tempo decorrido at o quadro em que estamos:

Fig 58. VISUALIZAO DO CURRENT FRAME DA TIMELINE

5.2 Animao Quadro a Quadro

Esse processo remonta aos primrdios da animao e se constitui na seqncia de

vrias imagens, uma levemente diferenciada da anterior para simular o

movimento.

o tipo de animao mais trabalhoso, entretanto o que possui resultados mais

satisfatrios em termos visuais.

1- Para criarmos uma animao quadro a quadro, vamos desenhar uma elipse e

inserir um Keyframe na posio 2 (a tecla de atalho o F6).

Fig 59. TIMELINE COM DOIS QUADROS-CHAVES INSERIDOS

2- Neste caso, a alterao ser o deslocamento da elipse. Para fazer isso, vamos

selecionar o quadro 2 e deslocar o desenho da elipse um pouco para baixo da

posio atual.



3- Repita estes procedimentos at chegar ao quadro 10 da Timeline, sempre

primeiro inserindo o Keyframe e em seguida deslocando um pouco para baixo a

forma.

Fig 60. TIMELINE COM 10 QUADROS-CHAVES INSERIDOS

Ao final, teremos efetuado nossa primeira animao. Para test-la, podemos

pressionar a tecla Enter ou test-la na janela de testes do Flash clicando em

CTRL + Enter.

5.2.1 Onion Skin

Para melhor visualizar os quadros do filme, podemos usar a opo Onion Skin.

Essa tcnica mostra todos os quadros que desejarmos com diferenciao na

opacidade, facilitando o entendimento da animao.

Para aplicar esse efeito clique no boto representado pelo cone Onion Skin,

localizado na parte inferior na Timeline:

Fig 61. VISUALIZAO NO BOTO ONION SKIN

Assim que estiver selecionada essa opo, aparece na parte numerada da Timeline

uma rea mais escura com alas circulares dos dois lados.

Podemos arrastar essas alas para definir quais quadros sero visualizados com o

recurso Onion Skin.



Fig 62. VISUALIZAO DO RECURSO ONION SKIN

5.3 Conhecendo os Smbolos do Flash

Os elementos desenhados no Flash com as suas ferramentas de desenho

correspondem a formas vetoriais. Esses desenhos no suportam determinados tipos

de animao que o Flash pode realizar, bem como no permitem diversas

aplicaes. Para tornar o elemento compatvel com as aplicaes, necessrio

convert-lo em smbolo.

Ao transformarmos um desenho ou objeto em um smbolo, aplicamos um

comportamento a esse objeto, indicando que agora ele deve receber aes e

comportar-se de forma especfica.



Todo smbolo criado armazenado na Biblioteca e pode ser reutilizado diversas

vezes, o que no aumenta de forma significativa o tamanho final do filme.

1- Crie uma forma semelhante a uma lua no palco.

Fig 63. FORMA DA LUA DESENHADA NO STAGE DO FLASH

2- Com essa forma selecionada, clique no menu: Modify > Convert to Symbol ou

pressione a tecla F8.

Fig 64. JANELA CONVERT TO SYMBOL

Abre-se a tela Convert to Symbol. Nessa tela, alm de nome-lo, podemos definir

que tipo de smbolo o objeto ser. Ao definir o tipo de smbolo, estamos

determinando de que forma nosso objeto se comportar:

- Movie Clip: transforma seu objeto em um clipe de filme, que podem receber

animaes e outras aplicaes, mantendo o vnculo com o filme principal.

Cada instancia deste smbolo no palco do Flash pode ser nomeada para ser

utilizada por programao.



- Button: transforma o objeto em um boto, que permitem realizar a conexo de

elementos em projetos interativos e outras funes.

- Graphic: converte o objeto em um grfico. No mantm vnculo com a Timeline

do filme principal.

3- Atribua um nome ao seu smbolo, definindo que ele deve ser um Movie Clip.

Observe que ao lado das opes de comportamento do smbolo temos uma opo

denominada Registration, na qual podemos definir o ponto de registro do

smbolo, o qual muito til, uma vez que permite determinar o ponto de rotao

de um smbolo, por exemplo.

4- Deixe marcada a opo padro (ponto superior esquerdo).

5- Clique em OK.

5.3.1 Biblioteca

Os smbolos ficam armazenados para que possamos utiliz-los a qualquer

momento no Flash.

Para abrir a biblioteca escolha o menu: Window > Library ou utilize as teclas de

atalho: CTRL + L.

Para aplicar um smbolo no palco que esteja na biblioteca, basta arrast-lo da

biblioteca para o palco. Quando um elemento levado da biblioteca para o palco

recebe o nome de instncia, uma vez que ele apenas uma apario do smbolo na

tela.

Podemos ter um smbolo aparecendo diversas vezes na tela. Neste caso teramos

diversas instncias do smbolo no palco.

Uma vez que modifiquemos um smbolo, todas as instncias que o usam como

referncia tambm sofreram a alterao.

6- Vamos criar uma estrela. Selecione a forma PolyStar Tool e na janela

Properties clique em Options e selecione a opo Star:



Fig 65. OPO TOOL SETTINGS DA FORMA POLYSTAR

7- Desenhe esta forma no palco do Flash e transforme-a em um smbolo do tipo

Movie Clip.

Fig 66. ESTRELA, JUNTAMENTE COM A LUA NO PLACO DO FLASH

Observe que nossos dois smbolos criados esto na biblioteca:



Fig 67. VISUALIZAO DA BIBLIOTECA (LIBRARY)

Ao convertemos um objeto em Movie Clipe, atribumos a ele a possibilidade de

ser animado independentemente do filme principal.

8- Vamos entrar no modo de edio do smbolo estrela. D um duplo clique nela.

Na edio deste smbolo temos camadas, o que significa que podemos animar a

estrela na sua prpria linha de tempo:

Fig 68. VISUALIZAO DO MOVIE CLIP ESTRELA NA SCENE 1

9- Crie dez Keyframes, no qual cada um, de forma decrescente, deixar a estrela

menor.

10- Retorne para o palco principal do Flash clicando no cone Scene 1.

11- Para ver a animao clique em CTRL + Enter.

Nossa estrela est animada, uma animao simples, mas est funcionando.


Importante: Podemos arrastar mais estrelas para o nosso palco. Teste e veja o que

acontece.



5.4 Interpolao de Movimento

Em grandes estdios de animao, o principal artista no costumava desenhar

todos os quadros das animaes. Geralmente criava pontos mais importantes e sua

equipe desenhava todos os quadros necessrios entre os pontos importantes.

O Flash trabalha de maneira semelhante. Para melhorar sua produtividade e

facilitar nosso trabalho, ele utiliza o sistema de interpolao de movimento, no

qual definimos o ponto inicial e final e o Flash calcula todos os quadros

intermedirios necessrios para a animao.

Para esse tipo de animao temos que converter nosso objeto em um smbolo.

1- Retorne ao nosso arquivo .fla que contm a estrela e a lua.

2- Selecione a estrela e clique em delete. Veja que nosso smbolo ainda esta na

Biblioteca.

3- Crie uma nova estrela com a ferramenta PolyStar Tool.

4- Transforme esta forma em um smbolo do tipo Movie Clip.

Observe que teremos que dar um nome diferente para esta nova estrela criada,

visto j termos um smbolo estrela armazenado na biblioteca.

5- Clique duas vezes em cima do novo smbolo criado para entrarmos na sua

edio.

Iremos considerar que nossa animao esta no seu estado inicial e criaremos um

Keyframe para o seu estado final.

Importante: Antes de fazermos as modificaes, devemos sempre inserir o

Keyframe; caso contrrio nossas alteraes sero efetuadas no elemento inicial.

6- Clique no quadro 30 e insira um Keyframe:

Fig 69. TIMELINE DA EDIO DO SMBOLO MOVIE CLIP

7- No Keyframe 30 mude a posio da estrela.



8- Agora basta clicar com o boto direito do mouse em qualquer quadro entre o

primeiro Keyframe e o penltimo quadro e escolher a opo Create Motion

Tween (o ltimo no serve, pois o Flash entenderia que o processo de animao

seria dele em diante):

Fig 70. CRIANDO A INTERPOLAO DO TIPO MOTION

Ao escolhermos esta opo o Flash se encarrega de calcular todos os quadros

intermedirios da animao.

Na Layer que foi animada, uma seta entre os Keyframes indica que a animao

esta correta.

Fig 71. TIMELINE COM A INTERPOLAO DE MOVIMENTO CRIADA E CORRETA

Caso aparea uma linha tracejada, significa que h erros na animao:

Fig 72. TIMELINE COM A INTERPOLAO DE MOVIMENTO CRIADA E INCORRETA

Podemos, ainda, mudar o tamanho da nossa forma, rotacion-la e aplicar alguns

efeitos. S que para isso teremos que transformar o objeto que esta dentro do

nosso Movie Clip em um smbolo Graphic.

9- Teste a animao.

10- Salve este arquivo na pasta da lio.



5.5 Atributos da Animao

5.5.1 Animao com Rotao

1- Crie um novo documento.

2- Crie uma forma geomtrica do palco do Flash.

3- Converta-a em um smbolo do tipo Movie Clip.

4- Entre na edio do smbolo e transforme a forma (que um Shape) um

smbolo Graphic.

5- Crie um quadro-chave na posio 30.

6- Clique entre os quadros-chave e pea um: Create Motion Tween.

Selecionando qualquer frame da interpolao possvel verificar que na janela

Properties temos algumas opes:

Fig 73. OPES DA INTERPOLAO NO PAINEL PROPERTIES

- Rotate: faz com que o objeto seta rotacionado durante a animao no sentido

horrio (CW) ou anti-horrio (CCW) e at a quantidade de volta na opo times.

7- Clique na opo: CW.

8- Clique em Enter para ver que nossa animao j esta rodando.

5.5.2 Animao com Transparncia

Em alguns sites vemos animaes com elementos diversos que surgem

transparentes e tornam-se opacos no decorrer no tempo. Esse efeito possvel

graas propriedade Alpha.



Essa propriedade, aplicada em smbolos, pode ser ajustada do valor de 0%

(totalmente transparente) at o valor de 100% (totalmente visvel).

9- Alm de vermos nossa estrela rodando queremos que ela v diminuindo a

opacidade. Selecione o Keyframe 30 e clique no objeto.

10- Na janela Properties temos a opo de Color selecione a opo Alpha com o

valor de 0%.

Fig 74. PROPRIEDADE ALPHA EM 0%

Isso significa que no primeiro Keyframe da animao teremos a forma

completamente visvel e no keyframe 30 completamente transparente.

11- Clique em Enter para ver a animao.

Importante: A animao com Alpha no necessita de movimento para acontecer.

O objeto pode estar situado no mesmo ponto do incio ao fim. A propriedade

Alpha s pode ser aplicada em smbolos: Movie Clipes, grficos ou botes.

12- Salve seu arquivo na pasta da lio.

5.5.3 Acelerao e Desacelerao de Movimento

Muitas vezes em uma animao realizada no Flash precisamos criar um efeito de

acelerao ou desacelerao em um objeto, para que a animao fique mais

realista.

No Flash, nos referimos a essas aes de acelerao e desacelerao como

atenuaes de movimento, ou Ease.

1- Crie uma elipse e transforme-a em um Movie Clip.

2- Crie um keyframe na posio 40:

3- Na posio inicial deixe esta forma na parte superior do palco e na posio final

deixe-a na parte inferior.

4- Crie um movimento do tipo: Tween Motion.



Fig 75. TWEEN MOTION SENDO SELECIONADO PARA O SMBOLO

5- Na interpolao da linha de tempo da forma clique em qualquer frame. No

painel properties, logo abaixo do Tween, encontra-se a opo Ease. Selecione o

valor como na imagem abaixo:

Fig 76. VALOR DO EASE SENDO MARCADO PARA A INTERPOLAO

Os valores existentes para atenuao de um movimento variam de -100 a 100. Os

valores negativos correspondem ao incio de movimento lento e posterior

acelerao gradual. J os valores positivos (acima de zero) fazem o movimento

iniciar acelerado e tornar-se lento no decorrer do tempo.

6- Teste sua animao.

Podemos, tambm, customizar a acelerao de uma animao, dando mais

controle ao usurio para criar movimentos complexos.

7- Ao lado da opo Ease, clique no boto Edit.

Abre-se a janela Custom Ease In/Ease Out:



Fig 77. JANELA CUSTOM EASE IN/EASE OUT

Temos um grfico em cuja vertical (Tween) esta a animao em si (sendo no

exemplo 0% o incio da animao e no valor 100% o final da animao) em

funo dos frames (0 a 30).

Este grfico esta em uma linha reta, ou seja, gradativamente a animao vai da

posio inicial at a sua posio final de forma constante.

8- Clique no meio da reta e ajuste esse ponto um pouco mais para baixo:



Fig 78. JANELA CUSTOM EASE IN/EASE OUT SENDO ALTERADA

9- Adicione mais pontos no grfico como na imagem abaixo:

Fig 79. JANELA CUSTOM EASE IN/EASE OUT COM MAIS PONTOS CRIADOS E ALTERADOS

10- Teste sua animao.



Ao testar, veremos que a animao transformou-se completamente, A bola, em vez

de simplesmente descer vai quicar at parar.

Uma outra vantagem tambm o fato de podermos ajustar as propriedades da

animao em separado. Para isso s desmarcar a opo: Use one setting for all

properties, localizada na parte superior da janela.

11- Salve seu arquivo na pasta da lio como bola.fla

5.6 Copiar e Colar Movimentos

Muitas vezes criamos uma animao com diversos detalhes como: posies,

tamanhos, movimentos, etc. e gostaramos de reaproveitar a animao criada em

outro arquivo filme do Flash.

1- Crie um retngulo com a ferramenta Rectange Tool e transforme-o em um

Movie Clip.

2- Crie um Keyframe na posio 40 e mude o Alpha do objeto para 0%.

3- Crie um Tween: motion.

O que faremos agora copiar o movimento e suas caractersticas.

4- Clique com o boto direito do mouse em qualquer quadro onde se encontre a

animao e escolha a opo de menu: Copy Motion:

Fig 80. ESCOLHENDO A OPO COPY MOTION



5- Crie um novo arquivo no Flash.

6- No novo arquivo desenhe uma estrela e converta-a em um smbolo do tipo

Movie Clip.

7- Para aplicar a animao que acabamos de copiar, basta clicar com o boto

direito do mouse no primeiro Keyframe do nosso novo arquivo e escolher a opo:

Paste Motion.

A mesma animao criada no arquivo anterior aparece no novo mantendo suas

caractersticas.

Se tivssemos escolhido a opo Paste Motion Special, seria aberta uma janela

para selecionarmos as caractersticas que desejamos aplicar no novo arquivo:

Fig 81. JANELA PASTE MOTION SPECIAL



5.7 Importando Mdias

Apesar de o Flash possuir suas prprias ferramentas para desenho, em alguns

casos queremos importar nossa arte vetorial, feita em outro software, e manipular a

mesma dentro do Flash.

Tambm, podemos importar arquivos bitmaps para ilustrar nosso projeto e ainda

obter efeitos bastante interessantes dentro do programa.

1- Abra o arquivo index.fla na pasta da lio.

2- Clique no menu: File > Import > Import to Library e selecione a imagem

topo.jpg que esta na pasta site > imagens.

Nossa imagem j esta na Biblioteca:

Fig 82. IMAGEM J NA BIBLIOTECA DO ARQUIVO

3- Selecione a forma retngulo, que corresponde ao nosso topo, e habilite o painel

Color.

4- Na opo Type selecione: Bitmap.

Veja como ficou nosso arquivo (Clique em CTRL + Enter):



Fig 83. FORMA J COM O PREENCHIMENTO DO BITMAP

Se o arquivo ficar piscando teremos que usar um comando bsico para fazer com

que nosso filme fique parado.

5- Crie uma nova camada acima de todas as outras e renomei-a para acoes

6- Com esta camada selecionada clique em F9 ou Window > Actions.

Automaticamente abrir nosso painel: Actions.

Este painel serve para adicionarmos cdigos aos frames do nosso arquivo.

7- Digite na primeira linha:

stop();

Observe que com este comando nosso filme no estar mais piscando quando

clicarmos em CTRL + Enter.

Em alguns casos queremos alterar as configuraes da imagem para diminuir seu

tamanho ou at troc-la.

Para ter acesso as configuraes de uma imagem especfica, clique duas vezes no

cone que a representa na biblioteca. Ser aberta a janela de configuraes para

imagens:



Fig 84. JANELA BITMAP PROPERTIES

Nesta janela podemos ver o nome da imagem na biblioteca, o local na sua mquina

em que ela se encontra, a data da criao/alterao, suas dimenses e a

profundidade da cor.

Podemos definir a compresso desejada atravs das opes:

- Photo (JPEG): se possuirmos uma imagem com grande quantidade de cores e

tonalidades, devemos usar esta opo.

- Lossless (PNG/GIF): se no quisermos que algumas informaes de cor e

tonalidade sejam descartadas da imagem, devemos usar esta opo. Ideal para

imagens que no possuem uma quantidade de cores muito grande.

Se quisermos alterar a compresso da imagem, basta desmarcar a opo: Use

imported JPG data:



Fig 85. VISUALIZAO DAS OPES DO BITMAP

No campo Quality podemos digitar um valor entre 0 e 100 e clicar no boto Test.

Agora vamos importar um arquivo .psd (Photoshop) para o nosso filme.

8- Clique em File > Import > Import to Stage e selecione o arquivo xicara.psd

que est na pasta site > imagens.

9- Configure como na imagem abaixo:

Fig 86. JANELA DE IMPORTAO DO ARQUIVO

10- Deixe a opo: set stage to same size as Photoshop canvas desmarcada e

clique em OK.

11- Renomeie a layer1 no flash para xicara e coloque-a abaixo na layer acoes.

12- Posicione esta imagem abaixo dos itens de menu:



Fig 87. IMAGEM POSICIONADA NO LAYOUT

13- Salve seu arquivo na pasta da lio.



Unidade 6 Animao de formas

6.1 Animao Shape

Vimos como fazer uma forma mudar de tamanho, mudar sua opacidade, mas em

nenhum momento o objeto modifica sua forma. Entretanto, o Flash possui um tipo

caracterstico de animao denominada Shape, no qual um elemento se transforma

em outro.

1- Crie um novo arquivo e salve-o como shape.fla.

2- Crie uma estrela.

Importante: Ao contrrio do que fizemos com a animao de interpolao para

animar formas, NO devemos transformar nosso objeto em smbolo; ele deve ser

uma simples forma.

3- Insira um quadro-chave vazio na layer 30 com a opo: Insert Blank

Keyframe (F7)

4- No quadro que possui o Keyframe vazio vamos desenhar um quadrado, que ser

o segundo desenho da animao:

Fig 88. LAYER 1 DA ANIMAO SHAPE



5- Para animar as formas, clique com o boto direito do mouse em qualquer frame

da animao exceto no ltimo e escolha a opo: Create Shape Tween.

Teste e veja como ficou a animao.

No painel Properties podemos indicar a maneira como ocorrer a transio,

configurando o campo Blend.

Fig 89. VISUALIZAO DO CAMPO BLEND

Se desejar manter os cantos e linhas retas, escolha no campo Blend a opo

Angular; caso deseje suavizar as formas na transio, escolha a opo

Distributive.

6.1.1 Shape Hints

Em alguns casos a maneira como o Flash interpreta a transio entre as formas

um pouco confusa, mas temos um modo de indicar ao Flash como deve ser atravs

das Shapes Hints. Essa opo diz que pontos definidos no incio da animao

devem corresponder a pontos que definiremos no final.

6- Selecione o primeiro quadro da animao e vamos colocar um Shape Hint que

servir de referncia para a animao, escolhendo a opo de menu: Modify >

Shape > Add Shape Hint.

7- Um crculo vermelho aparece com a letra a em seu centro. Arraste-o para o

canto superior esquerdo da estrela:

Fig 90. SHAPE HINT A POSICIONADO NA PRIMEIRA FORMA



8- V ao ltimo quadro da animao e veremos novamente o pequeno crculo.

Leve-o para a posio que considerar correspondente ao crculo do primeiro

quadro:

Fig 91. SHAPE HINT A POSICIONADO NA SEGUNDA FORMA

9- Repita estes passos para inserir mais Shape Hints.

Importante: Como as Shape Hints utilizam como seus identificadores letras,

teremos no mximo 26 Shape Hints.

Veja como ficaram os shapes:

Fig 92. SHAPES HINTS NA PRIMEIRA FORMA

Fig 93. SHAPES HINTS NA SEGUNDA FORMA



6.2 Transio entre Textos

Podemos usar a animao Shape para fazer a transio entre textos.

Para termos uma animao Shape, precisamos ter uma forma desenhada na tela ou

um texto (tipo static) que no seja editvel.

1- Crie um novo documento.

2- Escreva: Adobe Flash CS3 com a opo de texto esttico.

Fig 94. TEXTO ESCRITO NO STAGE DO FLASH

3- Selecione o texto e utilize a opo: Modify > Break Apart:

Fig 95. TEXTO SEPARADO EM LETRAS

Esta opo separa o texto, deixando cada letra independente, porm ainda editvel.

4- Selecione todas as letras e aplique novamente o comando: Modify > Break

Apart, que agora sim vai convert-las em formas (shapes).

5- Insira um Keyframe vazio (Blank Keyframe) no quadro 30 e digite o texto:

Alfamdia.

Fig 96. SEGUNDO TEXTO ESCRITO NO STAGE

6- Repita os mesmos procedimentos adotados no primeiro texto.



7- Selecione qualquer quadro entre o primeiro e o penltimo e aplique uma

animao Shape.

Pronto, s testar o resultado. Se achar necessrio pode utilizar as Shape Hints.

6.3 Utilizando Break Apart em Bitmap

Quando aplicado o comando Break Apart em uma imagem ela convertida em um

elemento vetorial comum, que poder receber cor e outros atributos.

1- Crie um novo arquivo.

2- Clique no menu: File > Import > Import to Library e

apostila flash cs3

Documents

processor alfamdia ltda

layout do flash

final de curso

garantia do curso

utilizados em treinamento

excelente treinamento

qualidade do curso

estrutura do curso