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
matricula@alfamidia.com.br ;
- 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:
matricula@alfamidia.com.br dvidas aps contratao
info@alfamidia.com.br 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
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

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

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes


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.

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes


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

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


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).

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes

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:

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


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

________________________________________________________________________________________
Anotaes

Para ativar este ajuste, escolha a opo de menu: View > Snapping > Snap Align
(por padro esta opo j vem habilitada)


________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes

- 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

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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:

________________________________________________________________________________________
Anotaes


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):

________________________________________________________________________________________
Anotaes


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).

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes


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

________________________________________________________________________________________
Anotaes



________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes


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.

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes


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.

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


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.

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes

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.

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


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.

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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):

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


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:

________________________________________________________________________________________
Anotaes


Fig 87. IMAGEM POSICIONADA NO LAYOUT

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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

________________________________________________________________________________________
Anotaes

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 selecione as imagens:
paisagem.jpg e paisagem1.jpg que esto na pasta imagens na pasta da lio.
3- Arraste a imagem paisagem.jpg para o palco do Flash.
4- Sem estar com a imagem selecionada, clique em Size na janela Properties e
marque a opo: Contents.

Fig 97. JANELA DOCUMENT PROPERTIES
5- Com a imagem selecionada escolha: Modify > Break Apart (CTRL + B)

________________________________________________________________________________________
Anotaes

6- Clique no frame 40 e selecione a opo: Insert Keyframe (F6)
7- Retorne ao frame 1, selecione a ferramenta Subselection Tool (seta branca) e
clique nas extremidades da imagem.
Veja que nossa imagem pode ser editada como se fosse uma forma Shape.
8- Clique na extremidade superior esquerda da imagem e arraste-a prxima ao
canto inferior direito como na figura:

Fig 98. IMAGEM SENDO EDITADA COM A FERRAMENTA SUBSELECTION
9- Agora aplique uma animao Shape e veja o resultado.
Agora a sua vez...
Continue essa animao com a outra imagem que est na Biblioteca.


________________________________________________________________________________________
Anotaes

Unidade 7
Trajetrias
7.1 Motion Guide
Durante uma animao, muitas vezes queremos que nosso objeto no apenas se
movimente entre um ponto e outro, mas tambm siga uma trajetria predefinida.
Para anexar uma trajetria a uma animao, utilizaremos um tipo especial de layer
do Flash chamada Motion Guide.
1- Crie um arquivo novo.
2- Crie uma forma geomtrica no palco do Flash e transforme-a em um smbolo
grfico.
3- Insira um Keyframe no quadro 40 e mova a forma para a direita:

Fig 99. STAGE COM A FORMA TRANSFORMADA EM UM SMBOLO

________________________________________________________________________________________
Anotaes

4- Clique com o boto direito do mouse sobre qualquer quadro intermedirio e
escolha a opo Create Motion Tween.
5- Agora vamos adicionar uma Motion Guide clicando no boto Add Motion
Guide . Localizado na parte inferior do painel Timeline.
Essa nova camada foi inserida e simbolizada por um cone semelhante ao da
opo Add Motion Guide.
Repare que todas as layers que porventura estiverem sobre a influncia da guide
estaro com seu cone um pouco mais direita que o normal:

Fig 100. LAYER MOTION GUIDE CRIADA
6- Selecione o Keyframe vazio da Motion Guide e desenhe um caminho com a
ferramenta Pencil Tool (lpis) :

Fig 101. CAMINHO DESENHADO COM A PENCIL TOOL


________________________________________________________________________________________
Anotaes

Aps o caminho da Motion Guide estar desenhado para o objeto realmente seguir
essa trajetria, necessrio que tanto no primeiro quanto no ltimo Keyframe da
animao o ponto central do objeto deve estar conectado a trajetria.
7- No frame 1 da camada da forma, posicione-a como na imagem abaixo:

Fig 102. FORMA POSICIONADA NO CAMINHO NO FRAME 1
8- Faa mesma coisa no frame 40:

Fig 103. FORMA POSICIONADA NO CAMINHO NO FRAME 40
9- Aplique um Tween: Motion na layer na forma:

Fig 104. TWEEN MOTION APLICADA NA LAYER
Teste e veja como ficou nossa animao.
Importante: imprescindvel que os pontos de registro estejam corretamente
ligados no caminho desenhado; caso contrrio, o objeto no seguir a guia.

________________________________________________________________________________________
Anotaes

O objeto sempre mantm a mesma orientao do incio ao fim da trajetria.
Entretanto, podemos faz-lo adaptar-se ao caminho medida que o percorre.
10- No painel properties, marque a opo: Orient to Path e teste sua animao.

Fig 105. PROPRIEDADE ROTATE PARA O SHAPE
7.2 Desenhando Caminhos com a Ferramenta Pen Tool
Uma das ferramentas mais comuns no meio da computao grfica a Pen Tool
(caneta). Com ela podemos desenhar linhas retas, atribuindo um ponto inicial e
final, alm de traar curvas.
Para desenhar um objeto com vrios pontos, basta selecionar a ferramenta e ir
clicando nos locais desejados.
Querendo desenhar um objeto com vrios pontos, clique na seqncia desejada, e a
prpria ferramenta se encarrega de ligar os ns:

Fig 106. SHAPE DESENHADO COM A PEN
Quando fazemos um desenho, temos uma srie de pontos ligados. Para manipular
esses pontos utilizamos uma das subopes existentes no painel Tools para a
ferramenta Pen:

________________________________________________________________________________________
Anotaes


Fig 107. OPES DO PAINEL TOOLS DA FERRAMENTA PEN
Para adicionarmos mais pontos a nossa linha, basta utilizarmos a ferramenta Add
Anchor Point Tools.

Fig 108. FERRAMENTA ADD ANCHOR POINT
Se desejarmos remover um ponto, utilizamos ferramenta Remove Anchor Point
Tool.

Fig 109. FERRAMENTA REMOVE ANCHOR POINT

________________________________________________________________________________________
Anotaes

Se quisermos transformar uma curva em uma reta, devemos utilizar a ferramenta
Convert Anchor Point Tool.

Fig 110. FERRAMENTA CONVERT ANCHOR POINT
Aps terminarmos o desenho, possvel retirar pontos existentes, e tambm
realizar transformaes em curvas.
7.3 Subselect Tool
Quando utilizamos ferramenta Pen ou qualquer outra para desenhar, desejamos
modificar alguns pontos do desenho.
Para modificar esses pontos usamos a ferramenta Subselect .
Para isso devemos selecionar a linha com a ferramenta e clicar sobre os pontos que
desejamos alterar.

________________________________________________________________________________________
Anotaes


Fig 111. FERRAMENTA SUBSELECT
Se for uma linha curva, ao selecionar o ponto, veremos uma ou duas alas que
orientam a curvatura. Para alterar a curva, podemos arrastar as extremidades
dessas alas at que a forma esteja do nosso agrado.

Fig 112. ALAS DO PONTO SENDO MOVIDAS
Para mudar a posio de um ponto do desenho, basta selecion-lo com a
ferramenta Subselect e arrast-lo.

________________________________________________________________________________________
Anotaes


Fig 113. PONTO SELECIONADO COM A FERRAMENTA SUBSELECTION
Com a ferramenta Pen Tool podemos desenhar trajetrias para a nossa animao.


________________________________________________________________________________________
Anotaes

Unidade 8
Mscaras na animao
8.1 Usando Mscaras
Uma tcnica bastante usada em animao utiliza mscaras para obter o efeito de
mostrar apenas parte da animao.
Quando trabalhamos com mscaras, apenas as reas que definimos nelas sero
mostradas no resultado final, no sendo visualizadas as outras reas do elemento
mascarado.
1- Crie um novo documento e renomeie a layer inicial para mascarado.
2- Digite no palco o texto: Adobe Flash CS3.

Fig 114. TEXTO DIGITADO NO STAGE
3- Clique com o boto direito do mouse no quadro 30 e escolha a opo Insert
Frame (F5), com isso prolongamos a durao do texto na tela por 30 quadros.
4- Crie uma nova layer acima da layer mascarado e nomeie como mascara.

Fig 115. VISUALIZAO DAS LAYERS DO ARQUIVO

________________________________________________________________________________________
Anotaes

5- Na layer mascara desenhe um crculo que possua um tamanho um pouco
maior que a altura do texto e torne-o um smbolo grfico posicionando-o um
pouco esquerda do texto:

Fig 116. CRCULO DESENHADO NO STAGE
6- Insira um keyframe na posio 30 da layer mascara e coloque o smbolo
direita do texto na mesma reta.

Fig 117. CRCULO MOVIDO AT A OUTRA EXTREMIDADE DO TEXTO
7- Crie um Motion Tween para a layer mascara.
Com isso temos o crculo passando sobre o texto de um lado para outro. Chegou
hora de dizer para o Flash que somente a rea em que o crculo estiver passando
deve ser mostrada na layer mascarado.
8- Selecione a layer mascara e clique com o boto direito do mouse sobre ela.
Selecione a opo Mask.

________________________________________________________________________________________
Anotaes


Fig 118. OPO MASK SENDO SELECIONADA PARA A LAYER
Com isso o efeito j esta pronto.
Outra maneira de criar a mscara clicar com o boto direito do mouse sobre a
layer mascara e escolher a opo Properties clicando na opo Mask.

Fig 119. JANELA LAYER PROPERTIES COM A OPO MASK SELECIONADA
Em seguida teramos que fazer o mesmo com a layer mascarado, mas em vez de
escolher a opo Mask, escolheramos a opo Masked.

________________________________________________________________________________________
Anotaes


Fig 120. JANELA LAYER PROPERTIES COM A OPO MASKED SELECIONADA
Podemos ver que agora os cones que representam as layers se alteraram,
simbolizando uma mscara, e na layer mascarado aparece um smbolo prprio
um pouco mais direita, mostrando que esta vinculado mscara.

Fig 121. TIMELINE COM A MSCARA APLICADA
Para visualizar uma mscara no palco do Flash, as layers pertencentes a esse efeito
estaro travadas, mas se destravarmos o cadeado, veremos novamente o crculo e o
texto como estavam antes do efeito.

________________________________________________________________________________________
Anotaes


Fig 122. LAYERS COM A OPO DE TRAVAMENTO DESABILITADA
8.2 Efeito Preenchimento
Vamos ver um efeito de mscara para preencher um recipiente.
Iremos desenhar uma forma com a ferramenta Pen. Para isso poderemos usar
alguns comandos da opo: Modify > Shape:

Fig 123. COMANDOS DA OPO SHAPE
Straighten: acentua as retas da forma desenhada
Smooth: acentua as curvas da linha.
Optimize: abre uma janela para otimizar as curvas da linha
Convert Lines to Fills: converte as linhas da forma em preenchimento.

________________________________________________________________________________________
Anotaes

Expand Fill: expande o preenchimento da forma.
Soften Fill Edges: deixa as bordas do preenchimento mais tnues.
Outra opo, tambm, a opo de Combine Objects do menu Modify.
1- Desenhe uma forma com a ferramenta Pen, que contenha preenchimento e
contorno.

Fig 124. FORMA DESENHADA COM A FERRAMENA PEN
2- Depois de pronta a forma, d um duplo clique na forma para entrar na sua
edio:

Fig 125. VISUALIZAO DO DRAWNING OBJECT NA SCENE 1
3- D um duplo clique em cima do contorno do objeto para selecion-lo por
completo e v at o menu: Edit > Cut.
4- Retorne para a Scene 1, clicando em seu respectivo cone.
5- Crie uma nova camada e nomeia para contorno

________________________________________________________________________________________
Anotaes

6- Para nos certificarmos que o preenchimento ocupar nessa camada a mesma
posio que ocupava na camada anterior, escolha a opo: Edit > Paste in Place.
Agora temos o contorno do objeto em uma camada e o preenchimento em outra
7- Crie uma nova camada renomeando-a para animacao.
Organize as camadas como na imagem abaixo:

8- Na camada animacao desenhe um retngulo e converta-o para um smbolo
grfico, posicionando-o abaixo da forma:

Fig 127. RETNGULO POSICIONADO ABAIXO DA FORMA DESENHADA NO STAGE
9- Insira uma Keyframe no quadro 30 da layer animacao e prolongue as outras
layers at o quadro 30, tambm:


________________________________________________________________________________________
Anotaes

Fig 128. LAYERS DO ARQUIVO PROLONGADAS AT O FRAME 30

10- No quadro 30 da layer animacao, selecione o smbolo e aumente-o, usando a
ferramenta Free Transform (pressione a tecla ALT e clique na extremidade), at
que cubra completamente o objeto:

Fig 129. FORMA RETNGULO COBRINDO COMPLETAMENTE A OUTRA FORMA
11- Crie um Motion Tween na layer animacao.
12- Clique com o boto direito do mouse sobre a camada objeto e escolha a
opo: Mask.
Agora s testar a animao:

________________________________________________________________________________________
Anotaes


Fig 130. ANIMAO SENDO EXECUTADA
8.3 Mscara com Guia de Movimento
1- Crie um novo documento e importe para o palco a imagem: imagem.jpg que
esta na pasta imagens dentro da pasta da lio.
2- Selecione esta imagem e converta-a em um smbolo Movie Clip.
3- Selecione este Movie Clip e no Inspetor de Propriedades de o nome de instncia
para ele de foto no campo Instance Name.

Fig 131. MOVIE CLIP SENDO INSTANCIADO

________________________________________________________________________________________
Anotaes

4- Renomeie esta layer para mascarada e clique no frame 40 e escolha a opo
Insert Frame.
5- Crie uma nova layer, renomeando-a para mascara.
6- Desenhe um crculo na esquerda da tela e converta-o para um smbolo Movie
Clip:

Fig 132. SMBOLOS MOVIE CLIPS POSICIONADOS NO STAGE DO FLASH
7- Instancie este Movie Clip para bola.
8- Insira um Keyframe no quadro 40 da camada mascara e altere a posio do
Movie Clip para a direita da tela. Em seguida crie a interpolao de movimento
dessa camada.
9- Crie uma camada do tipo Motion Guide acima da layer mascara e desenhe
um caminho nela.
10- Posicione o smbolo Movie Clip bola em cima deste caminho tanto no seu
primeiro frame quanto no ltimo frame da camada mascara.
Agora temos um crculo seguindo o caminho sobre a foto, entretanto no
conseguimos habilitar a opo Mask para a Layer mascara. Isso se dar por
meio de programao.

________________________________________________________________________________________
Anotaes


Fig 133. OPO MASK MARCADA
11- Insira uma layer acima de todas as outras e renomei-a para acoes.
12- Com o primeiro quadro da camada acoes selecionado abra o painel Actions
(F9).
Agora iremos criar uma ao para o Movie Clip que possui o nome de instncia
foto.
13- Caso no lembrssemos o nome de instncias dos objetos, podemos o usar a
opo Insert a Target Path (mira). Clique na mira.

________________________________________________________________________________________
Anotaes


Fig 134. VISUALIZAO DO CONE DA MIRA
Na janela que se abre escolha o nome de instncia foto e clique em OK.

Fig 135. JANELA INSERT TARGET PATH
Ser escrito na janela actions o seguinte: this.foto que significa: a instncia foto
localizada no palco da raiz do filme (this).
14- Aps a palavra foto digite:
.mask = bola;

Fig 136. VISUALIZAO DAS ACTIONS
J esta pronta nossa animao. Teste e veja o resultado:

________________________________________________________________________________________
Anotaes


Fig 137. ANIMAO SENDO EXECUTADA
8.4 Mscara Arrstavel
Com apenas dois simples comandos teremos uma mscara arrstavel.
2- Insira no palco do Flash a imagem: imagem1.jpg que esta na pasta imagens
dentro da pasta da lio. Transforme a imagem em um smbolo Movie Clip com o
nome de instncia de foto.
3- Renomeie esta camada para mascarada.

________________________________________________________________________________________
Anotaes

4- Em seguida insira uma nova camada renomeando-a para mascara e desenhe
uma Elipse.
5- Transforme esta forma em um Movie Clip com o ponto de registro no meio:

6- D o nome de instncia para este Movie Clip de bola.
7- Crie outra camada chamada acoes e em seu primeiro frame iremos colocar
uma ao que far a mscara. Digite:
this.foto.mask = bola;
Com isso j criamos o efeito de mscara.

Fig 139. VISUALIZAO DOS SMBOLOS NO STAGE DO FLASH

________________________________________________________________________________________
Anotaes

8- Para fazer o efeito de arrastar a forma (e, portanto a mscara) numa nova linha,
ainda, no painel Actions digite:
this.bola.startDrag (true);
O mtodo startDrag() que faz com que a forma seja arrstavel.

Fig 140. VISUALIZAO DAS ACTIONS
Teste seu filme e veja o efeito.
8.5 Mscara com Gradiente
Veremos um tipo de mscara diferente. Em vez de totalmente slida e visvel,
vamos criar uma mascara que vai ter graduaes de visibilidade, que vai de
totalmente visvel at, aos poucos, o invisvel.
1- Crie um novo documento
2- Importe para palco a imagem: paisagem1.jpg que esta na pasta da lio.
3- Torne a imagem um smbolo do tipo Movie Clip.
4- Prolongue (F5) esta camada at o frame 40.
5- Com a imagem selecionada, ajuste seu nome de instncia para imagem.
Para que o efeito funcione corretamente deveremos marcar no painel Properties a
opo: Use runtime bitmap caching.

Fig 141. VISUALIZAO DA OPO USE RUNTIME BITMAP CACHING MARCADA

________________________________________________________________________________________
Anotaes

Essa opo evita que o Flash tenha que redesenhar vetores complexos a toda a
movimentao. Ele armazena como bitmap o elemento, melhorando
significativamente a performance, pois poder ser redesenhado mais rapidamente.
6- Crie outra camada e renomei-a como mascara. Nesta nova camada desenhe
um crculo.
7- Com a forma selecionada abra o painel Color (Window > Color).
8- Na rea Type escola o preenchimento radial e ajuste esse gradiente para que ele
contenha trs quadrados com a mesma cor (tanto faz a cor escolhida): um no
incio, um no meio e um no final.

Fig 142. OPES DE CORES DO GRADIENTE RADIAL
9- Ajuste a ltima cor do gradiente para Alpha 0:

Fig 143. LTIMA COR DO RADIAL COMO TRANSPARENTE
Com isso a forma ser formada por um gradiente que se inicia na cor slida, e em
seu final ser transparente:

________________________________________________________________________________________
Anotaes


Fig 144. FORMA COM O GRADIENTE RADIAL APLICADA EM CIMA DA IMAGEM
10- Converta esta forma em um Movie Clip e d o nome de instncia para ela de
bola.
11- Insira um Keyframe no frame 40 e aumente a forma.
12- Crie uma interpolao de movimento nesta camada, para termos a bola
aumentando de tamanho.
13- Crie outra layer chamada acoese em seu primeiro frame coloque a ao que
far a mscara:
this.imagem.mask = bola;
Teste o arquivo. Veremos que a mscara estar funcionando, entretanto estar
totalmente slida, sem o efeito de gradiente que criamos.
14- Para que este efeito funcione marque a opo: Use runtime bitmap caching
para a instncia bola no quadro 1 e no 40.
s testar:

________________________________________________________________________________________
Anotaes


Fig 145. MSCARA DE GRADIENTE RADIAL EM FUNCIONAMENTO

________________________________________________________________________________________
Anotaes

Unidade 9
Aplicando Efeitos
9.1 Aplicando Sombras
Podemos trabalhar dentro do Flash CS3 com filtros que so efeitos (como sombra,
embaamento, etc.) aplicados a textos e Movie Clips.
Com o efeito Drop Shadow podemos aplicar sombra no objeto, por exemplo.
1- Vamos retornar ao nosso arquivo index.fla que esta salvo na pasta da lio.
2- Selecione a imagem da xcara. Observe que na aba Filters que temos na janela
Properties no esto habilitados os filtros:

Fig 146. VISUALIZAO DA ABA FILTERS DESABILITADA
3- Converta a imagem da xcara em um smbolo Movie Clip.
Veja que agora est habilitada a opo Filters:

Fig 147. VISUALIZAO DA ABA FILTERS HABILITADA
4- Clique no boto de adicionar filtros (representado pelo sinal de +), abre-se um
menu com uma srie de opes de filtros. Escolha nesse menu a opo Drop

________________________________________________________________________________________
Anotaes

Shadow:

Fig 148. VISUALIZAO DAS OPES DE FILTROS
Quando aplicamos o filtro, no inspetor de propriedades, teremos diversas opes
de configuraes de efeitos:

Fig 149. OPES DE CONFIGURAES DO FILTRO DROP SHADOW
- Blur X e Blur Y: refere-se a um embaamento aplicado no eixo X e Y da
sombra. Quanto menor o valor mais slida a sombra, quanto maior o valor mais
esfumaada.
- Strength: nessa rea definimos o quo escura a sombra ser.
- Quality: definimos a qualidade do efeito entre os valores: baixa (Low), mdia
(Medium) e alta (High).
- Angle: ajustamos direo (em graus) em que a sombra ser projetada.
- Distance: ajustamos distncia da sombra em relao ao objeto (valores entre -
255 e 255).
- Knockout: quando marcada, o objeto no ser mais visvel e recortar seu
formato na rea da sombra:

________________________________________________________________________________________
Anotaes


Fig 150. OPO KNOCKOUT MARCADA PARA O SMBOLO
- Inner Shadow: nessa opo, o efeito de sombra ocorre dentro do objeto.

Fig 151. OPO INNER SHADOW MARACADA PARA O SMBOLO
- Hide Object: nessa opo, o objeto desaparece e a sombra permanece.

Fig 152. OPO HIDE OBJECT MARCADA PARA O SMBOLO
5- Na opo Color escolha uma cor na rea da borda da xcara e modifique as
outras opes como na imagem abaixo:

________________________________________________________________________________________
Anotaes


Fig 153. ESCOLHENDO A COR E CONFIGURANDO AS OPES PARA O SMBOLO DA XCARA
6- Insira um Keyframe no frame 15 e altere as configuraes do filtro:

Fig 154. CONFIGURAES DO FILTRO NO FRAME 15
7- Insira outro Keyframe no frame 30 e altere, novamente, as configuraes do
filtro:

________________________________________________________________________________________
Anotaes


Fig 155. CONFIGURAES DO FILTRO NO FRAME 30
8- Crie um Motion Tween entre os frames 1/15 e 15/30.
Veja como ficou nossa animao.
Como fizemos nossa animao at o frame 30 da sua respectiva camada, teremos
que prolongar os frames das outras camadas do nosso filme, tambm.
9- Prolongue os frames das outras camadas.
10- Na camada acoes mude o comando stop do primeiro frame para o frame
30.
Veja como ficaro nossas layers:

Fig 156. VISUALIZAO DAS LAYERS DO ARQUIVO INDEX.FLA
11- Salve o arquivo.

________________________________________________________________________________________
Anotaes

9.2 Sombra Projetada
O exemplo que acabamos de criar um modelo de sombra simples. Vamos criar
um modelo mais realista, compatvel com o que acontece no mundo real, aonde as
sombras se inclinam de acordo com a distncia e a direo de foco de luz.
2- Crie uma forma geomtrica do palco do Flash e transforme-o em um smbolo
Movie Clip.
3- Insira um Frame no frame 60 da camada

Fig 157. LAYER 1 NO ARQUIVO
Para realizarmos uma sombra projetada se faz necessrio termos duas instncias
do Movie Clip na tela, uma que ser o objeto e outra que ser apenas a sombra.
4- Crie uma nova camada e d a ela o nome de sombra.
5- Selecione o Movie Clip da forma e copie para a camada sombra.
Este procedimento pode ser feito:
- Clicando com o boto direito do mouse e escolhendo a opo: Copy Frames;
depois clicando no primeiro frame da camada sombra, clicando com o boto
direito do mouse e escolhendo: Paste Frames.
- Clicando sobre o primeiro frame da camada aonde esta o Movie Clip e
pressionando a tecla ALT arrastar uma cpia deste smbolo para a camada
sombra.

6- Trave a camada layer1.
7- Selecione o Movie Clip da camada sombra e na aba Filters insira um filtro
Drop Shadow.

________________________________________________________________________________________
Anotaes

8- Na aba dos filters marque a opo: Hide Object para que nessa instncia
aparea apenas a sombra e no mais o objeto.

Fig 159. VISUALIZAO DO FILTRO APLICADO AO MOVIE CLIP
9- Com a instncia do Movie Clip da camada sombra selecionada acione a
ferramenta Free Transform Tool.
10- Altere o ponto central da transformao da instncia (representado pela
bolinha no meio da forma) para a parte inferior.

Fig 160. ALTERANDO O PONTO DE TRANSFORMAO DO MOVIE CLIP

________________________________________________________________________________________
Anotaes

11- Uma vez que j ajustamos o ponto em relao ao qual o objeto ser inclinado e
redimensionado, ajuste o tamanho e a inclinao para ficar semelhante imagem
abaixo:

Fig 161. MOVIE CLIP AJUSTADO
Dicas: observe que quando selecionamos a Ferramenta Free Transforme temos
algumas opes na barra Tools (na parte inferior): para escalonar e rotacionar
o objeto.
Tambm podemos utilizar o painel Transform (Window > Transform) como na
imagem:

Fig 162. VISUALIZAO DAS OPES DO PAINEL TRANSFORM
12- Agora altere a ordem das camadas colocando a sombra abaixo da camada
layer1:

________________________________________________________________________________________
Anotaes


Fig 163. ORDEM DAS LAYERS ALTERADAS
A lgica por trs deste efeito que temos duas instncias do mesmo Movie Clip.
13- Salve este arquivo na pasta da lio.
9.3 Efeito Blur
Esse efeito cria um embaamento no objeto que for aplicado.
1- Crie um novo documento e importe para o palco do Flash a imagem
cachorro.jpg que esta dentro da pasta imagens na pasta da lio.
2- Transforme esta imagem em um Movie Clip.
3- Redimensione seu palco para 500x550 na opo Size.
4- Na aba Filters adicione o filtro Blur e configure como na imagem abaixo:

Fig 164. CONFIGURAO DO FILTRO BLUR
Com isso temos uma imagem toda desfocada:

________________________________________________________________________________________
Anotaes


Fig 165. VISUALIZAO DA IMAGEM DESFOCADA
5- Insira um Keyframe no quadro 60 e selecione a instncia da imagem alterando a
configurao do filtro como na imagem:

Fig 166. ALTERAO DO FILTRO BLUR NO FRAME 60
6- Crie uma interpolao de movimento entre os Keyframes e s testar a
animao.
7- Salve seu arquivo na pasta da lio

________________________________________________________________________________________
Anotaes

9.4 Efeito Glow
Este filtro gera um brilho em torno do objeto em que for aplicado.
1- Crie uma estrela e transforme-a em um smbolo Movie Clip.
2- Importe para a biblioteca a imagem imagem1.jpg que est na pasta imagens
dentro da pasta da lio.
3- D um duplo clique em cima da forma estrela para entrar na sua edio.

Fig 167. EDITANDO O SYMBOL 1 NA SCENE 1
4- Preencha a estrela com a imagem utilizando o preenchimento Bitmap na opo
Color.

Fig 168. ESTRELA COM O PREENCHIMENTO BITMAP APLICADO
5- Retorne para a Scene 1.
6- Com a instncia do Movie Clip selecionada adicione o filtro: Glow.
Lembre-se que podemos configur-lo. Teste e veja alguns efeitos interessantes:

________________________________________________________________________________________
Anotaes


Fig 169. ESTRELA COM O FILTRO GLOW APLICADO
9.5 Efeito Bevel
Esse filtro simula atravs de truques de luz e sombra um efeito de profundidade no
objeto.
7- Aplique na estrela o filtro: Bevel e retire (pelo sinal de -) o filtro Blur.
- Shadow: definimos a cor das reas escuras do efeito.
- Highlight: definimos a cor das reas escuras do efeito.
- Type: escolhemos o tipo de profundidade que teremos: Inner (profundidade
interna), Outer (ser externa) ou Full (compreender a profundidade interna e
externa).

________________________________________________________________________________________
Anotaes


Fig 170. MOVIE CLIP COM O FILTRO BEVEL APLICADO
9.6 Efeito Gradient Glow
Esse filtro como o Glow, tambm aplica um brilho ao objeto, entretanto esse
brilho no formado apenas por uma cor slida e sim por um gradiente. Veja o
exemplo aplicado na estrela:

Fig 171. MOVIE CLIP COM O FILTRO GRADIENT GLOW APLICADO

________________________________________________________________________________________
Anotaes

9.7 Efeito Gradient Bevel
Esse filtro, assim como o Bevel, tambm aplica um efeito de profundidade no
objeto, entretanto esse efeito no formado apenas por cores slidas de luz e
sombra e sim por um gradiente:

Fig 172. MOVIE CLIP COM O FILTRO GRADIENT BEVEL APLICADO
9.8 Adjust Color
Esse filtro oferece a possibilidade de aplicar ao objeto ajustes adicionais que
modificam suas cores.
1- Crie um novo arquivo e importe para o palco do flash a imagem: folhas.jpg na
pasta imagens dentro da pasta da lio.
2- Converta essa imagem em um Movie Clip.
3- Com a instncia do Movie Clip selecionada adicione o filtro Adjust Color.


________________________________________________________________________________________
Anotaes

Fig 173. OPES DO FILTRO ADJUST COLOR
Nesse filtro podemos configurar:
- Brightness: nessa opo podemos ajustar o brilho aplicado ao objeto.
- Contrast: ajustamos o contraste aplicado ao objeto.
- Saturation: ajustamos saturao aplicada ao objeto. Valores negativos tornam
as cores menos vivas e valores positivos acentuam a cor.
- Hue: Ajustamos o matiz aplicado ao objeto, alterando sua cor.
Veja o exemplo abaixo:


________________________________________________________________________________________
Anotaes

Fig 174. EXEMPLO DO FILTRO ADJUST COLOR APLICADO AO MOVIE CLIP
9.9 Copiando e Colando Filtros
Podemos copiar e colar os efeitos de um smbolo para outro smbolo.
2- Desenhe uma forma e transforme-a em um smbolo Movie Clip.
3- Na aba Filter aplique um filtro:

Fig 175. FILTRO DROP SHADOW SENDO APLICADO AO SMBOLO
Na parte de cima, onde est aplicado o filtro, temos dois cones:
- Copy filter : que abre a opo de copiar todos os filtros
ou s o que est selecionado;
- Paste filters : que habilita colar o filtro que j foi
previamente copiado.
4- Com o filtro aplicado a um objeto vamos copiar este filtro. Com o filtro
selecionado clique na opo: Copy Selected.
5- Habilite a ferramenta Text Tool e escreva: Filtro Copiado.


________________________________________________________________________________________
Anotaes

Fig 176. TEXTO E O MOVIE CLIP NO STAGE DO FLASH
6- Com o texto selecionado v at a aba Filter e clique no boto Paste filters
Pronto j temos o mesmo filtro (com as mesmas configuraes) aplicado em outro
elemento:

Fig 177. FILTRO COPIADO PARA O TEXTO


________________________________________________________________________________________
Anotaes

Unidade 10
Criando Botes
10.1 O Smbolo Boto
Criar filmes interativos no Flash sinnimo de muito mais possibilidades de
configurao de controles e realizao de tarefas de navegao com um visual
diferenciado e melhor performance.
Iremos ver como transformar e configurar um objeto simples em um elemento de
navegao.
Para criarmos um boto, devemos proceder como se fssemos criar um smbolo
qualquer.
2- Selecione a palavra Home e converta-o em um smbolo (F8) s que agora ser
do tipo Button, com o nome de homeBtn:

3- Vamos clicar duas vezes em cima do smbolo boto (homeBtn) para entrar em
seu modo de edio.

Fig 179. EDIO DO SMBOLO BUTTON
Observe que sua Timeline um pouco diferente das que vimos anteriormente, pois
possui quatro estgios: UP, Over, Down, Hit.

________________________________________________________________________________________
Anotaes

- UP: corresponde ao boto em seu estado normal, sem a proximidade do mouse;
- Over: estgio em que o usurio passa o ponteiro do mouse sobre o boto;
- Down: instante em que o usurio est clicando no boto;
- Hit: a rea clicvel do boto, que no visualizada pelo usurio.
4- Vamos editar o boto. Insira um Keyframe (F6) em cada um dos estgios:

Fig 180. KEYFRAME INSERIDO EM CADA ESTGIO DO BOTO
5- No estgio Over insira um quadrado de cor marrom (#663300) que cubra o
boto:

Fig 181. QUADRADO DESENHADO NO ESTGIO OVER DO BOTO
6- Transforme esta forma um smbolo Movie Clip e, marcando na opo Color
escolha Alpha, diminuindo sua opacidade para 50%:

Fig 182. QUADRADO J COMO UM SMBOLO MC E COM A PROPRIEDADE ALPHA EM 50%
7- Copie este smbolo e cole no estgio Hit do boto.
8- Vamos testar o resultado. Retorne a cena principal e clique no menu: Control >
Enable Simple Buttons (CTRL + ALT + B).
Perceba que ao rolar o cursor sobre o boto, ele muda sua cor:
9- Desmarque a opo Enable Simple Buttons e coloque o nome de instncia
para este boto de: BtnHome
10- Repita estes procedimentos para os outros botes: Produtos, Vdeos e Clientes.
11- Ao final, salve seu arquivo.

________________________________________________________________________________________
Anotaes

10.2 Animando os Botes
Um boto que se movimenta quando um usurio o pressiona ou simplesmente
passa o ponteiro do mouse sobre ele gera um efeito bastante agradvel para o
filme. Umas das maneiras de criarmos um boto animado colocar em um de seus
estgios uma animao.
Como j vimos o smbolo Movie Clip atende a este requisito, uma vez que sua
Timeline totalmente independente.
1- Retorne ao arquivo index.fla e selecione o boto Home.
2- Clique duas vezes em cima do smbolo para entrarmos em sua edio.
3- No estgio Over selecione o Movie Clip, que criamos anteriormente, dando um
duplo clique em cima dele.
Agora estamos no Movie Clip dentro do smbolo homeBtn.

Fig 183. EDITANDO O SYMBOL 1 QUE ESTA NO BOTO HOMEBTN DA CENA INICIO
4- Transforme a forma em um smbolo do tipo Graphic.
5- Insira um keyframe no frame 5 da camada.
6- No frame 1 diminua o tamanho da largura (representada por W) da forma para
1px:

Fig 184. PROPRIEDADE W ALTERADA PARA 1 PIXEL
7- No frame 5 aumente a opacidade (Alpha) do smbolo para 100%.
8- Crie uma interpolao de movimento entre os Keyframes.

Fig 185. INTERPOLAO DE MOVIMENTO CRIADA ENTRE OS KEYFRAMES
9- Para que nossa animao pare insira um stop no frame 5 da animao:

________________________________________________________________________________________
Anotaes


Fig 186. VISUALIZAO DO PAINEL ACTION NO FRAME 5
10- Retorne para a cena principal e teste seu filme.
11- Repita estes procedimentos para os outros botes.
Pronto, agora podemos voltar cena principal e testar o filme.
Repare que quando entramos no estgio Over, iniciada a animao do Movie
Clip.
10.3 Botes da Biblioteca
O Flash disponibiliza tambm botes prontos, o qual pode ser acessado pelo menu:
Window > Common Libraries > Buttons.
Existem diversos tipos de pastas com botes prontos:

________________________________________________________________________________________
Anotaes


Fig 187. VISUALIZAO DO PAINEL LIBRARY - BUTTONS
Podemos arrast-los para o palco e utiliz-los como esto, ou edit-los clicando
duas vezes e entrando em seu modo de exibio.
Veja alguns modelos:

________________________________________________________________________________________
Anotaes


Fig 188. EXEMPLOS DE BOTES PRONTOS ARRASTADOS DA BIBLIOTECA


________________________________________________________________________________________
Anotaes

Unidade 11
Interaes com o mouse
11.1 Personalizando o Cursor
possvel personalizar o cursor do mouse do filme para utiliz-lo em animaes e
apresentaes. Na realidade, no o cursor que vamos modificar, mas faremos um
Movie Clip seguir o mouse e esconderemos o cursor para passar a iluso de que o
Movie Clip de Filme o indicador do mouse.
2- Desenhe uma estrela e converta-a em um Movie Clip.
3- D a esse Movie Clip o nome de instncia de cursor_mc.

Fig 189. INSTANCIANDO O MOVIE CLIP QUE CONTM A ESTRELA
4- Renomeie esta camada para mouse.
5- Insira uma nova camada com o nome de acoes
6- Na camada acoes selecione o primeiro keyframe e abra o painel Actions (F9).
Vamos inicialmente determinar que o Movie Clip ser arrastado.
7- Digite:
cursor_mc.startDrag(true);
Aqui determinamos que a instncia chamada cursor_mc ser arrastada
(starDrag()) pelo ponto de registro (pelo parmetro true).
At aqui esta tudo OK, entretanto ainda aparece o cursor normal do sistema
operacional. Vamos escond-lo com o mtodo hide() da classe Mouse.

________________________________________________________________________________________
Anotaes

8- Numa nova linha digite:
Mouse.hide();
Veja como ficaro nossas aes:

Fig 190. VISUALIZAO DO PAINEL ACTION
Teste o filme e veja a iluso de que o cursor o Movie Clip que criamos:

Fig 191. VISUALIZAO DO CURSOR ASSUMINDO A FORMA DO MOVIE CLIP NO FILME


________________________________________________________________________________________
Anotaes

Unidade 12
Carregando Imagens Externas
12.1 Importando Imagens Externas
Nas verses anteriores do Flash quando precisvamos usar uma imagem em nosso
filme, ela deveria ter sido previamente importada para a biblioteca.
Nas novas verses do Flash esse problema foi resolvido. Podemos importar uma
imagem no momento em que necessitamos dela, no sendo necessrio coloc-la na
biblioteca.
Isso ns ajuda muito, uma vez que as imagens que no forem necessrias
navegao escolhida pelo usurio no sero carregadas sem necessidade.
Nesta lio iremos importar imagens externas usando o ActionScript 3.0
Agora iremos criar dois botes que tero a funo de carregar imagens diferentes
no momento em que clicarmos neles.
2- Desenhe um retngulo (que ir servir de boto) e escreve em cima dele:
Imagem1

Fig 192. IMAGEM DO RETNGULO E O TEXTO ESCRITO EM CIMA DO MESMO
3- Selecione o texto e a forma e transforme-os em um smbolo: Button com o
nome de btn1
4- Entre na edio do boto e insira um Keyframe (F6) em cada estgio do boto:

________________________________________________________________________________________
Anotaes


Fig 193. ESTGIOS DO BTN1
5- Altera os estgios do boto a seu critrio.
Na biblioteca, automaticamente, criado o smbolo boto:

Fig 194. SMBOLO BTN1 CRIADO NA BIBLIOTECA
Iremos agora duplicar este smbolo, mudando seu nome para que possamos
aproveit-lo na criao do outro boto.
6- Na biblioteca, clique em cima do smbolo boto e escolha a opo: Duplicate.

Fig 195. ESCOLHENDO A OPO DUPLICATE PARA O SMBOLO QUE ESTA NA BIBLIOTECA
7- Na janela Duplicate Symbol mude o nome deste boto para btn2 e clique em
OK.

________________________________________________________________________________________
Anotaes


Fig 196. CRIANDO O BTN2
Agora temos na biblioteca dos smbolos botes:

Fig 197. VISUALIZAO DOS DOIS SMBOLOS NA BIBLIOTECA
8- Clique em cima do smbolo btn2 e arraste-o para o palco do Flash,
posicionando abaixo do btn1.
9- D um duplo clique em cima deste boto para entrar em sua edio, e mude o
texto do boto para Imagem2.
Importante: Como j temos um Keyframe criado para cada estgio do boto,
teremos que mudar o texto em cada estgio, tambm.
Observe como ficaram nossos botes:

Fig 198. BOTES J CRIADOS
10- Coloque o nome de instncia para os botes de: img1 e img2, respectivamente.
Agora iremos desenhar um quadrado com ngulos retos que vai indicar o local em
que a imagem ser posicionada.
11- Crie um retngulo, cobrindo uma rea como na imagem abaixo:

________________________________________________________________________________________
Anotaes


Fig 199. RETNGULO CRIADO NO STAGE DO FLASH
12- Converta-o em um Movie Clip com o nome de area, tendo o cuidado de
deixar marcado o Registration Point no canto superior esquerdo:

Fig 200. CONVERTENDO O RETNGULO EM UM SMBOLO MOVIE CLIP
13- D o nome de instncia de externo para esse Movie Clip.
Para que este Movie Clip fique sem uma cor de fundo, entre na edio do Movie
Clip e delete o Shape criado. O smbolo, ento, ficar invisvel.
Agora iremos comear a programao, pelo painel Actions, no nosso arquivo.
14- Crie uma nova camada e coloque o nome de acoes. Selecione o primeiro
quadro desta camada e abra o painel Actions (F9). Digite:
var carregar:Loader=new Loader();

________________________________________________________________________________________
Anotaes

externo.addChild(carregar);
Na primeira linha criamos uma instncia chamada carregar do tipo Loader,
responsvel por carregamentos de imagens e filmes externos no ActionScript 3.0.
Na segunda linha inserimos essa instncia do Loader na instncia do Movie Clip
externo onde a imagem ser carregada pelo mtodo addChild( ).
15- Logo aps a ltima linha digite:
img1.addEventListener(MouseEvent.CLICK,botao1);
function botao1(evento:MouseEvent):void{
var arquivo:URLRequest=new
URLRequest(imagens/dog1.jpg)
carregar.load(arquivo);
}
Na primeira linha criamos um ouvinte (atravs de addEventListener) para o
boto img1 que observa quando ele for clicado (MouseEvent.CLICK) e nessa
situao executa a funo botao1.
Logo aps temos a funo botao1 que, quando chamada, executa o que se encontra
entre suas chaves.
Dentro das chaves, na primeira linha, temos uma instncia chamada arquivo
criada a partir da classe URLRequest, que no caso ter como valor:
imagens/dog1.jpg.
Essa instncia necessria, pois para carregar um elemento externo (imagem,
filme, som, vdeo, txt, etc) no ActionScript3.0 preciso utilizar essa classe para
indicar o local onde se encontra o elemento que ser chamado.
Na linha seguinte para o Loader (que denominamos carregar) utilizamos o mtodo
load que carrega o elemento definido no URLRequest chamado arquivo.
Ao final dessa primeira etapa nossa Action ficar assim:

________________________________________________________________________________________
Anotaes


Fig 201. VISUALIZAO DAS ACTIONS DO ARQUIVO
16- Para carregarmos a segunda imagem faremos mesma coisa que o esquema
anterior, s que agora para o boto com o nome de instncia img2 (ao ser
clicado) que executar uma funo chamada botao2 que carrega para o Loader
outra imagem:
img2.addEventListener(MouseEvent.CLICK,botao2);
var arquivo:URLRequest=new
URLRequest(imagens/dog2.jpg)
carregar.load(arquivo);
}
17- Veja como ficou nossa programao final:


________________________________________________________________________________________
Anotaes

Fig 202. VISUALIZAO DAS ACTIONS PARA OS DOIS BOTES
18- Teste seu arquivo e ver que cada boto carrega para a rea uma imagem
diferente:

Fig 203. ARQUIVO SENDO EXECUTADO


________________________________________________________________________________________
Anotaes

Unidade 13
Navegao no Flash
13.1 Trabalhando com Cenas
Imagine que tenhamos um projeto de filme que deve conter inmeros quadros de
animao, por exemplo, 2.000 quadros.
Para facilitar o trabalho de organizao do filme, podemos trabalhar com diversas
cenas que seriam como os captulos de um livro.
At agora trabalhamos apenas com uma cena. Iremos fazer uma breve
apresentao em Flash para entender o funcionamento das cenas.
1- Crie um novo documento e escreva o texto (do tipo Static Text) Apresentao
Adobe Flash CS3 no palco.
2- Abaixo deste texto desenhe uma seta, converta-a em um boto e d-lhe o nome
de instncia de botao1.

Fig 204. O TEXTO E A FORMA POSICIONADOS NO STAGE
Observe que abaixo da Timeline na rea esquerda aparece um indicativo de que
estamos na primeira cena:

Fig 205. VISUALIZAO DO INDICATIVO DA SCENE 1

________________________________________________________________________________________
Anotaes

3- Para inserir uma nova cena no filme abra o painel: Window > Other Panels >
Scene:

Fig 206. PAINEL SCENE
4- D um duplo clique sobre o nome Scene 1 e coloque inicio.
5- Crie outra cena clicando no sinal de + do painel. Altere o nome desta nova cena
para meio.
Repare que ao criarmos uma nova cena, a tela estar em branco e a Timeline
contar a partir do frame 1:

Fig 207. VISUALIZANDO AS DUAS CENAS DO FILME
6- Nesta segunda cena escreveremos o texto Cena 2.

________________________________________________________________________________________
Anotaes

7- V at a biblioteca do Flash e arraste uma instncia do boto para baixo do
texto. Coloque o nome de instncia para este boto de botao2.

Fig 208. STAGE DA CENA 2
Para alterarmos entre as cenas que possumos, podemos utilizar a opo Edit
Scene e marcar a cena que desejamos:

Fig 209. ALTERANDO ENTRE AS CENAS DO FILME
A outra maneira navegar pelas cenas utilizando o painel Scene, bastando marcar
a cena desejada:

Fig 210. PAINEL SCENE COM AS DUAS CENAS CRIADAS

________________________________________________________________________________________
Anotaes

8- Crie mais uma cena a chame-a de fim. Nesta nova cena escreva o texto
Continue estudando o Flash CS3
Se testarmos o filme, veremos que a animao ocorre sem interrupes por todas
as cenas, respeitando a seqncia definida do painel Scene.
Importante: Se quisermos alterar a ordem das cenas podemos clicar no cone da
cena e modificar sua posio arrastando-a para a nova posio, como faramos
para alterar a localizao de uma layer.
9- Retorne a cena inicio e no seu primeiro frame adicione a ao:
stop();
10- Faa o mesmo no primeiro frame de cada cena.
Agora preciso programar o boto localizado na cena inicio para que, ao ser
clicado, nos leve para a cena meio.
11- Na cena inicio selecione o primeiro keyframe e abra o painel Actions. Na
linha aps o comando Stop digite:
botao1.addEventListener(MouseEvent.CLICK,navega);
function navega(evento:MouseEvent):void {
gotoAndStop(1,"meio");
}
Na primeira linha para o boto chamado botao1 definimos o ouvinte (listener) que
ir observar quando este boto for clicado (MouseEvent.CLICK) e neste caso ir
executar a funo navega criada na seqncia.
Na funo navega quando chamada executar tudo que se encontra entre suas
chaves.
Quando a funo for executada, vai utilizar a ao gotoAndStop que vai at um
determinado quadro e para a execuo. Dentro dos parnteses desta ao
colocamos dois parmetros, sendo o primeiro o quadro para qual deseja ir, e o
segundo a cena desejada (meio).
12- Agora vamos definir a ao do boto da cena meio. Altere para a cena
meio e selecione seu primeiro keyframe.
13- Abra o painel Actions e logo aps o Stop digite:
botao2.addEventListener(MouseEvent.CLICK,navega2);

________________________________________________________________________________________
Anotaes

function navega2(evento:MouseEvent):void {
gotoAndStop(1,"fim");
}
As linhas de programao tm exatamente a mesma funcionalidade da que fizemos
anteriormente, s que desta vez, ao clicar no botao2, ser executada a funo
navega2 que remete ao primeiro quadro da cena fim.
Pronto s testar o filme e veremos que ele ir para na cena inicio. Quando
clicamos no boto o filme se movimenta para a cena meio, aguardando que
cliquemos no boto para sermos levados a cena fim.

Fig 211. APRESENTAO SENDO EXECUTADA
13.2 Carregando Arquivos Externos
Da mesma forma que carregamos imagens externas, podemos tambm carregar um
novo filme em determinado local.
1- Abra o arquivo index.fla que esta na pasta da lio.
2- Insira uma nova camada e d o nome de mcvazio.
3- Nessa camada desenhe um retngulo no centro da pgina de 440px de largura e
272px de altura , que ser ocupada pelos contedos do site:

________________________________________________________________________________________
Anotaes


Fig 212. VISUALIZAO DO ARQUIVO INDEX.FLA
4- Selecione esta forma e converta-a em um Movie Clip.
5- Coloque o nome de instncia deste Movie Clip de conteudo
6- D um duplo clique em cima deste Movie Clip para entrar em sua edio e
delete o Shape.
Isso far com que este Movie Clip fique vazio, servindo somente como alvo para
carregar nossos arquivos externos.
7- Retorne para a cena principal:

________________________________________________________________________________________
Anotaes


Fig 213. MOVIE CLIP VAZIO CRIADO
Agora iremos criar nossos arquivos externos do mesmo tamanho (largura e altura)
do Movie Clip vazio.
8- Crie um novo documento com a cor preto de fundo de 440px de largura por
272px de altura e salve-a como produtos.fla
9- Escreva o texto PRODUTOS na parte superior esquerda da tela:

Fig 214. ARQUIVO PRODUTOS.FLA
10- Pressione CTRL + Enter para gerarmos o arquivo swf.

________________________________________________________________________________________
Anotaes

11- Repita esses procedimentos para criar os arquivos .fla de: vdeos e clientes.
12- Crie um arquivo com as mesmas configuraes e salve como: home.fla
13- No arquivo home.fla desenhe um Rectangle Primitive marcando o valor de
100 somente para o lado superior esquerdo:

Fig 215. FORMA RECTANGLE PRIMITIVE DESENHADA
14- Escolha a cor #D09460 como cor de preenchimento para esta forma.
15- Salve este arquivo e pressione CTRL + Enter para gerar o swf.
Agora iremos comear a programar a navegao que semelhante ao
carregamento de imagens externas.
16- Na camada acoes selecione o primeiro frame a habilite o painel Actions.
Digite:
var carregar:Loader=new Loader();
conteudo.addChild(carregar);
Criamos a instncia Loader a partir da classe Loader do Action Script 3.0, que
responsvel pelo carregamento de arquivos externos.

________________________________________________________________________________________
Anotaes

17- Aps digite:
produtos.addEventListener(MouseEvent.CLICK,botao1);
function botao1(evento:MouseEvent):void {
carregar.load(new URLRequest("produtos.swf"));
}
Na primeira linha criamos um ouvinte para o boto (devidamente instanciado no
palco do Flash) produtos que quando for clicado executa a funo botao1.
A segunda linha contm a funo que executa o que se encontra entre as chaves.
E na terceira linha temos a classe URLRequest, que responsvel por carregar
nosso arquivo externo.
17- Logo aps digite:
videos.addEventListener(MouseEvent.CLICK,botao2);
carregar.load(new URLRequest("videos.swf"));
}
clientes.addEventListener(MouseEvent.CLICK,botao3);
carregar.load(new URLRequest("clientes.swf"));
}
home.addEventListener(MouseEvent.CLICK,botao4);
carregar.load(new URLRequest("home.swf"));
}
O restante da programao segue o mesmo esquema do anterior, s mudando a
instncia de cada boto, que ao ser clicado, executar outra funo. E na classe
URLRequest definido outro arquivo para ser carregado externamente.
18- Teste o arquivo e veja que j esta funcionando a navegao pelos seus
respectivos botes.

________________________________________________________________________________________
Anotaes


Fig 216. EXECUTANDO A NAVEGAO DOS BOTES
S temos que ajustar um pequeno detalhe. A pgina home.swf tem que ser
carregada juntamente com o arquivo principal, para isso faremos um pequeno
ajuste na programao da nossa navegao.
19- Na terceira linha do painel Action digite:
carregar.load(new URLRequest("home.swf"));
20- Teste agora e observe que a pgina home est sendo carregada juntamente com
o arquivo principal:

________________________________________________________________________________________
Anotaes


Fig 217. VISUALIZAO DO ARQUIVO INDEX.FLA COM O HOME.SWF SENDO CARREGADO
21- Salve o arquivo.
13.3 Navegao na Timeline
Nesta lio iremos criar uma navegao que ir para um determinado frame da
Timeline do Flash.
1- Crie um novo arquivo e desenhe dois retngulos: um de cor azul e outro de cor
verde:
2- Transforme essas formas em smbolos do tipo Button. Colocando o nome de
instncia de: btn1 e btn2, respectivamente:

________________________________________________________________________________________
Anotaes


Fig 218. BOTES DESENHADOS NO STAGE DO FLASH
3- Renomeie esta camada para botes e estenda-a (F5) at o frame 60.
4- Crie uma nova layer renomeando-a para contedo.
5- No frame 20 desta layer (conteudo) insira um Keyframe e escreva o texto
Azul.
6- Insira outro Keyframe no frame 40 e escreva o texto Verde. Estenda (F5)
este contedo at o frame 60.
7- Crie uma nova camada renomeando-a para acoes.
8- Na camada acoes insira um Stop no primeiro e no ltimo frame.
Observe como ficaram nossas layers na Timeline:

Agora iremos colocar os comandos para os botes.
9- No primeiro frame da camada acoes digite:
btn1.addEventListener(MouseEvent.CLICK, botao1);
gotoAndPlay(20);
}

________________________________________________________________________________________
Anotaes

gotoAndPlay(40);
}
Da mesma forma que fizemos anteriormente, criamos um ouvinte para o boto
(que est instanciado no palco do Flash) e que executa a funo botao1
Na terceira linha colocamos a ao gotoAndPlay (20) e (40) que faz com que o
filme seja avanado at o frame (20 ou 40, no caso do exemplo) e execute a
animao.
Poderamos ter usado o gotoAndStop, que faria com que o filme fosse avanado
at o frame definido e parasse.
9- Teste seu filme.

Fig 220. EXECUTANDO O FILME COM A NAVEGAO DOS BOTES
A navegao dos botes esta funcionando perfeitamente, s que temos que
observar um pequeno detalhe. Quando clicamos no boto Azul ele vai at o frame
20 e continua a animao at o frame 60 que quando temos um comando de Stop
(parar).
Isso acontece porque colocamos a ao gotoAndPlay para o boto, podemos
resolver esse problema de duas formas:
- Mudando a ao do btn1 para gotoAndStop e nossa programao ficaria assim:
gotoAndStop(20);
}

________________________________________________________________________________________
Anotaes

gotoAndPlay(40);
}
- Ou, ainda, colocando um Stop no frame 39 (antes de comear o texto Verde):
stop ();
Agora teste o filme e veja que esta funcionando corretamente.
10- Salve seu arquivo na pasta da lio, que vamos usar no prximo exerccio.
13.4 Usando Label
Iremos trabalhar com o mesmo arquivo que usamos no exerccio anterior, s que
agora ao invs de colocarmos que a ao gotoAndStop ir para um frame diremos
que ela ir para um Label (rtulos) especificado nos frames.
1- Abra o mesmo arquivo da lio anterior.
2- Na camada acoes v at o frame 20 e insira um Keyframe em branco (F7).
3- Neste frame (20) escreva o nome para o item Frame de azul.

Fig 221. ESPECIFICANDO O NOME PARA O FRAME
Observe que neste frame (20) o Label fica indicado por uma pequena bandeirinha
e com o respectivo nome:

Fig 222. INDICAO DO LABEL NO FRAME DA TIMELINE
4- Agora insira um Keyframe em branco no frame 40 e coloque o nome do Frame
de verde.
Observe como ficou a Timeline do nosso arquivo:

________________________________________________________________________________________
Anotaes


Fig 223. TIMELINE COM OS LABELS CRIADOS
5- O que teremos que fazer agora mudar nossa programao, indicando que a
ao gotoAndStop e gotoAndPlay ir para o label. Mude a terceira linha de cada
boto como no exemplo abaixo:
gotoAndStop("azul");

gotoAndPlay("verde");
13.5 Criando Rolagem de Contedo
A rolagem de contedo muito utilizada quando temos mais informaes que
espao disponvel.
2- Desenhe um retngulo com bordas no palco do Flash e renomeie a layer para
mask.
3- D um duplo clique em cima da borda desta forma e leve-a para uma layer
acima, a qual de o nome de borda.

Fig 224. SELECIONANDO A BORDA DA FORMA

________________________________________________________________________________________
Anotaes

4- Crie uma layer acima de todos e d o nome de botoes. Nesta layer desenhe
dois tringulos posicionando-os como na imagem abaixo:

Fig 225. BOTES DESENHADOS E POSICIONADOS NO STAGE DO FLASH
5- Clique em cima do tringulo de baixo e transforme esta forma em um smbolo
do tipo Button.
6- Transforme o tringulo de cima em um smbolo do tipo Button, tambm.
7- Coloque o nome de instncia do boto de baixo de btn_desce e no boto de
cima de btn_sobe.
8- Crie uma nova layer e d o nome a ela de mc. Posicione esta layer abaixo de
todas as outras.

9- Na layer mc desenhe vrios quadrados um abaixo do outro, fazendo com que
eles fiquem para fora no quadrado desenhado na tela.
Para uma melhor visualizao podemos diminuir o zoom da tela e tirar a
visibilidade da camada mask.

________________________________________________________________________________________
Anotaes


Fig 227. QUADRADOS DESENHADOS NA LAYER MC
10- Com todos os quadrados selecionados transforme-os em um Movie Clip e d o
nome de instncia para ele de mc_quadrado.
11- D um duplo clique para entrar na edio deste Movie Clip. Selecione todos os
quadrados e transforme-os em um smbolo do tipo Graphic.
12- No frame 1 da layer posicione o smbolo como na imagem abaixo:

________________________________________________________________________________________
Anotaes


Fig 228. POSIONAMENTO DO MOVIE CLIP NO FRAME 1
13- Crie um Keyframe no frame 60 e desloque o smbolo para baixo:

Fig 229. POSIONAMENTO DO MOVIE CLIP NO FRAME 60

________________________________________________________________________________________
Anotaes

15- Crie uma nova camada e coloque um comando de Stop no seu primeiro frame:

16- Retorne para a cena principal.
17- Na camada maskcrie uma mscara.
Veja como ficou nosso arquivo:

Fig 231. VISUALIZAO DO ARQUIVO COM A OPO MASK J HABILITADA
Agora iremos programar nosso filme para que quando passarmos o mouse sobre os
botes role o contedo que o Movie Clip mc_quadrado e quando tirarmos o
mouse de cima dos botes o contedo pare. Para isso usaremos a ao nextFrame
e prevFrame.
18- Crie uma nova camada acima de todas e renomei-a para acoes. Abra o painel
Actions e digite:
btn_desce.addEventListener(MouseEvent.ROLL_OVER,desce);
btn_desce.addEventListener(MouseEvent.ROLL_OUT,desceRem
ove);
function desce(evento:MouseEvent):void{

________________________________________________________________________________________
Anotaes

mc_quadrado.addEventListener(Event.ENTER_FRAME,
desceFull);
}
function desceFull(evento:Event):void{
mc_quadrado.nextFrame();
}
function desceRemove(evento:MouseEvent):void{
mc_quadrado.removeEventListener(Event.ENTER_FRAME,
desceFull);
}
Para a instncia chamada mc_quadrado criamos um ouvinte (addEventListener)
do tipo evento com atualizao constante que ser executado a quantidade de
frames por segundo do nosso filme, executando uma funo chamada desceFull.
Essa programao est aos moldes das outras que j fizemos. O que esta
aparecendo de novo a ao nextFrame que est sendo aplicada no smbolo
mc_quadrado, fazendo com que quando passarmos o mouse
(MouseEvent.ROLL_OVER) sobre o boto btn_desce executar a funo
desceFull que tem como parmetro ao nextFrame.
19- Repetiremos a mesma programao para o btn_sobe. Na prxima linha digite:
btn_sobe.addEventListener(MouseEvent.ROLL_OVER,sobe);
btn_sobe.addEventListener(MouseEvent.ROLL_OUT,sobeRemov
e);
function sobe(evento:MouseEvent):void{

mc_quadrado.addEventListener(Event.ENTER_FRAME,
sobeFull);
}

function sobeFull(evento:Event):void{
mc_quadrado.prevFrame();

________________________________________________________________________________________
Anotaes

}
function sobeRemove(evento:MouseEvent):void{
mc_quadrado.removeEventListener(Event.ENTER_FRAME,
sobeFull);
}
20- Pronto. Teste seu filme e veja a animao:

Fig 232. EXECUO DA ANIMAO
13.6 Componente ScrollPane
Componentes so elementos que j possuem muito da programao necessria,
presentes em uma janela, prontos para serem usados.
O componente ScrollPane cria uma rea para a qual podemos importar: JPEG,
PNG, GIF, e arquivos Swf.

________________________________________________________________________________________
Anotaes

Caso o contedo carregado por este componente ultrapassar sua rea de
carregamento (pr-definida) ele disponibiliza barras de rolagem.
1- Crie um novo arquivo e salve-o como contClientes.fla na pasta da lio.
2- Abra o arquivo clientes.fla na pasta da lio e arraste uma instncia do
componente ScrollPane para palco (Window > Components).

Fig 233. SELECIONANDO O COMPONENTE SCROLLPANE
3- O tamanho deste componente deve ser: 396x207

Fig 234. AUMENTO O TAMANHO DO COMPONENTE NO STAGE
4- Retorne ao arquivo contClientes.fla e configure, no item Size, a largura e altura
do documento para 390x450.
5- Desenhe no palco quatro retngulos um abaixo do outro e alinhe-os usando o
painel Align:

________________________________________________________________________________________
Anotaes

Este ser nosso contedo do item clientes que pode ser alterado, colocando
imagens bitmap, textos ou importando algum arquivo.

Fig 235. VISUALIZAO DO AQRUIVO CONTCLIENTES.FLA
6- Clique em CTRL + Enter para gerar o arquivo swf.
7- Novamente, retorne ao arquivo clientes.fla.
8- Selecione o componente na tela e clique na aba Parameters no inspetor de
propriedades.

Fig 236. VISUALIZAO DA ABA FILTERS SELECIONADA
9- Na aba Parameters que indicaremos qual o arquivo que o componente ir
buscar, especificando, seu diretrio. No item source escreva: contCliente.swf

Fig 237. ABA PARAMETERS COM O ITEM SOURCE ESPECIFICADO

________________________________________________________________________________________
Anotaes

10- Teste seu arquivo e veja como ficou:

Fig 238. ARQUIVO CLIENTES.FLA SENDO EXECUTADO
Nosso componente est como fundo cinza. Iremos configur-lo a seguir.
13.7 Alterando as Cores do ScrollPane
Nosso componente um smbolo Movie Clip. Podemos modificar a aparncia do
ScrollPane simplesmente dando um duplo clique nele e editando seu contedo.
11- Ainda no arquivo clientes.fla, selecione o componente e d um duplo clique
nele:

________________________________________________________________________________________
Anotaes


Fig 239. EDIO DO COMPONENTE SCROLLPANE
12- Selecione a opo ScrollPane Normal Skin e d um duplo clique em cima
deste Movie Clip:

________________________________________________________________________________________
Anotaes


Fig 240. EDIO NO MOVIE CLIP SCROLLPANE UPSKIN
13- Clique no Movie Clip ScrollPane_UpSkin e d um duplo clique:
14- D mais um duplo clique em cima do Movie Clip panelBackground Base e
altere a cor de preenchimento do Drawing Object para preto:

Fig 241. COR DE PREENCHIMENTO DO SHAPE ALTERADA

________________________________________________________________________________________
Anotaes


Fig 242. SELECIONANDO A COR DE PREENCHIMENTO
15- Teste o filme e veja que no temos mais a cor cinza como cor de fundo no
componente:

________________________________________________________________________________________
Anotaes


Fig 243. EXECUO DO ARQUIVO CLIENTES.FLA J COM A COR DE PREENCHIMENTO DO
COMPONENTE ALTERADA
Para alterarmos a cor da barra de rolagem do componente iremos fazer na mesma
forma.
16- Retorne at o Movie Clip ScrollPane e d um duplo clique em cima do
smbolo ScrollBar Skins:

Fig 244. EDITANDO O SCROLLBAR SKINS

________________________________________________________________________________________
Anotaes

Neste Movie Clip temos as seguintes opes:

Fig 245. OPES DO MOVIE CLIP SCROLLBAR SKINS
Up: estado atual
Over: quando o mouse passa em cima
Disabled: quando pressionado o ScrollBar.
Clicando em cada item na opo Up, por exemplo, temos diversos Movie Clips
cada um representando uma parte do ScrollBar.

________________________________________________________________________________________
Anotaes


Fig 246. SELECIONANDO OS MC DO SCROLLBAR SKINS
17- D um duplo clique no Movie Clip ScrollThumb upSkin e comea e edit-lo:

Fig 247. EDIO DO SCROLLTHUMB UPSKIN
Ao final o Movie Clip ScrollBar ficar similar imagem baixo:

________________________________________________________________________________________
Anotaes


Fig 248. MOVIE CLIP COM AS CORES DO COMPONENTE ALTERADAS
18- Teste o filme e veja como ficou.
Dica: Podemos ir editando cada parte do ScrollBar, basta dar um duplo clique em
cima do Movie Clip correspondente a cada parte.


________________________________________________________________________________________
Anotaes

Unidade 14
Trabalhando com textos Dinmicos
14.1 Busca de Variveis em um Arquivo de Texto
O Flash permite que tenhamos variveis em um arquivo de texto externo e
carregue-as no momento que considerarmos vivel, facilitando a atualizao dos
textos utilizados.
1- Vamos abrir o arquivo produtos.fla (criado anteriormente)
2- Na pasta da lio temos o arquivo texto.txt. Abra-o e na primeira linha deste
arquivo digite:
nome=Caf Alfamdia
Com isso criamos uma varivel seguida do sinal de = .
3- Salve o arquivo txt e retorne para o arquivo produtos.fla
4- Selecione a ferramenta Text Tool e crie um texto do tipo Dynamic Text (W
397 e H 200), colocando seu nome de instncia de valor e com a opo
Multiline marcada:

Fig 249. INSTANCIANDO A CAIXA DE TEXTO DYNAMIC TEXT
5- Renomeie esta layer para texto
Ao escolhermos um texto do tipo Dynamic Text, definimos que o texto digitado na
rea pode mudar de acordo com a programao que viermos a fazer.
6- Crie uma nova layer com o nome de acoes e no seu primeiro frame digite:
var endereco:URLRequest=new URLRequest("texto.txt");
var carregar:URLLoader = new URLLoader();

________________________________________________________________________________________
Anotaes

carregar.dataFormat=URLLoaderDataFormat.VARIABLES;
carregar.load(endereco);
Na primeira linha criamos uma instncia chamada endereo a partir da classe
URLRequest para armazenar o endereo onde se encontra o arquivo que ser
carregado.
Na terceira linha definimos para a instncia chamada carregar sua propriedade
dataFormat que identifica como sero interpretadas as informaes que forem
carregadas atravs do URLLoader. No exemplo as informaes sero
interpretadas como variveis (VARIABLES), ou seja, respeitaro a forma que
criamos no txt.
7- Agora em uma nova linha digite:
carregar.addEventListener(Event.COMPLETE,carregou);
function carregou(evento:Event):void{
valor.text=carregar.data.nome;
}
Criamos um ouvinte para a instncia carregar que vai observar quando o arquivo
estiver carregado (Event.COMPLETE) e depois executa a funo carregou.
Em seguida criamos a funo que ser executada quando o arquivo estiver
carregado.
Na prxima linha definimos que a caixa de texto chamada valor ter o contedo de
seu texto (valor.text) recebendo (=) a varivel nome (que esta no arquivo txt) entre
os dados da instncia carregar.
8- Teste o filme e veja que j estamos carregando o texto.

________________________________________________________________________________________
Anotaes


Fig 250. TEXTO SENDO CARREGADO EXTERNAMENTE PELO ARQUIVO PRODUTOS.FLA
Para colocarmos um scroll para o texto iremos usar um componente chamado
UIScrollBar, que criar uma barra de rolagem no texto.
9- Selecione o menu: Window > Components e na opo: User Interface escolha
o componente: UIScrollBar:

Fig 251. SELECIONANDO O COMPONENTE UISCROLLBAR
10- Arraste para o palco uma instncia deste componente encaixando ao lado da
caixa de Texto:

________________________________________________________________________________________
Anotaes


Fig 252. COMPONENTE SENDO ARRASTADO PARA O LADO DA CAIXA DE TEXTO
OK. Teste seu filme e veja que j esta com Scroll:

Fig 253. FILME SENDO EXECUTADO COM O SCROLL
14.2 Texto com Formatao HTML
HTML uma linguagem de marcao de textos que, ao ser interpretada num
navegador, transforma o texto em elementos visuais que so as pginas que
visitamos.

________________________________________________________________________________________
Anotaes

O HTML formado por um sistema de marcaes (tags) que circunda
determinado elemento.
Por exemplo:
Flash CS3
No Flash podemos usar as tags do HTML em sua verso 1.0 para as caixas de
texto. As tags aceitas so:
<a> utilizada para criao de links;
 para deixar o texto em negrito;
 para a cor do texto;
 para tipo de fonte;
 para o tamanho da fonte;
 para itlico;
 para pargrafo e alinhamento;
 para sublinhado.
Importante: Nem todas as tags do HTML preciso ter a marcao de fechamento
(</>), mas as utilizadas pelo HTML e aproveitadas do Flash tero.
11- Abra o arquivo texto.txt na pasta da lio.
12- Coloque entre o texto Formao WebDesign as tag :

Fig 254. VISUALIZAO DAS TAGS ENTRE O TEXTO
Entretanto, ao testarmos veremos que a marcao no est funcionando. Para que o
Flash aceite a formatao de HTML teremos que fazer alguns ajustes
13- Selecione a caixa de texto e no painel Properties marque a opo: Render text
as HTML:

________________________________________________________________________________________
Anotaes


Fig 255. OPES DA CAIXA DE TEXTO
14- Em seguida necessrio fazer uma alterao na programao na ltima linha,
alterando-a para:
valor.htmlText=carregar.data.nome;

Fig 256. VISUALIZAO DAS ACTIONS DO ARQUIVO
Ao trocarmos a propriedade de text para hmltText, estamos dizendo que o valor
inserido deve seguir a formatao de HTML.
Teste o filme e veja que o trecho do texto que esta entre a tag esta com a
formatao de negrito e o resto no.

________________________________________________________________________________________
Anotaes


Fig 257. VISUALIZAO DO ARQUIVO PRODUTOS.FLA
Dica: Podemos formatar nosso texto atravs do item: Edit format options ,
selecionando a caixa de texto e configurando-a. Teste e veja suas funcionalidades.


________________________________________________________________________________________
Anotaes

Unidade 15
Banners animados
15.1 Criando um Banner
2- Clique no menu: File > Import > Import to stage e selecione o arquivo
banner.psd que esta na pasta imagens.
3- Selecione cada layer e marque a opo: Flattened bitmap image, a qual ir ser
uma imagem no editvel.
Na layer Shape 1 marque a opo: Editable paths and layer styles, que far com
que esta imagem seja editvel, deixando, no caso deste arquivo, a forma separada
do preenchimento.
Desmarque a layer background, pois no a usaremos no arquivo fla.
Deixe marcada a opo Flash Layers.
As duas opes abaixo ficam marcadas:
- Place object at original position: os objetos importados para o Flash ficaram na
mesma posio que se encontravam no Photoshop;
- Set stage size to same size as Photoshop canvas: o placo do Flash ser
redimensionado para as mesmas dimenses do Photoshop.


________________________________________________________________________________________
Anotaes


Fig 258. VISUALIZAO DA JANELA DE IMPOSTAO DO ARQUIVO BANNER.PSD
Veja que nossos arquivos esto nas Layers do Flash exatamente como estavam no
Photoshop e que na Biblioteca as imagens encontram-se organizadas em uma
pasta:

________________________________________________________________________________________
Anotaes


Fig 259. VISUALIZAO DO ARQUIVO J IMPORTADO PARA O FLASH
4- Selecione o Movie Clip, localizado na layer Shape 1 e d um duplo clique para
entrarmos em sua edio:

Fig 260. EDIO DO MOVIE CLIP SHAPE 1

________________________________________________________________________________________
Anotaes

5- Exclua a layer 1, que corresponde cor de preenchimento do objeto.
6- Importe para a Biblioteca as imagens: flor1.jpg, flor2.jpg e flor3.jpg que esta na
pasta imagens.
7- Com a layer 1 selecionada arraste a imagem flor1.jpg para o palco do Flash.
Redimensione e posicione a imagem em cima do objeto:

Fig 261. IMAGEM POSICIONADA EM CIMA DO OBJETO
8- Transforme essa imagem em um smbolo grfico.
9- Insira um Keyframe no frame 40. Neste frame diminua o Alpha para 0% e crie
uma interpolao de movimento entre os keyframes.
10- Crie uma nova camada (acima da layer 1). Insira um Keyframe no frame 36 e
arraste a imagem flor2.jpg para o palco do Flash, posicionando em cima da outra
imagem.
11- Transforme esta imagem em um smbolo grfico.
12- Insira um keyframe no frame 74 da layer 3.
13- No frame 35 desta layer diminua o Alpha da imagem para 0% e crie uma
interpolao de movimento entre os keyframes desta layer:
14- Insira outra layer acima da layer 3 e insira um keyframe no frame 70 desta
layer.
15- Arraste a imagem flor3.jpg para o palco do Flash. Redimensione e posicione
esta imagem em cima das outras.

________________________________________________________________________________________
Anotaes

16- Transforme esta imagem em um smbolo grfico e insira um keyframe no
frame 105. No frame 70 diminua o Alpha desta imagem para 0%
17- Crie uma interpolao de movimento entre os keyframes.
18- Prolongue a layer 2 (que tem a propriedade de Mask) at o frame 105.
19- Teste seu filme.

Fig 262. EXECUTANDO O ARQUIVO BANNER.FLA
Faa os ajustes neste Movie Clip que achar necessrio em suas layers.
20- Retorne a Cena principal.
21- Insira uma nova layer (acima de todas) e digite o texto (do tipo Static):
Confira nossa coleo de Vero. Renomeie esta layer para texto.
22- Insira uma nova layer (acima da layer texto) e renomei-a para
btnInvisivel.
23- Clique no menu: Insert > New Symbol e escolha a opo Button:

Fig 263. JANELA CREATE NEW SYMBOL

________________________________________________________________________________________
Anotaes

24- Insira um Keyframe no estado Hit do boto e desenhe um retngulo,
configurando a posio X e Y para 0.
26- Com a layer btnInvisivelselecionada arraste o novo boto criado para o
palco do Flash, posicionando-o em cima do banner e redimensionando-o de forma
que ocupe toda a extenso do banner:

Fig 264. BTNINVISIVEL POSICIONADO EM CIMA DO BANNER
27- Instancie este boto para btn.
28- Crie uma nova layer e renomei-a para acoes. Habilite o painel Action e
digite:
btn.addEventListener(MouseEvent.CLICK, banner);
function banner(event:MouseEvent):void {
navigateToURL(new
URLRequest("http://www.adobe.com.br"), "_blank");
}
O mtodo navigateToURL o responsvel por abrirmos uma nova pgina.
29- Teste o filme:

________________________________________________________________________________________
Anotaes


Fig 265. EXECUTANDO O FILME BANNER.FLA J COM AS AES NO PAINEL ACTION
15.2 Banner Expansvel
2- Desenhe um retngulo no palco do Flash e transforme-o em um smbolo Movie
Clip. Instancie-o para ativa. Renomeie esta layer para banner.
3- D um duplo clique para entrar em sua edio e escreva Passe o Mouse:

Fig 266. EDIO DO MOVIE CLIP ATIVA
5- Retorne para a cena principal.
6- Crie um quadrado da mesma largura do retngulo j criado e posicione-o acima
do retngulo (na parte de fora do palco) em uma nova layer chamada animacao.

________________________________________________________________________________________
Anotaes


Fig 267. QUADRADO CRIADO E POSICIONADO NO STAGE DO FLASH
7- Transforme essa forma em um smbolo Movie Clip e instancie-o para tela.
8- Entre na edio do Movie Clip tela e transforme o Shape em um smbolo
Grfico.
9- Insira um keyframe no frame 15 e desloque a forma para baixo como na
imagem:

________________________________________________________________________________________
Anotaes


Fig 268. DESLOCANDO A FORMA DENTRO DO MOVIE CLIP
11- Ainda dentro do Movie Clip telacrie uma nova camada e insira um keyframe
no frame 13. Escreva Adobe Flash CS3na parte superior fora do palco:

________________________________________________________________________________________
Anotaes


Fig 269. INSERINDO UM TEXTO DENTRO DO MOVIE CLIP
12- Insira um Keyframe no frame 20 e desloque o texto para cima do Movie Clip:

Fig 270. DESLOCANDO O TEXTO DENTRO DO MOVIE CLIP

________________________________________________________________________________________
Anotaes

13- Crie uma interpolao de movimento entre os keyframes.
15- Estenda o frame (F5) da layer 1 at o frame 20, tambm.
16- Crie uma nova camada e renomei-a para acoes. No seu primeiro frame
coloque um comando de Stop:
stop();
17- Retorne a cena principal e crie uma nova camada com o nome de acoes.
18- Coloque a ordem das camadas como na imagem abaixo:

19- Habilite o painel Actions no primeiro frame da layer acoes e na primeira
linha digite:
stop();
ativa.addEventListener(MouseEvent.MOUSE_OVER,Exibe);
ativa.addEventListener(MouseEvent.MOUSE_OUT,Esconde);
ativa.buttonMode = true;
Quando o mouse passar em cima do Movie Clip ativa ir chamar a funo
Exibe; e quando o mouse sair de cima do Movie Clip ativachamar a funo
Esconde.
20- Na quinta linha digite:
function Exibe(evento:MouseEvent):void{
tela.addEventListener(Event.ENTER_FRAME, Abre);
tela.removeEventListener(Event.ENTER_FRAME,Fecha);
}
function Abre(evento:Event):void{
tela.nextFrame();
if (tela.currentFrame == tela.totalFrames) {

________________________________________________________________________________________
Anotaes

tela.removeEventListener(Event.ENTER_FRAME, Abre);
}
}
A funo Exibe quando executa a funo abre vai para o prximo frame at
chegar ao final no Movie Clip Tela, onde est nossa animao.
Na condio (if) temos: se o Frame atual for igual ao numero total de frames,
remove a funo abrir.
21- Na linha seguinte digite:
function Esconde(evento:MouseEvent):void{
tela.addEventListener(Event.ENTER_FRAME, Fecha);
tela.removeEventListener(Event.ENTER_FRAME,Abre);
}

function Fecha(evento:Event):void{
tela.prevFrame();
if (tela.currentFrame = = 1){
tela.removeEventListener(Event.ENTER_FRAME,Fecha);
}
}
Para a funo Esconde temos a mesma lgica, alterando a condio (if) para: se
o frame atual for igual a 1, remove a funo fechar da lista.
22- Pronto. Teste seu Movie Clip e veja a funcionalidade do banner:

________________________________________________________________________________________
Anotaes


Fig 272. EXECUTANDO O FILME BANNER.FLA PRONTO


________________________________________________________________________________________
Anotaes

Unidade 16
Transies com Action Script 3.0
16.1 Efeito Blinds
Vamos ver outros tipos de efeitos possveis com ActionScript 3.0 que so as
transies.
O efeito Blinds mostra ou esconde o Movie Clip que est recebendo a transio
aos poucos atravs de reas retangulares que vo aparecendo ou desaparecendo.
2- Importe para o palco do Flash a imagem: transicao.jpg que esta na pasta da
lio.
3- Transforme esta imagem em um Movie Clip e coloque o nome de instncia da
imagem de imagem.
4- Selecione o primeiro Keyframe desta camada e abra o painel Actions. Digite:
import fl.transitions.*;
import fl.transitions.easing.*;
var transicao:TransitionManager=new
TransitionManager(imagem);
Nas duas primeiras linhas importamos as classes que vamos utilizar.
Na terceira linha criamos uma instncia chamada transio a partir da classe
TransitionManager (classe que est presente somente do Action Script 3.0) que
cuida dos efeitos de transio.
transicao.startTransition({type:Blinds,
direction:Transition.IN,duration:2,easing:Strong.easeOu
t, numStrips:10, dimension:1});
O parmetro numStrips define a quantidade de retngulos e o dimension indica
se o efeito ser com retngulos na horizontal (valor 1) ou na vertical (valor 0).

________________________________________________________________________________________
Anotaes

Para a instncia chamada transicao usamos o mtodo starTransition que dar
incio a transio.
Dentro dos parnteses desse mtodo temos (entre as chaves) os parmetros que
vo orientar a transio, o qual podemos mudar:
direction:Transition.IN que indica que o Movie Clip ir aparecer ou
direction:Transition.OUT que o mostrar se escondendo.
duration:2 o tempo em segundos que essa transio ir durar at atingir o final.
Teste seu arquivo e veja como ficou:

Fig 273. TESTE DO ARQUIVO COM A TRANSIO BLINDS
Os retngulos aparecem e revelam partes da imagem at mostr-la por completo.

________________________________________________________________________________________
Anotaes

16.2 Efeito PixelDissolve
O PixelDissolve faz o Movie Clip aparecer ou desaparecer atravs de um efeito em
quadrados que vo aos poucos aparecendo ou desaparecendo.
1- Com o mesmo arquivo utilizado na lio anterior altere a linha:
transicao.startTransition({type:Blinds,
direction:Transition.IN,duration:2,easing:Strong.easeOu
t, numStrips:10, dimension:1});
Para:
transicao.startTransition({type:PixelDissolve,
direction:Transition.IN, duration:1,
easing:Strong.easeOut,xSections:20,ySections:0});
Temos como parmetros adicionais xSections (quantidade de quadrados no eixo x)
e ySections (quantidade de quadrados no eixo y). A Adobe aconselha valores de
no mximo 50 para estes parmetros.
2- Teste sua imagem e veja o resultado:

Fig 274. TESTE DO ARQUIVO COM A TRANSIO PIXELDISSOLVE

________________________________________________________________________________________
Anotaes

3- Teste seu arquivo na pasta da lio.
16.3 Efeito de Zoom
Iremos aprender a criar um efeito de Zoom atravs do ActionScript 3.0
1- Crie um novo arquivo e importe para o palco do Flash a imagem: transicao1.jpg
que esta na pasta da lio.
2- Transforme esta imagem em um Movie Clip e d o nome de instncia para ela
de foto.
3- Crie uma nova camada e desenhe um quadrado de 150px de largura e 150px de
altura em cima da foto:

Fig 275. QUADRADO DESENHADO EM CIMA DA IMAGEM
4- Transforme esta forma em um smbolo Movie Clip e d o nome de instncia de
area_zoom.
5- Entre na edio deste Movie Clip:

________________________________________________________________________________________
Anotaes


Fig 276. EDIO DO MOVIE CLIP
6- Com a ferramenta Ink Bottle e aproxime-a da borda do Shape retngulo e d
um clique:

Fig 277. VISUALIZAO DA FERRAMENTA INK BOTTLE
Agora teremos uma borda para a nossa forma:

Fig 278. BORDA CRIADA NO SHAPE

________________________________________________________________________________________
Anotaes

7- Transforme esta forma (com a borda junto) em um Movie Clip e d o nome de
instncia de interno.
8- Retorne para a Scene 1.
9- Crie uma nova layer (acima de todas as outras) e renomei-a para acoes.
Selecione o primeiro Keyframe e abra o painel Actions (F9). Digite:
var bmp = new BitmapData(150, 150, false, 0xFFFFFF);
var imagem:Bitmap=new Bitmap(bmp);
var zoom = new Matrix();
area_zoom.buttonMode = true;
zoom.scale(2, 2);
area_zoom.interno.addChild(imagem);
Na primeira linha criamos uma instncia chamada bmp do tipo BitmapData
gerada a partir da classe BitmapData, que responsvel pelos pixels que formam a
imagem. Dentro dos parnteses colocamos a largura (150px) e a altura (150px),
definindo que sua base no ser transparente (opo false) e a cor de seu
preenchimento.
Na segunda linha criamos uma instncia chamada imagem do tipo Bitmap.
Na terceira linha criamos uma instncia chamada zoom a partir da classe
Matrix. Essa classe permite realizar transformaes em um elemento (rotao, por
exemplo).
Na quarta linha especificamos uma propriedade para alterar o aspecto do boto
para Hand.
Na quinta linha utilizamos para a instncia zoom sua propriedade scale em cujos
parmetros colocamos os valores que sero multiplicados no eixo x e y.
Na sexta linha adicionamos a instncia chamada imagem pelo mtodo addChild
ao Movie Clip interno localizado dentro do Movie Clip area_zoom.
10- Em uma nova linha digite:
foto.addEventListener(Event.ENTER_FRAME,aumenta);
Para a instncia foto criamos um ouvinte de evento de atualizao constante
(Event.ENTER_FRAME) que ser executado a quantidade de frames por segundo
definida no arquivo.

________________________________________________________________________________________
Anotaes

11- Em uma nova linha digite:
function aumenta(evento:Event):void {
area_zoom.x = mouseX - 75;
area_zoom.y = mouseY - 75;
zoom.tx = (75) - mouseX * 2;
zoom.ty = (75) - mouseY * 2;
bmp.draw(foto,zoom);
};
Criamos a funo aumenta.
Nas chaves desta funo temos na primeira linha o ajuste da posio do eixo x do
quadrado pequeno (area_zoom) para equivaler posio do mouse no eixo x
(mouseX) menos (-) 75 (metade do quadrado) que ajuda a fazer com que o centro
do quadrado seja equivalente posio do mouse.
Na segunda linha fazemos o mesmo para o eixo y.
Essas duas linhas fazem com que a caixa (quadrado) acompanhe o mouse.
Na terceira linha ajustamos para a instncia zoom sua propriedade tx, que indica
quantos pixels movimentaremos a imagem existente na matriz no eixo x (75)
multiplicada por 2.
Na quarta linha fazemos o mesmo para o eixo y.
E na ltima linha copiamos para o BitmapData pelo mtodo draw o contedo do
Movie Clip foto. Aps a vrgula temos a instncia da classe Matrix (zoom) que
far as transformaes na imagem).
12- Teste seu filme e veja que conforme movimentamos o mouse, teremos no
quadrado uma verso ampliada da rea em que ele se encontra.

________________________________________________________________________________________
Anotaes


Fig 279. EXECUO DO FILME


________________________________________________________________________________________
Anotaes

Unidade 17
udio no Flash
17.1 Importando udio para o Flash
Um dos grandes diferenciais do Flash com relao a outros tipos de animao a
possibilidade de ter som.
2- Selecione o menu: File > Import > Import to Library e escolha: sons_site >
natureza.mp3
No caso de importao de udio no tem importncia opo escolhida. Isso
ocorre porque ao importamos um arquivo de udio, ele vai direto para a Library.
3- Observe que o arquivo de som j esta na Library.

Fig 280. BIBLIOTECA COM O ARQUIVO DE SOM
Apesar de estar na Library, o arquivo de udio no um smbolo e sim um
pseudo-smbolo, assim como o vdeo, por exemplo, uma vez que s temos trs
tipos de smbolos por padro no Flash (Grfico, Boto e Movie Clip).

________________________________________________________________________________________
Anotaes

4- Para reproduzirmos o som basta clicarmos no boto Play, localizado na rea
superior direita da Library.
Agora iremos ver as opes de configurao de som do Flash.
5- Clique duas vezes em cima do cone do som na Library. A janela Sound
Properties se ir abrir:

Fig 281. JANELA SOUND PROPERTIES
Clicando no boto Test podemos testar as configuraes do som, para parar s
clicar no boto Stop.
Para atualizar o som aps alteraes feitas externamente ao Flash s clicar no
boto Update. Para importar um novo som usamos o boto Import.

________________________________________________________________________________________
Anotaes

Nossas configuraes ocorrem na rea Export settings. Quando estivermos
usando um arquivo MP3 e estiver marcada a opo Use Imported MP3 quality, o
som utilizar a configurao original do MP3:
6- Desmarque a opo Use imported MP3 quality. Agora aparecem novos
campos para configurarmos:

Fig 282. OPES SEM O ITEM USE IMPORTED MP3 QUALITY MARCADO
No item Compression escolhemos a compresso desejada para o som:
- ADPCM: ideal para sons curtos;
- MP3: mais utilizada para trilhas;
- RAW: geralmente sem compresso;
- Speech: compresso utilizada especialmente para fala.
7- Marque a opo MP3 no campo Compression.
preciso definir a taxa de amostragem utilizada (Bit rate). Um valor acima de
16kbps produz resultados melhores. No campo quality definimos a qualidade
desejada. O valor Fast uma qualidade mais voltada para a web e suas opes
resultam em sons com qualidades melhores.
8- No item Bit rate marque 20 kbps e no campo quality marque a opo Fast.

________________________________________________________________________________________
Anotaes


Fig 283. OPES DO UDIO MARCADAS
9- Clique no frame 100 da timeline e insira um Keyframe (F6).
10- Selecione o frame 1 desta layer e no Inspector de propriedades escolha o udio:

Fig 284. SELECIONANDO O UDIO
Repare que riscos aparecem na Timeline representando o som.
Para melhor visualizarmos estes riscos podemos clicar com o boto direito em
cima na layer correspondente e na opo properties dela escolher 300% para o item
Layer height:

Fig 285. AUMENTANDO A ALTURA DA LAYER PARA 300%
Veja como ficou nossa layer:

Fig 286. LAYER COM ALTURA DE 300%

________________________________________________________________________________________
Anotaes

11- Vamos comear a configurar o som do filme no painel Properties. Selecione o
Keyframe 1 e escolha a opo: Stream no campo Sync.
No campo Sync esto s configuraes do comportamento do som:

Fig 287. OPES DO CAMPO SYNC
- Event: ao escolhermos este item (no frame selecionado) uma nova instncia do
som ser iniciada quando a cabea leitora passar por esse Keyframe. Nessa opo o
som toca inteiramente de forma semelhante ao Movie Clip, mesmo ocupando um
quadro do filme. Neste item temos que ter cuidado, pois podem ser iniciadas novas
instncias do som enquanto a primeira ainda est tocando, causando sobreposies
de sons;
- Start: funciona da mesma forma que a Event, diferenciando pelo fato de somente
iniciar uma nova instncia do som quando a atual j estiver sido finalizada, no
sobrepondo os sons;
- Stop: para a instncia que est tocando;
- Stream: seus trechos de som so anexados aos quadros do filme, portando s
podemos ouvir o som quando houver quadros na Timeline. So carregados somente
os trechos de msica que aparecem nos quadros. a melhor opo para um som que
desejamos sincronizado a animao.
12- No campo Effect (campo que controla o efeito de volume do som) escolha a
opo: Fade Out e clique no boto Edit:
- Left Channel: reproduz o som apenas no canal esquerdo (estreo);
- Right Channel: reproduz o som apenas no canal direito (estreo);
- Fade Left to Right: desloca o som do canal esquerdo para o direito;
- Fade Right to Left: desloca o som do canal direito para o esquerdo;
- Fade In: aumenta gradualmente a amplitude do som;

________________________________________________________________________________________
Anotaes

- Fade Out: diminui gradualmente a amplitude do som;
Na janela Edit Envelope, temos uma representao grfica do som em seus dois
canais (esquerda e direita).

Fig 288. JANELA EDIT ENVELOPE DO SOM
Para alterar o volume em algum dos canais, basta clicarmos na janela
correspondente e um quadro representativo aparece:

Fig 289. JANELA EDIT EMVELOPE COM OS QUADROS REPRESENTATIVOS

________________________________________________________________________________________
Anotaes

Nesta janela quanto mais prximo da parte inferior de algum canal mais baixo ser
o som e quanto mais prximo do topo mais alto o volume ser.
13- Teste o filme e veja que o filme ser reproduzido segundo as configuraes e
efeitos que configuramos.
17.2 Carregando udio Externo
Vimos como utilizar sons para trabalhar no Flash. Nesta lio veremos a
possibilidade do som no precisar ser previamente importado para o filme, mas
que isso seja feito atravs do ActionScript.
Vamos ver um exemplo que buscar um arquivo de som externo.
2- Crie uma nova layer e renomei-a para controle de som.
3- Nessa layer desenhe dois botes: um que simbolize aumento de volume e outro
que simbolize a diminuio do volume. Esses botes sero posicionados na parte
inferior do nosso site. Se necessrio aumente a barra que esta na parte inferior:

Fig 290. BOTES DE CONTROLE DE VOLUME DESENHADOS E POSICIONADOS
4- Selecione o conjunto de elementos que compem o boto de aumentar e
transforme-o em um smbolo do tipo Button, instanciando-o para aumentar.
5- Repita esses procedimentos para o boto que simboliza o diminuir e instancie-o
para diminuir.
6- Agora desenhe ao lado dos botes sete retngulos de tamanhos diferentes e em
ordem decrescente. Observe a imagem abaixo:

________________________________________________________________________________________
Anotaes


Fig 291. RETNGULOS POSICIONADOS AO LADO DO CONTROLE DE VOLUME
7- Selecione todos estes retngulos e transforme-os em um Movie Clip com o
nome de instncia de ver_volume.
8- D um duplo clique em cima deste Movie Clip (ver_volume) e crie uma camada
acima da layer 1 do MC com o nome de mask.
9- Ainda dentro da edio deste Movie Clip, na camada mask, desenhe um
retngulo de forma a cobrir todas as outras formas e mude a propriedade desta
layer para Mask:

Fig 292. CAMADAS DO MOVIE CLIP VER_VOLUME
10- Transforme este retngulo em um smbolo Movie Clip e instancie-o de
mascara
Antes de controlarmos nosso volume iremos carreg-lo externamente atravs de
comandos em ActionScript.
12- Selecione o primeiro keyframe da camada acoes e digite na primeira linha
do painel Actions (F9):
var audio:Sound = new Sound();
Nesta linha criamos uma instncia chamada udio a partir da classe Sound,
responsvel por trabalhar com som no Flash.
13- Aps, em uma segunda linha digite:
var endereco:URLRequest=new
URLRequest("sons_site/som_site.mp3");

________________________________________________________________________________________
Anotaes

audio.load(endereco);
Na primeira linha criamos uma instncia chamada endereo a partir da classe
URLRequest que armazena o endereo para o arquivo que iremos carregar.
Na segunda linha, para a instncia chamada audiocarregamos o arquivo de som
pelo mtodo load.
O arquivo de som j esta carregado, mas s ser executado quando mandarmos ele
fazer isso.
14- Numa outra linha digite:
audio.play();
Agora sim, mandamos instncia chamada audio iniciar a reproduo do som
pelo mtodo play( ).
15- Teste o filme e veja que o som ser carregado e executado.
17.3 Controle de Volume
Agora iremos controlar o volume do som que est sendo produzido.
16- No painel Actions altere a linha:
audio.play();
Para:
Var
canal_de_som:SoundChannel=audio.play(0,int.MAX_VALUE);
Continuamos a mandar que o arquivo seja executado pelo mtodo play que agora
contm uma constante, ou seja, nosso som ir repetir (quando chegar ao final). O
mtodo play foi associado a uma instncia que foi criada chamada
canal_de_som, do tipo SoundChannel.
var transformacao:SoundTransform=new SoundTransform();
Criamos uma instncia chamada transformacao a partir da classe
SoundTransform que possue em suas propriedades o volume do som.
18- Em outra linha digite:

________________________________________________________________________________________
Anotaes

diminuir.addEventListener(MouseEvent.CLICK,diminuir_vol
);
var valor:Number=100;
function diminuir_vol(evento:MouseEvent):void {
if (valor>0) {
valor-=10;
ver_volume.mascara.scaleX=valor/100;
transformacao.volume=valor/100;
canal_de_som.soundTransform=transformacao;
}
}
Na segunda linha criamos uma varivel chamada valor que tem como contedo
o nmero 100.
A seguir criamos a funo diminuir_volque chamada ao clicarmos no boto.
Dentro das chaves da funo realizamos uma estrutura condicional que, apenas
caso (if) a varivel chamada valor seja maior que 0, executar o que se encontra
entre as chaves.
Dentro das chaves diminumos a varivel valor em 10, ou seja, cada vez que o
usurio clicar no boto diminuir e a varivel valor for maior que 0, ir reduzir
em 10 o contedo desta varivel, gerando valores como 90, 80, 70, etc...
Dentro do Movie Clip ver_volume quanto maior a instncia denominada
mascara maior parte do desenho ser visvel, ou seja, quanto menor a mscara
menos riscos que representam o volume veremos e quanto maior o volume mais
riscos veremos.
Definimos a largura da mscara atravs da propriedade scaleX.
Na linha seguinte fazemos o mesmo (ajustando o valor entre 0 e 1) s que desta
vez para a propriedade do volume da instncia transformacao.
E por fim na ltima linha definimos que a instncia chamada canal_de_som sua
propriedade soundTransform ser equivalente instncia transformacao.

________________________________________________________________________________________
Anotaes

19- Teste o filme e veja que ao clicar no boto diminuir a barra do volume
diminuir juntamente com o som.

Fig 293. EXECUTANDO O CONTROLE DE SOM DO FILME DO BOTO DIMINUIR
O processo para o boto aumentar ser exatamente o mesmo, apenas diferenciando
do que fizemos anteriormente pelo fato de que cada vez que for clicado a varivel
valoraumenta em 10 e tambm porque ter 100 como valor limite.
20- Digite:
aumentar.addEventListener(MouseEvent.CLICK,aumentar_vol
);
function aumentar_vol(evento:MouseEvent):void {
if (valor<100) {
valor+=10;
ver_volume.mascara.scaleX=valor/100;
transformacao.volume=valor/100;

________________________________________________________________________________________
Anotaes

canal_de_som.soundTransform=transformacao;
}
}
21- Agora teste seu filme e veja que o controle de volume est funcionando
corretamente:

Fig 294. EXECUTANDO O CONTROLE DE SOM DO FILME
17.4 Inserindo udio em Botes
2- Arraste uma instncia de boto para o palco do Flash atravs do menu: Window
> Common Libraries > Buttons:

________________________________________________________________________________________
Anotaes


Fig 295. VISUALIZAO DO BOTO
3- D um duplo clique em cima do boto para entrar em sua edio:

Fig 296. EDITANDO O BOTO
4- Crie uma nova layer renomeando-a para som. Insira um keyframe em cada
estgio do boto:

Fig 297. LAYERS DO BOTO COM A LAYER SOM J INSERIDA
5- Importe um som para a Library que est na pasta sons_botoes.
6- Selecione o estgio Down na camada som do boto e arraste o som importado
para o palco:


________________________________________________________________________________________
Anotaes


Fig 298. SOM INSERIDO NO ESTGIO DOWN DO BOTO
7- Teste o filme e veja que quando o boto pressionado emite o som:

Fig 299. TESTANDO O SOM NO BOTO


________________________________________________________________________________________
Anotaes

Unidade 18
Importando Vdeo
18.1 Importando Vdeos para o Flash
A partir da verso 8 do Flash o codec On2 VP6 compacta de forma muito
eficiente os arquivos de vdeo importados para o programa.
Uma srie de formatos pode ser importado para o Flash, como: avi, dv, mpg,
mpeg, mov entre outros.
O formato para qual o Flash converte o vdeo que utiliza o FLV, que se tornou
muito popular com o sucesso dos sites como You Tube e Google Vdeo.
1- Abra o arquivo videos.fla que esta na pasta da lio.
2- Crie uma nova layer e renomei-a para vdeo.
3- Para importar um vdeo, escolha a opo: File > Import > Import vdeo (na
layer vdeo). Abre-se o painel Import Vdeo:

Fig 300. PAINEL IMPORT VIDEO, ITEM SELECT VIDEO

________________________________________________________________________________________
Anotaes

4- Iremos escolher a opo On your computer, porque queremos escolher um
vdeo que esta na nossa mquina. E em seguida clicaremos no boto Browse para
escolher o arquivo que esta na pasta: videos > caffe_art.wmv
A outra opo: Already deployed to a web server, Flash Vdeo Streaming or
Flash Media Server seria para utilizar um vdeo que j esteja na web, num FVSS
( Flash Vdeo Streaming Service que um servidor de vdeos Flash em Streaming)
ou ainda num servidor Flash Media Server (servidor para aplicaes relacionadas
ao Flash).
5- Com o vdeo selecionado clique no boto next. Somos levados etapa seguinte
(Deployment) para definirmos como estar disponibilizado esse vdeo:

Fig 301. PAINEL IMPORT VDEO, ITEM DEPLOYMENT
- Progressive download from a web server: utilizada para que o vdeo seja
disponibilizado em um servidor comum, tendo a vantagem de que o usurio no
ter que aguardar o download completo do vdeo para comear a assisti-lo.
Ao escolhermos esta opo, o Flash automaticamente realizar a converso de
nosso vdeo no formato FLV, insere um componente e o configura para carregar o
vdeo localmente. Entretanto, teremos que fazer o upload do arquivo de vdeo (flv)
para o servidor junto com o swf.

________________________________________________________________________________________
Anotaes

- Stream from Flash Vdeo Streaming Service: num streaming de vdeo, assim
como ocorre com o download progressivo, no precisamos aguardar o download
completo do vdeo para assisti-lo, s que nesta opo no estaremos limitados
somente ao que j foi baixado. Na realidade um streamimg de vdeo funciona da
seguinte forma: apenas uma pequena parte baixada, e em seguida esta parte
reproduzida, enquanto isso uma nova parte carregada e em seguida ser
reproduzida. Assim sucessivamente o vdeo ir sendo exibido, sempre eliminando
o que j passou.
A vantagem que temos nesta forma que podemos iniciar o vdeo em qualquer
momento, j no progressivo teremos que esperar que tenha chegado ao ponto que
desejamos assistir.
- Stream from Flash Media Service: funciona da mesma forma que a opo
anterior, s que o servidor Flash Media Server.
- As mbile device vdeo bundled in swf: opo para vdeos a serem utilizados
num arquivo Flash Lite 2 (Flash para dispositivos mveis).
- Embed vdeo in swf and play in timeline: nessa opo o vdeo no estar num
arquivo externo e sim incorporado ao seu swf.
- Linked QuickTime vdeo for publishing to QuickTime: essa opo s estar
disponvel caso o vdeo importado seja do QuickTime que estar linkado ao
arquivo.
6- Escolha a opo: Embed vdeo in SWF and play in timeline e iremos para a
etapa Embedding deixando as opes marcadas como na imagem:

________________________________________________________________________________________
Anotaes


Fig 302. PAINEL IMPORT VDEO, ITEM EMBEDDING
Em Symbol Type escolhemos que o vdeo se encontrar dentro do filme do Flash
como incorporado: Embed Vdeo; em udio track escolhemos que o udio ser
integrado com o vdeo: Integrated; marcando a opo: Place instance on stage,
estamos dizendo que queremos que uma instncia do arquivo seja colocada no
palco; a opo: Expand timeline if needed marcada indicar que a timeline do
filme poder ser expandida para acomodar todo o vdeo; marcando o item Embed
the entire vdeo, iremos para a etapa Encoding para editar o vdeo antes de ser
incorporado ao filme.
7- Clique no boto next para irmos para a etapa Encoding:

________________________________________________________________________________________
Anotaes


Fig 303. PAINEL IMPORT VDEO, ITEM ENCODING
Nesta fase aparece uma prvia do vdeo na parte superior da janela. Logo abaixo
temos uma barra de progresso do vdeo com marcadores para determinar sua
durao (incio e fim).
8- Para utilizarmos apenas uma parte do vdeo leve os marcadores da esquerda at
o ponto: 00:00:55:298 como na imagem.
9- Na parte inferior da janela aparecem s abas com as configuraes:

________________________________________________________________________________________
Anotaes

- Encoding Profiles: no menu suspenso podemos escolher um perfil j
previamente ajustado para o vdeo baseado no player e na qualidade, mas o ideal
ser realizarmos ajustes clicando na aba Vdeo;
- Vdeo: iremos deixar marcado o codec On2 VP6 (esse codec s ser executado
caso o vdeo seja exportado na verso do player do flash 8 ou superior).
A opo Encode alpha channel relevante quando o vdeo a ser importado
possua um alpha channel (transparncia).
Deinterlace define o vdeo como desentrelaado.
Frame rate a quantidade de quadros por segundo do resultado final do vdeo.
Escolheremos a opo Same as source (mesma quantidade do filme original).
Quality a qualidade do vdeo. Deixaremos marcada a opo: Medium.
Max data rate a quantidade de kilobits por segundo que o filme ter.
Deixaremos marcada a quantidade de 400.
Quanto maior a quantidade maior ser a qualidade e tambm o tamanho do
arquivo.
Keyframe placement aonde definimos se a criao de keyframes ser
automtica.

Fig 304. PROPRIEDADES DA ABA VIDEO
10- Agora iremos clicar na aba udio. Nessa aba deixe marcada a opo Encode
audio e escolha o data rate de 96kbps:

________________________________________________________________________________________
Anotaes


Fig 305. PROPRIEDADES DA ABA AUDIO
11- Na aba Crop and Resize temos as opes para cortar reas do vdeo ou
mesmo redimension-lo.
No item Crop podemos criar cortes na rea do vdeo escolhendo o valor nos itens
correspondentes: topo, esquerda, direita ou base.
No item Resize vdeo redimensionamos o vdeo. Deixe marcado o valor como na
imagem, marcando a opo: Maintain aspect radio para que o vdeo mantenha a
proporo entre largura e altura.

Fig 306. PROPRIEDADES DA ABA CROP AND RESIZE
12- Clique no boto next. Aparecer a tela com detalhes das configuraes:

________________________________________________________________________________________
Anotaes


Fig 307. TELA FINAL COM OS DETALHES DAS CONFIGURAES
13- Clique em Finish e o vdeo ser importado para o nosso filme na sua
respectiva layer.

Fig 308. JANELA DA IMPORTAO DO VDEO PARA O FLASH
A partir do momento que importamos o vdeo, ele armazenado na Library do
Flash.
14- Estenda a layer 1, que contm a palavra vdeos, at o final da timeline da layer
video:

________________________________________________________________________________________
Anotaes


Fig 309. VISUALIZAO DO ARQUIVO VIDEOS.FLA
15- Teste o arquivo.

Fig 310. EXECUTANDO O ARQUIVO VIDEOS.FLA

________________________________________________________________________________________
Anotaes

18.2 Mscaras em Vdeos
Da mesma forma que utilizamos mscaras para visualizar elementos por uma rea
delimitada, tambm podemos criar mscaras que nos permitam que apenas reas
especficas do vdeo sejam visualizadas.
16- Adicione uma nova layer (acima da layer video) e renomei-a para mask.
17- Desenhe um quadrado com os cantos arredondados sobre a rea em que se
encontra o vdeo:

Fig 311. FORMA DESENHADA EM CIMA DO VDEO
18- Selecione a layer maske clicando nela com o boto direito do mouse,
escolha a opo Mask.
Pronto, foi criada uma mscara sobre nosso vdeo:
19- Teste seu filme:

________________________________________________________________________________________
Anotaes


Fig 312. EXECUTANDO O FILME VIDEOS.FLA J COM A MSCARA
20- Salve o arquivo na pasta da lio.
18.3 Download Progressivo
Vamos criar um vdeo com download progressivo, no deixando o arquivo
incorporado no nosso filme e sim criando um arquivo externo.
O processo muito semelhante ao anterior em algumas etapas.
2- Clique em File > Import > Import video e selecione a opo: On your
computer escolhendo o video: caffe_art.wmv
3- Clique no boto next e na etapa Deployment escolha a opo: Progressive
Download from a web server:

________________________________________________________________________________________
Anotaes


Fig 313. PAINEL IMPORT VDEO, ITEM DEPLOYMENT
4- Clicando no boto next vamos para a etapa Encoding com a adio de uma nova
aba: Cue Points:

Fig 314. VISUALIZAO DA ABA CUE POINTS DA ETAPA ENCODING
Os Cue Points so momentos determinados durante a execuo do vdeo que
podem, por exemplo, disparar aes. Esses pontos devem ser especificados no
formato de horas: minutos:segundos:milissegundos:frames.

________________________________________________________________________________________
Anotaes

5- Ao clicarmos no boto next, seremos remetidos para uma nova etapa chamada
Skining, na qual podemos configurar a aparncia que o componente que mostrar
o video ter entre as opes disponveis. Escolha o Skin:
SkinUnderPlaySeekFullscreen.swf

Fig 315. PAINEL IMPORT VDEO, ITEM SKINNING
6- Clique em next e iremos para a etapa Finish:

________________________________________________________________________________________
Anotaes


Fig 316. PAINEL IMPORT VDEO, ITEM FINISH
Veja que o flash j coloca na rea de trabalho um componente totalmente
configurado para o vdeo.

________________________________________________________________________________________
Anotaes


Fig 317. VISUALIZAO DO COMPONENTE PARA A EXECUO DO VDEO
Importante: No esquea de levar para o servidor de publicao o arquivo FLV,
gerado automaticamente durante a importao do vdeo.
Na aba Parameters podemos alterar o skin do componente na opo Skin, clicando
na lupa direita:

Fig 318. ABA PARAMETERS DO COMPONENTE
7- Teste e salve seu arquivo na pasta da lio.

________________________________________________________________________________________
Anotaes


Fig 319. VDEO SENDO EXECUTADO PELO COMPONENTE
18.4 Criando um Vdeo com Componentes
Temos na pasta da lio o arquivo caffe_art.flv que foi gerado na lio anterior e
que vamos usar para este exerccio.
2- No painel Components expanda a opo Video:

________________________________________________________________________________________
Anotaes


Fig 320. VISUALIZAO DO PAINEL COMPONENTS COM O ITEM VIDEO EXPANDIDO
Nesta opo temos diversos componentes que podem ser usados em nossos
projetos, cada um com uma funo diferente.
3- Arraste uma instncia do componente FLVPlayback para o palco do Flash:

Fig 321. COMPONENTE FLVPLAYBACK

________________________________________________________________________________________
Anotaes

4- Selecione o componente e na aba Parameters selecione a lupa da opo Source.
Abrir a janela Content Path.
5- Clique na pasta e escolha o arquivo FLV caffe_art.flv que esta na pasta da lio.
Ao final clique em OK.

Fig 322. SELECIONANDO O ARQUIVO DE VDEO EXTERNO
6- Nosso vdeo j esta rodando a partir do componente. Teste o arquivo e veja o
resultado:
7- Selecione o componente e instancie o vdeo para video.
8- Arraste uma instncia do componente seekBar para o palco colocando abaixo
do vdeo. Instancie este componente para barra.
9- Arraste o componente playPauseButton para o palco posicionando do lado
esquerdo do componente seekBar. Instancie este componente de tocar.
10- Arraste o componente MuteButton para o palco colocando-o ao lado direito
do componente seekBar. Instancie-o de mudo.
Veja como ficou nosso filme:

Fig 323. TODOS OS COMPONENTES POSICIONADOS NO STAGE DO FLASH

________________________________________________________________________________________
Anotaes

O componente seekBar foi redimensionado e foi utilizado o painel Align para
alinhar os componentes.
Para que no ocorra problemas em nosso arquivo necessrio conectar os
controles ao playback (mesmo os controles funcionando) via ActionScript.
11- Crie uma nova layer e renomei-a de acoes.
12- Nessa layer habilite o painel Action e digite:
video.playPauseButton = tocar;
video.seekBar = barra;
video.muteButton = mudo;
13- Teste seu filme:

Fig 324. VDEO EM EXECUO COM OS CONTROLES EM FUNCIONAMENTO
Dica: Podemos mudar a cor dos componentes da mesma forma que fizemos com o
componente ScrollPane.
18.5 Vdeo em Tela Cheia
Uma novidade incorporada a mais recente verso do player do Flash a
possibilidade de exibir seu contedo em tela cheia.

________________________________________________________________________________________
Anotaes

Podemos criar um vdeo de forma semelhante ao que ocorre no You Tube, por
exemplo.
8- No arquivo que contm o vdeo, selecione o menu: File > Publish Settings.
9- Na rea HTML ajuste o item template para: Flash Only Allow Full Screen.


________________________________________________________________________________________
Anotaes


Fig 325. JANELA PUBLISH SETTINGS, ABA HTML
10- Clique no boto Publish.
11- Ao testarmos o arquivo html gerado clique no boto dedicado a exibir o filme
em tela cheia, localizado na extremidade inferior direita do skin.

________________________________________________________________________________________
Anotaes


Fig 326. SELECIONANDO O BOTO QUE EXIBIR O VDEO EM TELA CHEIA
Uma mensagem, que desaparece logo depois, avisa que possvel utilizar a tecla
ESC para sair do modo de tela cheia:

Fig 327. MENSAGEM QUE APARECE NA EXIBIO INICIAL DO VDEO
Ser gerado um arquivo com a extenso .js (JavaScript) que deve ser enviado junto
com os arquivos para o seu website.

________________________________________________________________________________________
Anotaes

18.6 Vdeo com Fundo Transparente
Uma opo interessante do Flash a possibilidade de importar um vdeo e manter
o canal alpha (transparncia) deste.
Com isso podemos, por exemplo, ter uma paisagem de fundo para demonstrar o
contedo de algum produto, semelhante ao que as emissoras de TV fazem na
previso do tempo.
Importante ressaltar que o Flash apenas importa a transparncia no cria.
2- Renomeie a layer 1 para fundoe crie uma nova layer com o nome de video
3- Com a layer fundo selecionada importe a imagem: fundo.jpg que est na pasta
imagens, para o palco do flash.
4- Clique no boto Size e marque a opo Contents na janela Document
Properties:

Fig 328. IMAGEM IMPORTADA PARA O FLASH
5- Selecione a layer video e escolha o menu: File > Import > Import video.
6- Na etapa Select Video escolha o arquivo alpha.mov que esta na pasta da lio
dentro da pasta site > vdeos.

________________________________________________________________________________________
Anotaes

7- Na etapa Deployment escolha a opo: Embed video in swf and play in
timeline.
8- Na etapa Embedding, no item Symbol Type escolha Movie Clip:

Fig 329. ETAPA EMBEDDING DA IMPORTAO DO VDEO
9- Na etapa Encoding, na aba Video, marque a opo: Encode alpha channel para
que o fundo do vdeo mantenha a transparncia:

Fig 330. ABA VIDEO DA ETAPA ENCODING
10- Clique nos botes seguintes para finalizar o processo de importao.
Observe que o vdeo veio com o fundo transparente:

________________________________________________________________________________________
Anotaes


Fig 331. VDEO POSICIONADO EM CIMA DA IMAGEM
11- Posicione o Movie Clip, que contm o vdeo e teste seu filme:

Fig 332. EXECUTANDO O FILME COM O VDEO COM FUNDO TRANSPARENTE


________________________________________________________________________________________
Anotaes

Unidade 19
Preloader no Flash CS3
19.1 Construindo um Preloader
1- Abra o arquivo index.fla que esta na pasta da lio.
2- Em todas as layers deste filme avance um frame, deixando-as todas iniciando a
partir do frame 2 da Timeline.

Fig 333. LAYERS DO ARQUIVO INDEX.FLA
3- Crie uma nova layer abaixo da layer acoes e renomei-a para preloader.
4- Crie um campo de texto dinmico com o nome de instncia de pct.
5- Delete os keyframes a partir do frame da layer preloader, deixando somente o
frame 1 com o objeto de texto:

Fig 334. VISUALIZAO DA LAYER PRELOADER

________________________________________________________________________________________
Anotaes

6- Selecione o frame 1 da camada preloadere habilite o painel Action digitando:
stop();
this.addEventListener(Event.ENTER_FRAME,loaded);
function loaded(EVENT:Event):void
{
var
carregando:Number=int(loaderInfo.bytesLoaded/loaderInfo
.bytesTotal*100)
pct.text=carregando+"%";
if(carregando==100)
{
removeEventListener(Event.ENTER_FRAME,loaded);
gotoAndPlay(2);
}
}
Criamos uma funo loadedque executa o carregamento a partir da classe
loaderInfo, responsvel pela execuo do carregamento, que passa o resultado dos
bytes carregados divididos pelos bites totais e multiplicado por 100.
A instncia pct do tipo texto que quando carregada mostra o valor em
porcentagem.
Se carregado todo o arquivo ele remove a funo loaded e vai para o frame 2.
7- Teste seu filme. Para ver o preloader em funcionamento pressione CTRL +
Enter, novamente:

________________________________________________________________________________________
Anotaes


Fig 335. EXECUO DO FILME COM O PRELOADER EM PORCENTAGEM
Quando chegar a 100% ser carregado nosso filme.
8- Para adicionar uma barra que vai crescendo juntamente com a porcentagem crie
um retngulo de largura de 2 pixels e transforme-a em um smbolo do tipo Movie
Clip com nome de instncia de barra.
9- Habilite o painel Action e digite na 7 linha:
barra.scaleX=carregando;
10- Teste seu arquivo e veja como ficou:

Fig 336. EXECUO DO FILME COM A PORCENTAGEM E A BARRA


________________________________________________________________________________________
Anotaes

Unidade 20
Criando um formulrio
20.1 Utilizando Componentes
Os Componentes, como j vimos, so Movie Clips com parmetros que permitem
modificar sua aparncia.
Ao invs de criamos botes, combos e listas, podemos arrastar esses componentes
para o palco do Flash e adicionar funcionalidade a eles, configurando-os a nossa
maneira.
1- Crie um novo documento de 400 pixels de largura por 267 de altura e salve-o
como formulario dentro da pasta site.
2- Abra o painel Componentes:

Fig 337. PAINEL COMPONENTS

________________________________________________________________________________________
Anotaes

3- Selecione o componente TextInput e arraste-o para o palco do Flash colocando
o nome de instncia de nome.
5- Aumente o tamanho deste Componente para 360x20.
Quando arrastamos um componente para o palco, automaticamente criada um
smbolo dele junto a Biblioteca.
6- Selecione o smbolo TextInput da Biblioteca e arraste-o para o palco do Flash,
colocando-o logo abaixo do outro, deixando-o com a mesma largura e altura. D o
nome de instncia para ele de email:

Fig 338. COMPONENTES POSICIONADOS NO STAGE
7- Agora, arraste uma instncia do componente TextArea para a palco, colocando
abaixo dos outros componentes com a largura de 360x70. Instancie-o para
mensagem:

Fig 339. COMPONENTE TEXTAREA POSICIONADO
8- Arraste uma instncia do componente Button para o palco do Flash,
posicionando abaixo dos outros componentes.
9- Na aba Parameters mude o item label para Enviar e instancie-o para
btn_Enviar.

________________________________________________________________________________________
Anotaes


Fig 340. ABA PARAMETERS DO COMPONENTE
10- Arraste outra instncia do componente Button para o palco do Flash,
colocando-o ao lado do btn_Enviar.
11- Mude a opo label para Limpare instancie- o para btn_Limpar:

Fig 341. COMPONENTES POSICIONADOS NO STAGE
12- Precisamos agora de um campo de erro. Selecione a ferramenta Text Tool no
formato Dynamic Text e clique e arraste uma caixa na parte superior dos
componentes:

________________________________________________________________________________________
Anotaes


Fig 342. POSICIONANDO A CAIXA DE TEXTO
13- Instancie esta caixa de texto para mensagemErro.
14- Crie uma nova camada e renomei-a para acoes. Habilite o painel Actions e
digite na primeira linha:
btn_Enviar.addEventListener(MouseEvent.CLICK, valida);
btn_Limpar.addEventListener(MouseEvent.CLICK, limpar);
A funo valida servir para verificar se os campos foram digitados, se no
retornar uma mensagem.
A funo limpar servir para apagar os campos de texto.
15- Na terceira linha digite:
function valida(evento:MouseEvent):void{
mensagemErro.text = "";
if (nome.text == ""){
mensagemErro.text = "Favor preencher o campo
nome \n";
}
if (email.text == ""){

________________________________________________________________________________________
Anotaes

mensagemErro.text = String(mensagemErro.text)
+ "Favor preencher o campo email \n";
}
if (mensagem.text == ""){
mensagemErro.text = String(mensagemErro.text)
+ "Favor preencher o campo mensagem \n";
}
}
function limpar(evento:MouseEvent):void{
nome.text = "";
email.text = "";
mensagem.text = "";
}
Caso as caixas de texto estejam vazias retornar uma mensagem no campo de
texto instanciado de mensagemErro.
Teste o arquivo e veja que os botes esto funcionando:

________________________________________________________________________________________
Anotaes


Fig 343. TESTANDO O ARQUIVO FORMULARIO.FLA
20.2 Configurando o Envio de Dados
16- Abaixo dos ouvintes dos botes (na terceira linha) digite:
var nomeArquivo:String;
nomeArquivo = "processa.asp";
O Flash conversa com o ASP e PHP atravs de envio e recebimento de variveis,
executando as tarefas.
Neste exerccio passaremos os dados para o ASP fazer o envio dos dados por e-
mail
17- Abaixo das condicionais (if) acrescente mais uma para a funo enviar,
digitando:
if (mensagemErro.text = = ""){
this.enviar();
}

________________________________________________________________________________________
Anotaes

18- Abaixo iremos digitar a funo enviar, responsvel pelo envio dos nossos
dados do formulrio:
function enviar():void {
var req:URLRequest=new URLRequest(nomeArquivo);
req.method=URLRequestMethod.POST;
var vars:URLVariables=new URLVariables;
vars.nome=escape(nome.text);
vars.email=escape(email.text);
vars.mensagem=escape(mensagem.text);
req.data=vars;
var loader:URLLoader=new URLLoader();
loader.load(req);

loader.addEventListener(Event.COMPLETE,onVarsLoaded
);
loader.addEventListener(IOErrorEvent.IO_ERROR,
onIOError);
}
function onVarsLoaded(event:Event):void{
var loader:URLLoader = URLLoader(event.target);
mensagemErro.text = "Email enviado com sucesso";
}
function onIOError(event:IOErrorEvent):void {
mensagemErro.text = "Erro ao enviar o email";
}
A funo enviar pega todos os itens digitados nos campos e envia os dados. So
criadas variveis para os objetos (nome, email, mensagem) para guardarem o
contedo dos dados digitados.


________________________________________________________________________________________
Anotaes

Unidade 21
Criando Modelos e Comandos no Flash
21.1 Tornando o Filme um Modelo (Template)
Quando trabalhamos com um projeto, algumas vezes temos semelhanas entre os
filmes criados, aonde mudamos somente alguns itens.
Nesta lio iremos criar um Template no Flash que servir, posteriormente, para
criarmos novos filmes baseados nele.
2- Importe para o palco do Flash a imagem: cartao.jpg que esta na pasta imagens.
3- Clique no boto Size e marque a opo: Contents.
4- Crie uma nova camada e escreva o texto abaixo, como na imagem:

Fig 344. TEXTO EM CIMA DA IMAGEM IMPORTADA

________________________________________________________________________________________
Anotaes

Agora que j esta criado o filme vamos salv-lo como um Modelo.
5- Escolha a opo: File > Save as Template. Na janela que se abre escolha o
nome do Template de carto. No item Category escolha Aniversario e em
Description faa uma breve descrio para o modelo:

Fig 345. JANELA SAVE AS TEMPLATE
6- Clique no boto Save e feche o arquivo que criamos.
7- Clique na categoria aniversario, que esta na coluna dos Template.

Fig 346. TEMPLATE CRIADO
Veja que nosso Template j esta pronto para ser usado:

________________________________________________________________________________________
Anotaes


Fig 347. JANELA NEW FROM TEMPLATE
21.2 Usando os Commands
Uma facilidade do Flash so os comandos, etapas pr-programadas que efetuam
trabalhos que poderiam ser feitos manualmente, s que de uma maneira mais
prtica e rpida.
So na verdade cdigos jsfl (Flash Javascript File), scripts que controlam e
auxiliam a utilizao do programa, gerados automaticamente pelo Flash.
2- Desenhe uma forma com contorno, com o contorno selecionado altere sua linha
para tracejada e com tamanho de trao de 6:

________________________________________________________________________________________
Anotaes


Fig 348. FORMA DESENHADA NO STAGE DO FLASH
3- Iremos utilizar o painel History. Escolha e opo de menu: Window > Other
Panels > History:
Neste painel temos um registro das etapas que percorremos at agora. possvel
utilizar esta janela, por exemplo, para desfazer algumas etapas apenas arrastando a
seta que se encontra direita das etapas.
4- Selecione as etapas de Stroke Style e Stroke Size e clique no cone de Save,
localizado na parte inferior direita do painel:

Fig 349. ETAPAS SELECIONADAS NO PAINEL HISTORY
5- Aparece uma janela na qual devemos escolher o nome que o comando ter.
Digite borda.

________________________________________________________________________________________
Anotaes


Fig 350. JANELA SAVE AS COMMAND
6- Delete a forma do palco e desenha uma estrela com borda reta e tamanho de 1:

Fig 351. FORMA ESTRELA DESENHADA NO STAGE DO FLASH
7- Com a estrela selecionada (borda e preenchimento, ou somente a borda),
escolha a opo: Commands > borda, que acabamos de criar.
Veja que a estrela ter sua borda ajustada da mesma forma que havamos ajustado
para a outra forma:

________________________________________________________________________________________
Anotaes


Fig 352. ESTRELA J COM O COMANDO APLICADO
Para remover um comando, basta escolher a opo: Commands > Manage Saved
Commands e selecionar o comando desejado, escolhendo o boto Delete. Para
renomear, basta escolher o boto Rename.

Fig 353. JANELA MANAGE SAVED COMMANDS


________________________________________________________________________________________
Anotaes

Unidade 22
Publicando documentos do Flash
22.1 Configuraes de Publicao
Aps criarmos nosso filme hora de disponibiliz-lo para que os usurios o
assistam. Para isso devemos definir suas configuraes de exportao, que so
efetuadas no painel Publish Settings.
2- Selecione o menu: File > Publish Settigns. Nesta janela escolhemos o formato
desejado entre os disponveis para exportao:

Fig 354. JANELA PUBLISH SETTINGS

________________________________________________________________________________________
Anotaes

- Flash (.swf): gera um arquivo swf;
- HTML (.html): gera um arquivo HTML, pronto para ser disponibilizado na
Web;
- GIF (.gif): cria uma imagem no formato GIF, que pode ser esttica ou animada;
- JPEG (.jpg): cria uma imagem no formato JPG;
- PNG (.png): cria uma imagem no formato PNG;
- Windows Projector (.exe): gera um executvel para Window;
- Macintosh Projector: gera uma executvel para MAC;
- QuickTime (.mov): cria um filme para QuickTime.
Para exportarmos em algum dos formatos disponveis , devemos marcar a caixa de
seleo ao lado do formato.
Ao fazermos isso, novas abas so adicionadas ao painel Publish Settings para as
configuraes do formato.
Os formatos de arquivos executveis no abriro abas, pois no tero elementos
para serem configurados.
Observe que ao lado de cada formato existe um campo chamado File, no qual
podemos escolher separadamente o nome e local de cada arquivo que ser gerado.

Fig 355. CAMPO FILE
Importante: Para realmente criarmos os arquivos devemos clicar no boto
Publish que efetua a publicao. O boto OK apenas serve para confirmarmos as
configuraes.
22.2 Flash
As configuraes disponveis para este formato so:

________________________________________________________________________________________
Anotaes


Fig 356. JANELA PUBLISH SETTINGS PARA O FORMATO FLASH
- Version: a verso do player necessrio para visualizarmos o arquivo swf;
-Load order: ao ser carregado em conexes mais lentas, as camadas vo sendo
carregadas por partes, onde Botton up de baixo para cima e Top down de cima
para baixo;
- ActionScript version: escolhemos a verso do ActionScript que ser utilizada
no filme;

________________________________________________________________________________________
Anotaes

-Generate size report: cria um relatrio num arquivo txt com as informaes
gerais sobre o tamanho do arquivo;
- Protect from import: impede que qualquer usurio (inclusive quem fez o filme)
importe o swf criado em um novo filme. Ao marcarmos essa opo habilitado
um campo password, que permitir a quem possuir a senha importar o swf;
- Omit trace actions: marcada essa opo estaremos omitindo os comandos trace;
- Permit debugging: quando selecionada, permite a depurao remota do arquivo;
- Compress movie: comprime o resultado final do arquivo (swf) para diminuir seu
tamanho;
- Optimize for Flash Player 6r65: caso tenhamos selecionado a verso 6 do
player, podemos marcar essa caixa para definir a verso atualizada deste player;
- Export hidden layers: permite que layers marcadas como escondidas (hidden)
sejam exportadas no resultado final;
- Export SWC: exportao de arquivo swc de componentes do Flash que contm
Movie Clips compilados, cdigos e outros elementos;
- JPEG quality: definimos a qualidade com o qual as imagens bitmaps do nosso
filme sero exportadas;
- Audio stream e Audio event: permite que configuremos os sons do tipo stream
no nosso filme, clicando no boto set:

Fig 357. OPES DE UDIO
Para que essas novas configuraes tenham efeito, devemos selecionar a opo:
Overide souns settings.
Cuidado, pois essa opo utiliza as configuraes novas para todos os sons do
filme. O ideal que configuremos nossos sons individualmente.
- Export device sounds: permite que configuremos para que o som exportado no
seja utilizado durante os testes do Flash e sim no final compatvel com o
dispositivo mvel que tenha sido configurado;

________________________________________________________________________________________
Anotaes

- Local Playback security: permite que configuremos se queremos que o swf
tenha acesso local (Access local files only) ou na web (Access Network only).
22.3 HTML
Podemos configurar o arquivo HTML que o Flash vai gerar. Esse arquivo pode ser
colocado no nosso site para que os usurios visualizam nosso filme. No
esquecendo de levar o arquivo swf junto.

Fig 358. JANELA PUBLISH SETTINGS PARA O FORMATO HTML

________________________________________________________________________________________
Anotaes

- Template: contm opes de modelos de cdigos HTML predefinidos para
serem usados em nossas paginas;
- Detect Flash Version: essa opo faz com que o arquivo HTML possua um
cdigo anexo que verifica a verso do player;
- Dimensions: podemos definir o tamanho que o filme ocupar na pgina HTML;
- Paused at start: com essa opo selecionada o filme se inicia parado,
aguardando que um comando mande reproduzi-lo;
- Loop: faz com que o filme recomece ao atingir seu ponto final, desde que
nenhuma ao no ltimo frame mande o filme parar;
- Display menu: quando o usurio clica com o boto direito do mouse no filme,
um menu contextual se abre. Caso no deseje exibir o menu completo (alguns itens
so obrigatrios), podemos desmarcar essa opo;
- Device font: essa opo substitui fontes existentes no filme por existentes na
mquina do usurio;
- Quality: define a qualidade do filme;
- Window mode: no Internet Explorer podemos definir o comportamento visual
da rea do filme. Temos as opes: Window (modo padro), Opaque Windowless
(evita que elementos que estejam por trs do filme sejam exibidos atravs dele)
uma opo bastante utilizada para evitar que um menu DHTML se sobreponha ao
filme e no funcione corretamente e o Transparent Windowless (torna o fundo do
filme transparente).
- HTML alignment: configura o alinhamento que a rea do filme ocupar no
navegador;
- Scale: configura como o contedo do Flash ire se comportar caso tenha sido
alterada alguma das dimenses do filme: Default (Show all) no distorce o filme,
No Border mantm a proporo do filme, cortando-o se ultrapassar a rea
especificada, Exact Fit faz com que todo o contedo do filme seja compreendido
na rea especificada para ele, no se importando com a proporo, podendo
acarretar distoro e o No Scale que sem escala;
- Flash alignment: configura o alinhamento que o filme ter dentro da rea
especificada.
- Show warning messages: se marcada, mostra alertas sobre eventuais erros.

________________________________________________________________________________________
Anotaes

Para termos um controle maior do nosso HTML com as Tags DIV recomenda-se
que o HTML do seu Website seja gerado atravs do Adobe Dreamweaver e
inserido o arquivo swf posteriormente.
22.4 GIF
Configura a imagem GIF que ser criada pelo Flash:

Fig 359. JANELA PUBLISH SETTINGS PARA O FORMATO GIF
- Dimensions: define o tamanho da imagem. Se marcada a opo Match Movie,
teremos as dimenses do filme do Flash; caso desmarcada, poderemos definir
nossas dimenses;

________________________________________________________________________________________
Anotaes

- Playback: opo para definir se a imagem GIF ser esttica (Static) ou animada
(Animated);
Quando definida a opo Animated, necessrio escolher se a imagem estar em
um loop infinito (Loop continuously) ou o nmero de quantidades de vezes que a
image ser reproduzida at parar (Repeat).
- Optimize colors: remove cores no utilizadas na tabela de cores da imagem GIF;
- Interlace: mostra a imagem rapidamente, melhorando sua qualidade aos poucos
enquanto faz o download dela;
- Smooth: suaviza a imagem a ser exportada;
- Dither solids: utiliza pontilhamentos (utilizao de duas cores prximas para
simular uma terceira) para simular uma gama maior de cores;
- Remove gradients: converte os gradientes em cor slida;
- Transparent: configura como ser a transparncia da imagem: Opaque (sem
transparncia), Transparent (faz com que o fundo do filme seja exportado como
rea transparente na imagem), Alpha (transparncia parcial da imagem).
No campo Threshold definimos um valor de 0 a 255 que corresponder a um
limite para a transparncia.
- Dither: configura o pontilhamento: None (no pontilha e substitui cores no
presentes na tabela de cores da imagem pelas mais prximas), Ordered
(pontilhamento com qualidade razovel sem aumentar muito o tamanho do
arquivo), Difusion (melhor qualidade, entretanto com aumento do arquivo);
- Palete type: tipo de paleta a ser utilizada na imagem: Web 216 (cores seguras da
Web), Adaptive (cria uma tabela com as cores utilizadas no arquivo, alterando
algumas para se manter no limite do formato), Web Snap Adaptive (semelhante
adaptive, s que converte cores semelhantes em cores da paleta segura da Web),
Custom (podemos buscar uma tabela de cor).
22.5 PNG
Gera uma imagem no formato PNG, que tambm aceito pelos navegadores.

________________________________________________________________________________________
Anotaes


Fig 360. JANELA PUBLISH SETTINGS PARA O FORMATO PNG
- Dimensions: define o tamanho da imagem. Se marcada a opo Match Movie,
teremos as dimenses do filme do Flash; caso desmarcada, poderemos definir
nossas dimenses;
- Bit depth: profundidade de cores utilizada na imagem que ser gerada, sendo sua
opes: 8 bits (256 cores), 16 bits (milhares de cores), 24 bits com with Alpha
(milhares de cores com transparncia);
- Optimize colors: remove cores no utilizadas na tabela de cores da imagem GIF;
- Interlace: mostra a imagem rapidamente, melhorando sua qualidade aos poucos
enquanto faz o download dela;
- Smooth: suaviza a imagem a ser exportada;
- Dither solids: utiliza pontilhamentos (utilizao de duas cores prximas para
simular uma terceira) para simular uma gama maior de cores;
- Remove gradients: converte os gradientes em cor slida;

________________________________________________________________________________________
Anotaes

- Dither: configura o pontilhamento: None (no pontilha e substitui cores no
presentes na tabela de cores da imagem pelas mais prximas), Ordered
(pontilhamento com qualidade razovel sem aumentar muito o tamanho do
arquivo), Difusion (melhor qualidade, entretanto com aumento do arquivo);
- Palete type: tipo de paleta a ser utilizada na imagem: Web 216 (cores seguras da
Web), Adaptive (cria uma tabela com as cores utilizadas no arquivo, alterando
algumas para se manter no limite do formato), Web Snap Adaptive (semelhante
adaptive, s que converte cores semelhantes em cores da paleta segura da Web),
Custom (podemos buscar uma tabela de cor).
- Filter: so as maneiras como a imagem ser filtrada para facilitar sua
compresso.
O Flash tambm pode criar arquivos executveis, que contm todos os elementos
necessrios para visualizar o filme, sem a necessidade do usurio precisar de um
navegador para isso. O arquivo torna-se um pouco maior por conter os elementos
necessrios incorporados a ele.
Podemos criar arquivos no Flash para gravar um CD-ROM multimdia, basta
gerarmos um arquivo executvel e gravarmos este arquivo no CD.
Para gerarmos arquivos executveis em Tela Cheia, sem aumentar as imagens
evitando uma perda de qualidade das imagens do filme, devemos colocar os
comandos abaixo na Timeline no filme:
stage.scaleMode = StageScaleMode.NO_SCALE;
stage.displayState = StageDisplayState.FULL_SCREEN;
O Flash ainda gera arquivos no formato de vdeo compatvel com o QuickTime.
Esses filmes podem ser assistidos por usurios que no possuem o plugin do Flash.
22.6 Full Screen
Uma novidade incorporada a mais recente verso do player (verso 9) do Flash a
possibilidade de exibir o contedo em Tela Cheia (full screen).
1- Crie um novo arquivo baseado do Template carto que criamos
anteriormente.
2- Abra o painel Components e arraste uma instncia do Button para o palco,
posicionando na parte inferior do layout:

________________________________________________________________________________________
Anotaes


Fig 361. BOTO INSERIDO EM CIMA DA IMAGEM IMPORTADA
3- Coloque o nome de instncia deste boto de botao.
4- Insira uma nova camada e renomei-a para acoes. Habilite o painel Actions e
digite:
botao.label="aumentar";
botao.addEventListener(MouseEvent.CLICK,tela);
function tela(evento:MouseEvent):void {
if (evento.target.label=="aumentar") {

stage.displayState=StageDisplayState.FULL_SCREEN;
botao.label="diminuir";
}else {
stage.displayState = StageDisplayState.NORMAL;
botao.label="aumentar";

________________________________________________________________________________________
Anotaes

}
}
Na primeira linha definimos o texto dentro do boto para aumentar, ajustando
sua propriedade label.
Na segunda linha criamos um ouvinte para o boto que quando for clicado executa
a funo tela.
Logo aps temos a funo tela que, quando chamada, executa o que est entre as
chaves, na qual temos uma estrutura condicional que se (if) o texto atual do boto
(evento.target.label) for igual (= =) ao texto aumentardetermina o estado do
stage (stage.display.State) para tela cheia (Stage.DisplayState.FULL_SCREEN).
Logo em seguida muda o texto do boto para diminuir, definindo este valor para
a propriedade label do boto.
Caso contrrio (se o texto do boto for aumentar), inicialmente ajusta o estado
do stage para normal (StageDisplayState.NORMAL) e em seguida ajusta o texto
do boto para aumentar.
5- Selecione o menu: File > Publish Settings e na aba HTML, configure o item
Template como: Flash Only Allow Full Screen e clique no boto Publish:

Fig 362. JANELA PUBLISH SETTINGS NA ABA HTML
Se quisermos que a imagem no aumente de tamanho junto coma tela, basta
selecionarmos no item Scale a opo no scale.
6- Teste o arquivo HTML e veja a funcionalidade do boto:

________________________________________________________________________________________
Anotaes


Fig 363. FILME SENDO EXECUTADO
Uma mensagem, que desaparece logo avisa que possvel utilizar a tecla ESC
para sair do modo Tela Cheia.
gerado, tambm, um arquivo com a extenso .js (JavaScript) que deve ser
enviado junto com o arquivo HTML no publicao dos arquivos.

Apostila Flash Cs3

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Apostila Flash Cs3

Enviado por

Direitos autorais:

Formatos disponíveis

Adobe Flash CS3

Você também pode gostar