Apostila FLASH CS5

Adobe Flash CS5:
Multimdia Interativo

Adobe Flash CS5: Multimdia Interativo

2 2010 Alfamdia Prow.
Todos os direitos reservados para Alfamdia Prow.

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 Alfamdia Prow no tem
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.

06/2010 Verso 1.0

Alfamdia Prow
http://www.alfamidia.com.br

A Alfamdia d Boas Vindas aos seus clientes e deseja um
excelente treinamento.
- Suporte ps-treinamento via e-mail (3 consultas por 90 dias aps o trmino do curso) para
tirar dvidas do
Benefcios ao aluno
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 O AMBIENTE DE TRABALHO DO FLASH CS5 ............................................................................................ 7
1.1 A TELA INICIAL ................................................................................................................................ 7
1.2 O LAYOUT DO FLASH ....................................................................................................................... 8
1.3 PERSONALIZANDO A INTERFACE ....................................................................................................... 9
1.4 PAINEL PROPERTIES ....................................................................................................................... 10
1.5 A TIMELINE ................................................................................................................................... 11
1.6 FLA OU SWF .................................................................................................................................. 12
UNIDADE 2 MODOS DE DESENHOS E OBJETOS GRFICOS ..................................................................................... 13
2.1 MODO OBJ ECT DRAWING ............................................................................................................... 13
2.2 OBJ ECT PRIMITIVE ......................................................................................................................... 14
2.3 FORMAS RECTAGULE E OVAL ......................................................................................................... 14
2.4 FORMA POLISTAR ........................................................................................................................... 15
2.5 DESENHANDO COM A FERRAMENTA PENCIL ................................................................................... 15
2.6 PINTANDO COM O BRUSH ............................................................................................................... 15
2.7 A FERRAMENTA PEN ...................................................................................................................... 15
2.8 AJ USTANDO E REMODELANDO OS SEGMENTOS ............................................................................... 16
2.9 TRANSFORMANDO OBJ ETOS ........................................................................................................... 17
2.10 O PAINEL ALIGN ............................................................................................................................. 18
2.11 O PAINEL ALIGN ............................................................................................................................. 19
2.12 LABORATRIO: INICIANDO A MONTATGEM DO HOTSITE ................................................................ 20
UNIDADE 3 USANDO SIMBOLOS E ANIMANDO ............................................................................................................ 21
3.1 TIPOS DE SMBOLOS ....................................................................................................................... 21
3.2 BIBLIOTECA ................................................................................................................................... 22
3.3 PADRES COM A FERRAMENTA SPRAY BRUSH ............................................................................. 23
3.4 DESENHANDO COM A DECO TOOL .................................................................................................. 24
3.5 TRABALHANDO COM LINHAS DE TEMPO ........................................................................................ 25
3.6 ANIMAO INTERPOLADA ............................................................................................................. 26
3.7 USANDO O MOTION EDITOR ............................................................................................................ 27
3.8 INTERPOLAO DE FORMAS .......................................................................................................... 28
3.1 SHAPE HINTS .................................................................................................................................. 29
3.9 ANIMAO QUADRO A QUADRO ..................................................................................................... 29
3.2 MOVIMENTANDO OBJ ETOS NO ESPAO 3D ...................................................................................... 30
3.10 PAINEL MOTION PRESETS .............................................................................................................. 30
UNIDADE 4 TRABALHANDO COM CAMADAS E TEXTOS ............................................................................................ 32
4.1 DISTRIBUINDO ELEMENTOS EM UMA CAMADA ............................................................................... 33
4.2 CAMADA MOTION GUIDE ............................................................................................................... 33
4.3 FERRAMENTA TEXT TOOL .............................................................................................................. 34
4.4 TRANSIO ENTRE TEXTOS ............................................................................................................ 35
4.5 IMPORTANDO MDIAS ..................................................................................................................... 37
4.6 LABORATRIO: BREAK A PART EM BITMAP ................................................................................... 39
UNIDADE 5 MSCARAS NA ANIMAO ......................................................................................................................... 40

5.1 USANDO MSCARAS ...................................................................................................................... 40
5.2 EFEITOS DE PREENCHIMENTO ......................................................................................................... 41
5.3 MSCARA ARRSTAVEL ................................................................................................................. 42
5.4 MSCARA COM GRADIENTE ........................................................................................................... 43
5.5 CRIANDO ANIMAES COM FILTROS .............................................................................................. 45
5.6 LABORATRIO: TEXTOS COMO MSCARAS .................................................................................... 46
5.7 LABORATRIO: MOVIMENTO COM MSCARAC ............................................................................... 46
UNIDADE 6 CINEMTICA INVERSA (IK) .......................................................................................................................... 47
6.1 CINEMTICA INVERSA (IK) ............................................................................................................ 47
6.2 ADICIONANDO BONES A SMBOLOS ................................................................................................. 47
6.3 ADICIONAR BONES A SHAPES .......................................................................................................... 49
6.4 CONVERTENDO A ARMADURA EM UM SMBOLO ............................................................................. 50
UNIDADE 7 CRIANDO BOTES ......................................................................................................................................... 52
7.1 O SMBOLO BOTO ........................................................................................................................ 52
7.2 ANIMANDO OS BOTES ................................................................................................................... 53
7.3 PERSONALIZANDO O CURSOR ........................................................................................................ 54
UNIDADE 8 INTRODUO AO ACTION ........................................................................................................................... 55
8.1 UTILIZANDO UMA SINTAXE DE SCRIPT ADEQUADA ......................................................................... 56
8.2 VISO GERAL DO PAINEL ACTION ................................................................................................... 56
UNIDADE 9 NAVEGAO NO FLASH .............................................................................................................................. 59
9.1 CARREGANDO ARQUIVOS EXTERNOS .............................................................................................. 59
9.2 NAVEGAO NA TIMELINE ............................................................................................................. 61
9.3 USANDO LABEL .............................................................................................................................. 62
9.4 CRIANDO ROLAGEM DE CONTEDO ................................................................................................ 63
9.5 OS COMPONENTES NO FLASH ......................................................................................................... 66
UNIDADE 10 TRABALHANDO COM TEXTOS DINAMICOS ............................................................................................. 68
10.1 BUSCA DE VARIVEIS EM UM ARQUIVO DE TEXTO .......................................................................... 68
10.2 TEXTO COM FORMATAO HTML .................................................................................................. 69
UNIDADE 11 AUDIO NO FLASH ........................................................................................................................................... 71
11.1 IMPORTANDO UDIO PARA O FLASH ............................................................................................... 71
11.2 CONFIGURAES DO SOM NO FLASH .............................................................................................. 71
11.3 CARREGANDO UDIO EXTERNO ...................................................................................................... 73
11.4 INSERINDO UDIO EM BOTES ...................................................................................................... 75
UNIDADE 12 CRIANDO FORMULRIO ............................................................................................................................... 76
12.1 UTILIZANDO COMPONENTES ........................................................................................................... 76
12.2 CONFIGURANDO O ENVIO DE DADOS .............................................................................................. 77
UNIDADE 13 PRELOADER .................................................................................................................................................... 80
13.1 CONSTRUINDO UM PRELOADER ..................................................................................................... 80
UNIDADE 14 CRIANDO BANNERS ANIMADOS ................................................................................................................ 82
14.1 CRIANDO UM BANNER ................................................................................................................... 82
14.2 BANNER EXPANSVEL ..................................................................................................................... 85
14.3 USANDO TRANSIES COM ACTION SCRIPT .................................................................................... 88
UNIDADE 15 IMPORTANTO VDEO ..................................................................................................................................... 90
15.1 IMPORTANDO VDEOS ..................................................................................................................... 90

15.2 USANDO O ADOBE MEDIA ENCODER CS5 ..................................................................................... 91
15.3 MSCARAS EM VDEOS ................................................................................................................... 93
15.4 VDEO EM TELA CHEIA ................................................................................................................... 93
UNIDADE 16 PUBLICANDO DOCUMENTOS NO FLASH ................................................................................................. 95
16.1 CONFIGURAES DE PUBLICAO ................................................................................................ 95
16.2 FLASH ............................................................................................................................................ 96
16.3 HTML ............................................................................................................................................. 96
16.4 GIF ................................................................................................................................................. 97
16.5 PNG .............................................................................................................................................. 98
16.6 FULLSCREEN .................................................................................................................................. 99
UNIDADE 17 MELHORES PRATICAS .............................................................................................................................. 100
17.1 ORGANIZAO DA LINHA DE TEMPO E DA BIBLIOTECA ............................................................... 100
17.2 GRAVAO DE ARQUIVOS E CONTROLE DE VERSO .................................................................... 100
17.3 ORGANIZAO DO ACTIONSCRIPT EM UM APLICATIVO ............................................................... 101
17.4 CONVENES DE VDEO ............................................................................................................... 101
17.5 EXPORTAO, COMPRESSO E HOSPEDAGEM DE ARQUIVOS FLV ................................................ 102
17.6 OTIMIZAO DOS ARQUIVOS FLA PARA SADA SWF .................................................................. 102

Unidade 1
O Ambiente de trabalho do Flash CS5

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 CS5 o Flash no vem mais com dois
programas distintos. Possui apenas a verso Adobe
Flash CS5 Professional.

1.1 A t el a Ini ci al
Quando iniciamos o Adobe Flash CS5 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 (Adobe AIR): O Adobe
AIR a execuo entre vrios sistemas
operacionais, permite potencializar os recursos
locais da rea de trabalho e os dados para
garantir experincias mais pessoais e
envolventes.

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

- ActionScrit File: gera outro documento numa espcie de editor de texto dentro
do Flash para digitarmos scripts do Flash. Este arquivo possui a extenso . as.

- ActionScript Communication File: funciona da mesma forma que a opo
anterior, mas destinado a escrever scripts para o Flash Media Server (servidor para
aplicaes server) O arquivo gerado ter a extenso . asc.
- Flash Javascript File: permite criar scripts que controlem e auxiliem a utilizao
do programa. O arquivo ter a extenso J SFL.


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

1.2 O l ayout do Fl ash
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).

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:
Alguns painis possuem opes adicionais que podem ser chamadas
clicando no cone a sua direita no topo.


Para abrir um painel que no esteja na tela, clique no menu Window, e entre suas
opes escolha o painel desejado.
Tambm, possvel alterar a posio de um painel bastando arrast-lo pela sua barra
superior.
Para remover um painel do local em que se encontre encaixado, basta arrast-lo para
fora de sua rea, primeiro aproximando o cursor do topo do painel, em
seguida pressionando o boto do mouse e arrastando a janela para a rea desejada.

Para anex-lo a alguma rea, basta mov-lo e quando estiver em um local que possa
ser encaixado, a rea ser realada (em tom de azul).
Se solt-lo em uma rea que no ficou realada, o painel ficar flutuante na tela.
Se em algum momento desejarmos que todos os painis sejam escondidos, basta
clicarmos na tecla F4.

1.3 Personalizando a int erf ace
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. Por default temos a rea de trabalho Classic
possvel gravar as configuraes que tenhamos criado para escolh-la
posteriormente, escolhendo a opo New Workspace. Na janela digite um nome
para este layout de painis e clique em OK.

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

basta escolher a opo Manage Workspaces e definir as opes desejadas na janela.

1.4 Painel Propert ies
O Painel Properties fcil acesso aos atributos usados mais freqentemente da seleo
atual, no Palco ou na Linha do tempo. possvel fazer alteraes nos atributos do
objeto ou do documento, sem acessar menus ou painis que tambm controlam esses
atributos.

Dependendo da seleo atual, este painel exibe informaes e configuraes para o
documento, o texto, o smbolo, a forma, o bitmap, o vdeo, o grupo, o quadro ou a
ferramental atual. Quando dois ou mais tipos diferentes de objetos so selecionados,
o Painel Properties exibe o nmero total de objetos selecionados.
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 basta
clicarmos no boto Edit ao lado da opo Size.
- 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.
- Em Frame rate (por default o flash vem com 24) definimos a quantidade de
frames por segundo do documento.
- Em Ruler Units colocamos a medida das rguas.

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.

1.5 A TimeLine
A linha do tempo organiza e controla o contedo de um documento com o passar
do tempo em camadas e quadros. Como os filmes, os documentos Flash dividem
espaos de tempo em quadros. As camadas so como vrias faixas de filme
empilhadas uma em cima da outra, cada uma contendo uma imagem diferente, que
exibida no Palco.

Os principais componentes da Linha do tempo so camadas (layers), quadros
(frames) e o indicador de reproduo.

As camadas em um documento so listadas em uma coluna no lado esquerdo da
Linha do tempo. Os quadros contidos em cada camada so exibidos em uma linha
direita do nome da camada. O cabealho da Linha do tempo, na parte superior da
Linha do tempo, indica os nmeros dos quadros. O indicador de reproduo indica o
quadro atual exibido no Palco. Durante a reproduo de um documento, o indicador
de reproduo movido da esquerda para a direita em toda a Linha do tempo.
Sua velocidade medida pela quantidade de quadros que passa a cada segundo
(frames por segundo) e quanto maior a quantidade de quadros por segundo, mais
rpida a animao estar.

Para configurarmos essa velocidade, no painel de propriedades, basta alterarmos o
valor do Frame Rate (FPS).

Este painel contm as ferramentas necessrias para desenharmos, criarmos
objetos, definirmos cores no Flash e usar as ferramentas 3D.

Toda a ferramenta que possui uma pequena seta preta na parte inferior direita
possui mais ferramentas. Quando o boto do mouse mantido pressionado sobre
um cone, as outras ferramentas no grupo so exibidas em um menu pop-up.



Dependendo da ferramenta selecionada, talvez um conjunto de modificadores seja
exibido na rea de opes, na parte inferior do painel Tools.

Podemos, tambm, personalizar este painel clicando em Edit >Customize Tools
Panel.

1.6 Fla ou 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


Unidade 2
Modos de Desenhos e objetos grficos
No Flash, podemos criar vrios tipos de objetos grficos com diferentes modos
de desenho e ferramentas de desenho. Cada tipo tem suas prprias vantagens e
desvantagens. Entendendo os recursos dos diferentes tipos de objeto grfico,
tomaremos boas decises sobre quais tipos de objetos usar em nosso trabalho.
2.1 Modo Obj ect Drawing

Por padro (quando o modo Object Drawing
estiver desativado) as formas que criarmos
no sero consideradas como objetos
separados. Por exemplo, se desenharmos um crculo e sobrepor um crculo
menor sobre ele ( de cores diferentes) e depois selecionar o crculo
menor e mov-lo, a parte do segundo crculo sobreposta ao primeiro
removida.

Quando uma forma tem um traado e um preenchimento, estes so
considerados elementos grficos separados, que podem ser
selecionados e movidos de forma independente.
Quando as duas formas forem de cores iguais e estiverem com o modo
Object Drawing desativado as formas se unem.

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.

Um objeto criado por este modo diferenciado na tela por uma rea retangular
envolvendo-o.

Se a forma foi desenhada sem o modo Object Drawing ativado,
podemos mudar o mesmo clicando no menu Modify >Combine Objects >
Union.


2.2 Obj ect Primitive
Primitivas de objetos so formas grficas que permitem que ajustemos suas
caractersticas. Isso permite que controlemos precisamente o tamanho, o raio
do canto e outras propriedades da forma depois de cri-la sem ter que
desenh-la desde o comeo.

Os dois tipos de primitivas que esto disponveis so: Rectangle Primitive e
Oval Primitive.

Quando criamos retngulos ou formas ovais usando as ferramentas Primitve
Rectangle ou Primitive Oval, o Flash desenha as formas como Object
Drawing. Com essas ferramentas podemos especificar o raio do canto de
retngulos, o ngulo inicial, final e o raio interno de ovais usando os controles
do Painel Properties.

O painel properties retm os valores do ltimo objeto que voc
editamos. Por exemplo, se voc modificar um retngulo e depois desenhar
um segundo retngulo.

2.3 Formas rectagule e Oval
Com essas ferramentas Oval e Rectangle podemos criar formas geomtricas
bsicas e aplicar traados, preenchimentos e especificar cantos arredondados.
Para as estas ferramentas, arraste e mantenha a tecla Shift pressionada para
restringir as formas em crculos e quadrados.

Para determinar um tamanho especfico destas formas, selecione a ferramenta
Oval ou Rectangle e pressione a tecla Alt. Em seguida, clique no Palco para
exibir a caixa de Oval Settings.
.


2.4 Forma Pol ist ar
Selecione a ferramenta PolyStar clicando e segurando o boto do mouse na
ferramenta Rectangle e selecionando no menu pop-up que aparece.

No painel Properties clique no boto Options e na caixa de dilogo Tools Settings,
escolha a opo star.

Clicando no palco e arrastando j teremos uma estrela.

2.5 Desenhando com a ferramenta Penci l
Para desenhar linhas e formas, use a ferramenta Pencil (lpis) quase da mesma
maneira em que usa um lpis de verdade para desenhar. Para aplicar
suavizao ou correo s linhas e formas enquanto desenha, selecione
um modo desenho para a mesma.
- Straighten: para desenhar linhas retas e converter aproximaes de
tringulos, ovais, crculos, retngulos e quadrados nessas formas geomtricas
comuns.
- Smooth: para desenhar linhas curvas
suaves.
- Ink: para desenhar linhas a mo livre sem aplicar modificaes

2.6 Pint ando com o Brush
A ferramenta Brush desenha traados semelhantes a pinceladas. Ela cria
efeitos especiais, inclusive caligrficos.

Selecione a forma e o tamanho do pincel usando
modificadores da ferramenta Brush, na parte
inferior do painel Tools.

2.7 A f erramenta Pen


Para desenhar caminhos precisos como linhas retas ou curvas suaves e
fluidas, usamos a ferramenta Pen. Clicamos para criar pontos nos segmentos
de linha reta e arrastamos para criar pontos nos segmentos de linha curva.

O primeiro segmento desenhado no fica visvel at que cliquemos num
segundo ponto de ancoragem (a menos que tenhamos especificado Show pen
preview na categoria Drawing em Preferences).

O caminho mais simples que podemos desenhar com a ferramenta Pen uma
linha reta, feita com a seleo da ferramenta Caneta para criar dois pontos
de ancoragem. Se continuarmos clicando, criaremos um caminho composto de
segmentos de linha reta conectados por pontos de canto.
Para fechar o caminho, posicione a ferramenta Pen sobre o primeiro ponto de
ancoragem (vazio). Um pequeno crculo aparecer ao lado do ponteiro da
ferramenta Pen.
As curvas so mais fceis de serem editadas e seu sistema pode exibi-las e
imprimi-las mais rpido se elas forem desenhadas usando o menor nmero de
pontos de ancoragem possvel. O uso de muitos pontos tambm pode gerar
salincias indesejadas em uma curva.
Para desenhar uma curva, siga os passos:
- Posicione a ferramenta Pen no incio da curva e mantenha o boto do
mouse pressionado.

- O primeiro ponto de ancoragem aparece e o ponteiro da ferramenta Pen
muda para uma seta.
- Arraste para definir a inclinao do segmento curvado que estiver
criando e, em seguida, solte o boto do mouse.

Para adicionarmos um ponto de ancoragem, posicionamos o
ponteiro sobre um segmento do demarcador e clicamos em cima
da curva.

Para excluirmos um ponto de ancoragem, posicionamos o ponteiro sobre um
ponto de ancoragem com a ferramenta Delete Anchor Point

2.8 Aj ust ando e remodelando os segmentos
Para ajustarmos um segmento reto ou curvo, selecione a ferramenta

Subselection (seta brabca) e selecione o segmento. Use-a, tambm, para
arrastar um ponto de ancoragem do segmento para uma posio nova.
Ao selecionarmos 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.

Para ajustar a forma da curva nos dois lados do ponto de ancoragem, arraste o
ponto de ancoragem ou a ala.
Para remodelar uma linha ou contorno da forma, arraste qualquer ponto da
linha usando a ferramenta Selection (seta preta). O ponteiro muda para indicar
o tipo de remodelagem que pode executar na linha ou no preenchimento.

O Flash ajusta a curva do segmento de linha para acomodar a nova posio do
ponto movido.
Se o ponto reposicionado for um ponto final, a linha ser alongada ou
encurtada. Se o ponto reposicionado um canto, os segmentos de linha que
formam o canto permanecem retos enquanto se tornam mais longos ou mais
curtos.

Para modificar os pontos usamos a ferramenta Subselect . Para isso devemos
selecionar a linha com a ferramenta e clicar sobre os pontos que desejamos alterar.

2.9 Transformando Obj etos
Podemos realizar transformaes individuais ou combinar vrias
transformaes, tais como mover, girar, dimensionar, inclinar e distorcer,
usando a ferramenta Free Transform.
Siga os procedimentos abaixo:
- Selecione um objeto grfico, grupo, ocorrncia ou bloco de texto no Palco.


- Clique na ferramenta Free Transform.
Mover o ponteiro sobre e ao redor da seleo faz com que o ponteiro mude
para indicar qual funo de transformao est disponvel.
- Para transformar a seleo, arraste as alas.

- Para mover a seleo, posicione o ponteiro sobre o objeto na caixa delimitadora e
arraste o objeto para uma nova posio. No arraste o ponto de transformao.
- Para definir o centro de rotao ou dimensionamento, arraste o ponto de
transformao para um novo local.
- Para girar a seleo, posicione o ponteiro perto da parte de fora da ala do canto e
arraste. A seleo gira em torno do ponto de transformao. Arraste com a tecla Shift
pressionada para girar em incrementos de 45.
- Para girar ao redor do canto oposto, arraste com a tecla Alt pressionada.
- Arraste com a tecla Shift pressionada para redimensionar proporcionalmente.
- Para dimensionar somente na respectiva direo, arraste uma ala do canto ou
uma ala lateral horizontal ou verticalmente.
- Para inclinar a seleo, posicione o ponteiro no contorno entre as alas de
transformao e arraste.
- Para finalizar a transformao, clique fora do item selecionado.

Pode ser usado, tambm, o modificador de Envelope que permite uma
deformao nos objetos. Um envelope uma caixa delimitadora que contm um ou
mais objetos. As alteraes feitas em uma forma de envelope afetam a forma dos
objetos no envelope. Editamos a forma de um envelope ajustando seus pontos e alas
tangentes. Para acion- lo clique me Modify > Transform >Envelope

2.10 O painel Ali gn

O painel Align permite que alinhemos os objetos selecionados ao longo do eixo
horizontal ou vertical. Podemos alinhar os objetos verticalmente ao longo da borda
direita, do centro ou da borda esquerda dos objetos selecionados ou horizontalmente
ao longo da borda superior, do centro ou da borda inferior dos objetos selecionados.
Quando a opo To stage estiver selecionada indica que todas as modificaes sero
aplicadas em relao Stage.
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. Este o modo
Snap Align.
Para ativar este ajuste, escolha a opo de menu: View >Snapping >Snap Align
(por padro esta opo j vem habilitada)

2.11 O painel Ali gn
Modelos de cores descreve as cores que vemos e com que trabalhamos em grficos
digitais. Cada modelo de cor, como RGB, HSB ou CMYK, representa um mtodo
diferente para descrever e classificar cor. Os modelos de cores usam valores
numricos para representar o espectro visvel da cor. O espao de cor uma variante
de um modelo de cor e tem uma gama (intervalo) especfica de cores. Por exemplo,
dentro do modelo de cores RGB, h vrios espaos de cores: Adobe RGB,
sRGB e AppleRGB
Embora cada um desses espaos de cor defina a cor usando os mesmos trs
eixos (R, G e B), as respectivas gamas so diferentes.
Como cada dispositivo tem o seu prprio espao de cores, cada um pode
reproduzir cores apenas na sua gama.
Ao criarmos cores para uso em documentos Flash, devemos lembrar que,
embora seja impossvel coincidir com exatido todas as cores em dispositivos
diferentes, podemos obter bons resultados considerando os recursos de
exibio grfica dos dispositivos em uso por nosso pblico-alvo.

O painel Color permite que modifiquemos a paleta de cores de um FLA e alteremos
as cores de traados e preenchimentos.
- Para aplicar a cor na arte existente, selecione um objeto ou objetos do Palco e
selecione Window >Color.
- Para selecionar a tela do modo cores, selecione RGB (configurao padro) ou
HSB no menu do painel no canto superior direito.
- Clique no cone Stroke ou Fill para especificar o atributo a ser modificado.
Um gradiente um preenchimento multicolorido no qual uma cor
gradualmente muda para outra cor. O Flash permite que apliquemos at 15 transies
de cor em um gradiente. A criao de gradiente uma boa maneira de criar uma
graduao suave de cores em um ou mais objetos.
Para aplicar um preenchimento gradiente em arte existente, selecione um objeto ou
objetos do Palco:
- Se o painel Cor no estiver visvel, selecione Window >Color.
- Selecione o tipo de gradiente no menu Style:

Linear: cria um gradiente que matize do ponto inicial ao final numa linha reta.
Radial: produz um gradiente que se mistura para fora em um caminho circular a partir
de um ponto focal central.
Depois de aplicado o gradiente podemos modific-lo selecionando a ferramenta
Gradient Transform.
Pressione Shift para restringir a direo do preenchimento gradiente linear para
mltiplos de 45

2.12 Laboratrio: Ini ci ando a mont agem do Hot Sit e
1- Crie um arquivo de 500x500 pixels.

2- Desenhe um retngulo com preenchimento de gradiente em tons de cinza,
deixando as bordas um pouco arrendondadas.

3- Posicione esta forma no centro do palco.

4- Mude a cor de fundo do palco a seu gosto.

5- Salve este documento como index.fla


Unidade 3
Usando Smbolos e Ani mando

Os elementos desenhados no Flash com as suas ferramentas de desenho
correspondem a formas vetoriais. Esses desenhos no suportam determinados
tipos de animao que o Flash pode realizar, bem como no permitem diversas
aplicaes. Para tornar o elemento compatvel com as aplicaes, necessrio
convert-lo em smbolo.
Ao transformarmos um desenho ou objeto em um smbolo, aplicamos um
comportamento a esse objeto, indicando que agora ele deve receber aes e
comportar-se de forma especfica.
Todo smbolo criado armazenado na Library (Biblioteca) e pode ser reutilizado
diversas vezes, o que no aumenta de forma significativa o tamanho final do filme.

3.1 Tipos de Smbolos

Cada smbolo possui uma Linha de tempo e um Palco exclusivos e completos, com
camadas. Pode adicionar quadros, quadros-chave e camadas Linha de tempo de um
smbolo, da mesma forma que na Linha de tempo da cena principal. Temos os
seguintes smbolos no Flash:
- Grficos (Graphic): usamos estes smbolos grficos para imagens estticas e para
criar partes reutilizveis de animao vinculadas Linha de tempo principal. Os
smbolos grficos operam em sincronizao com a Linha de tempo principal. Em uma
sequncia de animao de smbolo grfico, os controles e sons interativos no
funcionam. Os smbolos grficos adicionam menos tamanho ao arquivo FLA do que
botes ou clipes de filme, pois no possuem Linha de tempo.
- Botes (Button): usamos estes smbolos para criar botes interativos que
respondam a cliques do mouse, rolagens ou outras aes.
- Clipe de Filme (Movie Clip): com estes smbolos podemos criar partes
reutilizveis de animao. Os clipes de filme tm a sua prpria Linha de tempo com
vrios quadros, independente da Linha de tempo principal: imagine-os como
aninhados dentro de uma Linha de tempo principal que pode conter controles e sons
interativos e at outras ocorrncias de clipe de filme. Tambm podemos criar botes
animados, colocando ocorrncias de clipe de filme dentro da Linha de tempo de um
smbolo de boto.
Para criar um smbolo siga os passos:
1- Crie uma forma semelhante a uma lua no palco

2- Com essa forma selecionada, clique no menu:

Modify >Convert to Symbol ou pressione a tecla F8.

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

3.2 Bibliot eca

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
7- Desenhe esta forma no palco do Flash e transforme-a em um smbolo do tipo
Movie Clip.
Observe que nossos dois smbolos criados esto na biblioteca.
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.

3.3 Padres com a Ferrament a spray brush

A ferramenta Spray Brush age como um borrifador de partculas, permitindo que
pincelemos um padro de formas no Palco de uma nica vez. Por padro, o Pincel
de borrifar emite uma borrifada de partculas de pontos, usando a cor de
preenchimento selecionada no momento. No entanto, podemos usar o Pincel de
borrifar para aplicar clipe de filme ou smbolo grfico como um padro.
1- Crie um Movie Clipe atravs do menu Insert >New Symbol.
2- Desenhe uma estrela e crie uma interpolao de movimento para a mesma, de
forma que ela pisque.
3- Retorne a Scene 1
4- Selecione a ferramenta Spray Brush.
5- No Inspetor de propriedades da ferramenta clique em Edit da opo Symbol para
selecionar um smbolo personalizado na Biblioteca. Selecione a estrela.
6- Marque as opes do painel Properties semelhante a imagem.

Podemos usar qualquer clipe de filme ou smbolo grfico na Biblioteca como
uma partcula. Essas partculas baseadas em smbolos oferecem um grande controle
criativo sobre a arte criada no Flash.e deseja que o
padro seja exibido.

8- Teste a animao


3.4 Desenhando com a Deco Tool

As ferramentas de Desenho decorativo permitem que transformemos as formas
grficas em padres geomtricos complexos. As ferramentas de Desenho decorativo
usam clculos algortmicos conhecidos como modelagem procedural. Esses clculos
so aplicados a um clipe de filme ou smbolo grfico que est na biblioteca.
O efeito Vine Fill permite que preenchamos o Palco, um smbolo ou uma regio
fechada com um padro de videira. Podemos substituir a sua prpria arte pelas folhas
e flores, selecionando smbolos da biblioteca. O padro resultante fica contido em
um clipe de filme que contm os smbolos que formam o padro.
1- Crie arquivo novo
2- Selecione a ferramenta Deco.
3- No painel Properties deixe marcado como na imagem.

4- Clique no palco com a ferramenta Deco.

5- Teste a animao.

Branch angle: especifica o ngulo do padro de ramificao.
Patern scale: o dimensionamento de um objeto o reduz ou o amplia
horizontalmente (ao longo do eixo x) e verticalmente (ao longo do eixo y).
Segment Lenght: especifica a extenso dos segmentos entre os ns da folha e da flor.
Animate Pattern: especifica que cada iterao do efeito seja desenhada em um
novo quadro na linha de tempo. Esta opo cria uma seqncia animada quadro a
quadro do padro de flor conforme ele desenhado
Frame Step: especifica a quantidade de quadros a serem interpolados por segundo
do efeito que est sendo desenhado.
Outros Elementos Grficos



3.5 Trabal hando com li nhas de t empo

Como os filmes, os documentos AdobeFlashCS5 Professional dividem espaos
de tempo em quadros. Na Linha de tempo, trabalhamos com esses quadros para
organizar e controlar o contedo do documento.
O quadro-chave um quadro em que aparece uma nova ocorrncia do smbolo na
Linha do tempo pela primeira vez. Podemos adicionar um quadro-chave em
branco Linha do tempo como alocador de espao dos smbolos que planejamos
adicionar posteriormente ou para deixar explicitamente o quadro em branco.
O quadro-chave de propriedade aquele em que definimos uma mudana nas
propriedades de um objeto para uma animao. O Flash pode interpolar ou preencher
automaticamente os valores de propriedade entre os quadros-chave de propriedade a
fim de produzir animaes fluentes. Como os quadros-chave de propriedade
podemos produzir uma animao sem desenhar cada quadro individualmente, eles
facilitam a criao da animao.
Uma srie de quadros contendo animao interpolada chamada de interpolao de
movimento.
Um quadro interpolado qualquer quadro que faa parte de uma interpolao de
movimento.
Um quadro esttico qualquer quadro que no faa parte de uma interpolao de
movimento.
Organizamos quadros-chave e quadros-chave de propriedade na Linha do tempo
para controlar a sequncia de eventos no seu documento e na animao
correspondente.

8- Clique no primeiro quadro da layer1 e escolha a opo

Create Motion Tween. Automaticamente o Flash cria 24 quadros na linha de tempo.
9- Com a cabea leitora do frame 24, no painel Properties opo Color Effect e
escolha Alpha no menu Style. Deixe o Alpha em 0%.
10- Para ver a animao clique em CTRL +Enter. Podemos observar:

Uma extenso de quadros com um plano de fundo azul indica uma interpolao de
movimento.
Um ponto preto no primeiro quadro da extenso indica que a extenso interpolada
tem um objeto de destino atribudo a ele. Losangos pretos indicam o ltimo quadro e
todos os outros quadros-chave de propriedade.

11- Salve este arquivo na pasta da lio como ceu.fla

3.6 Animao Int erpolada

As interpolaes so aplicadas s ocorrncias de smbolos e campos de texto.
- Desenhe uma forma no palco.
- Na layer 1 selecione o quadro e clique com o boto direito em Create Motion Tween
Se o objeto no for do tipo objeto interpolvel uma caixa de dilogo ser exibida.
A caixa de dilogo permite converter a seleo em um smbolo movie clipe
- Converta a seleo em um movie clipe em Ok.

- Para adicionar movimento interpolao clique e arraste o objeto no Palco para
uma nova posio.

Aparece um caminho de movimento no Palco, mostrando o caminho da posio no
primeiro quadro da extenso de interpolao at a nova posio.
- Clique e arraste o final da animao para
aumentar o seu tempo de deslocamento.


- Posicione a cabea leitora na linha de tempo no quadro 25, por exemplo, e
arraste o smbolo no palco.

Para modificar a trajetria do movimento podemos selecionar a ferramenta Selection
e aproximar da trajetria para fazermos um movimento curvo, por exemplo.

Toda modificao da animao baseada no objeto, basta posicionarmos a
cabea leitora no tempo que queremos que ocorra a modificao e deslocar o objeto
no palco.

3.7 Usando o motion editor

O painel Motion Editor permite exibir todas as propriedades de interpolao e os
respectivos quadros-chave de propriedade. Ele tambm oferece ferramentas para
adicionar preciso e detalhes a interpolaes.
- Continuando na mesma animao que estamos trabalhando, selecione o objeto no
palco e clique na opo Motion Editor na aba ao lado do painel Timeline.


Com o Motion Editor podemos aplicar atenuao a qualquer curva de propriedade.
A aplicao de atenuao no Editor de movimento permite criar certos tipos de
efeitos complexos de animao sem criar caminhos complexos de movimento.
Algumas propriedades tm valores mnimos ou mximos que no podem
ser excedidos, como Transparncia Alpha (0-100%).
- Na opo Transformation e com a cabea leitora no incio do grfico, selecione
Scale X (com a opo Link habilitada) diminuindo o valor e assim diminuindo o
tamanho do objeto, tambm.
- Posicione a cabea leitora entre os quadros
15 e 20 no grfico a marque 100% para a opo Scale X, que far proporcional
ao Scale Y, tambm.

Para ajustar quais propriedades aparecem no Editor de movimento, clique no
tringulo perto de uma categoria de propriedade para expandir ou reduzir a categoria.
Pressionando a tecla CTRL definimos um ponto no grfico.

Pressionando a tecla Alt deixamos este ponto mais suave.

- Teste a animao e veja que a mesma fica mais complexa e
suave com o Motion Editor

3.8 Interpol ao de Formas

Na interpolao de forma, desenhamos uma forma vetorial em um quadro
especfico na Linha do tempo e alteramos essa forma ou desenha outra forma em
outro quadro especfico. O Flash ento interpola as formas intermedirias para os
quadros intermedirios, criando a animao de uma forma se transformando em outra.
As etapas a seguir mostram como criar uma interpolao de formas do quadro 1
ao quadro 30 da Linha do tempo.
- No quadro 1, desenhe um quadrado com a ferramenta Rectangle.
- Selecione o quadro 30 da mesma camada e adicione um quadro-chave em
branco, escolhendo Insert >Timeline >Blank Kreyframe, ou pressionando F7.
- No Palco, desenhe um crculo com a ferramenta Oval no quadro 30.
- Na Linha do tempo, selecione um dos quadros entre os dois quadros-chave na
camada que contm as duas formas.

- Com o boto direito do mouse escolha Create
Motion Tween.

O Flash interpola as formas de todos os quadros entre os dois quadros-chave.
- Visualize a animao teclando CTRL +Enter.

3.9 Shape hint s

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.

- Na mesma animao que acabamos de fazer, 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.
- Um crculo vermelho aparece com a letra a em seu centro. Arraste-o para o
canto superior esquerdo da forma.
- 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.
- Repita estes passos para inserir mais Shape Hints.
Importante: Como as Shape Hints utilizam como seus identificadores letras,
teremos no mximo 26 Shape Hints. Transio entre Textos

3.10 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.
- Para criarmos uma animao quadro a quadro, vamos desenhar uma elipse e inserir
um Keyframe na posio 2 (a tecla de atalho o F6).
- 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.

- Repita estes procedimentos at chegar ao quadro 10 da
Timeline, sempre primeiro inserindo o quadro e em
seguida deslocando um pouco para baixo a forma.
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.


3.11 Movimentando objetos no espao 3d

Podemos mover movie clipes no espao 3D com a ferramenta 3D Translation e
3D Rotation.
- Crie uma forma no palco do Flash.
- Crie uma animao Motion Tween.
- Selecione a ferramenta 3D Translation.
- Para mover o objeto arrastando-o com a ferramenta, mova o ponteiro sobre os
controles do eixo x-, y- ou z-. O ponteiro muda de aparncia quando passa sobre um
dos controles.
Ao selecionarmos vrios movie clipes, podemos mover um dos objetos
selecionados com a ferramenta Translao 3D e os outros se movero junto com ele.

Podemos girar os movie clipes no espao 3D com a ferramenta 3D Rotation . Um
controle de rotao 3D aparece na parte superior dos objetos selecionados no Palco. O
controle X vermelho, o controle Y verde e o controle Z azul.
- Coloque o ponteiro sobre um dos quatro controles do eixo de rotao.
O ponteiro muda de aparncia quando passa sobre um dos quatro controles.
- Arraste um dos controles de eixo para girar em torno desse eixo ou o controle de
rotao livre (crculo laranja externo) para girar X e Y simultaneamente.

3.12 Painel motion Preset s

Neste painel salvamos as interpolaes de
movimento pr-configuradas que podemos aplicar
a um objeto no Palco. Bastando selecionar o objeto
e clicar no boto Aplicar, no painel Motion Presets.
- Crie uma animao com interpolao de
movimento no palco.
- Habilite o painel Motion Presets atravs do menu

Window.
- Selecione o objeto que contm a interpolao.
- No painel motion presets clique no cone Save selection as preset.
- Feche este arquivo e crie um novo.
- Desenhe outra forma no palco
- Com a forma selecionada clique no boto Apply do painel motion presets.
O movimento aplicado de forma a comear na posio atual do movie clipe no
Palco. Se a predefinio tiver um caminho de movimento associado a ele, o caminho
aparece no Palco.
Para aplicar a predefinio de forma que o respectivo movimento termine na
posio atual do objeto no Palco, pressione a tecla Shift e clique no boto Aplicar


Unidade 4
Trabalhando com Camadas e Textos

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

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

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

correspondentes.
- Delete Layer: remove uma ou mais camadas selecionadas.
- Show/Hide All Layers: serve para determinar se as camadas estaro visveis ou
no no documento. Ao clicar no olho as camadas ficaro ocultas e ao clicar
novamente, sero exibidas. Podemos escolher apenas uma camada desejada,
bastando clicar na bolinha correspondente da camada.
- Lock/Unlock All Layers: cria uma trava na(s) camada(s), impedindo que os
seus objetos sejam modificados (movidos, deletados, selecionados).
- Show All Layers as Outlines: possibilita esconder a visualizao dos
preenchimentos e contornos do objeto, deixando-os visveis apenas atravs de uma
fina borda colorida. uma alternativa a opo de ocultar completamente a camada,
uma vez que com essa opo no perdemos a noo do local e tamanho do objeto.
Ao selecionar uma camada, observe a presena de um pequeno lpis, indicando que
a camada ativa a ser editada.

Ao bloquear a camada, um risco vermelho aparece sobre o lpis,
determinando que aquela camada no pode ser editada por encontrar-se 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.

Para alterar a ordem das camadas, arraste uma ou mais camadas ou pastas na
Linha do tempo at a posio desejada.
4.1 Distribuindo el ementos em uma camada

Quando temos vrios objetos no palco e queremos que cada animao acontea em
um determinado tempo ou ao mesmo tempo organizamos cada objeto em uma
camada. Por exemplo, textos em uma e forma em outra
Se estes objetos estiverem na mesma camada ficamos restritos na animao que
cada um pode ter

Tendo trs formas em uma mesma camada, podemos selecionar todos e clicando com
o boto direito do mouse selecionar a opo Distribute to layers (Modify >Timeline
>Distribute to Layers).
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.

4.2 Camada Mot ion 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- Selecione a camada e escolha a opo Add Classic Motion
Guide.

3- Crie uma forma geomtrica no palco do Flash e transforme-a em um
smbolo grfico, deixando-o na camada Layer 1.
4- Agora selecione a camada Guide: Layer 1 e faa uma traado com a

ferramenta Pencil
5- Estenda as duas layers at o quadro 30.

Aps o caminho da Motion Guide estar desenhado para o objeto realmente seguir essa
trajetria, necessrio que tanto no primeiro quanto no ltimo quadro da animao o
ponto central do objeto deve estar conectado a trajetria.
6- Posicione o ponto central do objeto na trajetria tendo no quadro e como no 30.
7- Clique entre os quadros na layer 1 e selecione Create Classic Tween.
8- Teste e veja como ficou sua animao.
As camadas de guias no so exportadas nem exibidas em um arquivo SWF.
Qualquer camada pode ser uma camada de guia. As camadas de guia so indicadas
por um cone de guia, esquerda do nome da camada.

4.3 Ferramenta Text Tool

Essa ferramenta utilizada para inserirmos textos no Flash.
Existem duas opes para esta ferramenta: podemos clicar na rea que o bloco de
texto deve iniciar e depois digitar ou podemos clicar na rea em que o bloco de texto
deve iniciar e depois, mantendo o boto do mouse pressionado, arrastar at a rea
final do bloco, criando uma rea predeterminada que o texto deve utilizar.

Clicando na Text Tool podemos configurar o texto utilizando as configuraes
disponveis no painel Properties

Classic Text
Antigamente, tnhamos trs opes na hora de criar um campo de texto, Texto
esttico, Texto dinmico e Texto input. Agora no CS5, essas trs opes continuam
disponveis quando selecionamos a opo Classic Text, porem sem as novas
funcionalidades.
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 opes que podemos estar configurando para nosso texto
Quando criamos um texto, podemos utilizar diferentes mtodos para renderiz-
lo, escolhendo na opo Character em Anti-alias:
- 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.
Quando escrevemos um texto no Flash exibido um identificador no canto do campo
de texto para identificar o tipo de campo de texto:
Para texto horizontal esttico que estende, um identificador redondo

exibido no canto superior direito do campo de texto.

Para texto horizontal esttico com largura fixa, um identificador
quadrado exibido no canto superior direito do campo de texto

Para aumentar a caixa de texto, selecione-a e clique e arraste
nas suas extremidades

4.4 Transi o entre t extos

Podemos usar a animao Shape para fazer a transio entre textos.
Para termos uma animao Shape, precisamos ter uma forma desenhada na tela ou
um texto (tipo static) que no seja editvel.
1- Crie um novo documento.
2- Escreva: Adobe Flash com a opo de texto esttico.

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

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 quadro vazio (Blank Keyframe) no quadro 30 e digite o texto:
Nova verso.
6- Repita os mesmos procedimentos adotados no primeiro texto.
7- Selecione qualquer quadro entre o primeiro e o penltimo e aplique uma

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

TLF Text
Essa opo de texto inclui uma serie funcionalidades adicionais de personalizao.

Conectando campos de Texto

Selecione a ferramenta texto e crie no palco um campo de texto do tipo TLF.
Digite a palavra Afamdia Prow na caixa de texto.

Diminua o tamanho da caixa de texto de maneira que uma parte da palavra Alfamdia
Prow seja cortada.

Repare que aparece no canto direito da caixa de texto uma marcao vermelha. ao
clicar em uma dessas caixas o cursor do mouse muda indicando que se clicar no
palco um novo campo de texto ir ser criado e ele estar ligado a um outro campo.

OBS: Se j existir um campo de texto no palco e voc clicar sobre ele os dois

campos ficam ligados.

Continer e Fluxo
A seo Continer e fluxo do inspetor Propriedade do texto TLF controla as opes
que afetam todo o continer de texto. Essas propriedades incluem:

Comportamento: Esta opo controla como o continer se expande medida que a
quantidade de texto aumenta.

N mx. de caract.: O nmero mximo de caracteres permitido no continer de
texto. Ativar somente para contineres de texto cujo tipo esteja definido como
Editvel. O valor mximo 65535.

Alinhamento Especifica o alinhamento do texto no continer.

Contagem de colunas Especifica o nmero de colunas de texto no continer. Esta
propriedade ativada somente para contineres de texto de rea. O valor padro 1.
O valor mximo 50.

Medianizes de coluna Especifica o espaamento (ou medianiz) entre cada coluna no
continer selecionado. O valor padro 20. O valor mximo 1000. A unidade de
medida definida de acordo com as Unidades da rgua definidas nas Configuraes
do documento.

Preenchimento Especifica a largura das margens entre o texto e o continer
selecionado. O preenchimento pode ser definido para todas as quatro margens
.
Cor da borda A cor do traado ao redor do exterior do continer. O padro sem
borda.

Largura da borda A largura do traado ao redor do exterior do continer.

Ativada somente quando uma cor de borda selecionada. O valor mximo 200.
Cor do plano de fundo A cor do plano de fundo por trs do texto. O padro sem
cor.

4.5 Importando mdi as

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 Stage e selecione a
logo_alfa_sports.png que esta na pasta imagens.

3- Posicione a imagem no layout do nosso Hotsite, deixando-a em uma camada
separada.
Nossa imagem j esta na Biblioteca.
4- Para melhorar a qualidade de nossa imagem, selecione-a na Biblioteca e clique
no boto Properties na parte inferior deste painel

5- Na janela Bitmap Properties marque a opo Allow smoothing e escola Lossless
na opo Compression

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.
Com estas alteraes a qualidade de nosso arquivo j esta melhor.
O Flash pode importar imagens estticas em diversos formatos, mas geralmente
usado o formato nativo do Photoshop, o PSD, para importar imagens estticas do
Photoshop para o Flash.
Ao importar um arquivo PSD, o Flash capaz de preservar muitos dos atributos
aplicados no Photoshop, fornecendo opes para manter a fidelidade visual da
imagem e para modific-la.
O Flash funciona internamente com as cores dos espaos de cores RGB ou HSB
(matiz, saturao e brilho). Embora o Flash possa converter imagens CMYK para
RGB, aconselhvel criar arte-final no Photoshop em RGB.
O Flash no pode importar Objetos Smart do Photoshop como objetos editveis. Para
preservar os atributos visuais dos Objetos Smart, eles so rasterizados e importados
para o Flash como bitmaps.
6- Selecione o arquivo tenis.psd que esta na pasta imagens.


4.6 Laboratrio: Break a Part 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 no boto Edit ao lado da opo Size
no painel Properties e marque a opo: Contents.
5- Com a imagem selecionada escolha: Modify >Break Apart (CTRL +B)
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.
9- Agora aplique uma animao Shape e veja o resultado



Unidade 5
Mscaras na Ani mao

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

1- Crie um novo documento e renomeie a layer inicial para mascarado.
2- Digite no palco o texto: Adobe Flash
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

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
6- Na layer mascara pea um Create Motion Tween.
7- Posicione a cabea leitora no quadro final da layer mascara e desloque a forma
para o lado direito do texto.
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.
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
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

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.

5.2 Efeitos de 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:
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.
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, usando estes recursos, se necessrio.
2- Depois de pronta a forma, d um duplo clique na forma para entrar na sua edio.

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
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.
8- Na camada animacao desenhe um retngulo e converta-o para um smbolo
grfico, posicionando-o abaixo da forma.
9- Na layer animacao pea um Create Motion Twees e prolongue as outras
layers, tambm.

10- Posicione a cabea leitora no quadro final 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.

11- Clique com o boto direito do mouse sobre a camada objeto e escolha a
opo: Mask. Agora basta testarmos a animao.

5.3 Mscara arrastvel

Com apenas dois simples comandos teremos uma mscara arrastvel.
1- Crie um novo documento.
2- Insira no palco do Flash a imagem: imagem.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.

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.
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 arrastvel.
Teste seu filme e veja o efeito.
5.4 Mscara com gradient e
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: Cache as bitmap.
6- No painel Properties na opo Display marque a opo Cache as bitmap.
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.

7- Crie outra camada e renomei-a como mascara. Nesta nova camada desenhe
um crculo.
8- Com a forma selecionada abra o painel Color (Window >Color).

9- 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.
10- Ajuste a ltima cor do gradiente (lado direito) para Alpha 0.
Com isso a forma ser formada por um gradiente que se inicia na cor slida, e em
seu final ser transparente.
11- Converta esta forma em um Movie Clip e d o nome de instncia para ela de
bola.
12- Crie um Motion Tween para a layer que esta a bola e aumenta a mesma no
quadro final.
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 no Painel Properties na opo Display o
item Cache as Bitmap.
s testar.


5.5 Criando animaes com Fi ltros

Os filtros (efeitos grficos) do Flash permitem adicionar efeitos visuais
interessantes ao texto, aos botes e clipes de filme. Um recurso exclusivo do Flash
que podemos animar os filtros aplicados usando interpolaes de movimento.
2- Importe para o palco o arquivo xicara.png que esta na pasta imagens.
3- Transforme esta imagem em um smbolo Movie Clip.
4- Crie uma interpolao de movimento marcando a opo Create Motion Tween.
5- Deixe a cabea leitora no primeiro quadro da camada e selecione o smbolo no
palco.
No painel Properties na opo Filters, clique no boto Add filter na parte inferior e
escolha o Filtro Blur.

6- Clique para desfocar a imagem.
- 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.
- Quality: definimos a qualidade do efeito entre os valores: baixa (Low), mdia
(Medium) e alta (High).
7- Posicione a cabea leitora no quadro final da layer e ajuste o filtro Blur para 0.
8- Teste a animao.

Existem outros filtros que podem ser aplicados a textos, tambm.


5.6 Laboratrio: Textos como Mscaras

- Crie um novo arquivo.
- Escreva um texto no palco no Flash.
- Crie um nova camada e renomei-a para texto mask.
- Crie outra camada e nomeia para animacao.
- Desenhe uma forma retangular na camada animacao e transforme-a em um
smbolo grfico.
- Pea uma interpolao de movimento na camada animacao.
- Faa a forma passar sobre o texto entre seus quadros inicial e final.
- Duplique o texto para a camada texto mask.
- Pea a propriedade mask para a camada texto mask.

Ao final nossas camadas estaro distribudas como na imagem.
- Teste a animao e veja o efeito.
5.7 Laboratrio: Movimento com mscara

- Crie um novo arquivo.
- Desenhe duas formas separadas no palco como shapes.
- Importe para o palco umas das imagens que esta na pasta imagens.
- Transforme esta imagem em um smbolo movie clip.
- Pea uma interpolao de movimento na camada.
- No quadro final faa a imagem se movimentar sobre as formas criadas, fazendo-
a passar entre as formas.
- Estenda a camada que contm as formas, tambm.
- Posicione a camada que contm as formas acima da camada que esta animada.
- Pea a propiedade mask para a camada das formas.
- Teste a animao e veja o efeito.



Unidade 6
Cinemtica Inversa (IK)

6.1 Cinemtica Inversa (IK)
Cinemtica inversa (IK) um mtodo de animao de um objeto ou de um conjunto
de objetos em relao uns aos outros, usando uma estrutura articulada de bones. Os
bones permitem que ocorrncias de smbolo e objetos Shape se movam de forma
complexa e natural com o mnimo de esforo de desenvolvimento.
Por exemplo, a cinemtica inversa permite criar animao de personagens, como
braos, pernas e expresses faciais com muito mais facilidade.
Uma cadeia de bones chamada de armadura. Os bones em uma armadura esto
conectados uns aos outros em uma hierarquia pai-filho. A armadura pode ser linear
ou ramificada. As ramificaes de uma armadura originadas no mesmo bone so
chamadas de irmos. O ponto em que um bone se conecta a outro chamado de
juno.
6.2 Adicionando bones a smbolos

Podemos adicionar bones IK s ocorrncias de clipe de filme, grfico e boto.
Para usarmos texto, primeiro convertamos o mesmo em smbolo.
Tambm possvel separar o texto (Modify >Break) em formas distintas e usar
bones com as formas individuais.

1- Crie um boneco usando formas geomtricas ou desenhando com
uma das ferramentas.
2- Transforme cada parte do boneco em um smbolo Movie Clip.
3- No painel Ferramentas, selecione a ferramenta Bone.
4- Com a ferramenta Bone, clique no movie clip que deve ser a raiz ou
a parte superior da armadura. Em seguida arraste-a para uma
ocorrncia de smbolo separada para vincul-la ocorrncia de raiz.

Enquanto arrastamos, um bone exibido. Quando liberamos o mouse, um bone

slido exibido entre as duas ocorrncias de smbolo. Cada bone tem uma parte
superior, uma extremidade arredondada e uma parte inferior, a extremidade da ponta.

5- Para adicionar outro bone, arraste da parte inferior do primeiro
bone para a prxima ocorrncia de smbolo que desejar adicionar
armadura.

Para selecionar um bone individual, clique no bone com a
ferramenta Selection.

As propriedades do bone so exibidas no painel
Properties

Conforme adicionamos bones aos smbolos, o Flash
move cada smbolo para uma nova camada na Linha
do tempo. A nova camada chamada de Armature.

Por padro, os pontos de controle de uma forma esto
conectados ao bone mais prximo deles.

Quando selecionamos um bones com a ferramenta
Selection, no painel Properties podemos definir a
rotao deste bone.

6- Clique nos bones do boneco e faa alguns movimentos.
7 Com a ferramenta Selection, selecione um quadro em uma camada de pose
contendo uma armadura. O Inspetor de propriedades exibe as propriedades da
armadura.
8- No painel properties, selecione Runtime, no menu Type.
9- Teste a animao e pressione o cursor do mouse em cima do boneco.
Somente armaduras com uma nica pose podem ser controladas com o
ActionScript
Armaduras com mais de uma pose s podem ser controladas na Linha do tempo.

Estes movimentos do boneco, agora com a opo Runtime,
podem ser controlados por ActionScript.

A ferramenta Bind permite editar as conexes entre bones individuais e os pontos

de controle da forma. Isso permite controlar a maneira como o traado distorcido
durante o movimento de cada bone, a fim de obter resultados mais satisfatrios.

Podemos ligar vrios pontos de controle a um bone e vrio bones a um ponto de
controle. Clicar em um ponto de controle ou bone com a ferramenta Bind exibe as
conexes entre os bones e os pontos de controle.

6.3 adicionar bones a shapes

Uma segunda maneira de usar armaduras IK com os objetos Shape. Com formas,
podemos adicionar vrios bones ao interior de uma nica forma. O que diferente
dos smbolos, onde cada um s pode ter um bone.
Podemos adicionar bones a uma nica forma ou a um grupo de formas. Nos dois
casos, todas as formas devem ser selecionadas antes de adicionar o primeiro bone.

1- Crie uma forma Shape no palco. Podemos usar a
ferramenta Brush.
2- Selecione a ferramenta Bone.

3- Com a ferramenta Bone, clique dentro da forma e
arraste para outro local dentro da forma.

4- Para adicionar outro bone, arraste da parte inferior
do primeiro bone para outro local dentro da forma.

Ao final nossa forma estar semelhante a imagem.
As armaduras IK localizam-se nas camadas de pose na
Linha do tempo. Para animar armaduras na Linha do tempo, insira poses clicando
com o boto direito do mouse no quadro em uma camada de pose e selecionando
Insert pose.

5- Na camada Armature clique com o boto direito do
mouse no quadro 30 e escolha Insert Pose.

6- Nesta pose use a ferramenta Selection para alterar
a configurao da armadura.

O Flash interpola automaticamente as posies dos bones nos quadros entre poses.
7- Movimente os outros Bones com a Selection e v acrescentando Poses na linha
de Tempo.
8- Teste a animao e veja como esta ficando.
Se desejar alterar o comprimento da animao na Linha do tempo, arraste o ltimo
quadro da camada de pose para a direita ou esquerda e adicione ou remova quadros.

O Flash reposiciona os quadros de pose em proporo alterao de durao da
camada e interpola novamente entre os quadros.

6.4 Convertendo a armadura em um Smbolo

Para aplicarmos efeitos interpolados a outras propriedades de objeto IK alm de
posio do bone, o objeto deve ser delimitado em um clipe de filme ou smbolo
grfico.
9- Selecione a armadura IK e todos os objetos a ela associados.
10- Converta-a em um Movie Clip.
O Flash cria um smbolo com sua prpria Linha do tempo contendo a
camada
Armature.

11- Crie uma interpolao de movimento da
Linha de Tempo.
12- Agora adicione efeitos de interpolao de
movimento nova ocorrncia de smbolo no
Palco.

Podemos aninhar smbolos contendo armaduras IK dentro de tantas camadas quantas
forem necessrias de outros smbolos aninhados para criar o efeito desejado.

Elasticidade (Spring)
uma propriedade de um osso e de suas articulaes. A qualidade de um osso que se
move e reage quando o osso ascendente movimentado e, depois, diminui
gradualmente ao longo do tempo.


A fora do spring um valor percentual de padro 0 (totalmente rgido) at 100
(muito solto e controlado por propriedades fsicas). Ossos com elasticidade reagem
ao movimento de suas articulaes. Se nenhuma outra translao(rotao, x, ou y)
estiver ativada, as configuraes de elasticidade no tero nenhum efeito.
O amortecimento de spring um valor percentual de padro 0 (nenhuma resistncia)
at 100 (muito reduzido). O amortecimento altera o tempo entre o movimento inicial
o osso e o retorno posio de descanso.


Unidade 7
Criando Botes

7.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- Escreva os itens Produto , Dvidas e Compre J na parte superior do layout
e em uma camada separada.
3- Use o painel Align, se necessrio para alinhar e distribuir os
textos de forma uniforme.

4- Selecione a palavra Produto e converta-o em um smbolo (F8) s que agora ser
do tipo Button, com o nome de produtoBtn.
5- Vamos clicar duas vezes em cima do smbolo boto (produtosBtn) para entrar em
seu modo de edio.
Observe que sua Timeline um pouco diferente das que
vimos anteriormente, pois possui quatro estgios: UP,
Over, Down,Hit.
- 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.
6- Vamos editar o boto. Insira um quadro (F6) em cada um dos estgios.
7- No estgio Over e no Down deixe o texto em tom de Laranja.

8- No estado Hit desenha um forma que cubra todo o texto do boto.
9- Repita estes procedimentos para os outros botes: Dvidas e Compre J .
10- Ao final, salve seu arquivo.

7.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 Produtos.
2- Clique duas vezes em cima do smbolo para entrarmos em sua edio.
3- Crie uma nova camada dentro deste smbolo.
4- No estgio Over desenhe um retngulo em cima da palavra e transforme-o em
um smbolo Movie Clip.
Agora estamos no Movie Clip dentro do smbolo
produtoBtn.

5- Pea um Create Motion Tween e no ltimo quadro
aumente-o at cobrir a palavra.

6- Crie um efeito de Alpha, tambm para o smbolo no
seu quadro final
7- Crie uma nova camada e insira um quadro-chave em seu ltimo quadro
colocando a action:
st op( ) ;

Isso far que a animao pare quando chegar ao final.
Repare que quando entramos no estgio Over,
iniciada a animao do Movie Clip.
8- Repita estes procedimentos para os outros
botes.
9- Teste seu filme.

10- Instancie todos os botes para produtos,
duvidas e compre, respectivamente.


7.3 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, deixando seu ponto de
registro no centro.
3- D a esse Movie Clip o nome de instncia de cursor_mc.
4- Renomeie esta camada para mouse.
5- Insira uma nova camada com o nome de acoes
6- Na camada acoes selecione o primeiro quadro e abra o painel Actions (F9).
Vamos inicialmente determinar que o Movie Clip ser arrastado.
7- Digite:
cur sor _mc. st ar t Dr ag( t r ue) ;
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.
8- Numa nova linha digite:
Mouse. hi de( ) ;

Teste o filme e veja a iluso de que o cursor o Movie Clip que criamos.


Unidade 8
Introduo ao Acti on

Embora o ActioScript 3.0 possa parecer intimidador se somos iniciante em scripts,
possvel obter excelentes resultados com alguns scripts muito simples. Como ocorre
com qualquer linguagem, recomendvel parar um pouco para aprender a sua
sintaxe e alguma terminologia bsica.

Classe
Uma classe uma categoria de objetos que compartilha os mesmos mtodos
e propriedades, que podem ser alteradas pelo usurio.
Exemplos de classes, por exemplo, co, gato.

Propriedades
Propriedades so as caractersticas de uma classe, que podem ser acessadas
at modificadas via programao.
Por exemplo, se Cachorro for uma classe, suas propriedades incluiro quatro patas,
plo e uma cauda.
Exemplos: meuBot ao. l abel =t ext o; meuBot ao. x=200;
meuBot ao. wi dt h=150; meuBot ao. vi si bl e=f al se;

Mtodos
Um mtodo consiste na funo que um elemento desempenha.
Por exemplo, dois mtodos associados com a classe MovieClip so:
st op( ) ;
got oAndPl ay( ) ;

Parmetros
Parmetros fornecem detalhes especficos e so valores entre parnteses ( ) em
uma linha de cdigo.
Por exemplo, no cdigo:
got oAndPl ay ( 3) ;
O parmetro instrui o script a ir para o frame 3.

Funo
Uma funo um grupo de instrues que pode ser referenciado pelo nome.
Utilizando uma funo, possvel executar o mesmo conjunto de instrues sem
digit-las repetidamente no mesmo script.
Exemplo:
f unct i on al er t a( ) : voi d {

}



Variveis
Variveis funcionam como uma espcie de container que armazena informaes,
seja um texto, um nmero, etc.
Exemplo:
var nome: St r i ng=Fl ash
Temos uma varivel sendo declarada (ao var) cujo nome nome que receber
(=) como valor o texto Flash.

8.1 Utilizando uma si ntaxe de script adequada

O ponto-e-vrgula no final da linha instrui o ActionScript de que ele alcanou o
final dessa linha de cdigo e que deve seguir para a prxima linha no cdigo;
Cada parntese de abertura deve ter um parntese de fechamento correspondente,
o mesmo vale para colchetes e chaves;
O operador de ponto (.) fornece uma maneira de acessar as propriedades e os
mtodos de um objeto;
Sempre que estivermos inserindo um nome de um arquivo, use aspas;
Podemos adicionar comentrios que o ActionScript no ler, assim nos ou
outras pessoas podem se lembrar do que esta sendo feito em diferentes partes do
script.

/ / coment r i o de uma l i nha

/ *

Coment r i o de vr i as l i nhas

*/

Para verificar a sintaxe de um script que estamos escrevendo, clique no
cone AutoFormat (que tambm formatar o script de acordo com as convenes) ou
clique no cone Check Syntax. Os erros de sintaxe so listados no painel Compiler
Erros.
O ActionScript uma linguagem case-sensitive, o que significa que os
identificadores diferem em case (letras maisculas de minsculas). Abaixo,
como exemplo duas variveis diferentes:

var num1: i nt ;

var Num1: i nt ;

8.2 Vi so geral do Painel action



Para criar scripts incorporados em um
arquivo FLA, informe o ActionScript
diretamente no painel Action. Este painel
consiste em trs painis: a caixa de
ferramentas Aes, que agrupa elementos
do ActionScript por categoria, o navegador
de scripts, que permite mover rapidamente
entre os scripts em seu documento Flash, e
o painel Script, onde digitamos nosso
cdigo ActionScript.

Para habilitar este painel selecione Window> Action, ou pressione F9.
As barras de ferramentas do painel Aes e da janela Script permitem que acessemos
os recursos de assistncia de cdigo que ajudam a simplificar e dinamizar a
codificao no ActionScript. As ferramentas so diferentes dependendo se estamos
usando o painel Aes ou a janela Script.
Adicionar novo item ao script: exibe os elementos da linguagem que
tambm esto na caixa de ferramentas de aes.
L o c a l i z a r : localiza e substitui texto no script.
Inserir caminho de destino: ajuda na configurao do caminho de destino
absoluto ou relativo para uma ao no script.
Verificar sintaxe: verifica os erros de sintaxe no script atual. Os erros de sintaxe
so listados no painel Sada.
Formato automtico: formata seu script para uma sintaxe de codificao
apropriada e uma legibilidade melhorada.
Mostrar referncia de cdigo: se estiver desativada a referncia de
cdigo automtica, use Mostrar referncia de cdigo para exibir uma
referncia de cdigo para a linha de cdigo em que estiver trabalhando.
Opes de depurao: define e remove pontos de interrupo para que
possamos prosseguir linha por linha em nosso script ao executar uma
depurao.
Contrair entre chaves: contrai o cdigo que aparece entre as chaves ou os
parnteses que, atualmente, contm o ponto de insero.
Contrair seleo: contrai o bloco de cdigo atualmente selecionado.
Expandir tudo: expande todo o cdigo contrado no script atual.
Aplicar comentrio em bloco: adiciona marcadores de comentrio no incio e
no final do bloco de cdigo selecionado.
Aplicar comentrio de linha: adiciona um marcador de comentrio de linha
nica no ponto de insero, ou no incio de cada linha do cdigo em uma
seleo multilinha.
Remover comentrio: remove os marcadores de comentrio da linha atual ou de
todas as linhas da seleo atual.
Mostrar/ocultar caixa de ferramentas: exibe ou oculta a caixa de ferramentas


de aes.
Assistncia de script: no modo de Assistncia de script, somos apresentados a
uma interface de usurio para insero dos elementos necessrios criao de
scripts.
A j u d a : exibe as informaes de referncia para o elemento do ActionScript que
est selecionado no painel Script. Por exemplo, se clicarmos em um instruo import
e, em seguida, clicar em Ajuda, as informaes de referncia para import aparecem
no painel Ajuda.
Menu do painel: contm os comandos e as preferncias que se aplicam ao painel
Action.

Unidade 9
Navegao no Flash

9.1 Carregando arquivos externos

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 ou um arquivo swf no momento em que necessitamos deles, no sendo
necessrio coloc-los na biblioteca.
Isso ns ajuda muito uma vez que as imagens que no forem necessrias
navegao, por exemplo, escolhida pelo usurio no sero carregadas sem
necessidade.
1- Continuaremos no arquivo index.fla

2- Insira uma nova camada e d o nome de
mcvazio.
3- Nessa camada desenhe um retngulo no centro
da pgina de 430px de largura, que ser ocupada
pelos contedos do hotsite.
4- Selecione esta forma e converta-a em um Movie
Clip.
5- Coloque o nome de instncia deste Movie Clip
de contedo
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
Agora iremos criar nossos arquivos externos do mesmo tamanho (largura e altura)
do Movie Clip vazio.
8- Crie um novo documento com a cor cinza de fundo de 430px de largura por 310px
de altura e salve-a como produtos.fla
9- Escreva o texto PRODUTOS na parte superior esquerda da tela.
10- Pressione CTRL + Enter para gerarmos o arquivo swf.
11- Repita esses procedimentos para criar os duvidas.fla e compre.fla
12- Crie um arquivo com as mesmas configuraes e salve como: home.fla
Agora iremos comear a programar a navegao.
13- Crie uma nova camada e renomeia-a para acoes selecione o primeiro frame
a habilite o painel Actions. Digite:
r car r egar : Loader =new Loader ( ) ;


cont eudo. addChi l d( car r egar ) ;

Criamos a instncia Loader a partir da classe Loader do Action Script 3.0, que
responsvel pelo carregamento de arquivos externos.
14- Aps digite:
pr odut os. addEvent Li st ener ( MouseEvent . CLI CK, bot ao1) ;
f unct i on bot ao1( event o: MouseEvent ) : voi d {
car r egar . l oad( new URLRequest ( pr odut os. 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.
15- Logo aps digite:
duvi das. addEvent Li st ener ( MouseEvent . CLI CK, bot ao2) ;
car r egar . l oad( new URLRequest ( duvi das. swf ) ) ;
}

compr e. addEvent Li st ener ( MouseEvent . CLI CK, bot ao3) ;

car r egar . l oad( new URLRequest ( compr e. swf ) ) ;

} home. addEvent Li st ener ( MouseEvent . CLI CK, bot ao4) ;
car r egar . l oad( new URLRequest ( home. swf ) ) ;

}

16- Crie um boto personalizado para a opo Home e instancie-o para home.
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.
17- Teste o arquivo e veja que j esta funcionando a navegao pelos seus
respectivos 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.
18- Na terceira linha do painel Action digite:
car r egar . l oad( new URLRequest ( home. swf ) ) ;



19- Teste agora e observe que a pgina home
est sendo carregada juntamente com o arquivo
principal.

20- Salve o arquivo

9.2 Navegao na Timel ine
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.
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.

Agora iremos colocar os comandos para os botes.
9- No primeiro frame da camada acoes digite:
bt n1. addEvent Li st ener ( MouseEvent . CLI CK, bot ao1) ; f unct i on
bot ao1( event o: MouseEvent ) : voi d{
got oAndPl ay( 20) ;

}

bt n2. addEvent Li st ener ( MouseEvent . CLI CK, bot ao2) ;

f unct i on bot ao2( event o: MouseEvent ) : voi d{


}


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.
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:
bt n1. addEvent Li st ener ( MouseEvent . CLI CK, bot ao1) ; f unct i on
bot ao1( event o: MouseEvent ) : voi d{
got oAndSt op( 20) ;
}

bt n2. addEvent Li st ener ( MouseEvent . CLI CK, bot ao2) ;

f unct i on bot ao2( event o: MouseEvent ) : voi d{


}

- Ou, ainda, colocando um Stop no frame 39 (antes de comear o texto Verde):
st op ( ) ;

Agora teste o filme e veja que esta funcionando corretamente.
10- Salve seu arquivo na pasta da lio, que vamos usar no prximo exerccio.

9.3 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 quadro em branco (F7).
3- Neste frame (20) escreva o Label para o item
Frame de azul.

Observe que neste frame (20) o Label fica indicado por uma pequena bandeirinha e
com o respectivo nome que atribumos.

4- Agora insira um quadro em branco no frame 40 e coloque o nome do Frame de
verde.
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:

got oAndSt op( azul ) ;

got oAndPl ay( ver de) ;

9.4 Criando rol agem de Cont edo

A rolagem de contedo muito utilizada quando temos mais informaes que
espao disponvel.
1- Abra o arquivo produtos.fla
2- Crie uma uma layer e 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.

4- Crie uma layer acima de todos e d o nome de
botoes. Nesta layer desenhe dois tringulos
posicionando-os como na imagem.
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, com exceo da layer produtos.

9- Na layer mc desenhe vrios quadrados um abaixo do outro, fazendo com que eles
fiquem para fora no quadrado desenhado na tela, juntamente com um texto.



10- Com todos os quadrados e textos selecionados
transforme-os em um Movie Clip e d o nome de instncia
para eles de mc_quadrado.

11- D um duplo clique para entrar na edio deste
Movie Clip. Selecione todos os quadrados e textos e
transforme-os em um smbolo do tipo Graphic.

12- No frame 1 da layer crie uma interpolao de
movimento.

Desloque o smbolo como uma animao.

13- Crie uma nova camada e coloque um comando de Stop
no seu primeiro frame.

14- Retorne para a cena principal.

15- Na camada maskcrie uma mscara.

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.

16- Crie uma nova camada acima de todas e renomei-a para
acoes. Abra o painel
Actions e digite:

bt n_desce. addEvent Li st ener ( MouseEvent . ROLL_OVER, desce) ;

bt n_desce. addEvent Li st ener ( MouseEvent . ROLL_
OUT, desceRemove) ;

f unct i on desce( event o: MouseEvent ) : voi d{

mc_quadr ado. addEvent Li st ener ( Event . ENTER_FRAME,
desceFul l ) ;

}

f unct i on desceFul l ( event o: Event ) : voi d{


mc_quadr ado. next Fr ame( ) ;

}

f unct i on desceRemove( event o: MouseEvent ) : voi d{

mc_quadr ado. r emoveEvent Li st ener ( Event . ENTER_FRAME,
desceFul l ) ;

}

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.
17- Repetiremos a mesma programao para o btn_sobe. Na prxima linha digite:
bt n_sobe. addEvent Li st ener ( MouseEvent . ROLL_OVER, sobe) ;
bt n_sobe. addEvent Li st ener ( MouseEvent . ROLL_OUT, sobeRemove)
; f unct i on sobe( event o: MouseEvent ) : voi d{
mc_quadr ado. addEvent Li st ener ( Event . ENTER_

FRAME, sobeFul l ) ;
}

f unct i on sobeFul l ( event o: Event ) : voi d{

mc_quadr ado. pr evFr ame( ) ;

}

f unct i on sobeRemove( event o: MouseEvent ) : voi d{

mc_quadr ado. r emoveEvent Li st ener ( Event . ENTER_FRAME,
sobeFul l ) ;

}

18- Teste o filme e veja a animao.



9.5 Os Componentes no Fl ash
Um componente do Flash um mdulo reutilizvel em pacotes que agrega uma
caracterstica em particular a um documento do Flash. Os componentes podem incluir
grficos e cdigos, tratando-se de uma funcionalidade prconstruda que podemos
incluir facilmente em seus projetos do Flash.
O componente ScrollPane cria uma rea para a qual podemos importar: J PEG,
PNG, GIF, e arquivos Swf.
1- Crie um novo arquivo e salve-o como scroll.fla na pasta da lio.
2- Arraste uma instncia do componente ScrollPane para palco
(Window >Components).

3- Defina o tamanho componente para 400x400.
4- Selecione o componente na tela e habilite o painel Componentes Inspector,
atravs do menu Window.
5- Neste painel defina que o arquivo index.swf ser carregado por
este componente atravs da opo Source.

6- Teste o arquivo.

Todo componente no Flash um smbolo Movie Clip, aonde podemos manipular
suas configuraes de cor, borda, etc simplesmente entrando em sua edio.
Podemos modificar a aparncia do ScrollPane simplesmente dando um duplo
clique nele e editando seu contedo.
7- Selecione o componente ScrollPane e d um duplo clique nele.
8- Selecione a opo ScrollPane Normal Skin e d um duplo clique em cima deste
Movie Clip.


9- Clique no Movie Clip ScrollPane_UpSkin e d um
duplo clique.

10- D mais um duplo clique em cima do Movie Clip
panelBackground Base e altere a cor de preenchimento do
Drawing Object para preto.

11- Teste o filme e veja que no temos mais a cor cinza como
cor de fundo no componente.

Para alterarmos a cor da barra de rolagem
do componente iremos fazer na mesma
forma.

12- Retorne at o Movie Clip ScrollPane e d um duplo clique em cima do smbolo
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.

13- D um duplo clique no Movie Clip ScrollThumb upSkin e comece e edit-lo.
Podemos ir editando cada parte do ScrollBar, basta dar um duplo clique em
cima do Movie Clip correspondente a cada parte.


Unidade 10
Trabalhando com textos di nmicos

10.1 Busca de vari vei s em um arquivo de t exto

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 duvidas.fla (criado anteriormente)
2- Na pasta da lio temos o arquivo texto.txt. Abra-o e na primeira linha deste
arquivo digite: nome=Alfa Sports
3- Salve o arquivo txt e retorne para o arquivo duvidas.fla

4- Crie uma nova layer e selecione a ferramenta Text Tool
com o texto do tipo Dynamic selecionado, colocando seu
nome de instncia de valor e com a opo Multiline
marcada na opo Character.

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 ender eco: URLRequest =new
URLRequest ( t ext o. t xt ) ; var car r egar : URLLoader = new
URLLoader ( ) ;
car r egar . dat aFor mat =URLLoader Dat aFor mat . VARI ABLES;
car r egar . l oad( ender eco) ;
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:

car r egar . addEvent Li st ener ( Event . COMPLETE, car r egou) ;
f unct i on car r egou( event o: Event ) : voi d{
val or . t ext =car r egar . dat a. 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. 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.

10- Arraste para o palco uma instncia deste
componente encaixando ao lado da caixa de Texto.

Teste seu filme e veja que j esta com Scroll.

10.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.
O HTML formado por um sistema de marcaes (tags) que circunda
determinado elemento.
Por exemplo:
Fl ash
No Flash podemos usar as tags do HTML em sua verso 1.0 para as caixas de texto.
As tags aceitas so:
<a> ut i l i zada par a cr i ao de l i nks;

 par a dei xar o t ext o emnegr i t o;


<f ont col or => par a a cor do t ext o;

<f ont f ace=> par a t i po de f ont e;

<f ont si ze=> par a o t amanho da f ont e;

 par a i t l i co;

 par a par gr af o e al i nhament o;

 par a subl i nhado.

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 Alfa Sports as tag .
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- necessrio fazer uma alterao na programao na ltima linha, alterando-a
para:
val or . ht ml Text =car r egar . dat a. nome;

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.


Unidade 11
udio no Flash

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

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

4- Para reproduzirmos o som basta clicarmos no boto Play,
localizado na rea superior direita da Library.

11.2 Configuraes do som no Fl ash

5- Clique duas vezes em cima do cone do som na Library. A
janela Sound Properties se ir abrir.

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.
Nossas configuraes ocorrem atravs do item Compression. 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.


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.
9- Clique no frame 100 da timeline e insira um Keyframe (F6).

10- Selecione o frame 1 desta layer e no Painel Properties na opo
Sound escolha 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.
11- Vamos comear a configurar o som do filme no painel Properties. Selecione o
quadro 1 e escolha a opo: Stream no campo Sync.
No campo Sync esto s configuraes do
comportamento do som.
- 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;
- Fade Out: diminui gradualmente a amplitude do som;
No boto Edit sound envelope, temos uma representao grfica do som em seus
dois canais (esquerda e direita).
Para alterar o volume em algum dos canais, basta clicarmos na janela correspondente
e um quadro representativo aparece.
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.

11.3 Carregando udio ext erno

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 a Play e o outro o Stop.
4- Selecione o boto correspondente ao stop e transforme-o em um Button e instancie-
o para parar.
5- Selecione o boto correspondente ao play e transforme-o em um Button e instancie-
o para tocar.

Antes de programarmos os botes iremos carreg-lo externamente atravs de

comandos em ActionScript.
6- Selecione o primeiro quadro da camada acoes e digite na primeira linha do
painel Actions (F9):

var audi o: Sound = new Sound( ) ;

Nesta linha criamos uma instncia chamada udio a partir da classe Sound,
responsvel por trabalhar com som no Flash.
7- Aps, em uma segunda linha digite:
var ender eco: URLRequest =new URLRequest ( sons_si t e/ som_
si t e. mp3) ;

audi o. l oad( ender eco) ;

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.

8- Numa outra linha digite:

audi o. pl ay( ) ;

Agora sim, mandamos instncia chamada audio iniciar a reproduo do som
pelo mtodo play( ).
9- Teste o filme e veja que o som ser carregado e executado.
10- No painel Actions altere a linha:
audi o. pl ay( ) ;

Para:

var canal _de_som: SoundChannel =audi o. pl ay( 0, i nt . 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.
11- Para fazermos o som parar digite no painel Action:
par ar . addEvent Li st ener ( MouseEvent . CLI CK, par aSom) ;
f unct i on par aSom( event o: MouseEvent ) : voi d {
canal _de_som. st op( ) ;
}

12- Para fazermos o som tocar novamente digite:

t ocar . addEvent Li st ener ( MouseEvent . CLI CK, t ocaSom) ;
f unct i on t ocaSom( event o: MouseEvent ) : voi d {
canal _de_som= audi o. pl ay( 0, i nt . MAX_VALUE) ;
}

12- Teste o arquivo e veja seu funcionamento.

11.4 Inserindo udio em botes

Podemos associar sons aos diversos estados de um smbolo de boto. Como os sons
so armazenados junto com o smbolo, eles funcionam em todas as ocorrncias do
smbolo.


2- Arraste uma instncia de boto para o palco do Flash
atravs do menu: Window >Common Libraries >Buttons.

3- D um duplo clique em cima do boto para entrar em
sua edio.

4- Crie uma nova layer renomeando-a para som. Insira
um qaudro em cada estgio do boto.

5- Importe um som para a Library que est na pasta sons_botoes.
6- Selecione o estgio Down na camada som do boto e clique no item Sound opo
Name selecionando o som do boto.

7- Teste o filme e veja que quando o boto pressionado emite o som.

Unidade 12
Criando Formulrio
12.1 Utilizando component es

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- Abra o arquivo compre.fla
2- Habilite o painel Componentes.
3- Selecione o componente TextInput e arraste-o para o palco do Flash colocando
o nome de instncia de nome.
4- Aumente o tamanho deste Componente para 300x20.
Quando arrastamos um componente para o palco, automaticamente criada um
smbolo dele junto a Biblioteca.
5- 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.

6- Agora, arraste uma instncia do componente TextArea para
a palco, colocando abaixo dos outros componentes com a
largura de 300x40. Instancie-o para mensagem:

7- Arraste uma instncia do componente Button para o palco do Flash,
posicionando abaixo dos outros componentes.
8- No painel Components Inspector mude o item label para Enviar e instancie-o
para btn_enviar.
9- Arraste outra instncia do componente Button para o palco do Flash, colocando-o
ao lado do btn_enviar.
10- Mude a opo label para Limpare instancie- o para btn_limpar
11- 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.

12- Instancie esta caixa de texto para mensagemErro.

13- Crie uma nova camada e renomei-a para acoes.
Habilite o painel Actions e digite na primeira linha:


bt n_envi ar . addEvent Li st ener ( MouseEvent . CLI CK, val i da) ;

bt n_l i mpar . addEvent Li st ener ( MouseEvent . CLI CK, l i mpar ) ;

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.
14- Na terceira linha digite:

f unct i on val i da( event o: MouseEvent ) : voi d{

mensagemEr r o. t ext = ;

i f ( nome. t ext == ) {

mensagemEr r o. t ext = Favor pr eencher o campo
nome \ n;

}

i f ( emai l . t ext == ) {

mensagemEr r o. t ext = St r i ng( mensagemEr r o. t ext )
+ Favor pr eencher o campo emai l \ n;

}

i f ( mensagem. t ext == ) {

mensagemEr r o. t ext = St r i ng( mensagemEr r o. t ext )
+ Favor pr eencher o campo mensagem\ n;

}

}
f unct i on l i mpar ( event o: MouseEvent ) : voi d{
nome. t ext = ; emai l . t ext = ; mensagem. t ext = ;

}

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.

12.2 Configurando o envio de dados

15- Abaixo dos ouvintes dos botes (na terceira linha) digite:

var nomeAr qui vo: St r i ng;


nomeAr qui vo = pr ocessa. 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
16- Abaixo das condicionais (if) acrescente mais uma para a funo enviar,
digitando:

i f ( mensagemEr r o. t ext = = ) {

t hi s. envi ar ( ) ;

}

17- Abaixo iremos digitar a funo enviar, responsvel pelo envio dos nossos
dados do formulrio:

f unct i on envi ar ( ) : voi d {

var r eq: URLRequest =new URLRequest ( nomeAr qui vo) ;

r eq. met hod=URLRequest Met hod. POST;

var var s: URLVar i abl es=new URLVar i abl es;

var s. nome=escape( nome. t ext ) ;
var s. emai l =escape( emai l . t ext ) ;
var s. mensagem=escape( mensagem. t ext ) ; r eq. dat a=var s;
var l oader : URLLoader =new URLLoader ( ) ;

l oader . l oad( r eq) ;

l oader . addEvent Li st ener ( Event .
COMPLETE, onVar sLoaded) ;

l oader . addEvent Li st ener ( I OEr r or Event . I O_ERROR,
onI OEr r or ) ;

}

f unct i on onVar sLoaded( event : Event ) : voi d{

var l oader : URLLoader = URLLoader ( event . t ar get ) ;

mensagemEr r o. t ext = Emai l envi ado comsucesso;

}

f unct i on onI OEr r or ( event : I OEr r or Event ) : voi d {

mensagemEr r o. t ext = Er r o ao envi ar o emai l ;

}

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.


Unidade 13
Preloader
13.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.
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 o segundo quadro da layer preloader, deixando somente o quadro 1 com
o objeto de texto.

6- Selecione o quadro 1 da camada preloadere habilite o painel Action digitando:
st op( ) ; t hi s. addEvent Li st ener ( Event . ENTER_FRAME, l oaded) ;
f unct i on l oaded( EVENT: Event ) : voi d
{

var car r egando: Number =i nt ( l oader I nf o. byt esLoaded/
l oader I nf o. byt esTot al *100) pct . t ext =car r egando+%;
i f ( car r egando==100)
{

r emoveEvent Li st ener ( Event . ENTER_FRAME, l oaded) ;

got oAndPl ay( 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- Desloque o quadro da aes da camada acoes para o segundo e coloque um stop
na primeira linha.
8- Teste seu filme. Para ver o preloader em
funcionamento pressione CTRL +Enter, novamente.
Quando chegar a 100% ser carregado nosso filme.
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:
bar r a. got oAndSt op( car r egando) ;

10- Teste seu arquivo e veja como ficou


Unidade 14
Criando Banners Animados
14.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.

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.


4- Selecione o Movie Clip, localizado na layer Shape 1 e d um duplo clique para
entrarmos em sua edio.

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- Renomeia-e a layer 2 para mask.
8- Crie uma nova layer e renomeie-a para flor1. Posicione-a abaixo
da layer mask.
9- Com a layer flor1 selecionada arraste a imagem flor1.jpg para o palco do Flash.
Redimensione e posicione a imagem em cima do objeto.
10- Crie uma interpolao de movimento na layer flor1 e redimensione os
quadros desta para o quadro 80.
11- Deixe a cabea leitora posicionada no quadro 1 e diminua o Alpha para 0%.
12- No quadro 10 deixe o Alpha em 100%.

15- Estenda a layer mask at
o quadro 80, tambm.


16- Teste a animao.
17- Insira uma layer acima da layer Flor1 e renomei-a para Flor2
18- Posicione a cabea leitora no quadro 70 e insira um quadro-chave (F6) na
layer
Flor2.
19- Arraste a imagem flor2.jpg para o palco e diminua a mesma.
20- Crie uma interpolao de movimento nesta layer e arraste-a at o quadro 160.
21- Prolongue a layer mask, tambm.
22- No quadro 70 na layer Flor2 deixe o Alpha em 0%.
23- No quadro 80 desta layer deixe o Alpha em 100%.

26- Teste a animao e veja as flores passando na mscara.
27- Retorne a Cena principal.

28- Selecione o bitmap correspondente as curvas da parte de baixo do banner e
transforme-a em um smbolo Movie Clip.

29- Entre na edio deste MC e crie uma nova layer desenhando um forma ao lado
esquerdo da imagem.
30- Crie uma interpolao de movimento e no quadro final da layer aumenta a forma
de maneira que cubra toma a imagem.
31- Pea a propriedade de Mask para esta layer.
32- Coloque um stop no quadro final da animao.
33- Retorne a cena principal.
34- Insira uma nova layer e renomei-a para btnInvisivel.
35- Clique no menu: Insert > New Symbol e escolha a opo Button.
36- Insira um Keyframe no estado Hit do boto e
desenhe um retngulo, configurando a posio X e Y
para 0.
37- Retorne a Cena principal.


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

39- Instancie este boto para btn.
40- Crie uma nova layer e renomei-a para acoes. Habilite o painel Action e digite:

bt n. addEvent Li st ener ( MouseEvent . CLI CK, banner ) ;

f unct i on banner ( event : MouseEvent ) : voi d {

navi gat eToURL( new URLRequest ( ht t p: / / www. adobe. com.
br ) , _bl ank) ;

}

O mtodo navigateToURL o responsvel por abrirmos uma nova pgina.

41- Teste o filme.

14.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 como
texto esttico.

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.

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- Crie uma interpolao de movimento e no quadro final desloque
o objeto para baixo do smbolo.

10- Ainda dentro do Movie Clip telacrie uma nova camada e insira um keyframe
no frame 13. Escreva Adobe Flashna parte superior fora do palco.

11- Crie uma interpolao de movimento e no quadro final desta
layer posicione o texto em cima do outro smbolo.

12- Crie uma nova camada e renomei-a para acoes. No seu primeiro frame
coloque um comando de Stop:

st op( ) ;

13- Retorne a cena principal e crie uma nova camada com o nome de acoes.
14- Coloque a ordem das camadas como na imagem.
Esta ordem importante para o funcionamento correto do banner.
15- Habilite o painel Actions no primeiro frame da layer acoes e na primeira
linha digite:

st op( ) ;

at i va. addEvent Li st ener ( MouseEvent . MOUSE_OVER, Exi be) ;
at i va. addEvent Li st ener ( MouseEvent . MOUSE_OUT, Esconde) ;

at i va. but t onMode = t r ue;

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.
16- Na quinta linha digite:
f unct i on Exi be( event o: MouseEvent ) : voi d{
t el a. addEvent Li st ener ( Event . ENTER_FRAME, Abr e) ;
t el a. r emoveEvent Li st ener ( Event . ENTER_FRAME, Fecha) ;

}

f unct i on Abr e( event o: Event ) : voi d{

t el a. next Fr ame( ) ;

i f ( t el a. cur r ent Fr ame == t el a. t ot al Fr ames) {

t el a. r emoveEvent Li st ener ( Event . ENTER_FRAME, Abr e) ;

}

}

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.
17- Na linha seguinte digite:
f unct i on Esconde( event o: MouseEvent ) : voi d{
t el a. addEvent Li st ener ( Event . ENTER_FRAME, Fecha) ;
t el a. r emoveEvent Li st ener ( Event . ENTER_FRAME, Abr e) ;

}

f unct i on Fecha( event o: Event ) : voi d{

t el a. pr evFr ame( ) ;

i f ( t el a. cur r ent Fr ame == 1) {

t el a. r emoveEvent Li st ener ( 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.
18- Pronto. Teste seu Movie Clip e veja a funcionalidade do banner.



14.3 Usando transi es com action script
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- Crie uma nova camada e no primeiro quadro desta camada abra o painel Actions
e digite:
import fl.transitions.*;

import fl.transitions.easing.*;

var t r ansi cao: Tr ansi t i onManager =new
Tr ansi t i onManager ( i magem) ;

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.
5- Numa nova linha digite:

t r ansi cao. st ar t Tr ansi t i on( {t ype: Bl i nds,
di r ect i on: Tr ansi t i on. I N, dur at i on: 2, easi ng: St r ong. easeOut ,
numSt r i ps: 10, di mensi on: 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).
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.

6- Teste seu arquivo.

Os retngulos aparecem e revelam partes da imagem
at mostr-la por completo.



Temos, tambm, o PixelDissolve que faz o Movie Clip aparecer ou desaparecer
atravs de um efeito em quadrados que vo aos poucos aparecendo ou desaparecendo.
7- Insira um novo quadro-chave na layer que contm a imagem e insira a imagem
transicao.3.jpg que esta na pasta imagens.
8-Transforme esta imagem em um Movie Clip e coloque o nome de instncia da
imagem de imagem1.
9- Na camada das actions insira um novo quadro e digite:

var t r ansi cao1: Tr ansi t i onManager =new
Tr ansi t i onManager ( i magem1) ;

10- Na prxima linha digite:

t r ansi cao1. st ar t Tr ansi t i on( {t ype: Pi xel Di ssol ve,
di r ect i on: Tr ansi t i on. I N, dur at i on: 1, easi ng: St r ong. easeOu
t , xSect i ons: 20, ySect i ons: 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.
Iremos colocar uma funo para controlar a passagem das imagens com as transies.
11- No primeiro quadro da layer das aes, digite:

st op( ) ;

var t empo = 10000;

f unct i on vai ( ) : voi d{

i f ( t hi s. cur r ent Fr ame ! = t hi s. t ot al Fr ames)

next Fr ame( ) ;
el se

}

got oAndSt op( 1) ;

set I nt er val ( vai , t empo) ;

12- Teste o arquivo.


Unidade 15
Importando Vdeo
15.1 Importando vdeos

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- Crie um arquivo novo.
2- 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.

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

5- Deixe marcada a opo Load external with playback component. Esta opo
importa o vdeo e cria uma instncia do componente FLVPlayback para controlar a
reproduo do vdeo. Quando estiver pronto para publicar o documento Flash como
SWF e envi-lo para seu servidor da Web, tambm deve enviar o arquivo de vdeo
para um servidor Web ou para o Flash Media Server, e configurar o componente
FLVPlayback com o local do arquivo de vdeo enviado.
- Embed FLV in SWF and play in timeline incorpora o FLV ou F4V no documento
do
Flash. Quando o vdeo importado dessa maneira, ele colocado na Linha do tempo,
em que possvel visualizar os quadros de vdeo individuais representados nos
quadros da Linha do tempo. Um arquivo de vdeo FLV ou F4V incorporado torna-se
parte do documento do Flash.
- Import as mobile device video bundled in SWF: da mesma forma que a
incorporao de um vdeo em um documento do Flash, compactamos um vdeo em um
documento do Flash Lite para implantao em um dispositivo mvel.
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.
6- Escolha um tipo de Skin e Clique em
next.

7- Clique em Finish e nosso vdeo j esta
no palco do Flash com
uma instncia do componente para
reproduzi-lo.

8- No painel Component Inspector podemos
fazer algumas alteraes
na configurao do componente.

15.2 Usando o Adobe Medi a Encoder CS5

Adobe Media Encoder um aplicativo de codificao independente empregado por
programas como Adobe Premiere Pro, Adobe Soundbooth e Flash para impresso de
certos formatos de mdia. Dependendo do programa, o Adobe Media Encoder
oferece uma caixa de dilogo especializada Exportar configuraes que acomoda as
inmeras configuraes associadas com certos formatos de exportao, como Adobe
Flash Video e H.264. Para cada formato, a caixa de dilogo Exportar configuraes
inclui uma srie de predefinies que so personalizadas para uma mdia de entrega
em particular.

1- Crie um novo documento no Flash.

2- Abra o Adobe Media Encoder CS4.

3- Clique no boto Add e selecione o vdeo cafe_art.vwm

4- Nos boto Preset selecione a opo Edit export settings e configure o vdeo.
5- Clique em OK
Na janela Adobe Media Encoder clique no boto Start Queue. E o vdeo inicia a
exportao para o formato FLV.

6- Retorne para o Flash e clique em Import >Import Video e escolha o arquivo
cafe_art.flv

7- Escolha a opo Embed FLV in SWF and play in timeline.

8- No item Symbol Type escolha a opo Movie Clip.

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.
9- Clique no boto next e finish.
O vdeo j esta no palco do Flash.

15.3 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.
10- Adicione uma nova layer (acima da layer video) e renomei-a para mask.
11- Desenhe um quadrado com os cantos arredondados sobre a rea em que se
encontra o vdeo.
12- Selecione a layer maske clicando nela com o boto direito do mouse, escolha
a opo Mask.
Pronto, foi criada uma mscara sobre nosso vdeo

15.4 Vdeo em tela cheia

Uma novidade incorporada a mais recente verso do player do Flash a
possibilidade de exibir seu contedo em tela cheia.
Podemos criar um vdeo de forma semelhante ao que ocorre no You Tube, por
exemplo.
1- Crie um arquivo novo.

2- No painel Components arraste para o palco uma instncia do
componente FLVPlayback.
3- No painel Component Inspector no item source escolha o video cafe_art.flv.
4- No item Skin escolha uma que tenha a opo FullScreen.
5- Selecione o menu: File >Publish Settings.
6- Na rea HTML ajuste o item template para: Flash Only Allow Full Screen.
7- Clique no boto Publish.
8- Ao testarmos o arquivo HTML gerado clique no boto dedicado a exibir o filme em
tela cheia, localizado na extremidade inferior direita do skin.
Uma mensagem, que desaparece logo depois, avisa que possvel utilizar a tecla
ESC para sair do modo de tela cheia.

Ser gerado um arquivo com a extenso .js (J avaScript) que deve ser enviado junto
com os arquivos para o seu website.


Unidade 16
Publicando Documentos no Flash
16.1 Configuraes de Publ icao

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.
- 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;
- J PEG (.jpg): cria uma imagem no formato J PG;
- 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.
Para realmente criarmos os arquivos devemos clicar no boto Publish que efetua
a publicao. O boto OK apenas serve para confirmarmos as configuraes.


16.2 Flash

As configuraes disponveis para este formato so:

- Player: a verso do player necessrio para visualizarmos o arquivo swf.
- Script: escolhemos a verso do ActionScript que ser utilizada no filme.

16.3 Html

Podemos configurar o arquivo HTML que o Flash vai gerar. Esse arquivo pode ser
colocado no nosso site para que os usurios visualizem nosso filme. No
esquecendo de levar o arquivo swf junto.
- 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.
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.

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

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


16.6 Full screen

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:

st age. scal eMode = St ageScal eMode. NO_SCALE;

st age. di spl aySt at e = St ageDi spl aySt at e. 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.


Unidade 17
Melhores Prticas
17.1 Organizao da linha de t empo e da bibli oteca

Os quadros e as camadas em uma linha do tempo mostram onde esto colocados os
recursos e determinam como seu documento funciona. A forma de configurar e usar
a linha do tempo e a biblioteca afetam todo o arquivo FLA e sua aplicabilidade global
As diretrizes a seguir ajudam a criar contedos com eficincia e permitem que
outros autores que usam seus documentos FLA tenham maior compreenso da
estrutura do documento.
- D a cada camada um nome intuitivo de camada e rena os recursos relacionados no
mesmo local. Evite usar os nomes padro de camada (como layer 1, layer 2).
- Descreva com clareza a finalidade ou o contedo de cada camada ou pasta,
quando for nome-los.
- Se aplicvel, coloque suas camadas que incluem o ActionScript e a camada para
rtulos dos quadros na parte superior da pilha de camadas na linha do tempo.
- Use pastas de camadas para agrupar e organizar as camadas semelhantes, para
facilitar a localizao das camadas que incluem cdigos e rtulos.
- Bloqueie as camadas que no estiver usando ou no deseja modificar.
- Nunca coloque quaisquer smbolos ou recursos em camada que inclua o
ActionScript. Como isso pode, potencialmente, causar conflitos entre os recursos no
Palco e no ActionScript que os aplicam, mantenha todos os seus cdigos em sua
prpria camada de aes e bloqueie depois de cri-la.
- Use rtulos de quadros (label) em um arquivo FLA, em vez de usar nmeros de
quadros no cdigo ActionScript. Se esses quadros mudarem posteriormente, quando
for editar a linha do tempo, e se usar rtulos de quadros e mov-los na linha do
tempo, no h necessidade de mudar nenhuma referncia no seu cdigo.
- Uso de pastas de biblioteca.
- Use pastas na biblioteca para organizar os elementos semelhantes (como
smbolos e recursos de mdia) em um arquivo FLA. Se nomear as pastas de biblioteca
consistentemente, todas as vezes que criar um arquivo, fica mais fcil lembrar onde
colocou os recursos. Normalmente, os nomes de pastas usados so Botes, Clipes
de filme, Grficos, Recursos, Componentes e, algumas vezes, Classes.

17.2 Gravao de arquivos e controle de verso

Para gravar os arquivos FLA, use um esquema de nomes consistente para seus
documentos. Isso especialmente importante se gravar mltiplas verses de um nico
projeto.
Use nomes intuitivos para os seus arquivos, de leitura fcil, no crpticos, e que

funcionem bem on-line:
No use espaos, letras maisculas ou caracteres especiais.
Use apenas letras, nmeros, barras e sublinhados.
Se gravar mltiplas verses do mesmo arquivo, desenvolva um sistema de
numerao consistente como menu01.swf, menu02.swf e assim por diante.
Pense em usar apenas caracteres em minscula em seus esquemas de nomeao,
pois alguns software do servidor diferenciam maisculas e minsculas.
Considere um sistema de nomeao que use a combinao substantivo-verbo ou
adjetivo-substantivo para dar nomes ao arquivo, por exemplo,
planejamentoclasse.swf e meuprojeto.swf.

17.3 Organizao do act ion script em um apli cativo

Sempre que possvel, coloque o ActionScript em um nico local. A organizao do
cdigo em um lugar ajuda a editar os projetos com mais eficincia, pois podemos
evitar a busca em locais diferentes quando depuramos ou modificamos o
ActionScript.
Se colocar cdigo no arquivo FLA, coloque o ActionScript no Quadro 1 ou no
Quadro 2, em uma camada chamada aes na camada mais alta da Linha do tempo.

17.4 Convenes de vdeo

H muitas opes disponveis para editar o vdeo, antes de importarmos para um
documento FLA, ou para carregar um arquivo FLV para um arquivo SWF. O Flash e
o Adobe Media Encoder tm controles melhores para compresso de vdeo. A
compresso cuidadosa do vdeo importante porque ela controla a qualidade da
seqncia de imagens do vdeo e o tamanho do arquivo. Os arquivos de vdeo, mesmo
comprimidos, so grandes em comparao com a maioria dos outros recursos do
arquivo SWF.
Antes de importar o vdeo para o Flash, considere a qualidade de vdeo que necessita,
que formato de vdeo usar com o arquivo FLA e como fazer o download. Se importar
vdeo para um arquivo FLA (chamado vdeo incorporado), ele aumenta o tamanho do
arquivo SWF para publicao. O download deste vdeo comea a ser feito,
progressivamente, para o computador do usurio, seja o vdeo visualizado ou no.
Podemos exibir o vdeo externo FLV usando um componente ou um objeto de vdeo.
Um componente facilita o desenvolvimento de aplicativos com o vdeo FLV,
porque os controles do vdeo so pr-construdos e h necessidade apenas de
especificar o caminho do arquivo FLV para reproduzir o contedo.
Para manter o arquivo SWF o menor possvel, exiba o vdeo em um objeto de vdeo e
crie seus prprios recursos e cdigos para controlar o vdeo. Considere, tambm, o
uso do componente FLVPlayback do Flash CS5 Professional, que tem tamanho de
arquivo menor do que os componentes de Media (Flash MX Professional 2004 e
posterior).

uma boa idia dar algum controle aos usurios (como a capacidade de parar, dar
pausa, reproduzir e reiniciar o vdeo, alm de controlar o volume) sobre o vdeo em
um arquivo SWF.
Para conquistar algum tipo de flexibilidade sobre o vdeo, como manipular o vdeo
com animao ou sincronizar diversas partes dele com a linha do tempo, incorpore o
vdeo no arquivo SWF, em vez de carreg-lo usando o ActionScript ou um dos
componentes Media.
Para maior controle sobre um smbolo de vdeo que a classe Vdeo permite,
coloque o vdeo dentro de um Movie Clipe. A linha do tempo do vdeo
reproduzida independentemente de uma linha do tempo do Flash e podemos colocar o
contedo dentro de um clipe de filme para controlar as linhas de tempo.

17.5 Exportao, compresso e hospedagem de
arquivos FLV

Podemos exportar arquivos FLV dos ambientes de criao do Flash. Aps a
exportao do vdeo para o documento, ele aparece como smbolo de vdeo na
biblioteca. Para exportar o vdeo como FLV, selecione o vdeo e depois selecione
Biblioteca > Propriedades. Para definir configuraes de exportao, clique em
Exportar na caixa de dilogo Propriedades do vdeo incorporado.
O exportador QuickTime do FLV comprime vdeos de software de edio de vdeo
de terceiros.
Quando for comprimir o vdeo, lembre-se das seguintes recomendaes:
No comprima novamente o vdeo. Recomprimir novamente um vdeo provoca
degradao da qualidade, como artefatos. Use seqncias filmadas no processadas,
ou as menos comprimidas, que tenha disponveis.
Faa o seu vdeo o mais curto possvel. Apare o incio e o fim do vdeo e edite
para remover todo o contedo desnecessrio. Isso pode ser conseguido diretamente no
Flash usando o assistente de importao de vdeo.

17.6 Otimizao dos arquivos Fla para sada SWF

Na medida em que aumenta o tamanho do arquivo de documentos, tambm
aumenta o tempo de download e a velocidade da reproduo. Podemos tomar diversas
medidas para preparar nosso documento para uma melhor reproduo.
Como parte do processo de publicao, o Flash executa automaticamente alguma
otimizao nos documentos. Antes de exportar um documento, podemos otimiz-lo
ainda mais usando diversas estratgias para reduzir o tamanho do arquivo. Podemos,
tambm, comprimir o arquivo SWF na publicao.

Enquanto fazemos as mudanas, teste o documento executando-o em diversos
computadores, sistemas operacionais e conexes da internet.

Para otimizao de documentos siga as seguintes diretrizes:
Use smbolos, animados ou no, para todos os elementos que aparecem mais de
uma vez.
Use animaes interpoladas sempre que possvel na criao de seqncias
animadas. As animaes interpoladas usam menos espao de arquivo do que uma srie
de quadros- chave.
Use clipes de filme em vez de smbolos grficos para seqncias de animao.
Limite a rea de mudana em cada quadro-chave; faa a ao acontecer na menor
rea possvel.
Evite elementos de bitmap animados; use imagens de bitmaps como elementos
estticos ou de fundo.
Use mp3, o menor formato de som, sempre que possvel.
Limite o nmero de tipos de linhas especiais, como tracejadas, pontilhadas,
irregulares e assim por diante. As linhas slidas exigem menos memria. As linhas
criadas com a ferramenta Lpis exigem menos memria que os traados com pincel.
Limite o nmero de fontes e de estilos de fonte. Use fontes incorporados com
moderao, pois elas aumentam o tamanho do arquivo.
Use gradientes com moderao. O preenchimento de uma rea com cor
gradiente exige cerca de 50 bytes a mais do que preench-la com cor slida.
Use transparncia alfa com moderao, pois ela retarda a reproduo.

O melhor formato de bitmap a ser importado para o Flash o PNG, o formato
nativo do Adobe Fireworks. Os arquivos PNG tm informaes RGB e alfa para cada
pixel.
A taxa mais alta de quadros (medida em quadros por segundo, ou fps) produz uma
animao suave em um arquivo SWF mas pode exigir muito do processador,
principalmente em computadores mais antigos. Teste as animaes em taxas de
quadros diferentes, para encontrar a menor taxa de quadros possvel.
O bitmap em cache ajuda a melhorar o desempenho de clipes de filmes de contedo
esttico nos aplicativos. Quando definimos as propriedades
MovieClip.cacheAsBitmap ou Button.cacheAsBitmap para verdadeiro, o Flash Player
coloca em cache a representao interna do bitmap do clipe de filme ou da ocorrncia
do boto. Isso pode melhorar o desempenho dos clipes de filme com contedo
vetorial complexo. Todos os dados vetoriais de um clipe de filme que tm bitmaps
em cache so desenhados no bitmap, em vez de no Palco principal.

Apostila FLASH CS5

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

Apostila FLASH CS5

Загружено:

Авторское право:

Доступные форматы

Adobe Flash CS5:

Вам также может понравиться