You are on page 1of 103

Adobe Flash CS5

:
Multimídia Interativo



Adobe Flash CS5: Multimídia Interativo

2 2010 Alfamídia Prow.
Todos os direitos reservados para Alfamídia Prow.

AVISO DE RESPONSABILIDADE
As informações contidas neste material de treinamento são distribuídas “NO ESTADO EM
QUE SE ENCONTRAM”, sem qualquer garantia, expressa ou implícita. Embora todas as
precauções tenham sido tomadas na preparação deste material, a Alfamídia Prow não tem
qualquer responsabilidade sobre qualquer pessoa ou entidade com respeito à
responsabilidade, perda ou danos causados, ou alegadamente causados, direta ou
indiretamente, pelas instruções contidas neste material ou pelo software de computador e
produtos de hardware aqui descritos.


06/2010 – Versão 1.0


Alfamídia Prow
http://www.alfamidia.com.br
Adobe Flash CS5: Multimídia Interativo

3 2010 Alfamídia Prow.
A Alfamídia dá Boas Vindas aos seus clientes e deseja um
excelente treinamento.
- Suporte pós-treinamento via e-mail (3 consultas por 90 dias após o término do curso) para
tirar dúvidas do
Benefícios ao aluno
conteúdo ministrado em aula, através do e-mail
matricula@alfamidia.com.br;
- Acesso a extranet www.alunoalfamidia.com.br para verificação de agenda e pontos do
PROGRAMA FIDELIDADE;
- Convênio com o estacionamento do prédio (desconto);
- Avaliações de acompanhamento e final de curso (em cada módulo) durante todo o
treinamento, garantindo a qualidade do curso.
Observações Importantes
- É obrigatório que sejam salvos todos os trabalhos efetuados durante a aula, no servidor
indicado pelo instrutor.
- Não é permitido entrar em sala de aula com alimentos ou bebidas de qualquer espécie ou
fumar nas dependências da Alfamídia;
- Não é permitida a instalação de outros Hardwares ou Softwares que não sejam os
utilizados em treinamento;
- O preenchimento da avaliação final de curso/módulo é condição obrigatória para que o
aluno possa acionar a garantia do curso, conforme previsto na ficha de matrícula;
- Somente será fornecido certificado ao aluno com assiduidade igual ou superior a 75% do
treinamento;
- Qualquer necessidade de alteração na agenda ou cursos contratados inicialmente, consulte
os Termos de Contratação na Ficha de Matrícula;
- Contatos com a Alfamídia podem ser feitos através dos e-mails:
matricula@alfamidia.com.br – dúvidas após contratação
info@alfamidia.com.br – novas contratações
Adobe Flash CS5: Multimídia Interativo

4 2010  Alfamídia Prow.

Adobe Flash CS5: Multimídia Interativo
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 GRÁFICOS ..................................................................................... 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 LABORATÓRIO: INICIANDO A MONTATGEM DO HOTSITE ................................................................ 20
UNIDADE 3 USANDO SIMBOLOS E ANIMANDO ............................................................................................................ 21
3.1 TIPOS DE SÍMBOLOS ....................................................................................................................... 21
3.2 BIBLIOTECA ................................................................................................................................... 22
3.3 PADRÕES COM A FERRAMENTA SPRAY BRUSH ............................................................................. 23
3.4 DESENHANDO COM A DECO TOOL .................................................................................................. 24
3.5 TRABALHANDO COM LINHAS DE TEMPO ........................................................................................ 25
3.6 ANIMAÇÃO INTERPOLADA ............................................................................................................. 26
3.7 USANDO O MOTION EDITOR ............................................................................................................ 27
3.8 INTERPOLAÇÃO DE FORMAS .......................................................................................................... 28
3.1 SHAPE HINTS .................................................................................................................................. 29
3.9 ANIMAÇÃO QUADRO A QUADRO ..................................................................................................... 29
3.2 MOVIMENTANDO OBJ ETOS NO ESPAÇO 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 TRANSIÇÃO ENTRE TEXTOS ............................................................................................................ 35
4.5 IMPORTANDO MÍDIAS ..................................................................................................................... 37
4.6 LABORATÓRIO: BREAK A PART EM BITMAP ................................................................................... 39
UNIDADE 5 MÁSCARAS NA ANIMAÇÃO ......................................................................................................................... 40
Adobe Flash CS5: Multimídia Interativo

5 2010  Alfamídia Prow.
5.1 USANDO MÁSCARAS ...................................................................................................................... 40
5.2 EFEITOS DE PREENCHIMENTO ......................................................................................................... 41
5.3 MÁSCARA ARRÁSTAVEL ................................................................................................................. 42
5.4 MÁSCARA COM GRADIENTE ........................................................................................................... 43
5.5 CRIANDO ANIMAÇÕES COM FILTROS .............................................................................................. 45
5.6 LABORATÓRIO: TEXTOS COMO MÁSCARAS .................................................................................... 46
5.7 LABORATÓRIO: MOVIMENTO COM MÁSCARAC ............................................................................... 46
UNIDADE 6 CINEMÁTICA INVERSA (IK) .......................................................................................................................... 47
6.1 CINEMÁTICA INVERSA (IK) ............................................................................................................ 47
6.2 ADICIONANDO BONES A SÍMBOLOS ................................................................................................. 47
6.3 ADICIONAR BONES A SHAPES .......................................................................................................... 49
6.4 CONVERTENDO A ARMADURA EM UM SÍMBOLO ............................................................................. 50
UNIDADE 7 CRIANDO BOTÕES ......................................................................................................................................... 52
7.1 O SÍMBOLO BOTÃO ........................................................................................................................ 52
7.2 ANIMANDO OS BOTÕES ................................................................................................................... 53
7.3 PERSONALIZANDO O CURSOR ........................................................................................................ 54
UNIDADE 8 INTRODUÇÃO AO ACTION ........................................................................................................................... 55
8.1 UTILIZANDO UMA SINTAXE DE SCRIPT ADEQUADA ......................................................................... 56
8.2 VISÃO GERAL DO PAINEL ACTION ................................................................................................... 56
UNIDADE 9 NAVEGAÇÃO NO FLASH .............................................................................................................................. 59
9.1 CARREGANDO ARQUIVOS EXTERNOS .............................................................................................. 59
9.2 NAVEGAÇÃO NA TIMELINE ............................................................................................................. 61
9.3 USANDO LABEL .............................................................................................................................. 62
9.4 CRIANDO ROLAGEM DE CONTEÚDO ................................................................................................ 63
9.5 OS COMPONENTES NO FLASH ......................................................................................................... 66
UNIDADE 10 TRABALHANDO COM TEXTOS DINAMICOS ............................................................................................. 68
10.1 BUSCA DE VARIÁVEIS EM UM ARQUIVO DE TEXTO .......................................................................... 68
10.2 TEXTO COM FORMATAÇÃO HTML .................................................................................................. 69
UNIDADE 11 AUDIO NO FLASH ........................................................................................................................................... 71
11.1 IMPORTANDO ÁUDIO PARA O FLASH ............................................................................................... 71
11.2 CONFIGURAÇÕES DO SOM NO FLASH .............................................................................................. 71
11.3 CARREGANDO ÁUDIO EXTERNO ...................................................................................................... 73
11.4 INSERINDO ÁUDIO EM BOTÕES ...................................................................................................... 75
UNIDADE 12 CRIANDO FORMULÁRIO ............................................................................................................................... 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 EXPANSÍVEL ..................................................................................................................... 85
14.3 USANDO TRANSIÇÕES COM ACTION SCRIPT .................................................................................... 88
UNIDADE 15 IMPORTANTO VÍDEO ..................................................................................................................................... 90
15.1 IMPORTANDO VÍDEOS ..................................................................................................................... 90
Adobe Flash CS5: Multimídia Interativo

6 2010  Alfamídia Prow.
15.2 USANDO O ADOBE MEDIA ENCODER CS5 ..................................................................................... 91
15.3 MÁSCARAS EM VÍDEOS ................................................................................................................... 93
15.4 VÍDEO EM TELA CHEIA ................................................................................................................... 93
UNIDADE 16 PUBLICANDO DOCUMENTOS NO FLASH ................................................................................................. 95
16.1 CONFIGURAÇÕES DE PUBLICAÇÃO ................................................................................................ 95
16.2 FLASH ............................................................................................................................................ 96
16.3 HTML ............................................................................................................................................. 96
16.4 GIF ................................................................................................................................................. 97
16.5 PNG .............................................................................................................................................. 98
16.6 FULLSCREEN .................................................................................................................................. 99
UNIDADE 17 MELHORES PR’ATICAS .............................................................................................................................. 100
17.1 ORGANIZAÇÃO DA LINHA DE TEMPO E DA BIBLIOTECA ............................................................... 100
17.2 GRAVAÇÃO DE ARQUIVOS E CONTROLE DE VERSÃO .................................................................... 100
17.3 ORGANIZAÇÃO DO ACTIONSCRIPT EM UM APLICATIVO ............................................................... 101
17.4 CONVENÇÕES DE VÍDEO ............................................................................................................... 101
17.5 EXPORTAÇÃO, COMPRESSÃO E HOSPEDAGEM DE ARQUIVOS FLV ................................................ 102
17.6 OTIMIZAÇÃO DOS ARQUIVOS FLA PARA SAÍDA SWF .................................................................. 102
Adobe Flash CS5: Multimídia Interativo

7 2010  Alfamídia Prow.
Unidade 1
O Ambiente de trabalho do Flash CS5

As animações para Web, tempo atrás, eram feitas principalmente com GIFs
animados. A principal dificuldade para os desenvolvedores do Flash era a
necessidade de plugin, entretanto a quantidade de usuários que possui o plugin
cresceu tanto que o software se tornou o principal meio para a produção de animações
para Web.


Na versão CS5 o Flash não vem mais com dois
programas distintos. Possui apenas a versão 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 básico do Flash em
branco, opção que utiliza a estrutura de criação
tradicional do programa. Temos esta opção tanto
para a versão 2.0 quanto 3.0 do ActionScript.

- Flash File (Adobe AIR): O Adobe®
AIR™ é a execução entre vários sistemas
operacionais, permite potencializar os recursos
locais da área de trabalho e os dados para
garantir experiências mais pessoais e
envolventes.

- Flash File (Mobile): utilizada para criar um arquivo compatível com o Flash
Lite (Flash para dispositivos móveis).

- ActionScrit File: gera outro documento numa espécie de editor de texto dentro
do Flash para digitarmos scripts do Flash. Este arquivo possui a extensão “. as”.

- ActionScript Communication File: funciona da mesma forma que a opção
anterior, mas destinado a escrever scripts para o Flash Media Server (servidor para
aplicações server) O arquivo gerado terá a extensão “. asc”.
- Flash Javascript File: permite criar scripts que controlem e auxiliem a utilização
do programa. O arquivo terá a extensão “J SFL”.
Adobe Flash CS5: Multimídia Interativo

8 2010  Alfamídia Prow.

- Flash Project: Um projeto Flash pode agrupar e organizar diversos arquivos
e posteriormente publicá-los no servidor de hospedagem que for configurado.
É possível 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 espaço,
facilitando sua utilização.
Na tela inicial crie um novo documento (Flash File ActionScript 3.0).


Do lado direito temos os painéis juntos. Podemos expandi-los ou retraí-los
apenas clicando nas setas ao lado direito superior.




Ao escolher esta opção vemos os painéis em forma de ícones:
Alguns painéis possuem opções adicionais que podem ser chamadas
clicando no ícone a sua direita no topo.
Adobe Flash CS5: Multimídia Interativo

9 2010  Alfamídia Prow.

Para abrir um painel que não esteja na tela, clique no menu Window, e entre suas
opções escolha o painel desejado.
Também, é possível alterar a posição 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 botão 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á realçada (em tom de azul).
Se soltá-lo em uma área que não ficou realçada, o painel ficará flutuante na tela.
Se em algum momento desejarmos que todos os painéis sejam escondidos, basta
clicarmos na tecla F4.

1.3 Personalizando a int erf ace
É importante a customização 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 é responsável
por escolher e gerenciar os layouts de área de trabalho como: forma e
posicionamento dos painéis. Por default temos a área de trabalho “Classic”
É possível gravar as configurações que tenhamos criado para escolhê-la
posteriormente, escolhendo a opção New Workspace. Na janela digite um nome
para este layout de painéis e clique em OK.

Caso queira renomear ou remover um modelo de layout criado na área de Workspace
Adobe Flash CS5: Multimídia Interativo

10 2010  Alfamídia Prow.
basta escolher a opção Manage Workspaces e definir as opções desejadas na janela.

1.4 Painel Propert ies
O Painel Properties fácil acesso aos atributos usados mais freqüentemente da seleção
atual, no Palco ou na Linha do tempo. É possível fazer alterações nos atributos do
objeto ou do documento, sem acessar menus ou painéis que também controlam esses
atributos.



Dependendo da seleção atual, este painel exibe informações e configurações para o
documento, o texto, o símbolo, a forma, o bitmap, o vídeo, o grupo, o quadro ou a
ferramental atual. Quando dois ou mais tipos diferentes de objetos são selecionados,
o Painel Properties exibe o número total de objetos selecionados.
Uma área muito importante no Flash é o palco (Stage). Somente os elementos
que estiverem nessa área aparecerão 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 não estivermos com nenhum objeto selecionado no palco a opção basta
clicarmos no botão Edit ao lado da opção Size.
- Na área Dimensions definimos Largura (Width) e altura (Height) do Stage do
Flash.
- Na área Match podemos fazer com que as dimensões do Stage se modifiquem
de acordo com a área de impressão (Printer), que acomodem todos os elementos em
cena (Contents) ou que utilizem à dimensão padrão (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 réguas.
Adobe Flash CS5: Multimídia Interativo

11 2010  Alfamídia Prow.
Se desejarmos que essas configurações sejam a padrão para os novos filmes do
Flash (exceto os metadados, que devem ser criados para cada filme), basta clicarmos
no botão Make Default.

1.5 A TimeLine
A linha do tempo organiza e controla o conteúdo de um documento com o passar
do tempo em camadas e quadros. Como os filmes, os documentos Flash dividem
espaços de tempo em quadros. As camadas são como várias 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 são camadas (layers), quadros
(frames) e o indicador de reprodução.

As camadas em um documento são listadas em uma coluna no lado esquerdo da
Linha do tempo. Os quadros contidos em cada camada são exibidos em uma linha
à direita do nome da camada. O cabeçalho da Linha do tempo, na parte superior da
Linha do tempo, indica os números dos quadros. O indicador de reprodução indica o
quadro atual exibido no Palco. Durante a reprodução de um documento, o indicador
de reprodução é 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
rápida a animação estará.




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



Este painel contém as ferramentas necessárias 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 botão do mouse é mantido pressionado sobre
um ícone, as outras ferramentas no grupo são exibidas em um menu pop-up.

Adobe Flash CS5: Multimídia Interativo

12 2010  Alfamídia Prow.




Dependendo da ferramenta selecionada, talvez um conjunto de modificadores seja
exibido na área de opções, na parte inferior do painel Tools.



Podemos, também, personalizar este painel clicando em Edit >Customize Tools
Panel.


1.6 Fla ou SWF
Os arquivos editáveis do Adobe Flash possuem o formato.fla, entretanto, por
guardarem todas as informações necessárias para edição, 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 não pode ser editado

Adobe Flash CS5: Multimídia Interativo

13 2010  Alfamídia Prow.
Unidade 2
Modos de Desenhos e objetos gráficos
No Flash, podemos criar vários tipos de objetos gráficos com diferentes modos
de desenho e ferramentas de desenho. Cada tipo tem suas próprias vantagens e
desvantagens. Entendendo os recursos dos diferentes tipos de objeto gráfico,
tomaremos boas decisões sobre quais tipos de objetos usar em nosso trabalho.
2.1 Modo Obj ect Drawing

Por padrão (quando o modo Object Drawing
estiver desativado) as formas que criarmos
não serão consideradas como objetos
separados. Por exemplo, se desenharmos um círculo e sobrepor um círculo
menor sobre ele ( de cores diferentes) e depois selecionar o círculo
menor e movê-lo, a parte do segundo círculo sobreposta ao primeiro é
removida.

Quando uma forma tem um traçado e um preenchimento, estes são
considerados elementos gráficos 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 serão tratados como objetos separados, os quais podem ser
sobrepostos a outros sem haver a perda de nenhuma informação.


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.

Adobe Flash CS5: Multimídia Interativo

14 2010  Alfamídia Prow.
2.2 Obj ect Primitive
Primitivas de objetos são formas gráficas que permitem que ajustemos suas
características. 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 começo.

Os dois tipos de primitivas que estão disponíveis são: Rectangle Primitive e
Oval Primitive.




Quando criamos retângulos 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
retângulos, o ângulo inicial, final e o raio interno de ovais usando os controles
do Painel Properties.

► O painel properties retém os valores do último objeto que você
editamos. Por exemplo, se você modificar um retângulo e depois desenhar
um segundo retângulo.

2.3 Formas rectagule e Oval
Com essas ferramentas Oval e Rectangle podemos criar formas geométricas
básicas e aplicar traçados, preenchimentos e especificar cantos arredondados.
Para as estas ferramentas, arraste e mantenha a tecla Shift pressionada para
restringir as formas em círculos e quadrados.

Para determinar um tamanho específico 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.
.
Adobe Flash CS5: Multimídia Interativo

15 2010  Alfamídia Prow.


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

No painel Properties clique no botão Options e na caixa de diálogo Tools Settings,
escolha a opção 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 (lápis) quase da mesma
maneira em que usa um lápis de verdade para desenhar. Para aplicar
suavização ou correção às linhas e formas enquanto desenha, selecione
um modo desenho para a mesma.
- Straighten: para desenhar linhas retas e converter aproximações de
triângulos, ovais, círculos, retângulos e quadrados nessas formas geométricas
comuns.
- Smooth: para desenhar linhas curvas
suaves.
- Ink: para desenhar linhas a mão livre sem aplicar modificações

2.6 Pint ando com o Brush
A ferramenta Brush desenha traçados semelhantes a pinceladas. Ela cria
efeitos especiais, inclusive caligráficos.

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

Adobe Flash CS5: Multimídia Interativo

16 2010  Alfamídia Prow.
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 não fica visível 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 seleção 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 círculo aparecerá ao lado do ponteiro da
ferramenta Pen.
As curvas são mais fáceis de serem editadas e seu sistema pode exibi-las e
imprimi-las mais rápido se elas forem desenhadas usando o menor número de
pontos de ancoragem possível. O uso de muitos pontos também pode gerar
saliências indesejadas em uma curva.
Para desenhar uma curva, siga os passos:
- Posicione a ferramenta Pen no início da curva e mantenha o botão do
mouse pressionado.

- O primeiro ponto de ancoragem aparece e o ponteiro da ferramenta Pen
muda para uma seta.
- Arraste para definir a inclinação do segmento curvado que estiver
criando e, em seguida, solte o botão 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
Adobe Flash CS5: Multimídia Interativo

17 2010  Alfamídia Prow.
Subselection (seta brabca) e selecione o segmento. Use-a, também, para
arrastar um ponto de ancoragem do segmento para uma posição nova.
Ao selecionarmos o ponto, veremos uma ou duas alças que orientam a
curvatura. Para alterar a curva, podemos arrastar as extremidades dessas alças
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 alça.
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 posição 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 transformações individuais ou combinar várias
transformações, tais como mover, girar, dimensionar, inclinar e distorcer,
usando a ferramenta Free Transform.
Siga os procedimentos abaixo:
- Selecione um objeto gráfico, grupo, ocorrência ou bloco de texto no Palco.
Adobe Flash CS5: Multimídia Interativo

18 2010  Alfamídia Prow.


- Clique na ferramenta Free Transform.
► Mover o ponteiro sobre e ao redor da seleção faz com que o ponteiro mude
para indicar qual função de transformação está disponível.
- Para transformar a seleção, arraste as alças.

- Para mover a seleção, posicione o ponteiro sobre o objeto na caixa delimitadora e
arraste o objeto para uma nova posição. Não arraste o ponto de transformação.
- Para definir o centro de rotação ou dimensionamento, arraste o ponto de
transformação para um novo local.
- Para girar a seleção, posicione o ponteiro perto da parte de fora da alça do canto e
arraste. A seleção gira em torno do ponto de transformação. 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 direção, arraste uma alça do canto ou
uma alça lateral horizontal ou verticalmente.
- Para inclinar a seleção, posicione o ponteiro no contorno entre as alças de
transformação e arraste.
- Para finalizar a transformação, clique fora do item selecionado.

► Pode ser usado, também, o modificador de Envelope que permite uma
deformação nos objetos. Um envelope é uma caixa delimitadora que contém um ou
mais objetos. As alterações feitas em uma forma de envelope afetam a forma dos
objetos no envelope. Editamos a forma de um envelope ajustando seus pontos e alças
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 opção To stage estiver selecionada indica que todas as modificações serão
aplicadas em relação à Stage.
Temos uma facilidade no Flash quanto temos mais de um elemento no palco.

Enquanto arrastamos algum objeto aparecem linhas pontilhadas indicando um
Adobe Flash CS5: Multimídia Interativo

19 2010  Alfamídia Prow.
possível alinhamento em relação a outro elemento. Este é o modo
Snap Align.
Para ativar este ajuste, escolha a opção de menu: View >Snapping >Snap Align
(por padrão esta opção já vem habilitada)

2.11 O painel Ali gn
Modelos de cores descreve as cores que vemos e com que trabalhamos em gráficos
digitais. Cada modelo de cor, como RGB, HSB ou CMYK, representa um método
diferente para descrever e classificar cor. Os modelos de cores usam valores
numéricos para representar o espectro visível da cor. O espaço de cor é uma variante
de um modelo de cor e tem uma gama (intervalo) específica de cores. Por exemplo,
dentro do modelo de cores RGB, há vários espaços de cores: Adobe® RGB,
sRGB e Apple®RGB
Embora cada um desses espaços de cor defina a cor usando os mesmos três
eixos (R, G e B), as respectivas gamas são diferentes.
Como cada dispositivo tem o seu próprio espaço de cores, cada um pode
reproduzir cores apenas na sua gama.
Ao criarmos cores para uso em documentos Flash, devemos lembrar que,
embora seja impossível coincidir com exatidão todas as cores em dispositivos
diferentes, podemos obter bons resultados considerando os recursos de
exibição gráfica dos dispositivos em uso por nosso público-alvo.






O painel Color permite que modifiquemos a paleta de cores de um FLA e alteremos
as cores de traçados 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 (configuração padrão) 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 transições
de cor em um gradiente. A criação de gradiente é uma boa maneira de criar uma
graduação 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 não estiver visível, selecione Window >Color.
- Selecione o tipo de gradiente no menu Style:
Adobe Flash CS5: Multimídia Interativo

20 2010  Alfamídia Prow.
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 direção do preenchimento gradiente linear para
múltiplos de 45°

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

2- Desenhe um retângulo 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

Adobe Flash CS5: Multimídia Interativo

21 2010  Alfamídia Prow.
Unidade 3
Usando Símbolos e Ani mando

Os elementos desenhados no Flash com as suas ferramentas de desenho
correspondem a formas vetoriais. Esses desenhos não suportam determinados
tipos de animação que o Flash pode realizar, bem como não permitem diversas
aplicações. Para tornar o elemento compatível com as aplicações, é necessário
convertê-lo em símbolo.
Ao transformarmos um desenho ou objeto em um símbolo, aplicamos um
comportamento a esse objeto, indicando que agora ele deve receber ações e
comportar-se de forma específica.
Todo símbolo criado é armazenado na Library (Biblioteca) e pode ser reutilizado
diversas vezes, o que não aumenta de forma significativa o tamanho final do filme.


3.1 Tipos de Símbolos

Cada símbolo 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
símbolo, da mesma forma que na Linha de tempo da cena principal. Temos os
seguintes símbolos no Flash:
- Gráficos (Graphic): usamos estes símbolos gráficos para imagens estáticas e para
criar partes reutilizáveis de animação vinculadas à Linha de tempo principal. Os
símbolos gráficos operam em sincronização com a Linha de tempo principal. Em uma
sequência de animação de símbolo gráfico, os controles e sons interativos não
funcionam. Os símbolos gráficos adicionam menos tamanho ao arquivo FLA do que
botões ou clipes de filme, pois não possuem Linha de tempo.
- Botões (Button): usamos estes símbolos para criar botões interativos que
respondam a cliques do mouse, rolagens ou outras ações.
- Clipe de Filme (Movie Clip): com estes símbolos podemos criar partes
reutilizáveis de animação. Os clipes de filme têm a sua própria Linha de tempo com
vários 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 ocorrências de clipe de filme. Também podemos criar botões
animados, colocando ocorrências de clipe de filme dentro da Linha de tempo de um
símbolo de botão.
Para criar um símbolo siga os passos:
1- Crie uma forma semelhante a uma “lua” no palco

2- Com essa forma selecionada, clique no menu:
Adobe Flash CS5: Multimídia Interativo

22 2010  Alfamídia Prow.
Modify >Convert to Symbol ou pressione a tecla F8.






Abre-se a tela Convert to Symbol. Nessa tela, além de nomeá-lo, podemos definir
que tipo de símbolo o objeto será. Ao definir o tipo de símbolo, estamos
determinando de que forma nosso objeto se comportará.
3- Atribua um nome ao seu símbolo, definindo que ele deve ser um Movie Clip.
Observe que ao lado das opções de comportamento do símbolo temos uma opção
denominada Registration, na qual podemos definir o ponto de registro do símbolo, o
qual é muito útil, uma vez que permite determinar o ponto de rotação de um símbolo,
por exemplo.
4- Deixe marcada a opção padrão (ponto superior esquerdo).

5- Clique em OK.


3.2 Bibliot eca


Os símbolos 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 símbolo 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 instância, uma vez que ele é apenas uma aparição do símbolo na
tela.
Podemos ter um símbolo aparecendo diversas vezes na tela. Neste caso teríamos
diversas instâncias do símbolo no palco.
Uma vez que modifiquemos um símbolo, todas as instâncias que o usam como
referência também sofreram a alteração.
6- Vamos criar uma estrela. Selecione a forma PolyStar Tool e na janela
Properties clique em Options e selecione a opção Star
7- Desenhe esta forma no palco do Flash e transforme-a em um símbolo do tipo
Movie Clip.
Observe que nossos dois símbolos criados estão na biblioteca.
Ao convertemos um objeto em Movie Clipe, atribuímos a ele a possibilidade de
ser animado independentemente do filme principal.


8- Vamos entrar no modo de edição do símbolo “estrela”. Dê
Adobe Flash CS5: Multimídia Interativo

23 2010  Alfamídia Prow.
um duplo clique nela.
Na edição deste símbolo temos camadas, o que significa que
podemos animar a estrela na sua própria linha de tempo.







3.3 Padrões com a Ferrament a spray brush

A ferramenta Spray Brush age como um borrifador de partículas, permitindo que
“pincelemos” um padrão de formas no Palco de uma única vez. Por padrão, o Pincel
de borrifar emite uma borrifada de partículas de pontos, usando a cor de
preenchimento selecionada no momento. No entanto, podemos usar o Pincel de
borrifar para aplicar clipe de filme ou símbolo gráfico como um padrão.
1- Crie um Movie Clipe através do menu Insert >New Symbol.
2- Desenhe uma estrela e crie uma interpolação 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 opção Symbol para
selecionar um símbolo personalizado na Biblioteca. Selecione a estrela.
6- Marque as opções do painel Properties semelhante a imagem.

► Podemos usar qualquer clipe de filme ou símbolo gráfico na Biblioteca como
uma “partícula”. Essas partículas baseadas em símbolos oferecem um grande controle
criativo sobre a arte criada no Flash.e deseja que o
padrão seja exibido.








8- Teste a animação

Adobe Flash CS5: Multimídia Interativo

24 2010  Alfamídia Prow.
3.4 Desenhando com a Deco Tool

As ferramentas de Desenho decorativo permitem que transformemos as formas
gráficas em padrões geométricos complexos. As ferramentas de Desenho decorativo
usam cálculos algorítmicos conhecidos como modelagem procedural. Esses cálculos
são aplicados a um clipe de filme ou símbolo gráfico que está na biblioteca.
O efeito Vine Fill permite que preenchamos o Palco, um símbolo ou uma região
fechada com um padrão de videira. Podemos substituir a sua própria arte pelas folhas
e flores, selecionando símbolos da biblioteca. O padrão resultante fica contido em
um clipe de filme que contém os símbolos que formam o padrão.
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 animação.


Branch angle: especifica o ângulo do padrão de ramificação.
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 extensão dos segmentos entre os nós da folha e da flor.
Animate Pattern: especifica que cada iteração do efeito seja desenhada em um
novo quadro na linha de tempo. Esta opção cria uma seqüência animada quadro a
quadro do padrão 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 Gráficos

Adobe Flash CS5: Multimídia Interativo

25 2010  Alfamídia Prow.



3.5 Trabal hando com li nhas de t empo

Como os filmes, os documentos Adobe®Flash®CS5 Professional dividem espaços
de tempo em quadros. Na Linha de tempo, trabalhamos com esses quadros para
organizar e controlar o conteúdo do documento.
O quadro-chave é um quadro em que aparece uma nova ocorrência do símbolo na
Linha do tempo pela primeira vez. Podemos adicionar um quadro-chave em
branco à Linha do tempo como alocador de espaço dos símbolos que planejamos
adicionar posteriormente ou para deixar explicitamente o quadro em branco.
O quadro-chave de propriedade é aquele em que definimos uma mudança nas
propriedades de um objeto para uma animação. O Flash pode interpolar ou preencher
automaticamente os valores de propriedade entre os quadros-chave de propriedade a
fim de produzir animações fluentes. Como os quadros-chave de propriedade
podemos produzir uma animação sem desenhar cada quadro individualmente, eles
facilitam a criação da animação.
Uma série de quadros contendo animação interpolada é chamada de interpolação de
movimento.
Um quadro interpolado é qualquer quadro que faça parte de uma interpolação de
movimento.
Um quadro estático é qualquer quadro que não faça parte de uma interpolação de
movimento.
Organizamos quadros-chave e quadros-chave de propriedade na Linha do tempo
para controlar a sequência de eventos no seu documento e na animação
correspondente.


8- Clique no primeiro quadro da layer1 e escolha a opção
Adobe Flash CS5: Multimídia Interativo

26 2010  Alfamídia Prow.
Create Motion Tween. Automaticamente o Flash cria 24 quadros na linha de tempo.
9- Com a cabeça leitora do frame 24, no painel Properties opção Color Effect e
escolha Alpha no menu Style. Deixe o Alpha em 0%.
10- Para ver a animação clique em CTRL +Enter. Podemos observar:


Uma extensão de quadros com um plano de fundo azul indica uma interpolação de
movimento.
Um ponto preto no primeiro quadro da extensão indica que a extensão interpolada
tem um objeto de destino atribuído a ele. Losangos pretos indicam o último quadro e
todos os outros quadros-chave de propriedade.

11- Salve este arquivo na pasta da lição como ceu.fla

3.6 Animação Int erpolada

As interpolações são aplicadas às ocorrências de símbolos e campos de texto.
- Desenhe uma forma no palco.
- Na layer 1 selecione o quadro e clique com o botão direito em Create Motion Tween
Se o objeto não for do tipo objeto interpolável uma caixa de diálogo será exibida.
A caixa de diálogo permite converter a seleção em um símbolo movie clipe
- Converta a seleção em um movie clipe em Ok.

- Para adicionar movimento à interpolação clique e arraste o objeto no Palco para
uma nova posição.

Aparece um caminho de movimento no Palco, mostrando o caminho da posição no
primeiro quadro da extensão de interpolação até a nova posição.
- Clique e arraste o final da animação para
aumentar o seu tempo de deslocamento.
Adobe Flash CS5: Multimídia Interativo

27 2010  Alfamídia Prow.


- Posicione a cabeça leitora na linha de tempo no quadro 25, por exemplo, e
arraste o símbolo no palco.







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


► Toda modificação da animação é baseada no objeto, basta posicionarmos a
cabeça leitora no tempo que queremos que ocorra a modificação e deslocar o objeto
no palco.


3.7 Usando o motion editor

O painel Motion Editor permite exibir todas as propriedades de interpolação e os
respectivos quadros-chave de propriedade. Ele também oferece ferramentas para
adicionar precisão e detalhes a interpolações.
- Continuando na mesma animação que estamos trabalhando, selecione o objeto no
palco e clique na opção Motion Editor na aba ao lado do painel Timeline.


Adobe Flash CS5: Multimídia Interativo

28 2010  Alfamídia Prow.
Com o Motion Editor podemos aplicar atenuação a qualquer curva de propriedade.
A aplicação de atenuação no Editor de movimento permite criar certos tipos de
efeitos complexos de animação sem criar caminhos complexos de movimento.
► Algumas propriedades têm valores mínimos ou máximos que não podem
ser excedidos, como Transparência Alpha (0-100%).
- Na opção Transformation e com a cabeça leitora no início do gráfico, selecione
Scale X (com a opção Link habilitada) diminuindo o valor e assim diminuindo o
tamanho do objeto, também.
- Posicione a cabeça leitora entre os quadros
15 e 20 no gráfico a marque 100% para a opção Scale X, que fará proporcional
ao Scale Y, também.

Para ajustar quais propriedades aparecem no Editor de movimento, clique no
triângulo perto de uma categoria de propriedade para expandir ou reduzir a categoria.
Pressionando a tecla CTRL definimos um ponto no gráfico.

Pressionando a tecla Alt deixamos este ponto mais suave.

- Teste a animação e veja que a mesma fica mais complexa e
suave com o Motion Editor



3.8 Interpol ação de Formas

Na interpolação de forma, desenhamos uma forma vetorial em um quadro
específico na Linha do tempo e alteramos essa forma ou desenha outra forma em
outro quadro específico. O Flash então interpola as formas intermediárias para os
quadros intermediários, criando a animação de uma forma se transformando em outra.
As etapas a seguir mostram como criar uma interpolação 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 círculo com a ferramenta Oval no quadro 30.
- Na Linha do tempo, selecione um dos quadros entre os dois quadros-chave na
camada que contém as duas formas.
Adobe Flash CS5: Multimídia Interativo

29 2010  Alfamídia Prow.
- Com o botão direito do mouse escolha Create
Motion Tween.

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

3.9 Shape hint s

Em alguns casos a maneira como o Flash interpreta a transição entre as formas é um
pouco confusa, mas temos um modo de indicar ao Flash como deve ser
através das Shapes Hints. Essa opção diz que pontos definidos no início
da animação devem corresponder a pontos que definiremos no final.

- Na mesma animação que acabamos de fazer, selecione o primeiro quadro da
animação e vamos colocar um Shape Hint que servirá de referência para a animação,
escolhendo a opção de menu: Modify >Shape >Add Shape Hint.
- Um círculo vermelho aparece com a letra a em seu centro. Arraste-o para o
canto superior esquerdo da forma.
- Vá ao último quadro da animação e veremos novamente o pequeno círculo. Leve-
o para a posição que considerar correspondente ao círculo do primeiro quadro.
- Repita estes passos para inserir mais Shape Hints.
► Importante: Como as Shape Hints utilizam como seus identificadores letras,
teremos no máximo 26 Shape Hints. Transição entre Textos

3.10 Animação quadro a quadro

Esse processo remonta aos primórdios da animação e se constitui na seqüência de
várias imagens, uma levemente diferenciada da anterior para simular o movimento.

É o tipo de animação mais trabalhoso, entretanto é o que possui resultados mais
satisfatórios em termos visuais.
- Para criarmos uma animação quadro a quadro, vamos desenhar uma elipse e inserir
um Keyframe na posição 2 (a tecla de atalho é o F6).
- Neste caso, a alteração será o deslocamento da elipse. Para fazer isso, vamos
selecionar o quadro 2 e deslocar o desenho da elipse um pouco para baixo da posição
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 animação. Para testá-la, podemos
pressionar a tecla Enter ou testá-la na janela de testes do Flash clicando em CTRL +
Enter.


Adobe Flash CS5: Multimídia Interativo

30 2010  Alfamídia Prow.
3.11 Movimentando objetos no espaço 3d

Podemos mover movie clipes no espaço 3D com a ferramenta 3D Translation e
3D Rotation.
- Crie uma forma no palco do Flash.
- Crie uma animação 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 aparência quando passa sobre um
dos controles.
Ao selecionarmos vários movie clipes, podemos mover um dos objetos
selecionados com a ferramenta Translação 3D e os outros se moverão junto com ele.

Podemos girar os movie clipes no espaço 3D com a ferramenta 3D Rotation . Um
controle de rotação 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 rotação.
O ponteiro muda de aparência quando passa sobre um dos quatro controles.
- Arraste um dos controles de eixo para girar em torno desse eixo ou o controle de
rotação livre (círculo laranja externo) para girar X e Y simultaneamente.



3.12 Painel motion Preset s

Neste painel salvamos as interpolações de
movimento pré-configuradas que podemos aplicar
a um objeto no Palco. Bastando selecionar o objeto
e clicar no botão Aplicar, no painel Motion Presets.
- Crie uma animação com interpolação de
movimento no palco.
- Habilite o painel Motion Presets através do menu
Adobe Flash CS5: Multimídia Interativo

31 2010  Alfamídia Prow.
Window.
- Selecione o objeto que contém a interpolação.
- 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 botão Apply do painel motion presets.
O movimento é aplicado de forma a começar na posição atual do movie clipe no
Palco. Se a predefinição tiver um caminho de movimento associado a ele, o caminho
aparece no Palco.
Para aplicar a predefinição de forma que o respectivo movimento termine na
posição atual do objeto no Palco, pressione a tecla Shift e clique no botão Aplicar


Adobe Flash CS5: Multimídia Interativo

32 2010  Alfamídia Prow.
Unidade 4
Trabalhando com Camadas e Textos

As camadas (Layers) correspondem a um método de trabalho muito prático em
qualquer tipo de software que se utilize de imagens gráficas, sejam elas vetoriais ou
bitmap. Elas permitem organizar mais facilmente conteúdos e localizar elementos.
Um projeto em Flash é mais facilmente organizado e composto graças à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 idêntica ao de diversos outros
programas de edição de imagem. Entretanto, temos algumas opções 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 estarão visíveis ou
não no documento. Ao clicar no olho as camadas ficarão ocultas e ao clicar
novamente, serão 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 visualização dos
preenchimentos e contornos do objeto, deixando-os visíveis apenas através de uma
fina borda colorida. É uma alternativa a opção de ocultar completamente a camada,
uma vez que com essa opção não perdemos a noção do local e tamanho do objeto.
Ao selecionar uma camada, observe a presença de um pequeno lápis, indicando que é
a camada ativa a ser editada.

Ao bloquear a camada, um risco vermelho aparece sobre o lápis,
determinando que aquela camada não pode ser editada por encontrar-se bloqueada

Adobe Flash CS5: Multimídia Interativo

33 2010  Alfamídia Prow.
É 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 posição desejada.
4.1 Distribuindo el ementos em uma camada

Quando temos vários objetos no palco e queremos que cada animação aconteça 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 animação que
cada um pode ter

Tendo três formas em uma mesma camada, podemos selecionar todos e clicando com
o botão direito do mouse selecionar a opção Distribute to layers (Modify >Timeline
>Distribute to Layers).
Quando aplicamos o comando Distribute to Layers, a camada criada assume
automaticamente o nome que atribuímos ao elemento. Quando trabalhamos com
textos e os distribuímos em camadas, as camadas assumem os nomes dos textos.

4.2 Camada Mot ion guide

Durante uma animação, muitas vezes queremos que nosso objeto não apenas
se movimente entre um ponto e outro, mas também siga uma trajetória predefinida.
Para anexar uma trajetória a uma animação, utilizaremos um tipo especial de layer
do Flash chamada Motion Guide.
1- Crie um arquivo novo
2- Selecione a camada e escolha a opção Add Classic Motion
Guide.

3- Crie uma forma geométrica no palco do Flash e transforme-a em um
símbolo gráfico, deixando-o na camada Layer 1.
4- Agora selecione a camada Guide: Layer 1 e faça uma traçado com a
Adobe Flash CS5: Multimídia Interativo

34 2010  Alfamídia Prow.
ferramenta Pencil
5- Estenda as duas layers até o quadro 30.

Após o caminho da Motion Guide estar desenhado para o objeto realmente seguir essa
trajetória, é necessário que tanto no primeiro quanto no último quadro da animação o
ponto central do objeto deve estar conectado a trajetória.
6- Posicione o ponto central do objeto na trajetória 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 animação.
As camadas de guias não são exportadas nem exibidas em um arquivo SWF.
Qualquer camada pode ser uma camada de guia. As camadas de guia são 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 opções 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 botão 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 configurações
disponíveis no painel Properties

Classic Text
Antigamente, tínhamos três opções na hora de criar um campo de texto, Texto
estático, Texto dinâmico e Texto input. Agora no CS5, essas três opções continuam
disponíveis quando selecionamos a opção Classic Text, porem sem as novas
funcionalidades.
O primeiro elemento a ser configurado é o tipo de texto com as seguintes opções:
- Static Text: texto simples que não aceita entrada nem alteração.
- Dynamic Text: texto que podemos alterar por meio de ActionScript.
- Input Text: caixa de entrada de texto.

Adobe Flash CS5: Multimídia Interativo

35 2010  Alfamídia Prow.
No painel Properties temos opções que podemos estar configurando para nosso texto
Quando criamos um texto, podemos utilizar diferentes métodos para renderizá-
lo, escolhendo na opção Character em Anti-alias:
- Use device fonts: faz com o que o filme procure no computador do usuário a
fonte que escolhemos na área Font (não incorpora a fonte no filme), deixando o
filme com um tamanho menor.
- Bitmap Text (No Anti-Alias): remove a opção de suavização de serrilhado,
acentuando o serrilhado da fonte. Não recomendada para textos com fontes
pequenas.
- Anti-Alias for Animation: boa opção para textos envolvidos em animação,
melhora a animação e suaviza o desenho.
- Anti-Alias for Readability: deixa mais fácil a leitura dos textos, principalmente
os que utilizam fontes menores.
- Custom Anti-Alias: nesta opção podemos personalizar a suavização 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 estático que estende, um identificador redondo
é
exibido no canto superior direito do campo de texto.

Para texto horizontal estático 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 animação Shape para fazer a transição entre textos.
Para termos uma animação Shape, precisamos ter uma forma desenhada na tela ou
um texto (tipo static) que não seja editável.
1- Crie um novo documento.
2- Escreva: “Adobe Flash” com a opção de texto estático.

3- Selecione o texto e utilize a opção: Modify >Break Apart

Esta opção separa o texto, deixando cada letra independente, porém ainda editável.

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 versão”.
6- Repita os mesmos procedimentos adotados no primeiro texto.
7- Selecione qualquer quadro entre o primeiro e o penúltimo e aplique uma
Adobe Flash CS5: Multimídia Interativo

36 2010  Alfamídia Prow.
animação Shape.
Pronto, é só testar o resultado. Se achar necessário pode utilizar as Shape Hints.

TLF Text
Essa opção de texto inclui uma serie funcionalidades adicionais de personalização.


Conectando campos de Texto

Selecione a ferramenta texto e crie no palco um campo de texto do tipo TLF.
Digite a palavra “Afamídia Prow” na caixa de texto.

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

Repare que aparece no canto direito da caixa de texto uma marcação 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
Adobe Flash CS5: Multimídia Interativo

37 2010  Alfamídia Prow.
campos ficam ligados.

Contêiner e Fluxo
A seção Contêiner e fluxo do inspetor Propriedade do texto TLF controla as opções
que afetam todo o contêiner de texto. Essas propriedades incluem:

Comportamento: Esta opção controla como o contêiner se expande à medida que a
quantidade de texto aumenta.

Nº máx. de caract.: O número máximo de caracteres permitido no contêiner de
texto. Ativar somente para contêineres de texto cujo tipo esteja definido como
Editável. O valor máximo é 65535.

Alinhamento Especifica o alinhamento do texto no contêiner.

Contagem de colunas Especifica o número de colunas de texto no contêiner. Esta
propriedade é ativada somente para contêineres de texto de área. O valor padrão é 1.
O valor máximo é 50.

Medianizes de coluna Especifica o espaçamento (ou medianiz) entre cada coluna no
contêiner selecionado. O valor padrão é 20. O valor máximo é 1000. A unidade de
medida é definida de acordo com as Unidades da régua definidas nas Configurações
do documento.

Preenchimento Especifica a largura das margens entre o texto e o contêiner
selecionado. O preenchimento pode ser definido para todas as quatro margens
.
Cor da borda A cor do traçado ao redor do exterior do contêiner. O padrão é sem
borda.

Largura da borda A largura do traçado ao redor do exterior do contêiner.

Ativada somente quando uma cor de borda é selecionada. O valor máximo é 200.
Cor do plano de fundo A cor do plano de fundo por trás do texto. O padrão é sem
cor.

4.5 Importando mídi as

Apesar de o Flash possuir suas próprias ferramentas para desenho, em alguns casos
queremos importar nossa arte vetorial, feita em outro software, e manipular a mesma
dentro do Flash.
Também, 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 lição.
Adobe Flash CS5: Multimídia Interativo

38 2010  Alfamídia Prow.
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 botão Properties na parte inferior deste painel

5- Na janela Bitmap Properties marque a opção Allow smoothing e escola Lossless
na opção Compression

Photo (JPEG): se possuirmos uma imagem com grande quantidade de cores e
tonalidades, devemos usar esta opção.
- Lossless (PNG/GIF): se não quisermos que algumas informações de cor e
tonalidade sejam descartadas da imagem, devemos usar esta opção. Ideal para
imagens que não possuem uma quantidade de cores muito grande.
Com estas alterações a qualidade de nosso arquivo já esta melhor.
O Flash pode importar imagens estáticas em diversos formatos, mas geralmente é
usado o formato nativo do Photoshop, o PSD, para importar imagens estáticas do
Photoshop para o Flash.
Ao importar um arquivo PSD, o Flash é capaz de preservar muitos dos atributos
aplicados no Photoshop, fornecendo opções para manter a fidelidade visual da
imagem e para modificá-la.
► O Flash funciona internamente com as cores dos espaços de cores RGB ou HSB
(matiz, saturação e brilho). Embora o Flash possa converter imagens CMYK para
RGB, é aconselhável criar arte-final no Photoshop em RGB.
O Flash não pode importar Objetos Smart do Photoshop como objetos editáveis. Para
preservar os atributos visuais dos Objetos Smart, eles são rasterizados e importados
para o Flash como bitmaps.
6- Selecione o arquivo tenis.psd que esta na pasta imagens.

Adobe Flash CS5: Multimídia Interativo

39 2010  Alfamídia Prow.
4.6 Laboratório: 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 estão na pasta imagens na pasta da lição.
3- Arraste a imagem paisagem.jpg para o palco do Flash
4- Sem estar com a imagem selecionada, clique no botão Edit ao lado da opção Size
no painel Properties e marque a opção: Contents.
5- Com a imagem selecionada escolha: Modify >Break Apart (CTRL +B)
6- Clique no frame 40 e selecione a opção: 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 próxima ao
canto inferior direito.
9- Agora aplique uma animação Shape e veja o resultado



Adobe Flash CS5: Multimídia Interativo

40 2010  Alfamídia Prow.


Unidade 5
Máscaras na Ani mação

5.1 Usando máscaras

Uma técnica bastante usada em animação utiliza máscaras para obter o efeito de
mostrar apenas parte da animação.
Quando trabalhamos com máscaras, apenas as áreas que definimos nelas serão
mostradas no resultado final, não 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 botão direito do mouse no quadro 30 e escolha a opção Insert
Frame
(F5), com isso prolongamos a duração 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 círculo que possua um tamanho um pouco maior
que a altura do texto e torne-o um símbolo gráfico posicionando-o um pouco à
esquerda do texto
6- Na layer mascara peça um Create Motion Tween.
7- Posicione a cabeça leitora no quadro final da layer mascara e desloque a forma
para o lado direito do texto.
Com isso temos o círculo passando sobre o texto de um lado para outro. Chegou à
hora de dizer para o Flash que somente a área em que o círculo estiver passando deve
ser mostrada na layer “mascarado”.
Adobe Flash CS5: Multimídia Interativo

41 2010  Alfamídia Prow.

8- Selecione a layer “mascara” e clique com o botão direito do mouse sobre ela.
Selecione a opção Mask.
Com isso o efeito já esta pronto.
Outra maneira de criar a máscara é clicar com o botão direito do mouse sobre a
layer “mascara” e escolher a opção Properties clicando na opção Mask
Podemos ver que agora os ícones que representam as layers se alteraram,
simbolizando uma máscara, e na layer “mascarado” aparece um símbolo próprio um
pouco mais à direita, mostrando que esta vinculado à máscara

Para visualizar uma máscara no palco do Flash, as layers pertencentes a esse efeito
estarão travadas, mas se destravarmos o cadeado, veremos novamente o círculo e o
texto como estavam antes do efeito.

5.2 Efeitos de Preenchimento

Vamos ver um efeito de máscara para preencher um recipiente.
Iremos desenhar uma forma com a ferramenta Pen. Para isso poderemos usar
alguns comandos da opção: 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 tênues.

Outra opção, também, é a opção de Combine Objects do menu Modify.

1- Desenhe uma forma com a ferramenta Pen, que contenha
preenchimento e contorno, usando estes recursos, se necessário.
2- Depois de pronta a forma, dê um duplo clique na forma para entrar na sua edição.
Adobe Flash CS5: Multimídia Interativo

42 2010  Alfamídia Prow.
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
posição que ocupava na camada anterior, escolha a opção: 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 retângulo e converta-o para um símbolo
gráfico, posicionando-o abaixo da forma.
9- Na layer “animacao” peça um Create Motion Twees e prolongue as outras
layers, também.

10- Posicione a cabeça leitora no quadro final da layer “animacao”, selecione o
símbolo 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 botão direito do mouse sobre a camada “objeto” e escolha a
opção: Mask. Agora basta testarmos a animação.

5.3 Máscara arrastável

Com apenas dois simples comandos teremos uma máscara arrastável.
1- Crie um novo documento.
2- Insira no palco do Flash a imagem: imagem.jpg que esta na pasta imagens
dentro da pasta da lição. Transforme a imagem em um símbolo Movie Clip com o
nome de instância de “foto”.
3- Renomeie esta camada para “mascarada”.
Adobe Flash CS5: Multimídia Interativo

43 2010  Alfamídia Prow.
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 instância para este Movie Clip de “bola”.
7- Crie outra camada chamada “acoes” e em seu primeiro frame iremos colocar
uma ação que fará a máscara. Digite:
this.foto.mask = bola;
Com isso já criamos o efeito de máscara.
8- Para fazer o efeito de arrastar a forma (e, portanto a máscara) numa nova linha,
ainda, no painel Actions digite:
this.bola.startDrag (true);


O método startDrag() que faz com que a forma seja arrastável.
Teste seu filme e veja o efeito.
5.4 Máscara com gradient e
Veremos um tipo de máscara diferente. Em vez de totalmente sólida e visível, vamos
criar uma mascara que vai ter graduações de visibilidade, que vai de totalmente
visível até, aos poucos, o invisível.
1- Crie um novo documento
2- Importe para palco a imagem: paisagem1.jpg que esta na pasta da lição.
3- Torne a imagem um símbolo do tipo Movie Clip.
4- Prolongue (F5) esta camada até o frame 40.
5- Com a imagem selecionada, ajuste seu nome de instância para “imagem”.
Para que o efeito funcione corretamente deveremos marcar no painel Properties a
opção: Cache as bitmap.
6- No painel Properties na opção Display marque a opção Cache as bitmap.
Essa opção evita que o Flash tenha que redesenhar vetores complexos a toda a
movimentação. Ele armazena como bitmap o elemento, melhorando
significativamente a performance, pois poderá ser redesenhado mais rapidamente.
Adobe Flash CS5: Multimídia Interativo

44 2010  Alfamídia Prow.
7- Crie outra camada e renomei-a como “mascara”. Nesta nova camada desenhe
um círculo.
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 três quadrados com a mesma cor (tanto faz a cor escolhida): um no início,
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 sólida, e em
seu final será transparente.
11- Converta esta forma em um Movie Clip e dê o nome de instância 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 “acoes”e em seu primeiro frame coloque a ação que
fará a máscara:
this.imagem.mask = bola;
Teste o arquivo. Veremos que a máscara estará funcionando, entretanto estará
totalmente sólida, sem o efeito de gradiente que criamos.

14- Para que este efeito funcione marque no Painel Properties na opção Display o
item Cache as Bitmap.
É só testar.

Adobe Flash CS5: Multimídia Interativo

45 2010  Alfamídia Prow.
5.5 Criando animações com Fi ltros

Os filtros (efeitos gráficos) do Flash permitem adicionar efeitos visuais
interessantes ao texto, aos botões e clipes de filme. Um recurso exclusivo do Flash é
que podemos animar os filtros aplicados usando interpolações de movimento.
1- Crie um novo arquivo.
2- Importe para o palco o arquivo xicara.png que esta na pasta imagens.
3- Transforme esta imagem em um símbolo Movie Clip.
4- Crie uma interpolação de movimento marcando a opção Create Motion Tween.
5- Deixe a cabeça leitora no primeiro quadro da camada e selecione o símbolo no
palco.
No painel Properties na opção Filters, clique no botão 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 embaçamento aplicado no eixo X e Y da
sombra.
Quanto menor o valor mais sólida a sombra, quanto maior o valor mais
“esfumaçada”.
- Quality: definimos a qualidade do efeito entre os valores: baixa (Low), média
(Medium) e alta (High).
7- Posicione a cabeça leitora no quadro final da layer e ajuste o filtro Blur para 0.
8- Teste a animação.


Existem outros filtros que podem ser aplicados a textos, também.

Adobe Flash CS5: Multimídia Interativo

46 2010  Alfamídia Prow.
5.6 Laboratório: Textos como Máscaras

- 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
símbolo gráfico.
- Peça uma interpolação de movimento na camada “animacao”.
- Faça a forma passar sobre o texto entre seus quadros inicial e final.
- Duplique o texto para a camada “texto mask”.
- Peça a propriedade “mask” para a camada “texto mask”.

Ao final nossas camadas estarão distribuídas como na imagem.
- Teste a animação e veja o efeito.
5.7 Laboratório: Movimento com máscara

- 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 símbolo movie clip.
- Peça uma interpolação de movimento na camada.
- No quadro final faça a imagem se movimentar sobre as formas criadas, fazendo-
a passar entre as formas.
- Estenda a camada que contém as formas, também.
- Posicione a camada que contém as formas acima da camada que esta animada.
- Peça a propiedade “mask” para a camada das formas.
- Teste a animação e veja o efeito.



Adobe Flash CS5: Multimídia Interativo

47 2010  Alfamídia Prow.


Unidade 6
Cinemática Inversa (IK)

6.1 Cinemática Inversa (IK)
Cinemática inversa (IK) é um método de animação de um objeto ou de um conjunto
de objetos em relação uns aos outros, usando uma estrutura articulada de bones. Os
bones permitem que ocorrências de símbolo e objetos Shape se movam de forma
complexa e natural com o mínimo de esforço de desenvolvimento.
Por exemplo, a cinemática inversa permite criar animação de personagens, como
braços, pernas e expressões faciais com muito mais facilidade.
Uma cadeia de bones é chamada de armadura. Os bones em uma armadura estão
conectados uns aos outros em uma hierarquia pai-filho. A armadura pode ser linear
ou ramificada. As ramificações de uma armadura originadas no mesmo bone são
chamadas de irmãos. O ponto em que um bone se conecta a outro é chamado de
junção.
6.2 Adicionando bones a símbolos

Podemos adicionar bones IK às ocorrências de clipe de filme, gráfico e botão.
Para usarmos texto, primeiro convertamos o mesmo em símbolo.
► Também é possível separar o texto (Modify >Break) em formas distintas e usar
bones com as formas individuais.














1- Crie um boneco usando formas geométricas ou desenhando com
uma das ferramentas.
2- Transforme cada parte do boneco em um símbolo 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
ocorrência de símbolo separada para vinculá-la à ocorrência de raiz.


Enquanto arrastamos, um bone é exibido. Quando liberamos o mouse, um bone
Adobe Flash CS5: Multimídia Interativo

48 2010  Alfamídia Prow.
sólido é exibido entre as duas ocorrências de símbolo. 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 próxima ocorrência de símbolo que desejar adicionar à
armadura.

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


As propriedades do bone são exibidas no painel
Properties


Conforme adicionamos bones aos símbolos, o Flash
move cada símbolo para uma nova camada na Linha
do tempo. A nova camada é chamada de Armature.

Por padrão, os pontos de controle de uma forma estão
conectados ao bone mais próximo deles.

Quando selecionamos um bones com a ferramenta
Selection, no painel Properties podemos definir a
rotação deste bone.

6- Clique nos bones do boneco e faça 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 animação 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 opção Runtime,
podem ser controlados por ActionScript.




A ferramenta Bind permite editar as conexões entre bones individuais e os pontos
Adobe Flash CS5: Multimídia Interativo

49 2010  Alfamídia Prow.
de controle da forma. Isso permite controlar a maneira como o traçado é distorcido
durante o movimento de cada bone, a fim de obter resultados mais satisfatórios.

Podemos ligar vários pontos de controle a um bone e vário bones a um ponto de
controle. Clicar em um ponto de controle ou bone com a ferramenta Bind exibe as
conexões 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 vários bones ao interior de uma única forma. O que é diferente
dos símbolos, 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 botão direito do mouse no quadro em uma camada de pose e selecionando
Insert pose.

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

6- Nesta pose use a ferramenta Selection para alterar
a configuração da armadura.

O Flash interpola automaticamente as posições 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 animação e veja como esta ficando.
Se desejar alterar o comprimento da animação na Linha do tempo, arraste o último
quadro da camada de pose para a direita ou esquerda e adicione ou remova quadros.
Adobe Flash CS5: Multimídia Interativo

50 2010  Alfamídia Prow.
O Flash reposiciona os quadros de pose em proporção à alteração de duração da
camada e interpola novamente entre os quadros.

6.4 Convertendo a armadura em um Símbolo

Para aplicarmos efeitos interpolados a outras propriedades de objeto IK além de
posição do bone, o objeto deve ser delimitado em um clipe de filme ou símbolo
gráfico.
9- Selecione a armadura IK e todos os objetos a ela associados.
10- Converta-a em um Movie Clip.
► O Flash cria um símbolo com sua própria Linha do tempo contendo a
camada
Armature.

11- Crie uma interpolação de movimento da
Linha de Tempo.
12- Agora adicione efeitos de interpolação de
movimento à nova ocorrência de símbolo no
Palco.



Podemos aninhar símbolos contendo armaduras IK dentro de tantas camadas quantas
forem necessárias de outros símbolos aninhados para criar o efeito desejado.

Elasticidade (Spring)
É uma propriedade de um osso e de suas articulações. A qualidade de um osso que se
move e reage quando o osso ascendente é movimentado e, depois, diminui
gradualmente ao longo do tempo.
Adobe Flash CS5: Multimídia Interativo

51 2010  Alfamídia Prow.

A força do spring é um valor percentual de padrão 0 (totalmente rígido) até 100
(muito solto e controlado por propriedades físicas). Ossos com elasticidade reagem
ao movimento de suas articulações. Se nenhuma outra translação(rotação, x, ou y)
estiver ativada, as configurações de elasticidade não terão nenhum efeito.
O amortecimento de spring é um valor percentual de padrão 0 (nenhuma resistência)
até 100 (muito reduzido). O amortecimento altera o tempo entre o movimento inicial
o osso e o retorno à posição de descanso.



Adobe Flash CS5: Multimídia Interativo

52 2010  Alfamídia Prow.
Unidade 7
Criando Botões

7.1 O Símbolo Botão
Criar filmes interativos no Flash é sinônimo de muito mais possibilidades de
configuração de controles e realização de tarefas de navegação com um visual
diferenciado e melhor performance.
Iremos ver como transformar e configurar um objeto simples em um elemento
de navegação.
1- Abra o arquivo index.fla na pasta da lição.
Para criarmos um botão, devemos proceder como se fôssemos criar um símbolo
qualquer.



2- Escreva os itens “Produto” , “Dúvidas” e “Compre J á” na parte superior do layout
e em uma camada separada.
3- Use o painel Align, se necessário para alinhar e distribuir os
textos de forma uniforme.


4- Selecione a palavra “Produto” e converta-o em um símbolo (F8) só que agora será
do tipo Button, com o nome de produtoBtn.
5- Vamos clicar duas vezes em cima do símbolo botão (produtosBtn) para entrar em
seu modo de edição.
Observe que sua Timeline é um pouco diferente das que
vimos anteriormente, pois possui quatro estágios: UP,
Over, Down,Hit.
- UP: corresponde ao botão em seu estado normal, sem a proximidade do mouse;
- Over: estágio em que o usuário passa o ponteiro do mouse sobre o botão;
- Down: instante em que o usuário está clicando no botão;
- Hit: é a área clicável do botão, que não é visualizada pelo usuário.
6- Vamos editar o botão. Insira um quadro (F6) em cada um dos estágios.
7- No estágio Over e no Down deixe o texto em tom de Laranja.
Adobe Flash CS5: Multimídia Interativo

53 2010  Alfamídia Prow.
8- No estado Hit desenha um forma que cubra todo o texto do botão.
9- Repita estes procedimentos para os outros botões: Dúvidas e Compre J á.
10- Ao final, salve seu arquivo.

7.2 Animando os botões
Um botão que se movimenta quando um usuário o pressiona ou simplesmente
passa o ponteiro do mouse sobre ele gera um efeito bastante agradável para o filme.
Umas das maneiras de criarmos um botão animado é colocar em um de seus estágios
uma animação.
Como já vimos o símbolo Movie Clip atende a este requisito, uma vez que sua
Timeline é totalmente independente.
1- Retorne ao arquivo index.fla e selecione o botão “Produtos”.
2- Clique duas vezes em cima do símbolo para entrarmos em sua edição.
3- Crie uma nova camada dentro deste símbolo.
4- No estágio Over desenhe um retângulo em cima da palavra e transforme-o em
um símbolo Movie Clip.
Agora estamos no Movie Clip dentro do símbolo
“produtoBtn”.


5- Peça um Create Motion Tween e no último quadro
aumente-o até cobrir a palavra.

6- Crie um efeito de Alpha, também para o símbolo 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 animação pare quando chegar ao final.
Repare que quando entramos no estágio Over, é
iniciada a animação do Movie Clip.
8- Repita estes procedimentos para os outros
botões.
9- Teste seu filme.

10- Instancie todos os botões para produtos,
duvidas e compre, respectivamente.





Adobe Flash CS5: Multimídia Interativo

54 2010  Alfamídia Prow.
7.3 Personalizando o Cursor
É possível personalizar o cursor do mouse do filme para utilizá-lo em animações e
apresentações. Na realidade, não é o cursor que vamos modificar, mas faremos um
Movie Clip seguir o mouse e esconderemos o cursor para passar a ilusão de que o
Movie Clip de Filme é o indicador do mouse.
1- Crie um novo arquivo.
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 instância 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 instância chamada “cursor_mc” será arrastada
(starDrag()) pelo ponto de registro (pelo parâmetro true).
Até aqui esta tudo OK, entretanto ainda aparece o cursor normal do sistema
operacional. Vamos escondê-lo com o método hide( ) da classe Mouse.
8- Numa nova linha digite:
Mouse. hi de( ) ;



Teste o filme e veja a ilusão de que o cursor é o Movie Clip que criamos.


Adobe Flash CS5: Multimídia Interativo

55 2010  Alfamídia Prow.
Unidade 8
Introdução ao Acti on

Embora o ActioScript 3.0 possa parecer intimidador se somos iniciante em scripts, é
possível obter excelentes resultados com alguns scripts muito simples. Como ocorre
com qualquer linguagem, é recomendável parar um pouco para aprender a sua
sintaxe e alguma terminologia básica.

Classe
Uma classe é uma categoria de objetos que compartilha os mesmos métodos
e propriedades, que podem ser alteradas pelo usuário.
Exemplos de classes, por exemplo, cão, gato.

Propriedades
Propriedades são as características de uma classe, que podem ser acessadas
até modificadas via programação.
Por exemplo, se Cachorro for uma classe, suas propriedades incluirão quatro patas,
pêlo 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;

Métodos
Um método consiste na função que um elemento desempenha.
Por exemplo, dois métodos associados com a classe MovieClip são:
st op( ) ;
got oAndPl ay( ) ;

Parâmetros
Parâmetros fornecem detalhes específicos e são valores entre parênteses ( ) em
uma linha de código.
Por exemplo, no código:
got oAndPl ay ( 3) ;
O parâmetro instrui o script a ir para o frame 3.

Função
Uma função é um grupo de instruções que pode ser referenciado pelo nome.
Utilizando uma função, é possível executar o mesmo conjunto de instruções sem
digitá-las repetidamente no mesmo script.
Exemplo:
f unct i on al er t a( ) : voi d {

}

Adobe Flash CS5: Multimídia Interativo

56 2010  Alfamídia Prow.

Variáveis
Variáveis funcionam como uma espécie de container que armazena informações,
seja um texto, um número, etc.
Exemplo:
var nome: St r i ng=”Fl ash”
Temos uma variável sendo declarada (ação var) cujo nome é “nome” que receberá
(=) como valor o texto “Flash”.


8.1 Utilizando uma si ntaxe de script adequada

•O ponto-e-vírgula no final da linha instrui o ActionScript de que ele alcançou o
final dessa linha de código e que deve seguir para a próxima linha no código;
•Cada parêntese de abertura deve ter um parêntese de fechamento correspondente,
o mesmo vale para colchetes e chaves;
• O operador de ponto (.) fornece uma maneira de acessar as propriedades e os
métodos de um objeto;
•Sempre que estivermos inserindo um nome de um arquivo, use aspas;
• Podemos adicionar comentários que o ActionScript não 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 vár i as l i nhas

*/

• Para verificar a sintaxe de um script que estamos escrevendo, clique no
ícone AutoFormat (que também formatará o script de acordo com as convenções) ou
clique no ícone Check Syntax. Os erros de sintaxe são listados no painel Compiler
Erros.
• O ActionScript é uma linguagem case-sensitive, o que significa que os
identificadores diferem em case (letras maiúsculas de minúsculas). Abaixo,
como exemplo duas variáveis diferentes:

var num1: i nt ;

var Num1: i nt ;


8.2 Vi são geral do Painel action


Adobe Flash CS5: Multimídia Interativo

57 2010  Alfamídia Prow.




























Para criar scripts incorporados em um
arquivo FLA, informe o ActionScript
diretamente no painel Action. Este painel
consiste em três painéis: a caixa de
ferramentas Ações, 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
código ActionScript.


Para habilitar este painel selecione Window> Action, ou pressione F9.
As barras de ferramentas do painel Ações e da janela Script permitem que acessemos
os recursos de assistência de código que ajudam a simplificar e dinamizar a
codificação no ActionScript. As ferramentas são diferentes dependendo se estamos
usando o painel Ações ou a janela Script.
Adicionar novo item ao script: exibe os elementos da linguagem que
também estão na caixa de ferramentas de ações.
L o c a l i z a r : localiza e substitui texto no script.
Inserir caminho de destino: ajuda na configuração do caminho de destino
absoluto ou relativo para uma ação no script.
Verificar sintaxe: verifica os erros de sintaxe no script atual. Os erros de sintaxe
são listados no painel Saída.
Formato automático: formata seu script para uma sintaxe de codificação
apropriada e uma legibilidade melhorada.
Mostrar referência de código: se estiver desativada a referência de
código automática, use Mostrar referência de código para exibir uma
referência de código para a linha de código em que estiver trabalhando.
Opções de depuração: define e remove pontos de interrupção para que
possamos prosseguir linha por linha em nosso script ao executar uma
depuração.
Contrair entre chaves: contrai o código que aparece entre as chaves ou os
parênteses que, atualmente, contêm o ponto de inserção.
Contrair seleção: contrai o bloco de código atualmente selecionado.
Expandir tudo: expande todo o código contraído no script atual.
Aplicar comentário em bloco: adiciona marcadores de comentário no início e
no final do bloco de código selecionado.
Aplicar comentário de linha: adiciona um marcador de comentário de linha
única no ponto de inserção, ou no início de cada linha do código em uma
seleção multilinha.
Remover comentário: remove os marcadores de comentário da linha atual ou de
todas as linhas da seleção atual.
Mostrar/ocultar caixa de ferramentas: exibe ou oculta a caixa de ferramentas
Adobe Flash CS5: Multimídia Interativo

58 2010  Alfamídia Prow.






de ações.
Assistência de script: no modo de Assistência de script, somos apresentados a
uma interface de usuário para inserção dos elementos necessários à criação de
scripts.
A j u d a : exibe as informações de referência para o elemento do ActionScript que
está selecionado no painel Script. Por exemplo, se clicarmos em um instrução import
e, em seguida, clicar em Ajuda, as informações de referência para import aparecem
no painel Ajuda.
Menu do painel: contém os comandos e as preferências que se aplicam ao painel
Action.
Adobe Flash CS5: Multimídia Interativo

59 2010  Alfamídia Prow.
Unidade 9
Navegação no Flash

9.1 Carregando arquivos externos

Nas versões anteriores do Flash quando precisávamos usar uma imagem em nosso
filme, ela deveria ter sido previamente importada para a biblioteca.
Nas novas versões do Flash esse problema foi resolvido. Podemos importar uma
imagem ou um arquivo swf no momento em que necessitamos deles, não sendo
necessário colocá-los na biblioteca.
Isso nós ajuda muito uma vez que as imagens que não forem necessárias à
navegação, por exemplo, escolhida pelo usuário não serão 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 retângulo no centro
da página de 430px de largura, que será ocupada
pelos conteúdos do hotsite.
4- Selecione esta forma e converta-a em um Movie
Clip.
5- Coloque o nome de instância deste Movie Clip
de “conteúdo”
6- Dê um duplo clique em cima deste Movie Clip
para entrar em sua edição 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 configurações e salve como: home.fla
Agora iremos começar a programar a navegação.
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 ( ) ;

Adobe Flash CS5: Multimídia Interativo

60 2010  Alfamídia Prow.
cont eudo. addChi l d( car r egar ) ;

Criamos a instância Loader a partir da classe Loader do Action Script 3.0, que é
responsável pelo carregamento de arquivos externos.
14- Após 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 botão (devidamente instanciado no
palco do Flash) “produtos” que quando for clicado executa a função “botao1”.
A segunda linha contém a função que executa o que se encontra entre as chaves.
E na terceira linha temos a classe URLRequest, que é responsável por carregar
nosso arquivo externo.
15- Logo após digite:
duvi das. addEvent Li st ener ( MouseEvent . CLI CK, bot ao2) ;
f unct i on bot ao2( event o: MouseEvent ) : voi d {
car r egar . l oad( new URLRequest ( “duvi das. swf ”) ) ;
}

compr e. addEvent Li st ener ( MouseEvent . CLI CK, bot ao3) ;
f unct i on bot ao3( event o: MouseEvent ) : voi d {

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

} home. addEvent Li st ener ( MouseEvent . CLI CK, bot ao4) ;
f unct i on bot ao4( event o: MouseEvent ) : voi d {
car r egar . l oad( new URLRequest ( “home. swf ”) ) ;

}

16- Crie um botão personalizado para a opção “Home” e instancie-o para “home”.
O restante da programação segue o mesmo esquema do anterior, só mudando a
instância de cada botão, que ao ser clicado, executará outra função. E na classe
URLRequest é definido outro arquivo para ser carregado externamente.
17- Teste o arquivo e veja que já esta funcionando a navegação pelos seus
respectivos botões.
Só temos que ajustar um pequeno detalhe. A página home.swf tem que ser carregada
juntamente com o arquivo principal, para isso faremos um pequeno ajuste na
programação da nossa navegação.
18- Na terceira linha do painel Action digite:
car r egar . l oad( new URLRequest ( “home. swf ”) ) ;


Adobe Flash CS5: Multimídia Interativo

61 2010  Alfamídia Prow.


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


20- Salve o arquivo








9.2 Navegação na Timel ine
Nesta lição iremos criar uma navegação que irá para um determinado frame da
Timeline do Flash.
1- Crie um novo arquivo e desenhe dois retângulos: um de cor azul e outro de cor
verde:
2- Transforme essas formas em símbolos do tipo Button. Colocando o nome de
instância de: btn1 e btn2, respectivamente.
3- Renomeie esta camada para botões e estenda-a (F5) até o frame 60.
4- Crie uma nova layer renomeando-a para conteúdo.
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
conteúdo 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 botões.
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{

got oAndPl ay( 40) ;

}

Adobe Flash CS5: Multimídia Interativo

62 2010  Alfamídia Prow.
Da mesma forma que fizemos anteriormente, criamos um ouvinte para o botão (que
está instanciado no palco do Flash) e que executa a função “botao1”
Na terceira linha colocamos a ação gotoAndPlay (20) e (40) que faz com que o
filme seja avançado até o frame (20 ou 40, no caso do exemplo) e execute a
animação.
Poderíamos ter usado o gotoAndStop, que faria com que o filme fosse avançado até
o frame definido e parasse.
9- Teste seu filme.
A navegação dos botões esta funcionando perfeitamente, só que temos que observar
um pequeno detalhe. Quando clicamos no botão Azul ele vai até o frame 20 e
continua a animação até o frame 60 que é quando temos um comando de Stop (parar).
Isso acontece porque colocamos a ação gotoAndPlay para o botão, podemos
resolver esse problema de duas formas:
- Mudando a ação do btn1 para gotoAndStop e nossa programação 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{

got oAndPl ay( 40) ;

}

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

Agora teste o filme e veja que esta funcionando corretamente.
10- Salve seu arquivo na pasta da lição, que vamos usar no próximo exercício.

9.3 Usando label

Iremos trabalhar com o mesmo arquivo que usamos no exercício anterior, só que
agora ao invés de colocarmos que a ação gotoAndStop irá para um frame diremos que
ela irá para um Label (rótulos) especificado nos frames.
1- Abra o mesmo arquivo da lição 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 atribuímos.
Adobe Flash CS5: Multimídia Interativo

63 2010  Alfamídia Prow.
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 programação, indicando que a ação
gotoAndStop e gotoAndPlay irá para o label. Mude a terceira linha de cada botão
como no exemplo abaixo:

got oAndSt op( “azul ”) ;


got oAndPl ay( “ver de”) ;

9.4 Criando rol agem de Cont eúdo

A rolagem de conteúdo é muito utilizada quando temos mais informações que
espaço disponível.
1- Abra o arquivo produtos.fla
2- Crie uma uma layer e desenhe um retângulo 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 triângulos
posicionando-os como na imagem.
5- Clique em cima do triângulo de baixo e
transforme esta forma em um símbolo do tipo
Button.

6- Transforme o triângulo de cima em um
símbolo do tipo Button, também.
7- Coloque o nome de instância do botão de baixo de “btn_desce” e no botão 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 exceção da layer “produtos”.


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



Adobe Flash CS5: Multimídia Interativo

64 2010  Alfamídia Prow.



10- Com todos os quadrados e textos selecionados
transforme-os em um Movie Clip e dê o nome de instância
para eles de “mc_quadrado”.

11- Dê um duplo clique para entrar na edição deste
Movie Clip. Selecione todos os quadrados e textos e
transforme-os em um símbolo do tipo Graphic.

12- No frame 1 da layer crie uma interpolação de
movimento.

Desloque o símbolo como uma animação.

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

14- Retorne para a cena principal.




15- Na camada “mask”crie uma máscara.





Agora iremos programar nosso filme para que quando
passarmos o mouse sobre os botões role o conteúdo que é o
Movie Clip “mc_quadrado” e quando tirarmos o mouse de
cima dos botões o conteúdo pare. Para isso usaremos a ação
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{
Adobe Flash CS5: Multimídia Interativo

65 2010  Alfamídia Prow.

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 instância chamada “mc_quadrado” criamos um ouvinte (addEventListener) do
tipo evento com atualização constante que será executado a quantidade de frames por
segundo do nosso filme, executando uma função chamada “desceFull”.
Essa programação está aos moldes das outras que já fizemos. O que esta aparecendo
de novo é a ação nextFrame que está sendo aplicada no símbolo “mc_quadrado”,
fazendo com que quando passarmos o mouse (MouseEvent.ROLL_OVER) sobre o
botão “btn_ desce” executará a função desceFull que tem como parâmetro à ação
nextFrame.
17- Repetiremos a mesma programação para o btn_sobe. Na próxima 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 animação.


Adobe Flash CS5: Multimídia Interativo

66 2010  Alfamídia Prow.

9.5 Os Componentes no Fl ash
Um componente do Flash é um módulo reutilizável em pacotes que agrega uma
característica em particular a um documento do Flash. Os componentes podem incluir
gráficos e códigos, tratando-se de uma funcionalidade préconstruída 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 lição.
2- Arraste uma instância 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,
através do menu Window.
5- Neste painel defina que o arquivo index.swf será carregado por
este componente através da opção Source.

6- Teste o arquivo.

Todo componente no Flash é um símbolo Movie Clip, aonde podemos manipular
suas configurações de cor, borda, etc simplesmente entrando em sua edição.
Podemos modificar a aparência do ScrollPane simplesmente dando um duplo
clique nele e editando seu conteúdo.
7- Selecione o componente ScrollPane e dê um duplo clique nele.
8- Selecione a opção ScrollPane Normal Skin e dê um duplo clique em cima deste
Movie Clip.



Adobe Flash CS5: Multimídia Interativo

67 2010  Alfamídia Prow.
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 não 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 símbolo
ScrollBar Skins.




Up: estado atual
Over: quando o mouse passa em cima
Disabled: quando é pressionado o ScrollBar.


Clicando em cada item na opção 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.



Adobe Flash CS5: Multimídia Interativo

68 2010  Alfamídia Prow.
Unidade 10
Trabalhando com textos di nâmicos

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

O Flash permite que tenhamos variáveis em um arquivo de texto externo e carregue-
as no momento que considerarmos viável, facilitando a atualização dos textos
utilizados.
1- Vamos abrir o arquivo duvidas.fla (criado anteriormente)
2- Na pasta da lição 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 instância de “valor” e com a opção Multiline
marcada na opção 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 programação 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 instância chamada endereço a partir da
classe URLRequest para armazenar o endereço onde se encontra o arquivo que será
carregado.
Na terceira linha definimos para a instância chamada carregar sua propriedade
dataFormat que identifica como serão interpretadas as informações que forem
carregadas através do URLLoader. No exemplo as informações serão interpretadas
como variáveis (VARIABLES), ou seja, respeitarão a forma que criamos no txt.
7- Agora em uma nova linha digite:
Adobe Flash CS5: Multimídia Interativo

69 2010  Alfamídia Prow.
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 instância carregar que vai observar quando o arquivo
estiver carregado (Event.COMPLETE) e depois executa a função “carregou”.
Em seguida criamos a função que será executada quando o arquivo estiver carregado.
Na próxima linha definimos que a caixa de texto chamada valor terá o conteúdo de
seu texto (valor.text) recebendo (=) a variável nome (que esta no arquivo txt) entre os
dados da instância 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
opção: User Interface escolha o componente:
UIScrollBar.


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

Teste seu filme e veja que já esta com Scroll.





10.2 Texto Com Formatação HTML

HTML é uma linguagem de marcação de textos que, ao ser interpretada num
navegador, transforma o texto em elementos visuais que são as páginas que visitamos.
O HTML é formado por um sistema de marcações (tags) que circunda
determinado elemento.
Por exemplo:
<b>Fl ash</ b>
No Flash podemos usar as tags do HTML em sua versão 1.0 para as caixas de texto.
As tags aceitas são:
<a> ut i l i zada par a cr i ação de l i nks;

<b> par a dei xar o t ext o emnegr i t o;

Adobe Flash CS5: Multimídia Interativo

70 2010  Alfamídia Prow.
<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;

<i > par a i t ál i co;

<p> par a par ágr af o e al i nhament o;

<u> par a subl i nhado.

► Nem todas as tags do HTML precisão ter a marcação de fechamento (</>), mas
as utilizadas pelo HTML e aproveitadas do Flash terão.
11- Abra o arquivo texto.txt na pasta da lição.
12- Coloque entre o texto “Alfa Sports” as tag <b>.
Entretanto, ao testarmos veremos que a marcação não está funcionando. Para que
o Flash aceite a formatação de HTML teremos que fazer alguns ajustes.
13- É necessário fazer uma alteração na programação 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 formatação de HTML.
Teste o filme e veja que o trecho do texto que esta entre a tag <b>esta com a
formatação de negrito e o resto não.







Adobe Flash CS5: Multimídia Interativo

71 2010  Alfamídia Prow.
Unidade 11
Áudio no Flash

11.1 Importando áudio para o Flash

Um dos grandes diferenciais do Flash com relação a outros tipos de animação é a
possibilidade de ter som.
1- Crie um novo arquivo.
2- Selecione o menu: File >Import > Import to Library e escolha: sons_site >
natureza. mp3
No caso de importação de áudio não tem importância à opção 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 não é um símbolo
e sim um pseudo- símbolo, assim como o vídeo, por exemplo,
uma vez que só temos três tipos de símbolos por padrão no Flash
(Gráfico, Botão e Movie Clip).

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


11.2 Configurações 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 botão Test podemos testar as configurações do som, para parar é só
clicar no botão Stop.
Para atualizar o som após alterações feitas externamente ao Flash é só clicar no
botão Update. Para importar um novo som usamos o botão Import.
Nossas configurações ocorrem através do item Compression. Quando
estivermos usando um arquivo MP3 e estiver marcada a opção Use Imported MP3
quality, o som utilizará a configuração original do MP3:
6- Desmarque a opção Use imported MP3 quality. Agora aparecem novos campos
para configurarmos.
Adobe Flash CS5: Multimídia Interativo

72 2010  Alfamídia Prow.

No item Compression escolhemos a compressão desejada
para o som:
- ADPCM: ideal para sons curtos;
- MP3: mais utilizada para trilhas;
- RAW: geralmente sem compressão;
- Speech: compressão utilizada especialmente para fala.
7- Marque a opção 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 opções resultam em sons com qualidades melhores.
8- No item Bit rate marque 20 kbps e no campo quality marque a
opção 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 opção
Sound escolha o áudio.

Repare que riscos aparecem na Timeline representando o som.
Para melhor visualizarmos estes “riscos” podemos clicar com o botão direito em cima
na layer correspondente e na opção properties dela escolher 300% para o item Layer
height.
11- Vamos começar a configurar o som do filme no painel Properties. Selecione o
quadro 1 e escolha a opção: Stream no campo Sync.
No campo Sync estão às configurações do
comportamento do som.
- Event: ao escolhermos este item (no frame
selecionado) uma nova instância do som será iniciada quando a cabeça leitora passar
por esse Keyframe. Nessa opção 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 instâncias do som enquanto a primeira ainda está
tocando, causando sobreposições de sons;

- Start: funciona da mesma forma que a Event, diferenciando pelo fato de somente
iniciar uma nova instância do som quando a atual já estiver sido finalizada, não
sobrepondo os sons;
- Stop: para a instância que está tocando;
- Stream: seus trechos de som são anexados aos quadros do filme, portando só
podemos ouvir o som quando houver quadros na Timeline. São carregados somente
os trechos de música que aparecem nos quadros. É a melhor opção para um som que
desejamos sincronizado a animação.

Adobe Flash CS5: Multimídia Interativo

73 2010  Alfamídia Prow.
12- No campo Effect (campo que controla o efeito de volume do som) escolha a
opção: Fade Out e clique no botão Edit:
- Left Channel: reproduz o som apenas no canal esquerdo (estéreo);
- Right Channel: reproduz o som apenas no canal direito (estéreo);
- 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 botão Edit sound envelope, temos uma representação gráfica 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 próximo da parte inferior de algum canal mais baixo será o
som e quanto mais próximo do topo mais alto o volume será.

13- Teste o filme e veja que o filme será reproduzido segundo as configurações e
efeitos que configuramos.


11.3 Carregando áudio ext erno

Vimos como utilizar sons para trabalhar no Flash. Nesta lição veremos a
possibilidade do som não precisar ser previamente importado para o filme, mas que
isso seja feito através do ActionScript.
Vamos ver um exemplo que buscará um arquivo de som externo.
1- Abra o arquivo index.fla na pasta da lição.
2- Crie uma nova layer e renomei-a para “controle de som”.
3- Nessa layer desenhe dois botões: um que simbolize a Play e o outro o Stop.
4- Selecione o botão correspondente ao stop e transforme-o em um Button e instancie-
o para “parar”.
5- Selecione o botão correspondente ao play e transforme-o em um Button e instancie-
o para “tocar”.

Antes de programarmos os botões iremos carregá-lo externamente através de
Adobe Flash CS5: Multimídia Interativo

74 2010  Alfamídia Prow.
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 instância chamada áudio a partir da classe Sound,
responsável por trabalhar com som no Flash.
7- Após, 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 instância chamada “endereço” a partir da
classe
URLRequest que armazena o endereço para o arquivo que iremos carregar
Na segunda linha, para a instância chamada “audio”carregamos o arquivo de som
pelo método 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 à instância chamada “audio” iniciar a reprodução do som
pelo método 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 método play que agora
contém uma constante, ou seja, nosso som irá repetir (quando chegar ao final). O
método play foi associado a uma instância 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:
Adobe Flash CS5: Multimídia Interativo

75 2010  Alfamídia Prow.
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 botões

Podemos associar sons aos diversos estados de um símbolo de botão. Como os sons
são armazenados junto com o símbolo, eles funcionam em todas as ocorrências do
símbolo.

1- Crie um novo arquivo.


2- Arraste uma instância de botão para o palco do Flash
através do menu: Window >Common Libraries >Buttons.

3- Dê um duplo clique em cima do botão para entrar em
sua edição.

4- Crie uma nova layer renomeando-a para “som”. Insira
um qaudro em cada estágio do botão.

5- Importe um som para a Library que está na pasta sons_botoes.
6- Selecione o estágio Down na camada som do botão e clique no item Sound opção
Name selecionando o som do botão.

7- Teste o filme e veja que quando o botão é pressionado emite o som.
Adobe Flash CS5: Multimídia Interativo

76 2010  Alfamídia Prow.
Unidade 12
Criando Formulário
12.1 Utilizando component es

Os Componentes, como já vimos, são Movie Clips com parâmetros que permitem
modificar sua aparência.

Ao invés de criamos botões, 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 instância de “nome”.
4- Aumente o tamanho deste Componente para 300x20.
Quando arrastamos um componente para o palco, automaticamente é criada um
símbolo dele junto a Biblioteca.
5- Selecione o símbolo 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 instância para ele de “email”.


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


7- Arraste uma instância 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 instância do componente Button para o palco do Flash, colocando-o
ao lado do btn_enviar.
10- Mude a opção label para “Limpar”e 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:

Adobe Flash CS5: Multimídia Interativo

77 2010  Alfamídia Prow.
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 função “valida” servirá para verificar se os campos foram digitados, se não
retornará uma mensagem.
A função “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 botões estão funcionando.




12.2 Configurando o envio de dados

15- Abaixo dos ouvintes dos botões (na terceira linha) digite:

var nomeAr qui vo: St r i ng;
Adobe Flash CS5: Multimídia Interativo

78 2010  Alfamídia Prow.

nomeAr qui vo = “pr ocessa. asp”;

O Flash conversa com o ASP e PHP através de envio e recebimento de variáveis,
executando as tarefas.
Neste exercício passaremos os dados para o ASP fazer o envio dos dados por e-mail
16- Abaixo das condicionais (if) acrescente mais uma para a função “enviar”,
digitando:

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

t hi s. envi ar ( ) ;

}

17- Abaixo iremos digitar a função “enviar”, responsável pelo envio dos nossos
dados do formulário:

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 função enviar pega todos os itens digitados nos campos e envia os dados. São
Adobe Flash CS5: Multimídia Interativo

79 2010  Alfamídia Prow.
criadas variáveis para os objetos (nome, email, mensagem) para guardarem o
conteúdo dos dados digitados.



Adobe Flash CS5: Multimídia Interativo

80 2010  Alfamídia Prow.
Unidade 13
Preloader
13.1 Construindo um Preloader

1- Abra o arquivo index.fla que esta na pasta da lição.
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 dinâmico com o nome de instância 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 “preloader”e 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 função “loaded”que executa o carregamento a partir da classe
loaderInfo, responsável pela execução do carregamento, que passa o resultado dos
bytes carregados divididos pelos bites totais e multiplicado por 100.

A instância “pct” é do tipo texto que quando carregada mostra o valor em
porcentagem


Adobe Flash CS5: Multimídia Interativo

81 2010  Alfamídia Prow.
Se carregado todo o arquivo ele remove a função loaded e vai para o frame 2.
7- Desloque o quadro da ações 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
retângulo de largura de 2 pixels e transforme-a em um símbolo do tipo Movie Clip
com nome de instância 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




Adobe Flash CS5: Multimídia Interativo

82 2010  Alfamídia Prow.
Unidade 14
Criando Banners Animados
14.1 Criando um banner

1- Crie um novo arquivo.
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 opção: Flattened bitmap image, a qual irá ser
uma imagem não editável.
Na layer Shape 1 marque a opção: Editable
paths and layer styles, que fará com que esta
imagem seja editável, deixando, no caso
deste arquivo, a forma separada do
preenchimento.

Desmarque a layer background, pois não
a
usaremos no arquivo fla.

Deixe marcada a opção Flash Layers.

As duas opções abaixo ficam marcadas:
- Place object at original position: os objetos
importados para o Flash ficaram na mesma
posição que se encontravam no Photoshop;
- Set stage size to same size as Photoshop canvas: o placo do Flash será
redimensionado para as mesmas dimensões do Photoshop.


Veja que nossos arquivos estão nas Layers do Flash exatamente como estavam no
Photoshop e que na Biblioteca as imagens encontram-se organizadas em uma pasta.


Adobe Flash CS5: Multimídia Interativo

83 2010  Alfamídia Prow.
4- Selecione o Movie Clip, localizado na layer Shape 1 e dê um duplo clique para
entrarmos em sua edição.

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 interpolação de movimento na layer “flor1” e redimensione os
quadros desta para o quadro 80.
11- Deixe a cabeça leitora posicionada no quadro 1 e diminua o Alpha para 0%.
12- No quadro 10 deixe o Alpha em 100%.
13- No quadro 80 deixe o Alpha em 0%.
14- No quadro 70 deixe o Alpha em 100%.

15- Estenda a layer “mask” até
o quadro 80, também.
Adobe Flash CS5: Multimídia Interativo

84 2010  Alfamídia Prow.


16- Teste a animação.
17- Insira uma layer acima da layer “Flor1” e renomei-a para “Flor2
18- Posicione a cabeça 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 interpolação de movimento nesta layer e arraste-a até o quadro 160.
21- Prolongue a layer “mask”, também.
22- No quadro 70 na layer “Flor2” deixe o Alpha em 0%.
23- No quadro 80 desta layer deixe o Alpha em 100%.
24- No quadro 160 deixe o Alpha em 0%.
25- No quadro 150 deixe o Alpha em 100%.


26- Teste a animação e veja as flores passando na máscara.
27- Retorne a Cena principal.

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

29- Entre na edição deste MC e crie uma nova layer desenhando um forma ao lado
esquerdo da imagem.
30- Crie uma interpolação de movimento e no quadro final da layer aumenta a forma
de maneira que cubra toma a imagem.
31- Peça a propriedade de Mask para esta layer.
32- Coloque um stop no quadro final da animação.
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 opção Button.
36- Insira um Keyframe no estado Hit do botão e
desenhe um retângulo, configurando a posição X e Y
para 0.
37- Retorne a Cena principal.


Adobe Flash CS5: Multimídia Interativo

85 2010  Alfamídia Prow.
38- Com a layer “btnInvisivel”selecionada arraste o novo
botão criado para o palco do Flash, posicionando-o em
cima do banner e redimensionando-o de forma que ocupe
toda a extensão do banner.

39- Instancie este botão 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 método navigateToURL é o responsável por abrirmos uma nova página.

41- Teste o filme.

14.2 Banner expansível

1- Crie um novo arquivo.
2- Desenhe um retângulo no palco do Flash e transforme-o em um símbolo Movie
Clip. Instancie-o para “ativa”. Renomeie esta layer para “banner”.
3- Dê um duplo clique para entrar em sua edição e escreva “Passe o Mouse” como
texto estático.

5- Retorne para a cena principal.

6- Crie um quadrado da mesma largura do retângulo já criado e posicione-o acima
do retângulo (na parte de fora do palco) em uma nova layer chamada “animacao”.



7- Transforme essa forma em um símbolo Movie Clip e instancie-o para “tela”.
8- Entre na edição do Movie Clip “tela” e transforme o Shape em um símbolo
Gráfico.

Adobe Flash CS5: Multimídia Interativo

86 2010  Alfamídia Prow.
9- Crie uma interpolação de movimento e no quadro final desloque
o objeto para baixo do símbolo.


10- Ainda dentro do Movie Clip “tela”crie uma nova camada e insira um keyframe
no frame 13. Escreva “Adobe Flash”na parte superior fora do palco.


11- Crie uma interpolação de movimento e no quadro final desta
layer posicione o texto em cima do outro símbolo.

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 função
“Exibe”;
Adobe Flash CS5: Multimídia Interativo

87 2010  Alfamídia Prow.
e quando o mouse sair de cima do Movie Clip ‘ativa”chamará a função “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 função “Exibe” quando executa a função “abre” vai para o próximo frame até
chegar ao final no Movie Clip Tela, onde está nossa animação.
Na condição (if) temos: se o Frame atual for igual ao numero total de frames,
remove a função 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 função “Esconde” temos a mesma lógica, alterando a condição (if) para: se
o frame atual for igual a 1, remove a função fechar da lista.
18- Pronto. Teste seu Movie Clip e veja a funcionalidade do banner.

Adobe Flash CS5: Multimídia Interativo

88 2010  Alfamídia Prow.

14.3 Usando transi ções com action script
Vamos ver outros tipos de efeitos possíveis com ActionScript 3.0 que são as
transições. O efeito Blinds mostra ou esconde o Movie Clip que está recebendo a
transição aos poucos através de áreas retangulares que vão aparecendo ou
desaparecendo.
1- Crie um novo arquivo.
2- Importe para o palco do Flash a imagem: transicao.jpg que esta na pasta da lição.
3- Transforme esta imagem em um Movie Clip e coloque o nome de instância 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 instância chamada “transição” a partir da classe
TransitionManager (classe que está presente somente do Action Script 3.0) que
cuida dos efeitos de transição.
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 parâmetro numStrips define a quantidade de retângulos e o dimension indica se
o efeito será com retângulos na horizontal (valor 1) ou na vertical (valor 0).
Para a instância chamada “transicao” usamos o método starTransition que dará
início a transição.
Dentro dos parênteses desse método temos (entre as chaves) os parâmetros que
vão orientar a transição, 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 transição irá durar até atingir o final.


6- Teste seu arquivo.

Os retângulos aparecem e revelam partes da imagem
até mostrá-la por completo.



Adobe Flash CS5: Multimídia Interativo

89 2010  Alfamídia Prow.

Temos, também, o PixelDissolve que faz o Movie Clip aparecer ou desaparecer
através de um efeito em quadrados que vão aos poucos aparecendo ou desaparecendo.
7- Insira um novo quadro-chave na layer que contém 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 instância 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 próxima 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 parâmetros adicionais xSections (quantidade de quadrados no eixo
x) e ySections (quantidade de quadrados no eixo y). A Adobe aconselha valores de
no máximo 50 para estes parâmetros.
Iremos colocar uma função para controlar a passagem das imagens com as transições.
11- No primeiro quadro da layer das ações, 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.


Adobe Flash CS5: Multimídia Interativo

90 2010  Alfamídia Prow.
Unidade 15
Importando Vídeo
15.1 Importando vídeos

A partir da versão 8 do Flash o codec On2 VP6 compacta de forma muito eficiente
os arquivos de vídeo importados para o programa.
Uma série de formatos pode ser importado para o Flash, como: avi, dv, mpg, mpeg,
mov entre outros.
O formato para qual o Flash converte o vídeo que utiliza é o FLV, que se tornou
muito popular com o sucesso dos sites como You Tube e Google Vídeo.
1- Crie um arquivo novo.
2- Renomei-a para vídeo.


3- Para importar um vídeo, escolha a opção:
File >Import >Import vídeo (na layer vídeo).
Abre-se o painel Import Vídeo.

4- Iremos escolher a opção On your computer,
porque queremos escolher um vídeo que esta na
nossa máquina. E em seguida clicaremos no
botão Browse para escolher o arquivo que esta
na pasta: videos >caffe_art.f4v

5- Deixe marcada a opção Load external with playback component. Esta opção
importa o vídeo e cria uma instância do componente FLVPlayback para controlar a
reprodução do vídeo. Quando estiver pronto para publicar o documento Flash como
SWF e enviá-lo para seu servidor da Web, também deve enviar o arquivo de vídeo
para um servidor Web ou para o Flash Media Server, e configurar o componente
FLVPlayback com o local do arquivo de vídeo enviado.
- Embed FLV in SWF and play in timeline incorpora o FLV ou F4V no documento
do
Flash. Quando o vídeo é importado dessa maneira, ele é colocado na Linha do tempo,
em que é possível visualizar os quadros de vídeo individuais representados nos
quadros da Linha do tempo. Um arquivo de vídeo FLV ou F4V incorporado torna-se
parte do documento do Flash.
- Import as mobile device video bundled in SWF: da mesma forma que a
incorporação de um vídeo em um documento do Flash, compactamos um vídeo em um
documento do Flash Lite para implantação em um dispositivo móvel.
A outra opção: Already deployed to a web server, Flash Vídeo Streaming or Flash
Media Server seria para utilizar um vídeo que já esteja na web, num FVSS ( Flash
Vídeo Streaming Service que é um servidor de vídeos Flash em Streaming) ou ainda
Adobe Flash CS5: Multimídia Interativo

91 2010  Alfamídia Prow.


num servidor Flash Media Server (servidor para aplicações relacionadas ao Flash).

5- Com o vídeo selecionado clique no botão next. Somos levados à etapa seguinte.
6- Escolha um tipo de Skin e Clique em
next.

7- Clique em Finish e nosso vídeo já esta
no palco do Flash com
uma instância do componente para
reproduzi-lo.

8- No painel Component Inspector podemos
fazer algumas alterações
na configuração do componente.





15.2 Usando o Adobe Medi a Encoder CS5

Adobe Media Encoder é um aplicativo de codificação independente empregado por
programas como Adobe Premiere Pro, Adobe Soundbooth e Flash para impressão de
certos formatos de mídia. Dependendo do programa, o Adobe Media Encoder
oferece uma caixa de diálogo especializada Exportar configurações que acomoda as
inúmeras configurações associadas com certos formatos de exportação, como Adobe
Flash Video e H.264. Para cada formato, a caixa de diálogo Exportar configurações
inclui uma série de predefinições que são personalizadas para uma mídia de entrega
em particular.

1- Crie um novo documento no Flash.
Adobe Flash CS5: Multimídia Interativo

92 2010  Alfamídia Prow.
2- Abra o Adobe Media Encoder CS4.

3- Clique no botão Add e selecione o vídeo cafe_art.vwm

4- Nos botão Preset selecione a opção Edit export settings e configure o vídeo.
5- Clique em OK
Na janela Adobe Media Encoder clique no botão Start Queue. E o vídeo inicia a
exportação 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 opção Embed FLV in SWF and play in timeline.
Adobe Flash CS5: Multimídia Interativo

93 2010  Alfamídia Prow.
8- No item Symbol Type escolha a opção Movie Clip.

Em Symbol Type escolhemos que o vídeo se encontrará dentro do filme do Flash
como incorporado: Embed Vídeo; em áudio track escolhemos que o áudio será
integrado com o vídeo: Integrated; marcando a opção: Place instance on stage,
estamos dizendo que queremos que uma instância do arquivo seja colocada no palco;
a opção: Expand timeline if needed marcada indicará que a timeline do filme poderá
ser expandida para acomodar todo o vídeo; marcando o item Embed the entire vídeo,
iremos para a etapa Encoding para editar o vídeo antes de ser incorporado ao filme.
9- Clique no botão next e finish.
O vídeo já esta no palco do Flash.

15.3 Máscaras em vídeos

Da mesma forma que utilizamos máscaras para visualizar elementos por uma área
delimitada, também podemos criar máscaras que nos permitam que apenas áreas
específicas do vídeo 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 vídeo.
12- Selecione a layer “mask”e clicando nela com o botão direito do mouse, escolha
a opção Mask.
Pronto, foi criada uma máscara sobre nosso vídeo


15.4 Vídeo em tela cheia

Uma novidade incorporada a mais recente versão do player do Flash é a
possibilidade de exibir seu conteúdo em tela cheia.
Podemos criar um vídeo de forma semelhante ao que ocorre no You Tube, por
exemplo.
1- Crie um arquivo novo.
Adobe Flash CS5: Multimídia Interativo

94 2010  Alfamídia Prow.
2- No painel Components arraste para o palco uma instância 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 opção 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 botão Publish.
8- Ao testarmos o arquivo HTML gerado clique no botão dedicado a exibir o filme em
tela cheia, localizado na extremidade inferior direita do skin.
Uma mensagem, que desaparece logo depois, avisa que é possível utilizar a tecla
ESC para sair do modo de tela cheia.



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


Adobe Flash CS5: Multimídia Interativo

95 2010  Alfamídia Prow.
Unidade 16
Publicando Documentos no Flash
16.1 Configurações de Publ icação

Após criarmos nosso filme é hora de disponibilizá-lo para que os usuários o
assistam. Para isso devemos definir suas configurações de exportação, que são
efetuadas no painel Publish Settings.

1- Crie um novo arquivo.

2- Selecione o menu: File >Publish Settigns. Nesta janela escolhemos o formato
desejado entre os disponíveis para exportação.
- 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 estática 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 executável para Window;
- Macintosh Projector: gera uma executável para MAC;
- QuickTime (.mov): cria um filme para QuickTime.
Para exportarmos em algum dos formatos disponíveis , devemos marcar a caixa
de seleção ao lado do formato.
Ao fazermos isso, novas abas são adicionadas ao painel Publish Settings para
as configurações do formato.
Os formatos de arquivos executáveis não abrirão abas, pois não terão 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 botão Publish que efetua
a publicação. O botão OK apenas serve para confirmarmos as configurações.

Adobe Flash CS5: Multimídia Interativo

96 2010  Alfamídia Prow.
16.2 Flash

As configurações disponíveis para este formato são:

- Player: a versão do player necessário para visualizarmos o arquivo swf.
- Script: escolhemos a versão 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 usuários visualizem nosso filme. Não
esquecendo de levar o arquivo swf junto.
- Template: contém opções de modelos de códigos HTML predefinidos para
serem usados em nossas paginas;
- Detect Flash Version: essa opção faz com que o arquivo HTML possua um
código anexo que verifica a versão do player;
- Dimensions: podemos definir o tamanho que o filme ocupará na página HTML;
- Paused at start: com essa opção 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 ação no último frame mande o filme parar;
- Display menu: quando o usuário clica com o botão direito do mouse no filme,
um menu contextual se abre. Caso não deseje exibir o menu completo (alguns itens
Adobe Flash CS5: Multimídia Interativo

97 2010  Alfamídia Prow.
são obrigatórios), podemos desmarcar essa opção;
- Device font: essa opção substitui fontes existentes no filme por existentes na
máquina do usuário;
- Quality: define a qualidade do filme;
- Window mode: no Internet Explorer podemos definir o comportamento visual da
área do filme. Temos as opções: Window (modo padrão), Opaque Windowless
(evita que elementos que estejam por trás do filme sejam exibidos através dele) é
uma opção bastante utilizada para evitar que um menu DHTML se sobreponha ao
filme e não 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 conteúdo do Flash ire se comportar caso tenha sido
alterada alguma das dimensões do filme: Default (Show all) não distorce o filme,
No Border mantém a proporção do filme, cortando-o se ultrapassar a área
especificada, Exact Fit faz com que todo o conteúdo do filme seja compreendido na
área especificada para ele, não se importando com a proporção, podendo acarretar
distorção 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 através do Adobe Dreamweaver e inserido o
arquivo swf posteriormente.

16.4 Gif


- Dimensions: define o tamanho da imagem. Se marcada a
opção Match Movie, teremos as dimensões do filme do
Flash; caso desmarcada, poderemos definir nossas dimensões;
- Playback: opção para definir se a imagem GIF será
estática (Static) ou animada (Animated);
Quando definida a opção Animated, é necessário escolher se a
imagem estará em um loop infinito (Loop continuously) ou o
número de quantidades de vezes que a image será
reproduzida até parar (Repeat).
- Optimize colors: remove cores não 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 (utilização de duas cores próximas para
simular uma terceira) para simular uma gama maior de cores;
Adobe Flash CS5: Multimídia Interativo

98 2010  Alfamídia Prow.
- Remove gradients: converte os gradientes em cor sólida;
- Transparent: configura como será a transparência da imagem: Opaque (sem
transparência), Transparent (faz com que o fundo do filme seja exportado como
área transparente na imagem), Alpha (transparência parcial da imagem).
No campo Threshold definimos um valor de 0 a 255 que corresponderá a um limite
para a transparência.
- Dither: configura o pontilhamento: None (não pontilha e substitui cores não
presentes na tabela de cores da imagem pelas mais próximas), Ordered
(pontilhamento com qualidade razoável 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
opção Match Movie, teremos as dimensões do filme do
Flash; caso desmarcada, poderemos definir nossas dimensões;
- Bit depth: profundidade de cores utilizada na imagem que
será gerada, sendo sua opções: 8 bits (256 cores), 16 bits
(milhares de cores), 24 bits com with Alpha (milhares de
cores com transparência);
- Optimize colors: remove cores não 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 (utilização de duas cores próximas para
simular uma terceira) para simular uma gama maior de cores;
- Remove gradients: converte os gradientes em cor sólida;
- Dither: configura o pontilhamento: None (não pontilha e substitui cores não
presentes na tabela de cores da imagem pelas mais próximas), Ordered
(pontilhamento com qualidade razoável 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: são as maneiras como a imagem será filtrada para facilitar sua compressão.

Adobe Flash CS5: Multimídia Interativo

99 2010  Alfamídia Prow.
16.6 Full screen

O Flash também pode criar arquivos executáveis, que contém todos os elementos
necessários para visualizar o filme, sem a necessidade do usuário precisar de um
navegador para isso. O arquivo torna-se um pouco maior por conter os elementos
necessários incorporados a ele.
Podemos criar arquivos no Flash para gravar um CD-ROM multimídia, basta
gerarmos um arquivo executável e gravarmos este arquivo no CD.
Para gerarmos arquivos executáveis 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 vídeo compatível com o QuickTime.
Esses filmes podem ser assistidos por usuários que não possuem o plugin do Flash.



Adobe Flash CS5: Multimídia Interativo

100 2010  Alfamídia Prow.
Unidade 17
Melhores Práticas
17.1 Organização da linha de t empo e da bibli oteca

Os quadros e as camadas em uma linha do tempo mostram onde estão 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 conteúdos com eficiência e permitem que
outros autores que usam seus documentos FLA tenham maior compreensão da
estrutura do documento.
- Dê a cada camada um nome intuitivo de camada e reúna os recursos relacionados no
mesmo local. Evite usar os nomes padrão de camada (como layer 1, layer 2).
- Descreva com clareza a finalidade ou o conteúdo de cada camada ou pasta,
quando for nomeá-los.
- Se aplicável, coloque suas camadas que incluem o ActionScript e a camada para
rótulos 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 localização das camadas que incluem códigos e rótulos.
- Bloqueie as camadas que não estiver usando ou não deseja modificar.
- Nunca coloque quaisquer símbolos 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 códigos em sua
própria camada de ações e bloqueie depois de criá-la.
- Use rótulos de quadros (label) em um arquivo FLA, em vez de usar números de
quadros no código ActionScript. Se esses quadros mudarem posteriormente, quando
for editar a linha do tempo, e se usar rótulos de quadros e movê-los na linha do
tempo, não há necessidade de mudar nenhuma referência no seu código.
- Uso de pastas de biblioteca.
- Use pastas na biblioteca para organizar os elementos semelhantes (como
símbolos e recursos de mídia) em um arquivo FLA. Se nomear as pastas de biblioteca
consistentemente, todas as vezes que criar um arquivo, fica mais fácil lembrar onde
colocou os recursos. Normalmente, os nomes de pastas usados são Botões, Clipes
de filme, Gráficos, Recursos, Componentes e, algumas vezes, Classes.

17.2 Gravação de arquivos e controle de versão

Para gravar os arquivos FLA, use um esquema de nomes consistente para seus
documentos. Isso é especialmente importante se gravar múltiplas versões de um único
projeto.
Use nomes intuitivos para os seus arquivos, de leitura fácil, não crípticos, e que
Adobe Flash CS5: Multimídia Interativo

101 2010  Alfamídia Prow.
funcionem bem on-line:
•Não use espaços, letras maiúsculas ou caracteres especiais.
•Use apenas letras, números, barras e sublinhados.
• Se gravar múltiplas versões do mesmo arquivo, desenvolva um sistema de
numeração consistente como menu01.swf, menu02.swf e assim por diante.
•Pense em usar apenas caracteres em minúscula em seus esquemas de nomeação,
pois alguns software do servidor diferenciam maiúsculas e minúsculas.
•Considere um sistema de nomeação que use a combinação substantivo-verbo ou
adjetivo-substantivo para dar nomes ao arquivo, por exemplo,
planejamentoclasse.swf e meuprojeto.swf.

17.3 Organização do act ion script em um apli cativo

Sempre que possível, coloque o ActionScript em um único local. A organização do
código em um lugar ajuda a editar os projetos com mais eficiência, pois podemos
evitar a busca em locais diferentes quando depuramos ou modificamos o
ActionScript.
Se colocar código no arquivo FLA, coloque o ActionScript no Quadro 1 ou no
Quadro 2, em uma camada chamada ações na camada mais alta da Linha do tempo.

17.4 Convenções de vídeo

Há muitas opções disponíveis para editar o vídeo, antes de importarmos para um
documento FLA, ou para carregar um arquivo FLV para um arquivo SWF. O Flash e
o Adobe Media Encoder têm controles melhores para compressão de vídeo. A
compressão cuidadosa do vídeo é importante porque ela controla a qualidade da
seqüência de imagens do vídeo e o tamanho do arquivo. Os arquivos de vídeo, mesmo
comprimidos, são grandes em comparação com a maioria dos outros recursos do
arquivo SWF.
Antes de importar o vídeo para o Flash, considere a qualidade de vídeo que necessita,
que formato de vídeo usar com o arquivo FLA e como fazer o download. Se importar
vídeo para um arquivo FLA (chamado vídeo incorporado), ele aumenta o tamanho do
arquivo SWF para publicação. O download deste vídeo começa a ser feito,
progressivamente, para o computador do usuário, seja o vídeo visualizado ou não.
Podemos exibir o vídeo externo FLV usando um componente ou um objeto de vídeo.
Um componente facilita o desenvolvimento de aplicativos com o vídeo FLV,
porque os controles do vídeo são pré-construídos e há necessidade apenas de
especificar o caminho do arquivo FLV para reproduzir o conteúdo.
Para manter o arquivo SWF o menor possível, exiba o vídeo em um objeto de vídeo e
crie seus próprios recursos e códigos para controlar o vídeo. Considere, também, 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).
Adobe Flash CS5: Multimídia Interativo

102 2010  Alfamídia Prow.
É uma boa idéia dar algum controle aos usuários (como a capacidade de parar, dar
pausa, reproduzir e reiniciar o vídeo, além de controlar o volume) sobre o vídeo em
um arquivo SWF.
Para conquistar algum tipo de flexibilidade sobre o vídeo, como manipular o vídeo
com animação ou sincronizar diversas partes dele com a linha do tempo, incorpore o
vídeo no arquivo SWF, em vez de carregá-lo usando o ActionScript ou um dos
componentes Media.
Para maior controle sobre um símbolo de vídeo que a classe Vídeo permite,
coloque o vídeo dentro de um Movie Clipe. A linha do tempo do vídeo é
reproduzida independentemente de uma linha do tempo do Flash e podemos colocar o
conteúdo dentro de um clipe de filme para controlar as linhas de tempo.

17.5 Exportação, compressão e hospedagem de
arquivos FLV

Podemos exportar arquivos FLV dos ambientes de criação do Flash. Após a
exportação do vídeo para o documento, ele aparece como símbolo de vídeo na
biblioteca. Para exportar o vídeo como FLV, selecione o vídeo e depois selecione
Biblioteca > Propriedades. Para definir configurações de exportação, clique em
Exportar na caixa de diálogo Propriedades do vídeo incorporado.
O exportador QuickTime do FLV comprime vídeos de software de edição de vídeo
de terceiros.
Quando for comprimir o vídeo, lembre-se das seguintes recomendações:
•Não comprima novamente o vídeo. Recomprimir novamente um vídeo provoca
degradação da qualidade, como artefatos. Use seqüências filmadas não processadas,
ou as menos comprimidas, que tenha disponíveis.
•Faça o seu vídeo o mais curto possível. Apare o início e o fim do vídeo e edite
para remover todo o conteúdo desnecessário. Isso pode ser conseguido diretamente no
Flash usando o assistente de importação de vídeo.


17.6 Otimização dos arquivos Fla para saída SWF

Na medida em que aumenta o tamanho do arquivo de documentos, também
aumenta o tempo de download e a velocidade da reprodução. Podemos tomar diversas
medidas para preparar nosso documento para uma melhor reprodução.
Como parte do processo de publicação, o Flash executa automaticamente alguma
otimização nos documentos. Antes de exportar um documento, podemos otimizá-lo
ainda mais usando diversas estratégias para reduzir o tamanho do arquivo. Podemos,
também, comprimir o arquivo SWF na publicação.

Enquanto fazemos as mudanças, teste o documento executando-o em diversos
computadores, sistemas operacionais e conexões da internet.
Adobe Flash CS5: Multimídia Interativo

103 2010  Alfamídia Prow.
Para otimização de documentos siga as seguintes diretrizes:
•Use símbolos, animados ou não, para todos os elementos que aparecem mais de
uma vez.
• Use animações interpoladas sempre que possível na criação de seqüências
animadas. As animações interpoladas usam menos espaço de arquivo do que uma série
de quadros- chave.
•Use clipes de filme em vez de símbolos gráficos para seqüências de animação.
•Limite a área de mudança em cada quadro-chave; faça a ação acontecer na menor
área possível.
• Evite elementos de bitmap animados; use imagens de bitmaps como elementos
estáticos ou de fundo.
•Use mp3, o menor formato de som, sempre que possível.
• Limite o número de tipos de linhas especiais, como tracejadas, pontilhadas,
irregulares e assim por diante. As linhas sólidas exigem menos memória. As linhas
criadas com a ferramenta Lápis exigem menos memória que os traçados com pincel.
• Limite o número de fontes e de estilos de fonte. Use fontes incorporados com
moderação, pois elas aumentam o tamanho do arquivo.
• Use gradientes com moderação. O preenchimento de uma área com cor
gradiente exige cerca de 50 bytes a mais do que preenchê-la com cor sólida.
•Use transparência alfa com moderação, pois ela retarda a reprodução.

► O melhor formato de bitmap a ser importado para o Flash é o PNG, o formato
nativo do Adobe Fireworks. Os arquivos PNG têm informações RGB e alfa para cada
pixel.
A taxa mais alta de quadros (medida em quadros por segundo, ou fps) produz uma
animação suave em um arquivo SWF mas pode exigir muito do processador,
principalmente em computadores mais antigos. Teste as animações em taxas de
quadros diferentes, para encontrar a menor taxa de quadros possível.
O bitmap em cache ajuda a melhorar o desempenho de clipes de filmes de conteúdo
estático nos aplicativos. Quando definimos as propriedades
MovieClip.cacheAsBitmap ou Button.cacheAsBitmap para verdadeiro, o Flash Player
coloca em cache a representação interna do bitmap do clipe de filme ou da ocorrência
do botão. Isso pode melhorar o desempenho dos clipes de filme com conteúdo
vetorial complexo. Todos os dados vetoriais de um clipe de filme que têm bitmaps
em cache são desenhados no bitmap, em vez de no Palco principal.