Flash CS3

Sumário

Introdução ........................................................................................................................................ 1
Iniciando o Adobe Flash CS3 Professional ........................................................................................ 1
Iniciando o Flash CS3 ........................................................................................................................ 2
Área de Trabalho .............................................................................................................................. 2
Alterando a Aparência do Flash CS3................................................................................................. 5
Ferramentas de Desenho ................................................................................................................. 7
Ferramentas de Seleção ................................................................................................................... 9
Camadas ......................................................................................................................................... 11
Colorindo ........................................................................................................................................ 14
Ferramentas de Texto, Conta Gotas e Apagador ........................................................................... 17
Importando arquivos ...................................................................................................................... 20
Grupos - Object Drawing ................................................................................................................ 23
Símbolos ......................................................................................................................................... 25
Linha do Tempo .............................................................................................................................. 29
Animação ........................................................................................................................................ 32
Motion Guide ................................................................................................................................. 35
Movie Clip ....................................................................................................................................... 37
Botões............................................................................................................................................. 40
Cenas .............................................................................................................................................. 41
Ações .............................................................................................................................................. 42
Som e Vídeo.................................................................................................................................... 43
Máscara .......................................................................................................................................... 45
Publicando e Exportando Arquivos ................................................................................................ 47
Integração Flash + PowerPoint ....................................................................................................... 48
Dispositivos Móveis ........................................................................................................................ 50
 Introdução

O Flash CS3 é uma eficiente ferramenta direcionada à produção de mídia para a Web. Além de
animações, pode ser usado para desenvolvimento de Web sites completos.

Ao entrarmos no Flash CS3, vamos perceber ou conhecer as mudanças em seu design. A Barra
de Ferramentas se encontra apenas em uma coluna, os painéis podem ser compactados e ao
acionar os botões, o painel é aberto não abaixo do seu ícone, mas sim uma nova coluna, à
esquerda da barra de painéis.

Este software tem suporte aos formatos PSD (Photoshop) e AL (Illustrator). Com as ferramentas
é possível realizar desenhos complexos que aparentam ser a mão livre, mas que na realidade
são formados por pequenos detalhes geométricos.

Iniciando o Adobe Flash CS3 Professional

Para iniciar o Flash CS3, clique no botão Iniciar, escolha a opção Todos os Programas, Adobe
Web Premium CS3 e em seguida, Adobe Flash CS3 Professional.

1
 Iniciando o Flash CS3

Através desta janela é possível:

1. Abrir um arquivo recente

2. Criar novos tipos de documentos
3. Criar um arquivo utilizando um modelo pronto
4. Área de informações de ajuda e links úteis no site Adobe.

Para desativar a tela inicial seleciona-se a opção Don't show again. Ao iniciar o programa
novamente, será aberto um novo documento.

Para criar um documento novo, em Create New, clicamos em Flash File (ActionScript 3.0).

Área de Trabalho

Com o documento criado, vamos conhecer a Área de Trabalho do Flash CS3. Esta área é dividida
em 5 partes:

1. À Esquerda se localiza a Barra de Ferramentas, Desenho e Pintura.

2. No alto está a Linha do Tempo.
3. No centro se encontra o Palco, onde são feitos os desenhos.

À direita e na parte inferior da tela ficam os Painéis.

2
A Linha do Tempo é responsável pelo controle de tempo das animações e pela ordem de
empilhamento dos objetos. Ela é dividida em quadros (Frames) e permite a organização dos
elementos em camadas.

O Palco abriga a cena, que é a área de desenho do documento.

Os Painéis à direita trazem recursos, como o calibrador de cores e os componentes.

Os Painéis inferiores exibem, propriedades, filtros e parâmetros.

Clicando nas setas dos painéis é possível reduzí-los a ícones.

3
Painéis reduzidos.

Para restaurar o painel, clique novamente nas setas indicadoras.

Para fechar um painel clicamos no .

Caso feche o painel de cores, clique no menu Window opção Color, para que o mesmo seja
aberto.

Teclando F4 fechamos ou abrimos todos os painéis.

4
 Alterando a Aparência do Flash CS3

Para exibir ou ocultar elementos da Área de Trabalho, clicamos no menu Window e marcamos
ou desmarcamos os itens desejados.

Podemos arrastar os painéis pela Área de Trabalho e deixá-los em outra posição.

Após definirmos as alterações da Área de Trabalho, podemos salvá-la através do menu Window,
clicando em Workspace e por fim selecionando Save Current.

5
Após o clique, será aberta a caixa de diálogo Save Workspace Layout, onde será digitado um
nome para o novo layout.

O Flash CS3 trabalha com dois tipos de arquivos, os documentos com as extensões FLA são
arquivos de trabalho, podem ser editados em aplicativos Flash e permanecem com os
desenvolvedores. As animações geradas a partir dos arquivos FLA ficam em arquivos SWF que
são publicados na web.

Para começar a trabalhar em um arquivo, ajustamos as propriedades básicas. No painel de

propriedades Properties.

A opção Background color permite inserirmos cores na área do desenho. O Frame rate define a
velocidade da animação, o valor padrão é de 12 frames por segundo, em Ruler units podemos
selecionar as unidades da régua do Flash, fundamental para alinhar objetos.

O botão Publish Settings, reúne os ajustes para exportação de arquivo.

Após o clique surgirá a caixa de diálogo Publish Settings, onde selecionando a aba Formats,
temos as opções de formatos para exportação de arquivo. Onde podemos escolher Gif, JPEG e
EXE entre outros.

Na aba Flash, escolhemos para qual versão do Flash Player o filme será exportado, ajustamos a
ordem de exibição das camadas e a versão do ActionScript.

A opção Protect from import, impede que o arquivo SWF seja importado e convertido em um
arquivo de trabalho (extensão FLA), ou seja, marcando esta opção evitamos que outros usuários
tenham acesso ao seu trabalho.

Na aba HTML contém mais ajustes de publicação. Um dos mais importantes é o que permite
detectar a versão do Flash usada pelo internauta. Há também ajustes de dimensão, qualidade e
alinhamento.

Após as alterações, salvamos o arquivo no Flash, clicando no menu File, em seguida Save.

6
Neste modo o documento será salvo com a extensão FLA através da caixa de diálogo Save As.

Para gerar a animação em formato SWF, clicamos em File, em seguida Export e selecionamos
Export Movie.

Ferramentas de Desenho

Através das ferramentas de desenho é possível criar desenhos vetoriais perfeitos.

Na Barra de Ferramentas, clicamos na ferramenta Rectangle Tool e selecionamos a opção Oval

Tool. Esta ferramenta tem duas opções que iremos ver a seguir. Ao desenhar uma elipse
pressiona-se a tecla <Shift> enquanto arrasta-se o mouse.

Esta ferramenta também é acessada através do atalho <O>.

Observe no painel inferior as propriedades desta ferramenta.

7
Os dois tipos de ferramentas elipses são bastante parecidas, o que diferencia é o modo de
manipulação delas. Enquanto a Oval Tool permite modificar o raio, o início e fim do segmento
uma única vez, com a Oval Primitive Tool é possível modificar quando quiser. Acessamos esta
ferramenta pressionado o atalho <O> duas vezes.

A ferramenta Rectangle Tool e Retangle Primitive Tool seguem o mesmo padrão das
ferramentas Oval, porém no Rectangle é possível arredondar os cantos do retângulo, permitindo
a criação de formas personalizadas.

Também acessamos a ferramenta Rectangle Tool através do atalho <R> e pressionando este
atalho duas vezes, acessamos o Rectangle Primitive Tool.

Observe no painel inferior as propriedades desta ferramenta.

Através da propriedade Rectangle corner radius, redimensionamos os cantos do retângulo. É

possível escolher qual lado receberá a borda arredondada através do ícone do cadiado .

Com a ferramenta Poly Star Tool é possível adicionar um polígono e definir a quantidade de
lados dessa forma, através do botão Options.

Após o clique no botão Options..., surgirá a caixa Tool Settings. Na opção Style, definimos a
forma a ser utilizada, Polígono ou Estrela, em Number of Slides define-se a quantidade de lados
que terá a forma e Star point size fará com que a estrela fique mais gordinha ou magrinha.

8
A seguir, um exemplo de como as suas formas poderão ficar.

A ferramenta Pen Tool será muito utilizada para desenhos vetoriais, enquanto outras
ferramentas terão que se juntar para desenhar algo, a ferramenta caneta por si só, fará tudo.
Esta ferramenta também é acessada através do atalho <P>.

Com o painel Color manipulamos as cores, adicionando transparência nas cores do objeto,
adicionando um bitmap (imagem) e adicionando um gradiente, seja ele linear ou radial.

Quando este painel não estiver disponível, ative-o através da opção Window em seguida Color.

A ferramenta Text Tool permite a criação de textos e também é acessada através do atalho <T>.

Ferramentas de Seleção

A ferramenta de seleção Selection Tool, ou seta preta, permite selecionar objetos e a

Subselection Tool, permite selecionar os pontos que formam os objetos e os seus elementos de
ajuste.

A Selection Tool é acessada pelo atalho <V> e a Subselection Tool pelo atalho <A>.

9
Ao selecionar a seta preta, podemos clicar sobre os objetos como círculos, quadrados, etc para
selecioná-los. Ao selecionar a segunda seta, Subselection Tool, e clicar em um objeto qualquer,
será possível ver todos os elementos que formam este objeto.

No exemplo a seguir, selecionamos a ferramenta PolyStar Tool, no painel Properties, clicamos

no botão Options... e em Style selecionamos a opção star.

Para desenhar na Área de trabalho clica-se e arrasta o cursor para o lado desejado.

Selecionamos a ferramenta Selection Tool e clicamos uma vez sobre a forma inserida.

Para utilizar a ferramenta Subselection Tool, seleciona-se a ferramenta e clica-se em uma das
extremidades do objeto.

10
Após o clique observe a seleção na forma, através dos pontos verdes, é possível mover os
vértices e ajustar a curvatura para outros locais do objeto.

Camadas

As camadas são como folhas transparentes, permitem criarmos um filme em uma camada e,
adicionando outras camadas é possível organizar a ilustração, animação e outros elementos do
filme. Podemos editar objetos de uma camada sem interferir nos objetos da outra camada.

Em cada camada temos 3 opções.

Suas funções:

1. Ocultar objetos da camada

11
 2. Bloquear a camada
3. Visualizar esboço

Utilizando essas opções temos o controle sobre a camada em que estamos trabalhando.

Quando for adicionado novas camadas, ela terá o nome definido pelo Flash de Layer. Para
renomeá-las, com um duplo clique, selecionamos a palavra Layer 1 e digitamos o novo nome da
camada, em seguida, pressionamos a tecla <Enter> para confirmação.

Adicionamos novas camadas através do botão Insert Layer.

Caso necessite de ocultar uma camada, clique na coluna Olho. Para voltar a camada, clique
novamente no mesmo local.

Para ocultar todas as camadas, clique no ícone do Olho. Para voltar as camadas, clique no
mesmo ícone novamente.

A seguir temos um exemplo de duas formas criadas na mesma camada. Perceba que ao arrastar
a segunda forma, a primeira é afetada. As imagens se fundem.

12
Se fossem imagens de mesma cor, as formas iriam grudar uma na outra, surgindo uma única
forma.

Agora observe duas formas criadas em camadas diferentes.

Para visualizar o conteúdo de uma camada como contorno do objeto, clique na opção Show All
Layers as Outlines, após o clique será mostrado apenas o contorno do objeto.

Para alterar a cor da camada como contorno, clica-se com o botão direito sobre a camada e
seleciona-se a opção Properties.... Em Outline color defina a nova cor da camada e confirme
clicando no botão OK.

13
Para bloquear uma camada, ou seja, para que a mesma não sofra nenhuma alteração, selecione
a camada desejada e clique em Lock/Unlock All Layers. Após o clique a camada será bloqueada e
não será possível alterá-la. Para desbloquear, clique novamente na mesma opção.

Para excluir uma camada, selecionamos a Layer desejada e clicamos em Delete Layer.

Colorindo

O Flash fornece várias maneiras de aplicar e modificar as cores. Através da paleta de cores
podemos escolher as cores a serem aplicadas ao traço e ao preenchimento de um objeto.

Ao aplicar uma cor de traço no objeto, podemos selecionar qualquer cor sólida, o estilo e a
espessura do traço. Para preenchimentos de uma forma, pode-se aplicar uma cor sólida,
gradiente ou um bitmap.

Os controles de traço e preenchimento, definem os atributos de pintura dos novos objetos

criados com as ferramentas de desenho e de pintura. Para usar esses controles para alterar os
atributos de pintura de objetos, é necessário selecionar os objetos antes de alterá-los.

No painel Color temos as seguintes opções:

No painel Properties, após inserirmos a forma desejada, ele disponibiliza além das opções de
cores, a opção Stroke height que define a largura do traço e Stroke style que define o estilo de
traço.
14
Com a forma inserida, selecione-a através da ferramenta Selection Tool.

Podemos trabalhar com as cores dos painéis Color ou Properties.

No painel Properties, selecionamos as opções de traço, ou seja, o contorno da imagem.

Na próxima caixa Stroke Style, selecionamos a opção Solid, para o estilo de contorno da linha.

Em Fill collor, selecionamos a cor desejada.

Em Fill color do painel Color, utilizamos a opção gradiente.

15
Para retirar o contorno que foi inserido no objeto, clicamos na opção Stroke color em seguida
selecionamos o botão nenhum.

Utilize a opção Seletor de cores através da opção Fill color e personalize as cores de suas formas.

Após o clique surge a caixa Cor, onde podemos personalizar as cores e adicioná-las às Cores
personalizadas.

16
 Ferramentas de Texto, Conta Gotas e Apagador

A ferramenta Text Tool auxilia na criação de textos, onde podemos definir o tamanho, fonte, o
espaçamento, cor e alinhamento. É possível transformar o texto como um objeto, girando,
redimensionando e invertendo-o. Além disso, podemos vincular blocos de texto a URLs.

Após o clique, na área de trabalho, é possível colocar texto em uma linha que se expande
durante a digitação ou em um bloco de largura fixa que quebras linhas automaticamente.

Ao clicar na ferramenta Text Tool, observe suas propriedades no painel Properties.

Temos três tipos de textos:

 Dynamic Text: Textos gerados a partir de variáveis (código;)

 Static Text: Textos comuns;

 Input Text: Textos digitados pelo internauta;

O Flash exibe uma alça quadrada no canto inferior direito das caixas de texto, indicando a
possibilidade de dimensioná-las verticalmente e horizontalmente, de acordo com o volume de
texto a ser inserido.

17
Clique sobre a alça para ajustar o tamanho de seu texto.

Podemos transformar o objeto texto para um vetor, ou seja, alterar as suas formas. Para isso
utilizando o texto digitado acima, selecione-o através da ferramenta Selection Tool e pressione
as teclas <Ctrl+B> duas vezes.

A primeira vez que pressionar, o texto será desmembrado quebrando-se em letras,

pressionando as teclas novamente é retirado o processo de desmembrar e o texto irá se
transformar em um Vetor.

Depois de convertido em vetor, não será possível alterá-lo como texto.

Após essa alteração, é possível aplicar as cores gradientes e distorcer o vetor. Em Fill color
selecionamos um gradiente, clicando sobre o vetor com o botão direito do mouse e seleciona-se
a opção Distort. Clica-se em um dos cantos da imagem e arrasta-se o lado desejado. Caso
necessite desfazer uma ação pressione as teclas <Crtl+Z>.

Utilizamos a ferramenta Eyedropper Tool (Conta-gotas), para copiar atributos de preenchimento

e de traço de um objeto aplicá-los a outros objetos.

Utilizando a ferramenta Eyedropper Tool, clicamos sobre o primeiro objeto, em seguida o

símbolo do conta-gotas, acessado também pelo atalho <I>, se transformará em um balde de
tinta, então clicamos no segundo objeto.

18
A ferramenta Eraser Tool (Apagador ou Borracha), remove traços e preenchimentos, permitindo
personalizá-la para apagar somente traços ou somente áreas preenchidas. A borracha pode ser
redonda ou quadrada entre cinco tamanhos. Esta ferramenta também é acessada pelo atalho
<E>.

Para excluir rapidamente tudo o que existir no palco, dê um duplo clique na ferramenta
Borracha.

Para remover contornos ou áreas preenchidas, seleciona-se a ferramenta Eraser Tool (borracha)
e clica-se no modificador Faucet (torneira).

Utilizando a ferramenta Faucet para apagar o contorno da imagem.

Com a ferramenta Faucet (torneira), podemos remover também a área preenchida.

Vamos ver as opções da ferramenta Eraser Mode.

19
Após o clique, surge as opções para o modo de apagar.

As opções da ferramenta Eraser Mode:

 Eraser Normal: Apaga traços e preenchimentos na mesma camada.

 Erase Fills: Apaga somente preenchimentos, os traços não são afetados.

 Erase Lines: Apaga somente traços, os preenchimentos não são afetados.
 Erase Selected Fills: Apaga somente os preenchimentos selecionados no momento e não
afeta os traços
 Erase Inside: Apaga somente o preenchimento no qual você inicia o traço da borracha,
os traços não são afetados pela borracha.

Importando arquivos

O Flash reconhece diversos formatos de arquivos tendo como destaque o PNG, melhor formato
para arte no Flash, isso permite uma integração com o Macromedia Fireworks, o PSD
(Photoshop), formatos de bitmaps (BMP, GIF, JPG), arquivos de áudio como WAV, MP3, AU,
formato de vídeo AVI, MOV, MPEG, imagens vetoriais criadas pelo Adobe Illustrator e AutoCad,
além de programas que permitem criar em SWF.

Ao importar um objeto o mesmo será colocado na biblioteca de símbolos do programa.

Ao importar vetores, podemos desmembrá-los e tratá-lo como um objeto do Flash. Já arquivos

bitmaps será necessário tratá-los como bitmap, se for necessário convertê-los em vetores é
necessário "Traçar o Bitmap", ou seja, transformá-lo em vetor. Pode ocorrer perca na qualidade
da imagem.

Para importar um arquivo para o Flash, clique em File, em seguida Import e por fim Import to
Stage..., ou utilize o atalho através das teclas <Ctrl+R>.

20
Será aberta a caixa de diálogo Import.

Se um arquivo importado tiver várias layers, pode ser que o Flash crie novas layers.

Imagem inserida no Flash.

21
Após inserir uma imagem bitmap, vamos tratá-la como um vetor, para isso, com a imagem
selecionada clicamos em Modify, Bitmap, em seguida Trace Bitmap....

Em seguida, surgirá a caixa de diálogo Trace Bitmap.

Após confirmação sua imagem será convertida e dividida em várias partes, prontas para serem
editadas.

É possível alterar as cores da imagem. Para alterar as partes menores, utilize a ferramenta Zoom
Tool , aumente ou diminua a imagem através das opções a seguir que se encontram na barra
de ferramentas.

A seguir um exemplo com as cores do vetor alterado. As cores gradientes, também podem ser
usadas.

22
 Grupos - Object Drawing

No Flash CS3 temos a ferramenta Object Drawing, que permite desenhar os objetos como
grupos, através das ferramentas Line, Pen, Oval, Pencil e Brush.

Com a opção Object Drawing, toda vez que finalizarmos um desenho, ele irá se tornar um objeto
protegido evitando-se assim problemas com formas sobrepostas.

Os desenhos agora são objetos, para editá-los é preciso clicar duas vezes sobre o objeto
desejado, para que seja aberto seu grupo.

Para sair do grupo do objeto selecionado, dê um duplo clique no palco. O Flash restaura o grupo
permitindo trabalharmos com outros elementos no palco.

A vantagem de utilizar os grupos, é poder trabalhar com os objetos sem que as imagens se
fundem, afetando umas as outras.

Podemos transformar em grupos formas já desenhadas. Com a forma desenhada, clicamos na

ferramenta Selection Tool. Em seguida, clique em Modify e selecione Group, ou utilize as teclas
de atalho <Ctrl>+<G>.

23
Para desfazer um grupo, clica-se em Modify e seleciona-se Ungroup, ou utilize as teclas de
atalho <Ctrl>+<Shift>+<G>.

O painel Align (alinhar), permite alinhar objetos selecionados. Podemos alinhá-los verticalmente
com a borda a direita, central ou esquerda, horizontalmente com a borda superior, central ou
inferior dos objetos selecionados.

Para alinhar objetos, selecionamos os objetos a serem alinhados e clicamos em Window, em

seguida selecionamos Align.

Com os objetos selecionados, clica-se no alinhamento desejado.

24
 Símbolos

Para trabalharmos com animações no Flash é necessário que quase todos os elementos sejam
convertidos para símbolos. É através destes que podemos definir qual o comportamento do
símbolo. Os três símbolos do Flash são:

 Botões (Button) : Este símbolo pode receber valores diferentes para estado do
botão, normal, ao rolar sobre ele, pressionado ou oculto. É muito utilizado para chamar
ações.
 Gráficos (Graphic) : Os Gráficos é o mais básico, pois ele é praticamente estático,
embora possa receber ações, é muito utilizado dentro dos outros símbolos.

 Clipes de Filmes (Movie clip) : Este permite que se crie um filme dentro do símbolo,
com a vantagem que ele carrega todo o clipe de filme primeiro. Podemos controlar seu
início até o fim de sua animação, criar links e outras coisas que serão mais fáceis com o
Movie clip.

Podemos criar objetos e depois convertê-los. Ao criar um símbolo ele vai automaticamente para
a Biblioteca de Símbolos.

Todo símbolo utilizado em um filme, são guardados na Biblioteca (Library), de onde é permitido
arrastar e soltar novas instâncias, ou seja, copiar um símbolo. Quando é editado, sua instância é
atualizada, mas alterando as propriedades, efeitos ou dimensões, uma instância não afetará o
original.

Para transformar um objeto selecionado em símbolo Gráfico, Botão ou Clipes de Filmes, após
selecioná-lo, clique em Modify e selecione Convert to Symbol ou pressione a tecla F8.

25
Ao desenhar seu objeto ou importar, acessamos o menu para converter em símbolo, abre-se
uma caixa de diálogo, onde devemos informar um nome, pode-se manter uma nomenclatura
que facilite a sua identificação. Por exemplo, para Graphic utilizarmos GRnome, para Movie clip
utilizarmos MC. Abaixo do nome temos a escolha do tipo de símbolo. Ao lado temos a posição
de seu registro, o padrão é no canto superior esquerdo, esse centro de registro é necessário,
pois é a partir dele que seu objeto é carregado.

Para criar um símbolo do tipo Movie clip informamos um nome para o mesmo, em Registration
marque o centro de registro e confirme no botão Ok.

Em seguida, será criado o símbolo na Biblioteca. Caso o painél Library, não esteja sendo
visualizado, clicamos no menu Window e selecionamos a opção Library ou pressionamos as
teclas de atalho <Ctrl>+<L>.

No exemplo a seguir, será criado uma instância, clica-se sobre o nome do símbolo e arrasta-se o
mesmo para o palco.

26
Podemos alterar as instâncias de modo diferente, através da ferramenta Free Transform Tool ou
clicando sobre o símbolo com o botão direito do mouse.

Ao criarmos um símbolo podemos manipulá-lo pela barra de propriedades:

No painél Properties é possível definir a posição X e Y do objeto, a sua largura W e altura H. O

campo <Instance Name> é utilizado para nomear a instância do objeto, utilizado em
ActionScript. O campo Swap permite substituir o símbolo na área de edição por outro existente
na biblioteca.

A opção Color permite modificar as cores e transparência do símbolo.

As opções são:

Brightness: Brilho natural do objeto é 0% ao colocar em -100% ele retira todo o brilho e em
100% ele adiciona todo o brilho.

Tint: Permite preencher o objeto com qualquer cor com grau de transparência.

Alpha: Permite acrescentar transparência aos símbolos.

27
Advanced: Permite trabalhar as cores RGBA do símbolo.

A opção Blend permite aplicar mistura de objetos, para isso é necessário que cada objeto esteja
em sua camada. Marcando Runtime Bitmap Caching, permite criar um bitmap do objeto em
tempo de execução.

A duplicação de um símbolo permite usar um símbolo existente como ponto inicial para criar um
novo símbolo.

Para duplicar, selecionamos o símbolo na biblioteca e clicamos com o botão direito do mouse e
escolhemos Duplicate.

Em seguida, surgirá uma caixa, para que seja informado o nome, então confirmamos clicando no
botão OK.

Para trabalharmos com o recurso de substituição de símbolos, clicamos sobre a instância do

símbolo no palco, clicamos no botão Swap , na Barra de Propriedades.

Em seguida, surgirá a caixa de diálogo Swap Symbol com a lista dos símbolos existentes na
biblioteca. Selecionamos o símbolo e clicamos no botão OK.

28
 Linha do Tempo

A Linha do Tempo (Hide Timeline) é utilizada para a criação de animações. Através dela
podemos definir qual será a mudança ou caminho a ser especificado pelo objeto do filme.
Podemos através da linha utilizar as camadas para um melhor agrupamento e movimento.

A linha do tempo é composta pelos seguintes elementos:

 Nome do arquivo
 Controle de cenas
 Controle de objetos
 Visualização de camadas onde temos Mostrar/Ocultar, Bloquear/Desbloquear e
visualizar somente os traços.
 Quadros de animações: Quando um quadro possui animações, o mesmo possui uma
bolinha preenchida. Quando apresentar uma bolinha vazada, é um quadro vazio e
quando o mesmo apresentar um "a" significa que nesse quadro temos ações (Blocos de
códigos dentro da animação).

A opção de criar uma pasta Insert Layer Folder, permite armazenar camadas dentro dela. A
barra da linha do tempo exibe os quadros da animação onde estão o cursor vermelho na barra
indica o quadro selecionado, também é possível clicar sobre o quadro para selecionar o mesmo.

O botão ao lado da linha, no canto superior direito, permite definirmos a aparência da linha do
tempo.

29
A opção Onion Skin, será a velocidade de um filme produzido de 12 Frames per second
(12fps)(quadro por segundo), significa que o filme apresenta 12 quadros de animação por
segundo. Para reproduzir um DVD, é necessário mudar a velocidade para 30 fps. Animações que
contém muito brilho, ou efeitos é aconselhável utilizar 24 fps.

Foram desenhadas duas formas em camadas diferentes.

Selecionamos a primeira forma e na Linha do Tempo (Hide Timeline), clicamos no quadro 10 e

pressionamos a tecla <F6>.

Em seguida observe que a linha de tempo é preenchida até o quadro 10.

Selecionamos a segunda camada, clicamos no quadro 15 e pressionamos a tecla <F6>.

Pressionando as teclas <Ctrl>+<Enter>, visualizamos a apresentação do movimento das formas.

30
Na Hide Timeline trabalhamos com quadros e quadros-chaves. O quadro-chave é onde defini-se
uma alteração em uma animação ou inclui ações para modificar um filme, esses quadros são
uma parte importante da animação.

É possível inserir, arrastar para um novo local, selecionar, excluir, copiar, colar, converter
quadros-chave em quadros.

Para inserir um quadro, clicamos com o botão direito do mouse sobre a linha e selecionamos a
opção Insert Frame, no caso do quadro-chave selecionamos a opção Insert KeyFrame.

Para converter um quadro-chave para quadro, selecionamos o quadro-chave, clicamos com o

botão direito do mouse e selecionamos a opção Clear Keyframe. Com este quadro limpo, todos
os quadros até o chave serão substituídos pelo quadro anterior ao quadro-chave anterior.

A seguir temos um exemplo de inserção de um quadro-chave, selecionamos a opção Insert

Keyframe ou pressionamos a tecla <F6>.

O Keyframe é representado por um ponto preto dentro de um quadro e é usado nos pontos em
que ocorrerá algum evento na animação.

31
Com a segunda camada selecionada, clicamos na ferramenta Free Transform Tool e giramos a
forma como a imagem abaixo.

Em seguida utilizamos as teclas de atalho <Ctrl>+<Enter> para a visualização do arquivo.

Animação

Através do Flash CS3 é possível animar objetos para fazer com que pareçam se mover no palco,
ou alterar a forma, tamanho, cor, rotação e outras propriedades. Podemos criar animação:
quadro a quadro, interpolação de forma e interpolação de movimento.

A Animação quadro a quadro, é semelhante a um desenho animado, para cada movimento do

objeto colocamos o mesmo dentro de um quadro.

Ao inserirmos uma forma no palco, observe que no quadro surge uma bolinha preta, indicando
que existe um objeto.

32
Em nosso exemplo, clicamos no segundo quadro e inserimos um quadro-chave pressionando a
tecla <F6>, em seguida alteramos a cor do desenho. Adicionamos outro quadro-chave e
alteramos a cor novamente, repetimos este processo até o quadro 10.

Observe a imagem abaixo, após a inserção dos quadros-chaves:

Para incluir arquivos em uma página HTML, transformamos o mesmo para a extensão SWF.
Geramos esta página através do Dreamweaver ou do Flash, através do recurso de publicação.
Veremos mais sobre este recurso.

Com a Animação com Interpolação de Movimento, temos controle total sobre o filme, mas se a
animação tiver, por exemplo, mais de 200 quadros ela ficará lenta e com mais possibilidades de
erro. Para automatizar este processo, utilizamos a animação com Interpolação, podemos definir
a posição inicial e final do objeto e depois fazermos a animação.

Para este exemplo utilizamos uma elipse e convertemos a mesma em um Movie clip.

Clicamos no quadro 15 e pressionamos a tecla <F6>. Arrastamos a forma, movimentando-a para

o lado direito, como a imagem abaixo.

Clicamos no primeiro quadro (quadro 1) e em Tween na barra de propriedades, selecionamos

Motion.

33
Outra opção para inserir um Motion, é clicando com o botão direito do mouse sobre os quadros
já marcados e selecionarmos Create Motion Tween.

Em seguida, visualizamos a apresentação.

A Interpolação de Formas é utilizada nos efeitos de morfismo que podem ser feitos, usando
transformações de instâncias, como rotação, redimensionamento ou distorção. Podemos aplicar
contornos, gradientes e preenchimentos.

Com a Interpolação de Formas alteramos a forma física de um objeto. Esta opção permite, por
exemplo, fazer com que um círculo se transforme em um retângulo.

Após fazer o desenho desejado, marcamos os quadros através da tecla <F6>

Clicamos no primeiro quadro com o botão direito do mouse e apagamos a forma desenhada,
selecionando-a e pressionando a tecla <Delete>. Em seguida, desenhamos outra forma, no
exemplo utiliza-se um polígono. Por fim, inserimos a Interpolação de formas (Create Shape
Tween).

34
Ao terminar visualizamos a apresentação.

Esse tipo de animação difere da anterior por não poder criar Movie clips, esta interpolação só
funciona com desenhos e não com objetos.

Motion Guide

Um dos grandes atrativos da animação com interpolação é a possibilidade de criar caminhos

para a animação do objeto, este processo é chamada Motion Guide(Camada Guia) ou (Linha
guia).

Para especificar este caminho existe um cuidado importante, é que a linha deverá ser criada na
camada da linha guia para não ocorrer defeitos na animação.

Neste exemplo criamos uma bola "quicando".

Clicamos em um quadro e pressionamos a tecla F6 para criar uma interpolação.

Em seguida, inserimos uma Camada Guia e desenhamos uma linha utilizando a ferramenta
Pencil Tool (Lápis).

35
Observe se realmente a sua linha foi criada na Camada Guia e que a bola esteja na camada Bola.
Ao criar linhas, tenha cuidado para que não fiquem interrompidas, pois isto impedirá o
funcionamento correto do movimento. Para verificar dê um duplo clique sobre a linha, caso ela
não selecione inteira, ela deve estar partida em algum local.

Após o desenho, clicamos sobre a figura Bola e posicionamos o centro da mesma, em cima do
inicio da linha.

Clicamos no último quadro da camada Bola e arrastamos a mesma para o final da linha,
lembrando que o centro da mesma deverá se encaixar na linha.

Ao arrastar a bola, ela deverá ser puxada para a linha, somente quando os dois estiverem
alinhados sobre a linha, o movimento funcionará.

Pressionamos as teclas <Ctrl>+<Enter> para visualizarmos a apresentação. Ao visualizá-la a linha

guia não é visualizada.

36
 Movie Clip

O Movie clip, conhecido por Clipes de Filme ou MC são pequenos trechos de animação que
funcionam independentes da linha do tempo do filme principal. Podem conter sons e controles
interativos, sendo controlados por botões, ações de quadros ou por outros Movie clips, tem a
capacidade de serem usados em botões na sua criação, aplica filtros existentes e cria links.

Uma das grandes vantagens dos Movie clips é podermos editá-los separadamente do filme
principal, facilitando a organização da animação. Controlamos seu início até o fim da animação.

Para criar Movie clips, basta criar um objeto e convertê-lo para Símbolo, apesar de termos já
visto em lição anterior, vamos aprender mais sobre o mesmo.

Importe a imagem que deseja trabalhar e faça alterações em seu documento, caso seja
necessário.

Selecionamos a imagem que foi inserida no palco com a ferramenta Selection Tool e
pressionamos a tecla de atalho <F8> para abrir a caixa Convert to Symbol. Em Name digita-se
uma descrição para o mesmo, selecionamos a opção Movie clip e clicamos sobre o botão OK.

Em seguida, o arquivo será transformado em um Movie clip. Observe que o Movie clip tem uma
borda azul em sua volta.

37
Pressionamos as teclas <Ctrl>+<K>, caso o painel Align não esteja aberto, para alinharmos o
Movie clip no centro do palco e selecionamos a opção Align horizontal center.

Dê um duplo clique sobre o Movie clip para que seja aberto seu grupo, MCPluto.

Com o Movie clip selecionado, clicamos na opção Modify, Bitmap em seguida selecionamos
Trace Bitmap.... Na caixa aberta, em Color Threshold informamos os valores desejados.

O Movie clip será tratado como um vetor, para que possamos dar movimentos a partes
específicas do desenho.

Utilizando a ferramenta Zoom Tool aumentamos a visualização do local que desejamos

trabalhar.

Selecionamos a ferramenta Selection Tool e pressionando a tecla <Shift>, selecionamos todas as

partes que pertencem ao local escolhido do desenho.

Ao terminar pressionamos as teclas <Ctrl>+<G>, para que seja criado um grupo. Copiamos este
grupo através das teclas <Ctrl>+<C> e inserimos uma camada.

Com a camada do desenho escolhido selecionada, colamos o grupo copiado pressionando as

teclas <Ctrl>+<V>. Utilizando as setas do teclado ou a ferramenta de seleção encaixamos esse
grupo no desenho.

38
Voltamos a primeira camada e apagamos o grupo que foi copiado.

Selecionamos o quadro desejado, da primeira camada e pressionamos a tecla <F6>. Em seguida,

foi selecionado a camada do desenho escolhido (grupo), e clicamos na ferramenta Free
Transform Tool. Por fim, iniciamos os movimentos para este grupo.

Clicamos no próximo quadro desejado e pressione a tecla <F6>, neste quadro mantemos o
tamanho do grupo original, para que consigamos fazer movimentos, como descer e subir com o
mesmo.

Repitimos os dois processos anteriormente, quantas vezes for necessário.

Para retirar o fundo branco, aumentamos o Zoom do desenho, selecionamos a ferramenta

Eyedropper Tool (Conta-gotas) e clicamos sobre o fundo do desenho, após o clique o cursor
transforma-se em um balde de tinta, então clicamos sobre as partes que estão em branco, para
que elas sejam preenchidas com as cores do fundo da imagem.

39
No Flash CS3 temos Filtros que são aplicados aos símbolos, esses filtros podem ser aplicados a
Movie clips e Textos.

Filtros são efeitos visuais que podemos aplicar a objetos renderizados, como instâncias de
Movie clip. Os Filtros incluem sombreamento, embaçamento, brilho, chanfro, brilho gradiente e
chanfro gradiente. Também é possível utilizar um filtro de ajuste de cor que permite editar o
brilho, o contraste, a saturação e o matiz de um Movie clip. Os filtros podem ser aplicados
utilizando a interface de usuário do Flash CS3 ou utilizar o Action Script.

Para aplicar um filtro, seleciona-se, por exemplo, um Movie clip e na barra de propriedades,
clica-se na paleta Filters.

Clicamos em Add filter e observamos as opções:

Botões

Os Botões são Movie clips interativos compostos por quatro quadros, pois quando é selecionado
o comportamento de botão, o Flash cria uma Timeline (linha do tempo) com esses quadros. Os
três primeiros exibem os estados possíveis do botão, enquanto o último define sua área ativa.

A linha do tempo reage a linha do ponteiro às ações, passando para o quadro apropriado. Para
tornar um botão interativo, colocamos uma instância do símbolo no palco e atribuímos ações ao
mesmo, também é possível adicionar ações aos botões diretamente no símbolo, ou na linha do
tempo, neste caso é necessário dar um nome de instância ao símbolo de botão.

Criamos um símbolo pressionando as teclas <Ctrl>+<F8> onde será aberta a caixa Create New
Symbol. Em Name digita-se uma descrição e seleciona-se o comportamento para Button,
confirmando no botão OK.

Observe a linha do tempo, onde Up, Over, Down e Hit são os quatro estados de um botão, os
quais cada quadro tem uma função específica:

40
  Up (Repouso): Representa o botão que será visível ao abrir o filme, o mouse não está
colocado sobre o botão ou não se clicou sobre ele.
 Over (Sobre): Representa a aparência do botão quando o mouse está colocado sobre o
botão, mas ainda não clicou sobre ele.
 Down (Pressionado): Representa a aparência do botão ao ser clicado.
 Hit (Área Ativa): Define a área que responderá ao clique no mouse, quando ele está
ativo. Essa área é invisível no filme.

Após o desenhar uma forma para representar um botão, pressionamos a tecla <F6>, para que
automaticamente a cabeça leitora na linha do tempo passe ao estado Over, em seguida
selecionamos o botão e alteramos a sua cor através da opção Fill Color.

Como o botão se copia, não será necessário fazer um novo desenho. O processo se repete até o
estado Hit. Em seguida arrasta-se o botão para o palco e se desejar insere-se um texto no
mesmo.

Cenas

Desde o começo do Flash estamos trabalhando com cenas, com elas podemos orientar, planejar
um trabalho facilmente, sem que a Linha do tempo fique congestionada. Cada cena pode conter
seus próprios objetos, e automaticamente se colocam em ordem uma após as outras, podem
ser chamadas através de botões ou de ações colocadas diretamente nos quadros.

Depois de criada a cena é possível nomeá-las de forma a identicar sua função dentro da
animação.

Clicamos no menu Window, em seguida selecionamos Other Panels e clicamos em Scene ou

pressione as teclas <Shift>+<F12>, caso o painel não esteja aberto.

Para trocarmos o nome da cena, dê um duplo clique sobre a Scene 1 e digite o nome desejado.

41
Foram adicionadas 3 cenas e em cada uma, inseridas imagens diferentes.

Ao reproduzir o filme e observamos que o conteúdo das cenas é exibido de acordo com a ordem
relacionada no painel Scene.

Ações

Ações são Scripts utilizados pelo Flash para dar mais interatividade aos filmes e um melhor
controle sobre os mesmos, a linguagem de scripts do Flash é conhecida como ActionScript,
quem já estudou linguagens de programação se sentirá à vontade com esta linguagem que
como o JavaScript é Orientada a Objetos.

Para acessarmos o painel do ActionScript 3.0, pressionamos a tecla <F9>.

No ActionScript 3.0 temos o seguinte menu:

42
 1. Collapse Between braces: Esconde o código entre as chaves.
2. Collapse selection: Esconde o código selecionado.
3. Expand all: Mostrar todo o código.
4. Apply block comment: Adiciona comentários.
5. Apply line comment: Para comentários simples, em uma linha.

Uma das pricipais diferenças entre o ActionScript 3.0 das outras versões anteriores, é que antes
existiam diversas opções de colocar os códigos, como em timelines, movie clips e botões, no
ActionScript 3.0 é totalmente baseado em classes, onde os códigos são colocados em métodos
da classe.

Diferente do ActionScript 2.0, no AS3 inserimos o código em novas layers.

Código inserido em um botão.

Entendendo o código:

 botao_esquerdo: nome dado ao <Instance Name> do botão.

 addEventListener(MouseEvent.CLICK, esquerda): define a função do mouse ao ser
clicado.
 this.gotoAndPlay: Quando executado, vai para o quadro indicado, o qual inicia-se o
movimento para o lado esquerdo.

Com esses códigos, o filme ao ser iniciado, ficará parado no primeiro quadro, devido ao stop e
somente será reproduzido se for acionado o botão, neste caso o botão esquerdo.

Som e Vídeo

O Flash utiliza sons em bibliotecas compartilhadas para vincular um som de uma biblioteca a
vários filmes. Também é possível usar sons em objetos de som para controlar reproduções com
o ActionScript. Os sons são armazenados na biblioteca juntamente com os bitmaps e símbolos.
Nos símbolos, basta uma cópia de um arquivo de som para utilizá-lo de várias maneiras,
sincronizando a animação com uma trilha sonora ou botões.

43
O Flash só aceita sons com extensões .wav e .avi. Caso tenha um arquivo de outra extensão, será
necessário convertê-lo para arquivos compatíveis ao Flash.

O comando Import to Library insere o arquivo de som na biblioteca.

Após importar os arquivos, eles ficam armazenados na biblioteca. Veja que, assim como os
botões e Movie clips, os arquivos de áudio podem ser executados através do botão play da
biblioteca. Caso o painel não esteja aberto pressione as teclas <Ctrl>+<L>.

Som já inserido no botão.

Vamos ver alguns efeitos para o som:

 Event: Esta opção faz com que o som seja executado a partir do momento em que o
cabeçote de reprodução passar pelo local que ele está inserido.
 Start:: Esta opção indica onde desejamos iniciar o som.
 Stop: Indica onde desejamos parar o som.
 Stream: Faz com que o som seja executado enquanto o cabeçote de reprodução estiver
passando pela onda sonora, indicada na linha do tempo.

O Flash CS3 suporta muitos tipos de vídeos, como o MPG, WMV, AVI, MOV, etc. Além de
importar é possível adicionar interatividade, animações e figuras do Flash.

Assim como é feito com arquivos de imagem, para importar o arquivo de vídeo, clicamos em
File, Import, Import Video....

Na primeira tela, é questionado o local de onde o vídeo será importado. Em seguida clica-se em
Next para continuar.

A seguir, é questionado como o vídeo será integrado ao arquivo do Flash. Escolha a opção
desejada para importar o vídeo para dentro do arquivo e clica-se em Next.

Escolhe-se o tipo de arquivo, se desejamos editá-lo antes de importar. O próximo passo é definir
a versão do Flash e qual tipo de compactação será usada. Quanto menor a taxa, menor a
qualidade do arquivo e maior a compactação.

Filme importado e ajustado na linha do tempo.

44
É possível ver a reprodução do vídeo nesse estado. Basta clicar em Play ou teclar <Enter> para o
vídeo ser reproduzido, enquanto o cabeçote de reprodução passa pelos quadros.

Se desejar, insira outra camada e informe um texto. Vizualize a apresentação com o vídeo
importado.

Máscara

Um dos mais interessantes recursos do Flash, é o efeito de Máscara. Ele consiste em fazer com
que um objeto oculte e exiba partes diferentes de um objeto em outra camada.

Criar máscaras é uma maneira simples de revelar seletivamente partes da camada acima ou
abaixo da cena. Isso requer marcar uma camada como camada de máscaras e as camadas
abaixo como camadas mascaradas.

Importa-se um arquivo e seleciona-se quadros através da tecla <F5>, que será a duração da
animação.

45
Cria-se a camada onde será inserido a máscara. Em seguida, insere-se uma interpolação de
forma.

Para definir uma forma como máscara, esta precisa estar em uma camada acima do que será
exibido. Clica-se com o botão direto do mouse, sobre a camada e seleciona-se a opção Mask.

Exemplo de camadas.

46
 Publicando e Exportando Arquivos

O Flash possui um assistente de publicação de arquivos, que permite a configuração e

exportação em vários formatos. A publicação é o resultado final de seu trabalho.

Após abrir um arquivo desejado, selecionamos o menu File e clicamos em Publish Settings... ou
utilizamos as teclas de atalho <Ctrl>+<Shift>+<F12>.

Em seguida, surgirá a caixa de diálogo do assistente de publicação Publish Settings. Com ele,
você pode definir quais tipos de arquivos serão gerados, seus nomes e configurar suas
propriedades.

A primeira guia trás a possibilidade dos formatos a serem definido como projeto final de seu
trabalho:

 Flash (.swf): Gera um arquivo SWF, nativo do programa, que é aceito pelos navegadores.
É o mesmo tipo de arquivo gerado pelo comando Testar Filme <Ctrl>+<Enter>. Sendo
possível configurar a versão mínima do Flash Player que irá exibí-lo, proteger contra
importação, alterar qualidade de imagem e áudio, etc.
 HTML: Gera um arquivo HTML que exibe o SWF gerado em conjunto. Sendo possível
configurar a dimensão do filme, alinhamento, etc.
 GIF Image: Este formato permite gerar gifs estáticos ou animados do mesmo. Você pode
alterar a qualidade, cores, dimensão, etc.
 JPEG Image: Cria um arquivo de imagem JPG do primeiro quadro do filme, podendo ser
configurada sua qualidade e dimensão.
 PNG Image: Cria um arquivo de imagem PNG do primeiro quadro do filme, podendo ser
configurada sua qualidade dimensão, pode ser utilizado para imagens em seu código
HTML. É o formato padrão do Fireworks.
 Windows Projector: Gera um arquivo executável (EXE), que pode ser exibido
independente de um Flash Player.
 Machintosh Projector: Gera uma versão executável para computadores Machintosh.
 Quick Time: cria um arquivo de vídeo MOV (Quick Time), podendo ser alterada suas
dimensões, qualidade, etc.

A guia Flash permite definir a versão do Flash Player para seu filme, ordem de carregamento do
filme, versão de ActionScript. Em Options podemos gerar um relatório do filme, proteger contra
importação (quando essa opção está desmarcada é possível importar um SWF dentro de outro
filme), comprimir o filme, proteger com senha, definir a qualidade do JPEG e qualidade do
áudio.

A guia HTML permite definir para qual saída Flash será o filme, permite detectar a versão do
Flash. Dimensões do filme, definir a exibição, qualidade do filme, modo de janela e alinhamento.

Após configurar as opções, clicamos no botão Publish. Uma barra de progressão aparecerá e
logo em seguida, os arquivos estarão gerados no local onde está localizado o arquivo FLA. Clique
em OK, para fechar a caixa de diálogo.

47
O arquivo SWF costuma ter o tamanho reduzido, comparado com o arquivo FLA. Ao executar o
arquivo HTML, será aberto o navegador padrão, que exibirá somente o SWF.

Arquivo executado no Internet Explorer.

Integração Flash + PowerPoint

O PowerPoint, programa que acompanha o pacote Microsoft Office 2007, é direcionado ao

desenvolvimento de apresentações em forma de slides. Apesar de não ser um programa muito
complexo, ele oferece bons recursos.

Você pode importar suas animações em Flash, para incrementar sua apresentação.

Abre-se o PowerPoint com a versão instalada em seu computador e seleciona-se a guia

Desenvolvedor, no grupo Controles e clica-se em Mais controles. Após o clique surgirá a caixa de
diálogo Mais Controles, selecione a opção Shockwave Flash Object e pressione o botão OK.

48
Definimos as propriedades do quadro, clicando com o botão direito do mouse sobre ele.

Na caixa de propriedades, opção Movie indicamos o caminho do arquivo e salvamos em seguida.

Executamos o arquivo e observamos o filme inserido em sua apresentação.

49
 Dispositivos Móveis

O Adobe Device Central CS3 foi criado para aumentar a eficiência e a produtividade de
profissionais e desenvolvedores de dispositivos móveis que desejam produzir um conteúdo
inovador para uma ampla variedade de celulares.

Uma biblioteca atualizada para dispositivos móveis, combinada com a integração inteligente
entre o Device Central CS3 e os outros componentes do Adobe Creative Suite 3, simplifica o
fluxo de trabalho de criação para dispositivos móveis e facilita a visualização de projetos e o
teste de conteúdo no computador, antes de carregá-los no dispositivo-alvo para o teste final.

Ao iniciar o Flash CS3 selecionamos a opção Flash File (Mobile), caso o programa já esteja aberto
pressionamos as teclas <Ctrl>+<N>.

Selecionamos o modelo desejado, em seguida clicamos em Create, para que se inicie a

animação.

Cria-se uma animação para o emulador, o exemplo foi trabalhado máscaras.

50