Cur So Flash 5

Curso de Flash 5 1
Curso de Flash 5
Autora: Silvana T. Ynemine
Cursos Virtuais
O Site de Cursos do Brasil
http://www.cursosvirtuais.com.br
Proibida qualquer reprodução dessa apostila.

Para entrar em contato com a autora, use o email:
professora@cursosvirtuais.com.br
Cursos Virtuais
Curso de Flash 5 2
Notas:
Sobre a apostila:
Apostila criada exclusivamente para a Revista WWW.COM.BR - Fev/2001

O conteúdo da apostila é uma versão compacta do Curso de Flash promovido pelo
site Cursos Virtuais.
Sobre a autora:
Silvana Tauhata Ynemine é instrutora do site Cursos Virtuais e ministra diversos

cursos, entre eles, de WAP, JavaScript, ASP, Dreamweaver, Java, Flash, DHTML.
É autora dos livros:“Flash 5”, “Aprenda Rápido Flash 5”, “Dreamweaver 3 ” e

“Dreamweaver 3 - software em Português”. Todos os títulos lançados pela editora Visual
Books.
Todas as marcas citadas na apostila são exclusivamente de uso didático. Todas as

marcas são registradas e de propriedade de seus fabricantes.
Cursos Virtuais
Curso de Flash 5 3
Índice:
Tópicos Página
- Introdução ................................................................................................................. 04
- Requisitos do Sistema .............................................................................................. 05
- Instalação do software .............................................................................................. 06
- Interface do programa ............................................................................................... 10
- Barra de Menu ................................................................................................... 10
- Barra de Ferramentas ....................................................................................... 13
- Laucher Bar ....................................................................................................... 15
- Painéis ............................................................................................................... 16
- Bibliotecas ......................................................................................................... 20
- Timeline ............................................................................................................. 22
- Movie Explorer .................................................................................................. 23
- Iniciando o trabalho com o Flash 5 ............................................................................ 24
- Novo arquivo e Movie Properties ...................................................................... 24
- Frames, keyframes, layers, cenas e label ......................................................... 25
- Salvando, testando e exportando o filme ........................................................... 28
- Desenhando no Flash ................................................................................................ 29
- Animações .................................................................................................................. 31
- Tweening motion ................................................................................................ 31
- Tweening shape ................................................................................................. 32
- Mask .................................................................................................................. 33
- Motion guide ...................................................................................................... 34
- Trabalhando com símbolos ....................................................................................... 36
- Botões ................................................................................................................. 36
- Gráficos ............................................................................................................. 36
- Movie-clips ........................................................................................................ 36
- Imagens ....................................................................................................................... 44
- Importando imagens .......................................................................................... 44
- Transformando imagens em vetores (trace bitmap) .......................................... 45
- Sons ........................................................................................................................... 47
- Inserindo sons em botões ................................................................................. 47
- Inserindo sons em movie-clips ........................................................................... 48
- Inserindo sons na timeline principal .................................................................. 50
- Trabalhando e criando gifs animados ....................................................................... 51
- Importando um gif animado para o Flash .......................................................... 52
- Publicando o filme ..................................................................................................... 54
- Criando executáveis .................................................................................................. 58
- FSCommands .................................................................................................... 59
- Dicas Finais ............................................................................................................... 62
- Trabalhando com bibliotecas compartilhadas .................................................... 62
- Projeto: Criando um site no Flash ............................................................................. 65
- Sites ............................................................................................................................ 78
Cursos Virtuais
Curso de Flash 5 4
Introdução
O software Flash é produzido pela Macromedia. Atualmente encontra-se
na versão 5.0 e, sem dúvida, é uma das melhores ferramentas para se traba-
lhar com animações na Internet.
Com ele é possível criar não apenas animações, como também peque-
nos CD-Roms, aplicativos, jogos, entre outros.
Com dedicação e criatividade, os desenvolvedores passaram a ter a
possibilidade de criar, através do Flash, animações de alto nível para serem
usadas em páginas na Internet.
Dessa maneira, desde as suas primeiras versões, o programa vem ten-
do destaque na “comunidade” dos desenvolvedores de sites.
A sua capacidade em elaborar animações complexas em arquivos com
baixo tamanho, sem dúvida, tem sido um dos principais motivos para a difu-
são desse programa, além da sua facilidade em ser manipulado e a sua
interatividade. O único senão é que o usuário deverá possuir um plug-in para
poder visualizar as animações na Internet. Felizmente os navegadores em
suas versões mais atuais já vêm com o plug-in Flash Player embutido em
seus programas, o que demonstra o atual crescimento do uso dessa tecnologia
na Web.
O Flash pode ser adquirido no site da Macromedia ( http://
www.macromedia.com/ ). A fabricante também disponibiliza nesse site a ver-
são demonstração do programa com todas as opções habilitadas, porém com
tempo limitado de uso (30 dias), a chamada versão Trial.
Nesse curso iremos aprender como manipular o software e dominar seus

comandos básicos. Dessa maneira poderemos construir sites totalmente
interativos e animados seguindo a atual tendência da grande rede.
Cursos Virtuais
Curso de Flash 5 5
Requisitos do Sistema
Para a correta instalação do programa, seu computador dever ter no

mínimo as seguintes configurações:
Windows:
. Processador Pentium 133 Mhz ou Equivalente (Recomendado: 200 Mhz)
. Plataforma Windows 95 ou superior (inclusive Windows 2000), NT 4.0
ou Superior
. Memória de 32 MB RAM (Recomendado: 64 MB)
. 40 MB disponível no HD
. Monitor com resolução de vídeo de 800 x 600
. Drive de CD-ROM (somente para instalação via cd-rom).
Macintosh:
. Processador Power Macintosh (G3 ou superior)
. Plataforma Mac OS 8.5 ou Superior
. Memória 32 MB RAM
. 40 MB disponível no HD
. Monitor com resolução de vídeo de 800 x 600
. Drive de CD-ROM (somente para instalação via cd-rom).
Cursos Virtuais
Curso de Flash 5 6
Instalação do Software
Após obter o programa Flash 5, clique 2X no arquivo executável para
iniciar a instalação.
Fig. 01 - Tela de Início da instalação do programa Flash 5.
O programa de instalação será executado extraindo os arquivos neces-

sários para a correta instalação.
Fig. 02 - Mensagem do programa antes da instalação.
Em seguida, o programa de instalação recomenda a você fechar todos

os programas extras que estiverem abertos para que não haja nenhum pro-
blema durante o processo. Em seguida clique no botão Next.
Cursos Virtuais
Curso de Flash 5 7
Fig. 03 - Contrato de licença do software.
A próxima etapa é ler o Contrato de Licença do software. Caso esteja de

acordo, clique em Yes. Esse procedimento continua a instalação. Caso você
não concorde, clique em No.
Fig. 04 - Escolhendo o diretório de instalação
Em seguida, você deve selecionar o diretório de instalação. O programa

está configurado para ser instalado no diretório Flash 5 dentro de Arquivos de
Programas ou Program Files (no caso do sistema operacional ser em inglês).
Caso você queira instalar em outro diretório, basta clicar no botão Browse e
indicar o novo diretório em seu HD.
Uma vez escolhido o diretório, clique no botão Next.
Cursos Virtuais
Curso de Flash 5 8
Fig. 05 - Escolhendo o tipo de instalação
O próximo passo é definir o tipo de instalação. Existem três tipos dispo-

níveis:
. Typical - instalação padrão. É o tipo de instalação recomendada a ser
feita.
. Compact - instalação compacta. Instala o mínimo de componentes re-
queridos pelo programa, por isso ocupa menor espaço no HD.
. Custom - instalação customizada. O próprio usuário escolhe os compo-
nentes que quer instalar. Esse tipo de instalação é recomendado apenas para
usuários avançados.
Vamos escolher a instalação Typical. Em seguida, clique em Next.
Na próxima tela você deve indicar o nome do programa que aparecerá

no menu Programas do Windows. Nessa etapa, basta clicar no botão Next.
Fig. 06 - Instala-
ção do Plug-in.
Cursos Virtuais
Curso de Flash 5 9
Agora vem um passo importante: a instalação do Plug-in. Marque o na-

vegador que você quer instalar o plug-in Flash Player. Caso você tenha os
dois navegadores principais do mercado (Internet Explorer e Netscape) insta-
lados em seu computador, marque as duas caixas de seleção como pode ser
visto na Figura 06. Caso contrário, marque apenas o navegador que você
possui.
Após selecionar, clique no botão Next.
Fig. 07 - Instalação sendo efetuada.
Nessa etapa, processo de instalação será iniciado como é mostrado na

figura 07.
Após terminar, uma tela informando se você quer visualizar o arquivo
Read Me é exibido.
Se quiser ver, marque a caixa de seleção. Caso contrário, deixe a caixa
desmarcada e clique no botão Finish para concluir a instalação.
Pronto. O programa Flash 5 está instalado no seu computador e pronto

para o uso!
Cursos Virtuais
Curso de Flash 5 10
Interface do Programa
Quando abrimos o programa Flash 5 temos vários menus, barras e
painéis disponíveis ao longo da tela.
Menu principal Barra de Atalho de Menu Linha do Tempo - Timeline
Barra de visualização área de trabalho painéis Laucher Bar

Ferramentas Stage ou Palco
Fig. 08 - Visão geral do programa Flash 5.
Vamos, a seguir, analisar cada um separadamente:
Menu Principal
Fig. 09 - Menu Principal
Esse menu contém todos os comandos do software. E está dividido em:

- File: neste menu você pode criar um novo arquivo (New), abrir um arquivo já
existente (Open), abrir um arquivo como biblioteca (Open as Library), abrir
um arquivo como biblioteca compartilhada (Open as Shared Library), fechar
um arquivo (Close), salvar (Save), exportar o filme (Export Movie), publicar o
Cursos Virtuais
Curso de Flash 5 11
filme (Publish), imprimir (Print), entre outros.
- Edit: neste menu você pode utilizar recursos de edição como copiar (copy),
colar (paste), cortar (cut), desfazer (undo) ou refazer (redo) uma ação, sele-
cionar todo o conteúdo do stage (select all), entre outros.
- View: contém recursos relacionados à visualização do programa Flash. Nesse

menu você pode inserir um zoom para visualizar melhor a área de trabalho,
inserir régua (rulers), grade (gride), ocultar ou mostrar a timeline (timeline),
entre outros.
- Insert: esse menu contém os elementos a serem inseridos em seu filme,

como layers, frames, keyframes, símbolos, entre outros.
- Modify: esse menu contém comandos de modificação dos elementos inse-

ridos no seu filme, como frames, scenes, layers, entre outros.
- Text: contém recursos de definição de atributos de texto, como tipo de fonte,

alinhamento, tamanho, estilos, etc.
- Control: contém comandos de controle do filme. Nesse menu você pode

rebobinar (Rewind), executar o filme (play), testar seu filme (test movie), en-
tre outros.
- Window: esse menu permite a manipulação das janelas na sua área de

trabalho, ou seja, através dele, é possível ocultar ou mostrar determinados
painéis, janelas e paletas.
- Help: esse menu apresenta os tópicos de ajuda, amostras (samples), lições

extras (lessons) e informações adicionais sobre o programa.
Barra de menu de atalho
Fig. 10 - Barra de menu de atalho.
Esta barra é também chamada de Barra de Ferramentas Padrão por

conter alguns comandos fundamentais do software.
Estão disponíveis nessa barra, os seguintes comandos:
- New : Esse ícone cria um novo arquivo.

Cursos Virtuais
Curso de Flash 5 12
- Open : abre um arquivo já existente.
- Save : salva o arquivo atual.
- Print : imprime o arquivo.
- Print Preview : visualização prévia da impressão.
- Cut : corta um conteúdo.
- Copy : copia um conteúdo.
- Paste : cola um conteúdo.
- Undo : desfaz uma ação.
- Redo : refaz uma ação.
- Snap : ajusta à grade (encaixe).
- Smooth : suaviza a linha.
- Straighten : torna a linha mais reta.
- Rotate : rotaciona um elemento.
- Scale : altera a dimensão de um elemento.
- Align : alinha os elementos na vertical e na horizontal.
- Stop : para a execução de um filme.
- Rewind : rebobina o filme, retornando ao primeiro frame.
- Step Back : volta um frame por vez.
- Play : executa um filme.
- Step Forward : avança um frame por vez.
- Go to End : vai para o último frame do filme.
Cursos Virtuais
Curso de Flash 5 13
Barra de Ferramentas
A barra de ferramentas apresenta os recursos para efetuar

desenhos e inserção de textos no stage. Também permite fazer
correções com o uso de “borracha” e troca de cores.
Na parte inferior da barra, conforme o tipo de ferramenta
selecionado, podem-se abrir algumas opções para aquela ferramenta,
aumentando os recursos do software.
Fig. 11 - Barra de ferramenta.
Vamos estudar cada ferramenta:
- Arrow Tool (Atalho: tecla V) : esta ferramenta é usada para selecionar,

arrastar e transformar elementos.
- SubSelect Tool (A) : a ferramenta é usada para selecionar, arrastar e

redimensionar elementos. A diferença entre SubSelect Tool e a Arrow Tool é
que a primeira seleciona o elemento subdividindo em partes, onde a alteração
ocorre em pontos específicos (os nós), enquanto que a segunda, permite a
alteração em qualquer ponto do elemento.
- Line Tool (N) : utilizada para desenhar uma linha reta.
- Lasso Tool (L) : chamada de laço. Essa ferramenta permite selecionar

uma área. Para isso, clique na posição inicial da área que quer marcar dentro
do stage e mantenha o botão esquerdo do mouse pressionado, em seguida,
trace toda a área.
- Pen Tool (P) : ferramenta caneta. Usada para desenhar linhas e curvas.
- Text Tool (T) : utilizada para inserção de textos. A fonte padrão é Times
Roman tamanho 12. Pode-se alterar essas propriedades através do painel
Character ou do menu principal -> Text.
- Oval Tool (O) : utilizado para desenhar um círculo ou oval.
- Retangle Tool (R) : usado para desenhar um retângulo ou quadrado.

Um recurso interessante é o arredondamento das bordas. Para isso, basta
clicar no ícone Round Rectangle Radius em Options. Abrirá uma janela
onde você deve digitar o valor da curvatura.
Cursos Virtuais
Curso de Flash 5 14
- Pencil Tool (Y) : ferramenta lápis. Utilizada para efetuar qualquer desenho
no stage.
- Brush Tool (B) : ferramenta pincel. Usada para pintar áreas.
- Ink Bottle Tool (S) : efetua a pintura das bordas.
- Paint Brucket Tool (K) : ferramenta lata de tinta. Pinta o interior de

desenhos fechados.
- Dropper Tool (I) : capta a tonalidade de cor de um elemento para ser

aplicado em outro.
- Eraser Tool (E) : ferramenta borracha. Utilizada para apagar um conteúdo

desenhado no stage.
Ferramenta de Visualização
Fig 12 - Ferramenta de Visualização
Essa barra apresenta apenas dois recursos: Hand Tool (H), para
movimentar a área de trabalho e Zoom Tool (M ou Z) para dar um zoom no
stage.
Além da ferramenta de visualização, próximo à barra de status, na parte
inferior esquerda, há uma caixa de seleção como é mostrada na figura 13.
Fig. 13 - Visualização da Área de trabalho.
Você pode redimensionar o stage para facilitar a visualização e edição

de alguns elementos. Quando quiser escolher um tamanho maior ou menor,
basta escolher outro valor na caixa de seleção.
Cursos Virtuais
Curso de Flash 5 15
Ferramenta de Cores
Esta ferramenta permite inserir cores nos elementos no stage.
- Stroke Color : define uma cor para uma linha ou borda.
- Fill Color : define a cor do preenchi- Fig. 14 - Ferramenta de Cores

mento.
- Default Colors : define a cor preta para Stroke Color e a cor branca para
Fill Color.
- No Color : retira a cor de preenchimento ou da borda, ficando vazio. Basta

selecionar o ítem Stroke Color ou Fill Color e pressionar este ícone para que
não seja inserido o elemento (preenchimento ou borda).
- Swap Colors : inverte as cores de Stroke Color com Fill Color.
Laucher Bar
O Laucher Bar ou Barra Iniciadora é uma novidade presente na versão 5

do Flash.
Ela se localiza na parte inferior do lado direito do programa, próximo à
barra de status e contém ícones (“atalhos”) que acessam os seguintes painéis:
Fig. 15 - Laucher Bar
- Show Info : Esse ícone o painel Info.
- Show Mixer : Esse ícone abre o painel Mixer
- Show Character : Esse ícone abre o painel Character.
- Show Instance : Esse ícone abre o painel Instance.
- Show Movie Explorer : Esse ícone abre o painel Movie Explorer.
- Show Actions : Esse ícone abre a janela (Frame ou Object) Actions.
- Show Library : Essse ícone abre a biblioteca do filme.
Cursos Virtuais
Curso de Flash 5 16
Painéis
Uma novidade presente no Flash 5 foi a inserção de painéis, permitindo

uma maior organização do software. Comandos a fins foram distribuídos no
mesmo painel, facilitando a aplicação do mesmo pelo desenvolvedor.
Os painéis disponíveis no Flash são:
Info:
Neste painel ficam as informações sobre o ele-

mento inserido no stage, como por exemplo, a
altura (H), largura (W), posição nos eixos X e Y,
entre outros.
Fig. 16 - Painel Info
Mixer
Este painel permite a alteração de cores no ele-

mento. As opções são as mesmas da barra de
ferramenta de cores. Além disso, você pode
escolher diretamente a tonalidade RBG
digitando o valor correspondente à cor e confi-
gurar o grau de transparência (alpha - valores
próximos a 100% o elemento fica opaco).
Fig. 17 - Painel Mixer
Swatches
Este painel apresenta as cores disponíveis pelo

programa. Na parte inferior do painel, há cores
personalizadas com efeitos distintos, com
degradé, entre outros.
Fig. 18 - Painel Swatches
Cursos Virtuais
Curso de Flash 5 17
Character
Neste painel são configuradas as característi-
cas da fonte, como o tipo de fonte, o tamanho,
efeito (negrito - itálico), cor, espaçamento entre
as letras, subscrito, entre outros.
No campo URL você pode digitar um endereço
e aquele texto passa a ser um link!
Exemplo: http://www.cursosvirtuais.com.br
Fig. 19 - Painel Character
Paragraph
Este painel permite definir o tipo de alinhamen-

to do texto, além de valores de recuo do texto,
margens, entre outros.
Fig. 20 - Painel Paragraph
Text Options
Este painel apresenta as opções de texto pre-

sentes no Flash 5. São 3 opções:
. Static Text: usado para inserção de texto no
stage.
. Dynamic Text: usado para textos dinâmicos.
. Input Text: usado para entradas de texto por
parte do usuário, inclusive senhas.
Fig. 21 - Painel Text Options
Cursos Virtuais
Curso de Flash 5 18
Instance
Neste painel é definido o nome da instância de

um objeto.
O painel será bastante usado para definir nome
de instâncias de movie-clips, o que é fundamen-
tal para o correto funcionamento do filme.
Fig. 22 - Painel Instance
Effect
Este painel permite definir o tipo de efeito a ser

aplicado em símbolos. Pode-se aplicar graus de
transparências (alpha), alterar o brilho
(brightness), cor, entre outros.
Fig. 23 - Painel Effect
Frame
Este painel permite inserir dois parâmetros no

frame: o label (rótulo) que servirá de identifica-
ção para aquele(s) frame(s) e o tweening que é
fundamental para se criar animações.
Fig. 24 - Painel Frame
Sound
Este painel define as características do som in-

serido no Flash.
Fig. 25 - Painel Sound
Cursos Virtuais
Curso de Flash 5 19
Transform
Este painel permite a aplicação de transforma-

ções nos elementos, como rotações e altera-
ções de perspectiva.
Fig. 26 - Painel Transform
Stroke
Este painel permite definir o tipo de linha utiliza-

da pelo elemento. Você pode escolher usar li-
nhas sólidas, linhas tracejadas, pontilhadas,
entre outros. Pode-se escolher a cor e a espes-
sura da linha.
Fig. 27 - Painel Stroke
Fill
Este painel permite definir o tipo e a cor do

preeenchimento.
Você pode criar preenchimentos sólidos e em
degradê.
Fig. 28 - Painel Fill
Align
Este painel permite definir o alinhamento entre

objetos diferentes no Stage. Pode-se alinhar na
horizontal, na vertical, espaço entre os elemen-
tos, entre outros.
Fig. 29 - Painel Align
Cursos Virtuais
Curso de Flash 5 20
Bibliotecas
As bibliotecas são coleções de elementos que estão disponíveis para

serem usados no filme.
O Flash 5 apresenta basicamente 3 tipos de bibliotecas. São eles:
. biblioteca do filme
. bibliotecas comuns
. bibliotecas compartilhadas
Biblioteca do Filme
A biblioteca do filme contém todos os elementos inseridos no filme. Ela

pode ser aberta através do menu principal Window -> Library ou através dos
atalhos CRTL+L.
A biblioteca do filme permite a organização dos
elementos do seu filme, separando-os por pastas.
Através dessa biblioteca você pode criar novos
elementos. Veja na barra inferior da biblioteca os
comandos:
- New Symbol : cria um novo símbolo (movie-clip,

botão ou gráfico).
- New Folder : cria uma nova pasta para organizar o

conteúdo da biblioteca. Dessa maneira, você pode
inserir todos os botões em uma pasta, todos os movie-
clips em outra, etc. Basta clicar no ícone New Folder e
nomear a pasta. Em seguida, arraste os elementos que
quiser para dentro da pasta.
Fig. 30 - Biblioteca do filme.
- Properties : exibe as propriedades de um elemento.
- Delete : exclui um ítem na biblioteca. Para usar, é só clicar 1X no elemento

dentro da biblioteca e em seguida clicar no ícone.
Para usar um elemento que está nessa biblioteca, basta arrastá-lo para
o stage.
Cursos Virtuais
Curso de Flash 5 21
Bibliotecas Comuns
As bibliotecas comuns ou Common Libraries são bibliotecas do próprio

programa Flash contendo alguns elementos que você pode usar várias vezes
nos diversos filmes.
Para acionar esse tipo de biblioteca vá ao menu Window -> Common
Libraries e clique na biblioteca a sua escolha. As principais bibliotecas são:
Button
Contém botões pré-definidos.
Graphics
Contém imagens e pequenas animações prontas.
Movie-clips
Contém movie-clips prontos.
Sounds
Contém sons prontos para uso.
Fig. 31 - Bibliotecas Comuns: Botões, Gráficos, Movie-clips e Sons, respectivamente.
Além dessas quatro bibliotecas, o Flash 5 ainda contém a Biblioteca de

Smart Clips que são elementos de formulários já pré-configurados e a
Biblioteca Learning Interactions, com explicações de criação de algumas
interações.
Para usar um elemento que está em qualquer uma das bibliotecas, basta
arrastá-lo para o stage.
Cursos Virtuais
Curso de Flash 5 22
Shared Libraries
As Shared Libraries ou bibliotecas compartilhadas estão presentes ape-

nas a partir da versão 5 do Flash.
Elas permitem que um mesmo elemento possa ser compartilhado por
diversos filmes em um site.
No curso, na seção Dicas Finais, há um exercício de uso das bibliotecas
compartilhadas.
Timeline
A timeline ou linha do tempo é o local onde controlamos e coordenamos

a animação.
Cena (Scene) Camada (Layer) Frames Número do frame
Fig. 32 - Timeline
Os elementos que compões a timeline são:
- Scene: representa a cena atual na qual estamos trabalhando.
- Layer: representa a camada que estamos trabalhando. Um filme pode ter

várias camadas, sendo que a animação de uma camada não interfere na
outra (exceto em casos onde há interações).
- Frames: são chamados de quadros. Os quadros terão o conteúdo da ani-

mação. A sequência de quadros forma a animação final.
- Keyframes: são chamados de quadros-chaves. Eles são inseridos dentro

de um frame somente quando houver modificação no conteúdo do frame em
algum elemento ou inserção de alguma ação.
Cursos Virtuais
Curso de Flash 5 23
Movie Explorer
O Movie Explorer foi mais um comando incorporado na versão 5 do

Flash. Esse recurso permite que o desenvolvedor tenha uma visualização da
estrutura do seu filme, além de poder gerenciar seu filme através dele.
Para acioná-lo vá ao menu principal
Window -> Movie Explorer ou aperte si-
multaneamente as teclas CRTL + ALT + M.
Na parte inferior é mostrada a estrutura do

filme: as cenas, layers, frames.
Observe a manutenção da estrutura do fil-
me, ou seja, Symbol 1, por exemplo, está
presente dentro do frame 1 que por sua vez
está no layer 1 da Scene 1.
Fig. 33 - Movie Explorer
Você pode especificar o que quer visualizar no Movie Explorer. Para isso
basta clicar nos ícones do ítem Show, no alto da janela. São eles:
- Show Text : Mosta os textos inseridos no stage.
- Show Buttons, Movie-clips and Graphics : Mostra os símbolos inseridos

no stage.
- Show Action Scripts : mostra os action scripts inseridos no filme.
- Show Vídeos, Sounds and Bitmap : mostra os vídeos, sons e figuras

inseridos no stage.
- Show Frames and layers : mostra os frames e layers do filme.
- Customize which items to show : configura os ítens que o Movie Explorer

deve mostrar. Ao clicar no ícone abrirá uma janela para você marcar as opções.
O Movie Explorer ainda apresenta um campo de pesquisa chamado Find.

Basta digitar o conteúdo que quer encontrar para ele mostrar.
Portanto, o Movie Explorer é um recurso interessante de visualização do
filme como um todo, facilitando o seu desenvolvimento.
Cursos Virtuais
Curso de Flash 5 24
Iniciando o Trabalho com o Flash 5
Novo Arquivo
Quando abrimos o programa Flash, ele abre com um novo arquivo em

branco. Iremos trabalhar nesse arquivo. Caso, por algum motivo, não abra
um novo arquivo, você pode iniciar o trabalho de três maneiras:
. menu File -> New

. clicando no ícone New da barra de atalhos.
. apertando simultaneamente as teclas CRTL+N.
Utilizando qualquer um dos métodos acima, um novo arquivo será criado

no Flash.
Após criar o novo arquivo, basta inserir um conteúdo no stage (área de
trabalho) e começar a trabalhar no seu filme.
Movie Properties
A seguir, você deve configurar as propriedades do seu filme. Isso é feito

através do Movie Properties, presente no menu Modify -> Movie. Se preferir,
use o atalho do teclado CRTL+M.
Fig. 34 - Movie Properties.
- Frame Rate: é a taxa máxima de execução da quantidade de frames por

segundo. O padrão é 12 fps, ou seja, no máximo, 12 frames por segundo.
- Dimensions: determina o tamanho do stage (área de trabalho). O tamanho

padrão é 550 pixels de largura (W) e 400 pixels de altura (H). Se quiser outro
tamanho de filme, basta digitar os novos valores nos respectivos campos.
Cursos Virtuais
Curso de Flash 5 25
- Match: determina o tamanho do stage alterando o valor digitado no ítem

dimensions. Se você clicar em Printer, o stage ficará do tamanho máximo
para ser impresso de acordo com o papel definido para a impressão. Se clicar
em Contents, o tamanho do stage ficará de acordo com o conteúdo inserido
na área de trabalho.
- Background Color: determina a cor de fundo do filme.
- Ruler Units: determina a unidade da régua. O valor padrão é em pixels.

Para ativar a régua no Flash 5, acione o menu View -> Rulers. A régua ficará
na lateral (vertical e horizontal) ao redor da área de trabalho.
Frames, Keyframes, Layers e Cenas
Frames
A quantidade de frames de uma animação, como já foi dito anteriormen-
te, determinará o tamanho da animação. Em outras palavras, isso significa
que se um filme tiver 10 frames e um segundo filme tiver 90 frames, o primei-
ro filme será executado mais rapidamente do que o segundo.
Você provavelmente já deve ter brincado de “fazer cinema” com um blo-
co de papel. A idéia era desenhar em cada folha do bloco uma sequência de
movimento. No final, as folhas eram passadas rapidamente dando a sensa-
ção do filme.
Voltando ao Flash, o que estaremos fazendo seria exatamente isso: cada
folha do bloco de papel seria equivalente a um Frame. O conjunto de Frames
(o bloco), seria uma cena ou o próprio filme.
Inserindo Frames
Para inserir frames na timeline, clique 1X no frame 1 (ou se o layer tiver
mais frames, clique a partir do frame que você quer inserir) e pressione F5
quantas vezes forem necessárias.
Outra maneira é através do menu principal Insert -> Frame.
A terceira opção é clicar com o botão direito do mouse sobre o frame 1 e
clicar, em seguida, na opção Insert Frame.
Apagando Frames
Para apagar um frame, clique com o botão direito do mouse sobre o
frame que quer apagar e em seguida na opção Remove Frame.
Além dessa opção, você pode ir ao menu principal Insert -> Remove
Frame ou ainda apertar as teclas SHIFT + F5.
Cursos Virtuais
Curso de Flash 5 26
Keyframes
Você deve inserir um keyframe quando quiser alterar o conteúdo de um

frame ou quando quiser inserir uma ação (Action) no frame.
Inserindo Keyframes
Para inserir um keyframe, clique 1X no frame onde for fazer a inserção e
em seguida vá ao menu principal Insert -> Keyframe.
Se preferir utilizar uma tecla de atalho, basta apertar F6. Uma outra ma-
neira de fazer a inserção é clicar com o botão direito do mouse no frame e em
seguida em Insert Keyframe.
Limpando Keyframes
Para apagar o conteúdo de um keyframe, vá ao menu Insert -> Clear
Keyframe.
Se quiser, clique com o botão direito do mouse no keyframe que quer
apagar e em seguida em Clear Keyframe.
O atalho para essa função é SHIFT+F6.
Layers
Os layers ou camadas são usados no desenvolvimento do seu filme para
que uma animação não interfira em outra. Dessa maneira é possível haver
animações ocorrendo simultaneamente.
Fig. 35 - Layer
Inserindo layers
Para inserir um layer, clique no ícone Insert Layer presente na parte
inferior esquerda da timeline.
Se preferir, va ao menu principal Insert -> Layer.
Apagando um layer
Para apagar um layer, clique 1X sobre o layer que você quer apagar e
em seguida clique no ícone de lixeira , presente na parte inferior da timeline.
Cursos Virtuais
Curso de Flash 5 27
Cenas
As cenas têm a finalidade de organizar o seu filme. Você pode colocar

uma seção do seu site em uma cena diferente. Isso vai de acordo com o
desenvolvedor, uma vez que você pode criar todo o seu filme em uma única
cena perfeitamente.
Inserindo Cenas
Existem várias maneiras de se inserir uma cena.
A mais fácil será usando o painel Scene.
Fig. 36 - Painel Scene
Para inserir, clique no ícone Insert Scene na parte inferior direita do

painel.
Apagando Cenas
Para apagar uma cena e consequentemente todo o seu conteúdo, clique
1X na cena que quer apagar dentro do painel Scene e em seguida clique no
ícone da lixeira. Abrirá uma janela de confirmação se você realmente deseja
apagar a cena, já que o processo é irreversível.
Label
O Label ou etiqueta é uma espécie de identificador de um frame. Você
pode especificar visualmente na timeline onde uma determinada ação, ani-
mação ou efeito ocorre.
Repare na Fig. 37 os 3 layers. O
Layer1 contém uma animação que
se inicia no frame 1 e termina no
frame 10. O Layer2 contem uma
outra animação que se inicia no
Fig. 37 - Labels no layer 3.
frame 11 e termina no frame 20.
O Layer 3 contém apenas labels, determinando o início da animacao1 e da
animacao2.
Cursos Virtuais
Curso de Flash 5 28
Inserindo um label
A inserção de uma etiqueta deve ser feita no painel Frame.
Você deve clicar no frame que quer inserir o label e escrever o nome
dele no campo Label do painel Frame. Caso o frame que você quiser inserir
um label esteja após o frame 1, você deve criar um keyframe antes.
Fig. 38 - Inserindo um label.
Salvando um filme
Para salvar um filme, vá ao menu principal File -> Save. Se preferir utili-
ze o menu de atalho Save ou acione as teclas CRTL+S.
Testando o filme
Para testar o filme acione o comando Control -> Test Movie ou utilize o
atalho CRTL+ Enter.
O seu filme será testado dentro do próprio Flash.
Exportando o filme
Uma observação importante a ser feita é que os arquivos salvos no Flash
conterão a extensão .fla.
Para que seu filme seja visualizado na Internet, ele deverá ser exportado
para o formato .swf. Isso é feito através do comando File -> Export Movie ou
acionando as seguintes teclas simultaneamente: CRTL+ALT+SHIFT+S.
Uma vez exportado, você pode visualizar em qualquer computador que
tenha o plug-in Flash Player instalado.
Cursos Virtuais
Curso de Flash 5 29
Desenhando no Flash
O Flash é um programa muito interessante para se fazer desenhos. As
ferramentas utilizadas estão presentes na barra de ferramentas no lado es-
querdo da tela e todas elas são semelhantes às ferramentas de desenhos de
programas gráficos do mercado.
A combinação ferramenta + painel pode gerar efeitos interessantes, como
a alteração do tipo de traçado de linhas (painel Stroke), utilização de degradés
(painéis Swatches e Fill) em cores internas de desenhos, entre outros.
Vamos fazer dois exercícios para exemplificar:
Exercício 1:
- Abra o programa Flash e crie um novo arquivo. Caso tenha alguma dificul-
dade, consulte o ítem Iniciando o trabalho com o Flash 5.
- Selecione a ferramenta Rectangle Tool e desenhe um quadrado no stage.
- Selecione, em seguida, a ferramenta Arrow Tool . Vá ao menu Edit ->
Select All. Se preferir aperte CRTL+A para selecionar tudo.
Fig. 39 - Quadrado desenhado e selecionado no stage.
- Abra o painel Stroke (menu Window -> Panels -> Stroke). Escolha um tipo
de linha e a espessura dela.
Fig. 40 - Painel Stroke com a linha pontinhada escolhida e a espessura 5. No lado

esquerdo, o quadrado onde o efeito foi aplicado.
- Salve o seu arquivo apertando CRTL+S. Abrirá uma janela para que você
indique o nome do arquivo (exercicio1) e o diretório onde irá querer salvar.
Após fazer isso, clique no botão Save.
Cursos Virtuais
Curso de Flash 5 30
Exercício 2:
- Abra o programa Flash e crie um novo arquivo.

- Selecione a ferramenta Oval Tool . Nas ferramentas de cores, clique em
Stroke Color e em seguida no ícone No Color para que o conteúdo
desenhado seja apenas de preenchimento e não tenha contorno.
- No ítem Fill color, escolha o tipo degrade .
Fig. 41 - Escolha da cor de preenchimento na ferramenta Fill Color.
- Em seguida, desenhe um círculo no stage. O resultado poderá ser visto na

figura abaixo:
Fig. 42 - Círculo com degradê.
- Agora vamos melhorar esse efeito, simulando uma bola em 3D. Para isso,
selecione agora a ferramenta Paint Bucket Tool . Em seguida, clique em
qualquer ponto na extremidade do desenho no stage.
- Se deu tudo certo, você terá uma bola com sombreado simulando um efeito
3D.
- Salve como exercicio2.fla.
Fig. 43 - Bola em 3D.
Esses dois exercícios são exemplos simples de desenhos feitos no Flash.

Com um pouco de criatividade e facilidade na manipulação das demais ferra-
mentas é possível fazer desenhos bem interessantes dentro do software. Só
para ilustrar, você já encontra na Web, sites de desenhos animados em Flash.
Cursos Virtuais
Curso de Flash 5 31
Animações
A seguir, vamos estudar algumas técnicas de animações presentes no
Flash. São elas:
. Tweening Motion
. Tweening Shape
. Mask
. Motion Guide
Tweening Motion
O Tweening também é chamado de interpolação. Este tipo de animação
é linear e o desenvolvedor precisa apenas criar o frame inicial e o último
frame da animação com o conteúdo modificado, que o programa cria auto-
maticamente o conteúdo dos frames intermediários.
O Tweening Motion é usado para animar letras e símbolos (gráficos) no
Flash.
Exercício 3:
- Crie um novo arquivo no Flash.
- Clique no frame 30 e aperte F5 para criar 30 frames no layer 1.
- Selecione a ferramenta Text Tool e digite no stage uma frase.
Fig. 44 - Texto digitado no stage.
- Se quiser alterar as características da fonte (tipo, cor, tamanho), selecione
todo o texto com o ponteiro do mouse e em seguida vá ao menu Text e esco-
lha a opção que quiser. Se preferir, pode efetuar a alteração diretamente no
painel Character.
- Observe a alça do texto (Fig. 44) na parte superior direita. Essa alça signifi-
ca que você está criando um texto do tipo Static Text. Caso a alça esteja na
parte inferior direita, altere o tipo de texto no painel Text Options para Static
Text.
- Em seguida, clique no frame 30 e crie um keyframe, apertando F6. Com a
ferramenta Arrow Tool selecionada, arraste a frase digitada para outro local
no stage.
Fig. 45 - Aspecto da timeline com um keyframe no frame 30. Repare que o frame 30
passa a ter uma “bolinha” preenchida, indicando que ali tem um keyframe.
- Clique no frame 1. Abra o painel Frame (Window -> Panels -> Frame). No
campo Tweening selecione o tipo Motion.
- Salve seu arquivo como exercicio 3. Teste seu filme apertando CRTL+ Enter.
Cursos Virtuais
Curso de Flash 5 32
Fig. 46 - Aspecto da timeline após a aplicação do tweening motion.
Nota: você pode inserir uma rotação com o tweening motion. No painel frame,
basta selecionar o ítem rotate como CW ou CWW e digitar um número maior
que 1 no campo times.
Tweening Shape
O Tweening shape é usado para criar movimentos em desenhos feitos

no Flash.
Exercício 4:
- Crie um novo arquivo. Clique no frame 20 e aperte F5 para criar os frames.
- Selecione a ferramenta Rectangle Tool e desenhe um quadrado no stage.
Se quiser, altere as características da borda no painel Stroke como fizemos
no exercício 1.
- Clique no frame 20 e crie um keyframe (F6). Se tiver dificuldades, consulte o
ítem Iniciando o trabalho com o Flash 5. A partir desse momento vamos partir
do princípio que você ja sabe criar frames, keyframes, entre outros.
- Em seguida, com a ferramenta Arrow Tool selecionada, arraste o quadrado
para uma outra posição no stage.
- Clique no frame 1 e abra o painel Frame. Selecione o tipo tweening shape,
como pode ser visto na Fig. 47.
Fig. 47 - Painel frame com o tweening shape aplicado.
- Salve seu exercício como exercicio4 e teste (CRT+ENTER).
Fig. 48 - Aspecto da timeline após a aplicação do tweening shape.
Cursos Virtuais
Curso de Flash 5 33
Mask
O mask ou máscara permite a substituição de um conteúdo sobreposto

de uma camada por outro.
Para esse efeito utilizaremos dois layers.
Exercício 5:
- Crie um novo arquivo.
- Deixe o Layer 1 com apenas um frame. Em seguida, crie um novo layer
clicando no icone Insert Layer na parte inferior esquerda da timeline.
Fig. 49 - Layer 2 em cima do Layer 1.
- Clique no frame 1 do layer de cima (Layer 2), selecione a ferramenta Text

Tool e digite uma frase no stage.
- Clique no frame 1 do layer de baixo (Layer 1), selecione a ferramenta
Rectangle Tool. Em seguida, escolha uma cor diferente da fonte na ferramen-
ta Fill Color. Nesse caso, escolhemos a cor em degradê azul .
- Desenhe um retângulo no stage, maior do que a frase escrita.
Fig. 50 - Frase escrita em amarelo (layer 2), contendo um retângulo (Layer 1) maior
que a frase.
- Clique sobre o nome Layer 2 com o botão direi-

to do mouse e em seguida na opção Mask.
- Se deu tudo certo, o mask foi aplicado. Veja o
resultado na Fig. 51b.
- Salve seu arquivo como exercicio5.fla.
Nota: repare que a frase passa a ficar na cor do

fundo.
Fig. 51a - Aplicação do efeito Mask no Layer 2.
Fig. 51b - Aspecto final do stage após a aplicação do Mask.
Cursos Virtuais
Curso de Flash 5 34
Motion Guide
O motion guide ou guia de movimento permite a criação de trajetórias

não lineares.
Exercício 6:
- Deixe o layer 1 com 20 frames.
- No stage selecione a ferramenta Text Tool e digite seu nome.
- Clique em cima do nome Layer 1 com o botão direito do mouse e em segui-
da no ítem Add Motion Guide.
Fig. 52 - Motion guide aplicado no Layer 1.
- Um novo layer é automaticamente criado. Nesse layer, agora, chamado de

Guide: Layer 1, deve ser especificado a trajetória do elemento presente no
Layer 1. Faremos isso a seguir.
- Clique no frame 1 do Guide: Layer 1. Selecione a ferramenta Pencil Tool e
desenhe a trajetória, como mostrada na Figura 53.
Fig. 53 - Trajetória do texto.
- Em seguida, clique no frame 1 do Layer 1. Arraste o texto digitado para o

começo da trajetória. Observe que há uma posição de encaixe do texto com
a linha. Essa posição é mostrada através de uma alça no meio do texto.
área cinza texto

fora do stage alça de encaixe
stage trajetória
área branca
Fig. 54 - Encaixe do texto na trajetória
Cursos Virtuais
Curso de Flash 5 35
Fig. 55 - Após o encaixe do elemento na trajetória, o ponto central é mostrado com um

sinal de +.
- Clique no frame 20 do Layer 1. Crie um keyframe (F6). Em seguida, seleci-

one a ferramenta Arrow Tool e arraste a frase para o final da trajetória. Faça o
encaixe corretamente.
- Clique no frame 1 do Layer 1 e aplique um tweening motion (painel Frames)
Fig. 56 - Painel Frames com o Tweening Motion aplicado no frame 1 do Layer 1.
Fig. 57 - Aspecto final da timeline.
- Salve como exercicio6.fla.

- Teste o arquivo.
Nota: a trajetória ficará desenhada no stage. Porém, ao exportar o filme, ela

não aparece.
Cursos Virtuais
Curso de Flash 5 36
Trabalhando com os Símbolos

Os símbolo que você pode usar no Flash são:
. Botões
. Gráficos e
. Movie-clips
O processo de criação dos três tipos de símbolos é sempre o mesmo.

Você deve selecionar com o ponteiro do mouse o conteúdo que quer transfor-
mar em símbolo e em seguida ir ao menu Insert -> Convert to Symbol. Se
preferir acione a tecla F8.
Abrirá a tela Symbol Properties, onde deve-se marcar, no campo Behavior,
o tipo de símbolo a ser criado.
Fig. 58 - Janela Symbol Properties.
Botões
Os botões servem para determinar uma ação em seu filme. Essas ações
podem ser disparadas através de eventos do mouse ou de teclado.
Gráficos
São imagens estáticas.
Movie-clips
São pequenos trechos de animações que são independentes da timeline
principal. A interação é feita através do comando Tell Target.
A seguir, vamos fazer três exercícios. Em cada um, criaremos um tipo de

símbolo e usaremos alguns conceitos já vistos no curso.
Cursos Virtuais
Curso de Flash 5 37
Exercício 7:

- Clique no frame 30 e aperte F5 para criar 30 frames.
- Selecione a ferramenta Rectangle Tool e desenhe um retângulo no stage.
Se quiser altere a cor e o tipo de borda.
- Em seguida, selecione a ferramenta Text Tool e digite a palavra Links.
- Aperte CRTL+A para selecionar todo o conteúdo e aperte F8.
- Na janela Symbol Properties, marque o Behavior Button. Aperte Ok.
Fig. 59 - Janela Symbol Properties. No lado esquerdo o conteúdo selecionado para ser
transformado em botão.
- Pronto. O botão já foi criado. O segundo passo é editar o botão.

- Clique 2X sobre o botão. Abrirá a timeline do Symbol 1, que é o botão que
estamos trabalhando.
- Observe os campos Up, Over, down e Hit. Eles definem os estados do bo-
tão:
. Up: estado do o botão ao ser carregado.
. Over: estado quando o ponteiro do mouse passa sobre o botão.
. Down: estado do botão quando é clicado.
. Hit: Área clicável do botão.
Portanto, será necessário definir os quatro campos. Para isso, crie um

keyframe em cada um dos campos.
Fig. 60 - Timeline do botão com um keyframe em cada campo.
- Clique no campo Over, aperte ESC para desmarcar todo o conteúdo. Em

seguida clique 1X no texto do botão e altere a cor da fonte.
- Clique no campo Hit e desenhe um retângulo cobrindo toda a área do botão.
Fazemos isso para informar a área que poderá ser clicada no botão.
- Clique na palavra Scene 1 no alto da timeline do botão para retornar à timeline
principal.
Cursos Virtuais
Curso de Flash 5 38
- Agora só falta inserir uma ação nele.

- Para criar uma ação, clique 1X no botão para “marcá-lo”. Em seguida, abra
o painel Object Actions (CRTL+ALT+A).
Na coluna à esquerda do painel ficam os

actions (ações) que você pode aplicar. Os
actions aplicados ficam na coluna da di-
reita.
- Clique 2X no action Get URL presente

no ítem Basic Actions.
Alguns parâmetros se abrem no final do
painel. Basta preencher o campo URL com
seu site (Fig. 62).
Exemplo: http://www.cursosvirtuais.com.br
Fig. 61 - Painel Object Actions
Fig. 62 - Parâmetro de configuração do comando Get URL.
- Salve o exercício como exercicio7.fla e teste o botão quando estiver conectado

à Internet. Se deu tudo certo, ele acessará o site que você especificou.
Nota: tenha sempre o hábito de marcar a área de clique no campo Hit do

botão. Caso você crie um botão contendo apenas letras e o campo Hit sem
conteúdo, o botão poderá ser difícil de ser clicado!
Exercício 8:

- Deixe o Layer 1 com 20 frames no total.
- Escreva seu nome no stage. Se preferir, abra o painel Character e troque o
tipo de fonte, tamanho e cor.
- Clique uma vez sobre o texto inserido e aperte F8 para criar o símbolo.
Cursos Virtuais
Curso de Flash 5 39
Fig. 63 - Janela Symbol Properties aberta ao criar um símbolo do tipo Gráfico.
- Marque a opção Graphic no ítem Behavior, como mostrada na fig. 63. Em

seguida, aperte o botão Ok. Um símbolo gráfico foi criado. Utilizaremos esse
símbolo para animações com efeitos, que faremos a seguir:
- Clique no frame 20 e crie um keyframe.
- Clique no frame 1 e abra o painel Effect (menu Window -> Panels -> Effect)
e escolha a opção Alpha. Essa opção define a transparência.
Fig. 64 - Selecionando o efeito alpha.
- Após selecionar esse efeito, deve-se definir o grau de transparência. Digite

o valor 0%. Ou se preferir clique no ícone de triângulo no lado direito do
campo de digitação para especificar o novo valor (Fig. 65).
Fig. 65 - Aplicação do efeito alpha a 0%. Repare no lado esquerdo, o gráfico com
transparência total (alpha 0%).
- Abra o painel Frame e aplique o tweening motion no frame 1.
Cursos Virtuais
Curso de Flash 5 40
Fig. 66 - Painel Frame com Tweening motion aplicado no frame 1.
Fig. 67 - Aspecto da timeline.
- Salve o exercício como exercicio8.fla
Nota: Este é um exemplo de efeito Fade. Você pode criar várias animações
simultâneas em seu filme, basta inserir cada animação em um layer diferen-
te. Dessa maneira, uma não interfere na outra. Se quiser testar, crie um novo
layer e faça uma outra animação nela com outros elementos (botões, gráfi-
cos, etc).
Exercício 9:
- Crie um novo arquivo com um frame.

- Com a ferramenta Oval Tool desenhe um círculo pequeno no stage.
- Em seguida, selecione o círculo e aperte F8. Iremos criar um movie-clip.
Então, marque a opção Movie-clip no ítem Behavior da janela Symbol
Properties. A seguir, aperte o botão ok.
Fig. 68 - Criando um movie-clip.
Cursos Virtuais
Curso de Flash 5 41
- Uma vez criado o movie-clip, clique 2X sobre ele para editá-lo. Nesse mo-
mento você entra na timeline do movie-clip (Symbol 1).
- Clique no frame 10 e aperte F5, para criar 10 frames na timeline do símbolo.
- Neste frame 10, crie um keyframe. Vá ao menu Modify -> Transform ->
Scale and Rotate ou pressione simultaneamente CRTL+ ALT+S. Abrirá uma
tela para você determinar o quanto quer redimensionar ou rotacionar a figura.
Fig. 69 - Redimensionando o desenho no stage.
- Digite o valor 150 no campo Scale. Em seguida clique em Ok. O desenho

aumentou de tamanho.
- Clique no frame 1 e aplique um Tweening shape no painel Frame.
Fig. 70 - Tweening shape aplicado no frame 1 da timeline do símbolo.
- Clique no frame 1. Abra o painel Frame Actions (menu Window -> Actions)
Clique 2X no action Stop presente no ítem Basic Actions. Estamos inserindo
uma ação para parar quando o frame 1 for executado. Isso faz com que a
animação não seja executada inicialmente e sim quando quisermos.
Fig. 71 - Parte da janela Frame Actions. No frame 1 foi inserido o action Stop.
Cursos Virtuais
Curso de Flash 5 42
Fig. 72 - Aspecto da timeline do movie-clip.
- Clique na Scene 1 no alto da timeline para retornar à cena 1 do filme. Volta-

mos à timeline principal.
- Selecione a ferramenta Text Tool e digite a frase “Clique Aqui”. Escolha a
fonte, tamanho e cor que desejar.
- A seguir, selecione apenas o conteúdo do texto e aperte F8, marque a op-
ção Button no ítem Behavior, para criarmos o botão.
- Clique 2X no botão para editarmos.
- Crie um keyframe nos 4 campos do botão: up, over, down e hit.
- No campo Hit desenhe um retângulo cobrindo todo o texto.
- No campo over, troque a cor da frase.
- Retorne à Scene 1. A seguir, criaremos uma interação via Tell Target para
interagir o botão com o movie-clip.
- Clique 1X no movie-clip e abra o painel Instance. No campo Name digite:
mc. Estamos colocando o nome do movie-clip como sendo mc.
Fig. 73 - Nome da instância do movie-clip no painel Instance. No lado esquerdo, no

alto, o movie-clip, na parte inferior, o botão “Clique aqui”.
- Agora, iremos inserir uma ação para o botão relacionando com o movie-clip.
- Clique 1X sobre o botão e abra o painel Object Actions. No ítem Basic Actions
há um ítem chamado Tell target. Clique 2X nele.
- O próximo passo será configurar o parâmetro do comando. Na parte inferior
da janela Object Actions (Fig. 74) aparece o campo Target.
Cursos Virtuais
Curso de Flash 5 43
Fig. 74 - Parte da janela Object Actions, aplicando a ação Tell Target.
- Em target digite mc.
Fig. 75 - Action Tell Target inserido.
- Em seguida, aplique o action Go to presente em Basic Actions.
Fig. 76 - Aplicação do action Go To.
- No campo Type escolha o tipo Next Frame. Com isso, cada vez que o botão
for acionado, ele irá para o próximo frame do movie clip mc.
- Salve o exercício como exercicio9.fla. Teste o filme apertando o botão várias
vezes.
Cursos Virtuais
Curso de Flash 5 44
Imagens
Além de desenhos no Flash, o programa suporta imagens nos formatos
.gif, .jpg, .png, entre outros.
Para utilizar imagens no Flash é necessário fazer a importação.
Importando Imagens
Para importar imagens, vá ao menu File -> Import. Aparecerá uma tela
onde você deve selecionar a imagem que quer utilizar.
Essa imagem é inserida no stage. Em seguida você pode trabalhar como
quiser com ela.
Exercício 10:

- Deixe o Layer 1 com 20 frames.
- Importe uma imagem para o seu filme.
- Crie um keyframe no frame 20. Arraste a figura para uma outra posição no
stage.
- Clique no frame 1 e aplique um Tweening motion com as seguintes configu-
rações:
Rotate: CW 2 times
Em seguida aperte Enter.
Fig. 77 - Aplicação do Tweening Motion no frame 1.
- Salve o exercício como exercicio10.fla. Teste a animação.
Nota: se você quiser aplicar efeitos presente no painel Effects, deverá trans-
formar a figura em um símbolo do tipo Graphics.
Cursos Virtuais
Curso de Flash 5 45
Transformando imagens em vetores (trace bitmap)
O Flash possui um recurso no software de transformar uma imagem

bitmap em vetor. Isso é interessante de se fazer caso queira alterar alguma
propriedade da imagem dentro do Flash.
Para transformar imagens em vetores usaremos o comando Trace Bitmap.
Vale lembrar que ao fazer a conversão, normalmente o filme fica mais

pesado e o resultado final da conversão pode não ser ideal. Quanto mais
simples a figura, melhor o resultado gerado.
Exercício 11:

- Deixe o layer 1 com 15 frames.
- Importe uma figura no Flash. Procure importar uma figura mais simples.
- Clique 1X na figura para selecioná-la e em seguida vá ao menu Modify ->
Trace Bitmap.
Fig. 78 - Transformando uma imagem jpg em vetor.
- Na janela Trace Bitmap coloque as seguintes configurações:

Color threshold: 10 (ou valor 1)
Minimum Area: 1
Curve Fit: Pixels
Em seguida, aperte ok para iniciar o processo. Quanto mais complexa a

imagem usada, maior o tempo de conversão.
Após a conversão, o comportamento da figura é de vetor, ou seja, você

pode manipular a figura utilizando a barra de ferramentas, mudar a cor, recor-
tar pedaços, entre outros.
Cursos Virtuais
Curso de Flash 5 46

- Vá ao menu Modify -> Transform -> Scale and Rotate. Na janela que se
abrir, digite o valor 200 para aumentar a imagem.
- Na figura aumentada, se quiser, altere alguma característica da figura. No
nosso caso, alteramos a cor do texto.
Fig. 79 - Figura redimensionada, com a cor do texto alterada no frame 15.
- Clique no frame 1 e aplique no painel Frame o Tweening shape.
Fig. 80 - Aplicação do Tweening shape no frame 1.
- Salve o exercício como exercicio11.fla. Teste seu filme.
Nota: Caso você não queira que a animação fique sendo executada continu-
amente, insira um action Stop no frame 15. Essa aplicação é feita no painel
Frame Actions.
Cursos Virtuais
Curso de Flash 5 47
Sons
Além das animações, você pode inserir sons nos seus filmes. Esses
sons podem estar associados a:
. um botão
. uma timeline (principal ou dentro de um movie-clip).
Com isso, você pode criar trilhas ou efeitos sonoros nos filmes.
Inserindo sons em um botão
Um recurso interessante para inserir em um botão é um som. Você pode

inserir o som no momento em que o usuário passar o mouse sobre o botão.
Isso é definido no campo OVER quando estiver editando o botão.
Vamos fazer o exercício a seguir para entender processo.
Exercício 12:
- Crie um novo arquivo com um frame apenas.

- Crie um botão (F8) com a inscrição Botão.
- Após criar o botão, clique 2X nele para editá-lo.
- Nos quatro campos de edição, crie um keyframe e faça as edições no botão
como de costume.
- Abra a biblioteca de som (menu Window -> Common Libraries -> Sounds).
- Clique no campo Over. Escolha um som e arraste-o para cima do botão no
stage.
Fig. 81 - Som inserido no campo over do botão. Repare no desenho de onda dentro do
campo.
- Retorne à Scene 1. Abra o painel Object actions e insira um action para

esse botão, como exemplo, um Get URL, como fizemos no exercício 7. Caso
tenha dificuldades, recorde o exercício 7.
- Salve como exercicio12.fla. Teste seu botão passando o mouse sobre ele.
Cursos Virtuais
Curso de Flash 5 48
Inserindo sons em movie-clips
Você pode inserir sons em movie-clips para fazer os famosos botões

“liga/desliga som”. A interação botão/movie-clip é feita através de Tell Target.
Vamos fazer o exercício a seguir para entendermos melhor.
Exercício 13:

- Deixe o layer 1 com um frame apenas.
- Crie dois botões com as incrições: Ligar Som e Desligar som, respectiva-
mente. Não se esqueça de editar os botões alterando os campos Over (se
quiser) e o Hit.
- O próximo passo é criar o movie-clip. Para isso, desenhe um conteúdo qual-
quer no stage, por exemplo, um quadrado. Transforme este quadrado em
movie clip (F8).
- Clique 2X no movie-clip. Apague o quadrado desenhado no stage (o qua-
drado apenas teve a finalidade de criarmos o movie-clip). Crie mais um frame,
de modo que o layer fique com 2 frames. Insira um keyframe no frame 2.
- Clique no frame 2. Agora vamos inserir um som no movie-clip na timeline do
símbolo (Symbol 3).
Fig. 82 - Timeline do movie-clip (Symbol 3).
- Vá ao menu File -> Import.

Escolha um arquivo de som para importar. Você
pode escolher um arquivo nos seguintes formatos:
wave, mp3, au, aiff. Caso não encontre nenhum arqui-
vo de som, procure no ‘drive c’ na pasta ‘Windows’.
Dentro dela há um diretório chamado ‘media’, conten-
do arquivos de sons do sistema.
- Após o arquivo ser importado, ele fica localizado na
biblioteca do filme. Portanto, abra esta biblioteca (ata-
lho: CRTL+L).
Fig. 83 - biblioteca do filme contendo os elementos do filme.
Cursos Virtuais
Curso de Flash 5 49
- Arraste o som da biblioteca do filme para o stage.

- Clique no frame 1, abra o painel Frame Actions e insira um action Stop.
Fig. 84 - Aspecto da timeline do movie-clip. O Frame 1 contém um action Stop e o

Frame 2 contém o som.
- Retorne à Scene 1.
- Clique 1X sobre o movie-clip. No stage, ele estará invisível, porém aparece-
rá um círculo ou uma cruz mostrando onde ele está localizado.
- Abra o painel Instance e coloque no campo Name de som.
Fig. 85 - Definindo o nome da instância do movie-clip.
O próximo passo será inserir uma ação nos dois botões.

- Clique 1X no botão Ligar som. Abra o painel Object Actions.
- Clique 2X no action Tell Target. No campo target digite: som.
Fig. 86 - aplicando o action tell Target.
- Em seguida, clique no action Go To. Configure os parâmetros assim:
Type: Frame Number

Frame: 2
(deixe desmarcada a opção go to and play).
Cursos Virtuais
Curso de Flash 5 50
Fig. 87 - Actions inseridos no botão Ligar Som.
- O botão Ligar som está pronto.

- Agora clique no botão Desligar Som e insira o action Tell Target, colocando
no parâmetro Target o nome som.
- Em seguida, aplique o action Go To. Configure da seguinte maneira:
Type: Frame Number
Frame: 1
(deixe desmarcada a caixa go to and play).
- A seguir, aplique o action Stop All sounds.
Fig. 88 - Actions inseridos no botão Desligar Som.
- Salve o exercício como exercicio13.fla. Teste o arquivo.
Inserindo sons na timeline principal
O procedimento é semelhante ao de inserção de sons em movie-clips,

ou seja, será necessário fazer a importação do som. Siga os passos:
Exercício 14:

- Vá ao menu File -> Import e faça a importação de um arquivo de som.
- Abra a biblioteca do filme (CRTL+L) e arraste o som para o stage.
- Salve o exercicio como exercicio14.fla e teste.
Cursos Virtuais
Curso de Flash 5 51
Trabalhando e criando gifs animados

Como o Flash trabalha com animações, você pode criar um gif animado
a partir do software.
Para isso, basta criar a animação, em seguida ir ao menu Export Movie e
selecionar a opção Animated gif. Além do gif animado, você pode ainda sal-
var no formato de vídeo como .avi ou .mov (quick time), entre outros.
Exercício 15:
- Escreva uma frase no stage, por exemplo ‘Flash 5’.
- Transforme este texto em símbolo do tipo Graphics (F8).
- Clique no frame 1. Abra o painel Effects e aplique o efeito alpha a 0%. Em
seguida, abra o painel Frames e aplique o tweening motion.
- Crie um novo layer, o Layer 2.
- Clique no frame 10 do Layer 2 e crie um keyframe. Em seguida, escreva no
stage outra frase, como por exemplo ‘Clique Aqui’.
- Transforme este texto em símbolo do tipo Graphics também.
- Clique no frame 10 do layer 2, aplique um efeito do tipo alpha 0% no gráfico
e aplique um tweening motion.
- Salve o arquivo como exercicio15.fla
- Vá ao menu File -> Export e escolha a opção Animated Gif. Salve como
exercicio15.gif. Abrirá a janela de configurações:
Fig. 89 - Janela Export Gif.

Cursos Virtuais
Curso de Flash 5 52
- Dimensions: especifica as dimensões do gif animado. Width determina a

largura e height a altura. O ideal é determinar esses valores em Movie
Properties, uma vez que você construiria o gif com um tamanho específico.
- Resolução: determina a resolução da imagem. Para uso na Internet o valor

padrão é 72 dpi.
- Colors: determina o número de cores da imagem. Você pode especificar

gifs em tom de branco e preto ou contendo de 4 cores até 256 cores. Se
preferir, opte pelo ítem Standart Colors, que usará as cores padrões do arqui-
vo.
As quatro caixas de seleção seguintes especificam se você quer criar

um gif animado interlaçado, transparente, entre outros. Marque as opções
que achar necessário.
- Animations: especifica o número de vezes que a animação do gif será

repetido. Se deixar 0, ele ficará em loop. Se quiser determinar o número de
vezes, basta digitar um valor, como 4.
- Após escolher as opções, clique em Ok e o gif será criado!

- Abra o Windows Explorer, localize o arquivo exercicio15.gif e abra-o para
visualizá-lo!
Fig. 90 - Aspecto da timeline do exercicio15.
Importando um gif animado para o Flash
O processo inverso também pode ser feito, ou seja, você pode abrir um
gif animado dentro do Flash. Cada quadro do gif corresponderá a um frame
de um layer.
Para abrir, você precisa importar o gif da mesma maneira que fizemos
para importar uma imagem estática.
Cursos Virtuais
Curso de Flash 5 53
Exercício 16:

- Vá ao menu File -> Import. Selecione a figura exercicio15.gif que acabamos
de criar no exercício anterior. Em seguida clique em Open ou Abrir.
Fig. 91 - Janela para importar a figura.
- Todo o gif animado será importado diretamente para a timeline principal.
Fig. 92 - Aspecto da timeline após a importação do gif.
- Salve como exercicio16.fla. Exporte para .swf para ver o resultado.
Repare que a sequência da animação é mantida. Porém, perdem-se as

camadas (layers), os efeitos e em alguns casos, pode-se perder qualidade.
Claro que o resultado final sempre dependerá de gif para gif.
Essa importação é interessante caso você tenha um gif animado e quei-

ra aproveitar a sequência no Flash.
Cursos Virtuais
Curso de Flash 5 54
Publicando o Filme
Como já foi mencionado, o filme em Flash exportado contém a extensão
.swf. Essa extensão é a que será incorporada em um arquivo html para que
possa ser visualizada pelos navegadores dos usuários que contenham o plug-
in Flash Player.
O Flash contém um comando que publica o filme em uma página HTML,
ou seja, ele mesmo cria a página automaticamente!
Para acioná-lo vá ao menu principal File -> Publish.
O HTML será criado no diretório onde o arquivo .fla e o .swf foram salvos
e exportados.
Além do HTML você pode especificar se quer gerar o .swf e outros arqui-
vos automaticamente com o mesmo comando.
Para definir, vá no meu File -> Publish Settings. A janela chamada Publish
Settings é aberta contendo:
Fig. 93 - Janela Publish Settings.
- Formats: determina os formatos da publicação. A configuração padrão já

vem com os ítens Flash (swf) e HTML marcados. Se você quiser gerar um
arquivo com outros formatos, basta marcar a caixa de seleção corresponden-
te.
Cursos Virtuais
Curso de Flash 5 55
Fig. 94 - configuração do ítem Flash.
- Flash: Neste ítem ficam as configurações do filme Flash (.swf) a ser gerado.
- Load Order: especifica a ordem que as camadas serão carregadas na
Internet. Claro que esta opção funcionará se o seu filme tiver mais do que 2
camadas. As opções são: Bottom up (de baixo para cima) e Top Down (De
cima para baixo).
- Generate Size Report: especifica se você quer que um arquivo texto

seja gerado ou não. Este arquivo contém informações do tamanho dos ele-
mentos usados em seu filme. Com isso, pode-se tentar reduzir o tamanho de
alguns elementos e, consequentemente, o tamanho final do filme.
- Omit Trace Actions: especifica se quer omitir o Trace. Esse Trace é

uma ferramenta para auxiliar o programador na hora de depurar o código em
busca de falhas.
- Protect From Import: protege o arquivo exportado de ser aberto no Flash.

Você pode especificar uma senha para que o arquivo exportado possa ser
aberto apenas com a senha.
- Debugging Permited: determina se você quer ativar o depurador em

busca de erros em scripts.
Cursos Virtuais
Curso de Flash 5 56
- Password: define a senha para proteger o arquivo swf.
- Jpeg Quality: todas as imagens usadas no Flash serão gravadas no

formato jpeg. Nessa opção, você define a qualidade das imagens.
- Audio Stream e Audio Event: define a taxa de compressão do formato

de áudio.
- Override Sound Setting: permite que as configurações feitas no ítem

Audio Stream e Audio Event substituam as definidas dentro do filme, em
Properties (ítem aberto com o botão direito do mouse sobre o arquivo de
som, na biblioteca do filme).
- Version: define a versão do filme exportado.
Fig. 95 - Configurações do ítem HTML
- HTML: neste ítem ficam as definições em relação à página HTML gerada.

- Template: define um tipo de html que será gerado. Os principais são:
‘Flash Only (default)’ que cria um HTML compatível com o Internet Explorer e
Netscape e ‘User Choice’, onde um script de detecção do plug-in Flash Player
é inserido automaticamente verificando se o usuário tem ou não o plug-in.
Cursos Virtuais
Curso de Flash 5 57
- Dimensions: determina o tamanho do filme dentro do HTML. Se você

selecionar ‘Match Movie’, o tamanho será aquele definido em Movie Properties.
Se selecionar ‘Pixels’, é possível determinar um outro tamanho para o filme,
digitando os novos valores em Width (largura) e Height (altura). E, por fim, se
selecionar ‘Percent’, pode-se determinar um valor relativo em porcentagem.
- Playback: define a execução do filme, se quer executar em loop, se

quer que apareça o menu (Display Menu), entre outros.
- Quality: define a qualidade do filme. Quanto mais baixa a qualidade, a

execução do filme ocorrerá sem problemas, porém a qualidade pode ficar
comprometida. O padrão do Flash é High.
- Window Mode: esse ítem funciona apenas no Internet Explorer e pode

definir a transparência de um filme, entre outros.
- Alignment: especifica o tipo de alinhamento do filme em relação à pági-

na HTML.
- Scale: essa opção só funciona se você definir um tamanho diferente do

tamanho do filme. Ela especifica como será a disposição do filme no espaço
disponível. O padrão é default, onde todo o filme será visível no espaço espe-
cificado.
- Flash Alignment: define o alinahmento do filme.
- Show Warning Messages: especifica se quer exibir mensagens de er-

ros e conflitos que possam surgir na hora da publicação.
Cursos Virtuais
Curso de Flash 5 58
Criando Executáveis
Você já aprendeu que uma animação exportada no Flash com o formato
.swf precisa de um plug-in para ser executado. Se o computador do usuário
não possuir o plug-in Flash Player, a animação não poderá ser exibida.
Um recurso interessante no software é a possibilidade de transformar
um arquivo .swf em um aplicativo. Isso significa que ele poderá rodar em
qualquer computador (Windows e Macintosh) sem a necessidade do plug-in.
O uso de um executável, portanto, é amplo. Com os recursos do Flash 5,
pode-se criar cd-roms, jogos, cartões virtuais, entre outros e fazer a distribui-
ção via disquete ou cd-rom, sem a preocupação de quem estiver recebendo
o material, se poderá ou não executar por falta de algum programa auxiliar.
O procedimento de criação de um executável é bem simples. Vá ao menu

File -> Publish Settings. No guia Formats marque a opção ‘Windows Projector’
e ‘Macintosh Projector’ para criar executáveis para Windows e Macintosh,
respectivamente.
Em seguida, pressione o botão Publish para gerar os executáveis.
Fig. 96 - Criando Projetor.
Cursos Virtuais
Curso de Flash 5 59
FS Commands
Os FSCommands são comandos de Action Script que podem ser inseri-

dos em executáveis.
Normalmente são aplicados no primeiro frame do filme e, em alguns
casos no último também, dependendo do tipo de comando.
Par usar, clique no frame 1 do seu filme que será transformado em
executável e abra o painel Frame Actions. FSCommands estão presentes no
ítem Basic Actions. Basta clicar na seleção ‘Commands for standalone player’
e clicar na opção desejada.
Fig. 97 - FSCommands.
Os comandos são:
- Fullscreen: permite que o executável rode em tela cheia (full screen). Em

‘Arguments’ deixe true para ativar.
- Allowscale: permite que o filme seja redimensionado em 100%, inclusive

as imagens. Deixe true em ‘Arguments’ para ativar.
- Showmenu: permite mostrar ou ocultar o menu que é acionado através do

botão direito do mouse em qualquer área do filme. Para desativar, em
‘Arguments’ deixe false.
Cursos Virtuais
Curso de Flash 5 60
- Trapallkeys: permite anular a tecla ESC para que o filme saia da tela cheia.
Para ativar, deixe true no ítem ‘Arguments’.
- Exec: permite executar um aplicativo ou outros arquivos dentro do projetor.
- Quit: esse comando fecha o projetor. Não há a necessidade de inserir con-

teúdo em ‘Arguments’. Normalmente o quit está associado a um botão Sair.
Exercício 17:
Nesse exercício vamos criar um executável. Para isso vamos utilizar um

exercício que fizemos no curso.
- Abra o Flash, vá ao menu File -> Open.

- Selecione o arquivo exercicio6.fla. Trata-se do exercício sobre motion guide.
- Vá ao menu file -> Save as. Salve como exercicio17.fla. Iremos “salvar como”
pois ambos são exercícios distintos.
- Em seguida, clique no layer ‘Guide: Layer 1’. Adicione mais um layer. Será o
Layer 3 que ficará acima do ‘Guide: layer 1’.
Fig. 98 - Layer 3 inserido.
- Clique no frame 1 do layer 3. Abra o painel Frame Actions e clique 2X no

action FSCommand. Selecione o comando Fullscreen. Em ‘Arguments’ deixe
true.
Fig. 99 - Inserindo o FSCommand Fullscreen
- Em qualquer lugar do stage, escreva o texto “Sair”. Transforme o texto em

um botão. Faça a edição dos campos hit, down, over.
Cursos Virtuais
Curso de Flash 5 61
- Retorne à Scene 1 e clique 1x no botão.

- Abra o painel Object Actions e aplique o action Quit de FSCommand.
Fig. 100 - FScommand Quit inserido no botão Sair.
- Salve o arquivo.
- Vá ao menu File -> Publish Settings.
- No ítem Formats, marque a opção Windows Projector. Se você estiver usando
um Macintosh marque a opção de projetor para ‘Mac’. Em seguida, aperte o
botão Publish.
Fig. 101 - Arquivos no Windows Explorer. O primeiro (Flash movie) é o arquivo .fla. O
segundo é o executável (.exe) e o terceiro (Flash Player) é o arquivo no formato .swf.
- Pronto. O executável foi criado. Abra o Windows Explorer. Localize o diretório

que você salvou o exercício. Observe os ícones mostrados na Fig. 101. Clique
no ícone exercicio17.exe (Application) .
- Teste seu aplicativo!
Cursos Virtuais
Curso de Flash 5 62
Dicas Finais
Trabalhando com Bibliotecas Compartilhadas
O Flash 5 apresenta as Bibliotecas compartilhadas, as chamadas Shared

Library. Elas permitem compartilhar alguns ítens entre os diversos filmes de
um site. Isso significa que se você usar um elemento em um filme e quiser
usar o mesmo elemento em outro filme, basta compartilhá-lo.
A vantagem desse método é não aumentar o tamanho final do filme com
novos elementos. A desvantagem é que recomenda-se compartilhar elemen-
tos pequenos (de poucos kb), pois, se o elemento não for carregado poderá
comprometer todo o filme.
Para criar um ítem a ser compartilhado, basta criar

o elemento (um movie-clip, por exemplo) da mesma
maneira que têm feito até agora no curso. Em segui-
da, você deve abrir a biblioteca do filme (CRTL+L),
clicar com o botão direito do mouse sobre o ítem e
selecionar a opção Linkage.
Após clicar nesse ítem, abrirá a janela

Symbol Linkage Properties, como pode ser vis-
ta na Fig. 103.
Fig. 102 - Opção Linkage.
Fig. 103 - Janela symbol Linkage Properties.
Cursos Virtuais
Curso de Flash 5 63
A janela Symbol Linkage Properties apresenta alguns ítens:
- Identifier: digite o nome para identificar o símbolo.
- Linkage: marque a opção Export This symbol. Com isso, o símbolo ficará
disponível para ser compartilhado.
Em seguida, deve-se pressionar o botão Ok. Para que ele fique disponí-
vel, não se esqueça de exportá-lo com o formato .swf.
Para usar um ítem de uma Shared Library, você precisará abrir o arquivo
.fla.
Para isso, vá ao menu File -> Open as Shared Library e escolha o arqui-
vo .fla que contém a biblioteca compartilhada. Esse arquivo se abrirá em uma
nova biblioteca. Em seguida, arraste o ítem que quer usar para o stage.
O próximo passo será informar ao Flash que aquele ítem deverá ser
importado.
Dessa maneira, abra a biblioteca do filme, e clique com o botão direito
do mouse sobre o símbolo importado. Em seguida, escolha a opção Linkage.
Fig. 104 - Utilizando um ítem de biblioteca compartilhada.
Marque a opção Import this symbol from URL. E digite o URL da bibliote-
ca compartilhada. Você pode usar o endereço relativo, como mostrado na
figura acima, como pode usar o endereço completo, incluindo o protocolo
http.
Para finalizar, pressione o botão Ok. Pronto.
Não se esqueça de transferir para o servidor os arquivos .swf do filme e

da biblioteca compartilhada que devem estar no mesmo diretório (a não ser
que você especifique outro caminho no URL).
Cursos Virtuais
Curso de Flash 5 64
Exercício 18:
- Crie um novo filme.

- Crie um movie-clip com algum conteúdo, por exemplo, um logotipo.
- Abra a biblioteca do filme (CRTL+L), clique com o botão direito do mouse
sobre o símbolo e em seguida em ‘Linkage’. De um nome para o símbolo no
campo Identifier e marque a opção ‘Export this Symbol’. Pressione Ok.
- Salve o filme como exercicio18 e exporte para o formato .swf.
Exercício 18-1:
- Crie um novo filme.

- Vá ao menu File -> Open as Shared Library. Selecione o arquivo
exercicio18.fla.
- Arraste o Symbol1 para o stage. Em seguida, abra a biblioteca do filme
(CRTL+L). Clique com o botão direito do mouse sobre o Symbol 1 da bibliote-
ca do filme e clique em Linkage. Na janela que se abrir marque o ítem “Import
this symbol from URL” e digite no campo de texto: exercicio18.swf, se eles
não tiverem preenchidos. Pressione Ok.
- Salve o exercicio como exercicio18-1.fla e exporte o filme. Teste em segui-
da.
Cursos Virtuais
Curso de Flash 5 65
Projeto: Criando um site no Flash

Hora de juntar alguns conhecimentos obtidos até aqui.
A seguir, iremos fazer um projeto passo-a-passo construindo um site
totalmente feito no Flash.
Salve o arquivo como projeto.fla. Se quiser olhar o projeto pronto, acesse
o arquivo projeto.swf no CD-Rom.
Este projeto será um site que terá:

- Uma animação de entrada
- Um menu contendo 4 seções, sendo cada uma das seções um movie-clip.
Vamos à construção!
Passo 1: Construção da animação:
O tema do site será o Flash 5.
- Crie um novo arquivo no Flash. Salve como sendo projeto.fla.

- Clique no frame 1 e digite a letra F com tamanho de fonte 96 (altere no
painel Character). Transforme essa letra F em símbolo do tipo Graphics (F8).
Fig. 105 - Letra F no stage transformada em símbolo gráfico.

- Clique no frame 1 e vá ao menu Modify -> Transform -> Scale and Rotate.
Na janela que se abrir, digite o valor 600% em scale.
Fig. 106 - Redimensionando o símbolo.
- Clique no frame 1 e, no painel Frame, aplique o Tweening Motion.
Cursos Virtuais
Curso de Flash 5 66
Faremos esse procedimento para cada letra da palavra Flash 5. Cada

palavra ficará em um layer diferente.
- Crie um novo layer, o Layer 2.

- Clique no frame 20 e crie um keyframe. Começaremos a trabalhar nesse
frame, após a animação do layer 1 terminar. Digite no stage a letra L. Trans-
forme essa letra em símbolo gráfico.
- Clique no frame 40 do layer 2 e crie um keyframe.
- Clique no frame 20 novamente e altere a escala da imagem (Modify ->
Transform -> Scale em rotate) para 600% como fez para a letra F.
- Aplique no frame 20 do Layer 2 o tweening motion.
Fig. 107 - Aspecto da timeline após a animação das letras F e L.
- Crie um novo Layer (Layer 3). Clique no frame 40 e crie um keyframe.

- Digite no stage a letra A. Transforme-a em símbolo do tipo Graphics.
- Clique no frame 60 do Layer 3 e crie um keyframe.
- Clique no frame 40 do Layer 3 e altere a escala da letra para 600%.
- Aplique o tweening motion no frame 40.
Fig. 108 - Aspecto da timeline após a animação das letras F, L e A.
- Crie um novo layer, o Layer 4. Clique no frame 60 e crie um keyframe.

- Digite no stage a letra S. Transforme-a em símbolo do tipo Graphics.
Fig. 109 - Aspecto da timeline após a animação das letras F, L, A e S.
Cursos Virtuais
Curso de Flash 5 67
- Crie um novo layer, o Layer 5. Clique no frame 80 e crie um keyframe.

- Digite no stage a letra H. Transforme-a em símbolo do tipo Graphics.
Fig. 110 - Aspecto da timeline após a animação das letras F, L, A, S e H.
- Agora, vamos acertar o alinhamento das letras no stage. Para isso, aperte
simultaneamente as teclas CRTL+A, para selecionar tudo.
- Abra o painel Align (Window -> Panels -> Align) e clique no ícone Align
Bottom Edge, para alinhar todos na mesma linha embaixo.
Fig. 111 - Símbolos gráficos selecionados no stage. No lado direito, o painel Align
aberto com o alinhamento “Align Bottom Edge” sendo aplicado.
- A seguir, aplique a distribuição ‘Distribute Horizontal Center’.
Fig. 112 - Aplicação de “Distribute Horizontal Center” no painel Align.
Cursos Virtuais
Curso de Flash 5 68
Pronto, a frase já está alinhada.

Agora vamos terminar a animação.
- Clique no frame 120 e crie um keyframe neste frame em cada um dos layers.
Fig. 113 - Aspecto da timeline. Aplicação de um keyframe no frame 120 de cada um

dos layers.
- Clique no frame 150 e crie novamente um keyframe em cada um dos layers.

Nesse frame aplicaremos o seguinte efeito:
- Abra o painel Effects (Window -> Panels -> Effects).
- Clique no símbolo F do stage e no painel Effects, aplique um alpha 0%.
Fig. 114 - Aplicação do efeito Alpha 0% no símbolo F.
- Clique no símbolo L e aplique o efeito alpha 0%.

- Clique no símbolo A e aplique o efeito alpha 0%.
- Clique no símbolo S e aplique o efeito alpha 0%.
- Clique no símbolo H e aplique o efeito alpha 0%.
Fig. 115 - Stage após aplicar o efeito alpha 0% nos símbolos

no frame 150.
- Aplique um tweening motion no frame 120 de cada um dos layers.
Cursos Virtuais
Curso de Flash 5 69
Fig. 116 - Efeito Tweening motion aplicado em todos os layers no frame 120.
A nossa animação está pronta. Esse é só um exemplo simples de uma

animação de entrada. Claro que com criatividade e imaginação é possível
fazer trabalos mais elaborados e interessantes.
Vamos para o próximo passo.
Passo 2: construção do esqueleto do site e do menu.
O site em si, será inserido após a animação de entrada. Com a finalida-

de de organização, construiremos a estrutura do site em uma outra cena, a
Scene 2.
- Crie uma nova Scene. Para isso, abra o painel Scene e clique no ícone Add
Scene (+) no lado inferior direito do painel. A Scene 2 será criada.
Fig. 117 - Criação de uma nova cena no painel Scene.
- Após a criação da cena, a timeline exibida passa a ser da Scene 2. Para

alterar a timeline, basta clicar na cena que você quer no painel Scene.
- A Scene 2 tem o Layer 1 com um único frame. Deixe com 15 frames.
- Selecione a ferramenta Rectangle Tool.
Na parte inferior da barra de ferramentas,
abre-se um ítem chamado Options. Clique
ali e abrirá uma janela para você determi-
nar o tamanho da curva, para que as bor-
das do retângulo sejam arredondadas.
Digite o valor 30. Aperte Ok.
Fig. 118 - Rectangle Settings.
Cursos Virtuais
Curso de Flash 5 70
Nota: para voltar ao retângulo com bordas retas, digite o valor 0 points.
- Desenhe no stage um retângulo fino,

como mostrado na figura ao lado.
Se quiser, altere o tamanho da bordas no

painel Stroke, para o tamanho 5.
Fig. 119 - Retângulo inserido no stage.
- A seguir, clique no frame 15 e crie um keyframe. Nesse frame 15, selecione

a ferramenta Arrow Tool. Na parte inferior da barra de ferramentas, clique no
ícone Scale e redimensione o retângulo de modo que cubra grande parte
do stage.
- Clique no frame 1 e aplique um Tweening
Shape no painel Frames.
- Clique no frame 15 e abra o painel Frame
Actions. Aplique o action Stop para que o
filme fique parado no frame 15.
Este será o fundo do filme. O menu

começaremos a trabalhar em outro layer,
sempre no frame 15.
Fig. 120 - retângulo redimensionado.
Fig. 121 - Timeline. Repare no frame 15. Há um keyframe e um action stop inserido.
- Crie um novo layer (Layer 2). Clique no frame 15 e crie um keyframe.

- Selecione a ferramenta Text Tool e digite no Stage, dentro do retângulo:
Flash 5. No painel Character, altere o tamanho da fonte para 14. Se quiser,
altere a cor e a fonte como quiser. (Veja a Fig. 122).
Cursos Virtuais
Curso de Flash 5 71
Fig. 122 - Parte do stage. Inserção do texto ‘Flash 5’ dentro do retângulo.
- Transforme o texto em um botão (F8). Faça a edição dos campos hit, down
e over.
- Retorne à Scene 2. Clique no frame 15 do layer 2.
- Digite no stage as outras seções. Cada uma será um botão diferente.
Digite: Empresa
E transforme o conteúdo em botão. Edite os campos Hit, Over e Down.
Retorne à Scene 2. Clique no frame 15 do layer 2.
- Digite: Contatos
E transforme o texto em um botão. Edite os campos Hit, Over e Down.
Retorne à Scene 2. Clique no frame 15 do layer 2.
- Digite: Site
E transforme o texto em um botão. Edite os campos Hit, Over e Down.
Retorne à Scene 2.
Veja o menu pronto. Só falta inserir os actions que será o passo 4.
Fig. 123 - Os ítens do menu dentro do retângulo no stage. Cada ítem é um botão.
Passo 3: Construindo as seções do site.

Cada botão levará a uma seção no site. Os botões “Flash 5” e “Empresa”
acionarão movie-clips.
Os botões “Contatos” e “Site” acionarão links.
Então, vamos à construção dos movie-clips.
Cursos Virtuais
Curso de Flash 5 72
- Crie um novo layer, o Layer 3. Crie um keyframe no frame 15.

- Neste frame, selecione a ferramenta Text Tool e escreva o texto no stage
Flash 5
Trata-se de um programa de criação de animações para a Internet.
- Tranque os layers 1 e 2. Para trancar, clique na coluna de cadeado na timeline,

como visto na Fig. 124. Isso fará com que você possa trabalhar no layer 3
sem que o conteúdo dos outros layers interfiram na edição.
Fig. 124 - Layers 1 e 2 trancados.
Fig. 125 - Texto inserido no stage.
- Clique 1X no texto inserido e transforme-o em símbolo do tipo movie-clip.

- Clique 2X no movie-clip recém-criado e abrirá a timeline do movie-clip.
- Crie um outro frame, de modo que o movie-clip fique com 2 frames. Crie um
keyframe no frame 2.
- Apague o conteúdo do frame 1. Em seguida, aplique no frame 1 o action
Stop, no painel Frame Actions.
- Clique no frame 2 e aplique o action Stop.
Fig. 126 - Timeline do movie-clip (Symbol 10) com 2 frames (o frame 1 vazio). Em cada
frame um action Stop.
Cursos Virtuais
Curso de Flash 5 73
- Crie mais um layer, o Layer 4.

- Crie um keyframe no frame 15.
- Tranque o layer 3 para podermos trabalhar tranquilamente com o layer 4.
- Digite no stage:
O programa Flash 5 é produzido pela Macromedia.

Essa empresa também produz outros softwares como o Dreamweaver,
Fireworks, Director, entre outros.
- Transforme o texto em um movie-clip.

- Clique 2X no movie-clip recém criado para editá-lo.
- Deixe o movie-clip (Symbol 11) com 2 frames. Crie um keyframe no frame 2.
- Apague o conteúdo do frame 1 e aplique um action stop nos frames 1 e 2.
Fig. 127 - timeline do movie-clip (Symbol 11) contendo 2 frames (o frame 1 vazio) com
o action Stop.
Passo 4: Criação das ações dos botões.

Nesse último passo, iremos fazer os botões funcionarem.
- Clique no frame 15 do layer 4.

- Clique no movie-clip inserido no stage. Como o movie-clip está vazio no
primeiro frame dele, a posição no stage fica marcada com p sinal .
- Abra o painel Instance e digite o nome da instância do movie-clip de
mcempresa.
Fig. 128 - Nome da instância do movie-clip (symbol 11) presente no layer 4.
Cursos Virtuais
Curso de Flash 5 74
- Agora, tranque o layer 4 e destranque o layer 3. Para trancar e destrancar é

só clicar no ícone de cadeado de cada layer.
- Clique no movie-clip no stage. Estamos selecionando o movie-clip do layer
3. Abra o painel instance e dê o nome da instância de mcflash5.
Fig. 129 - Nome da instância do movie-clip (Symbol 10) presente no layer 3.
- Em seguida, destranque todos os layers.

- Clique 1X no botão Flash5. Abra o painel Object Actions.
Clique 2X no action Tell Target (em Basic Actions). No campo Target digite
mcflash5.
- A seguir aplique o action Go to. Nas configurações que se abrirem, deixe
como:
Scene: <current scene>
Type: Frame number
Frame: 2
Fig. 130 - Action inserido no botão Flash 5.
- Agora, clique no botão Empresa. No painel Object action aplique o Action

Tell Target. Em target digite: mcempresa.
- Aplique o action Go to passando como parâmetros:
Type: Frame number
Frame: 2
Cursos Virtuais
Curso de Flash 5 75
Fig. 131 - Action inserido no botão Empresa.
- A seguir, salve e teste os botões Flash 5 e Empresa.

Você pode perceber que um conteúdo fica acima do outro. Para resolver
isso, quando acionarmos um botão, ao mesmo tempo que um movie-clip for
mostrado (frame 2), devemos inserir um outro tell target apontando para o
outro movie clip sumir (ir para o frame 1). Acompanhe:
- Clique no botão Flash 5. No painel Object Actions é mostrado o action inse-

rido. Clique na linha 4 que corresponde ao primeiro caracter }. Aplique um
outro comando tell target e digite em target a instância mcempresa.
- Em seguida, aplique um Go to contendo:
Type: Frame number
Frame: 1
(Desmarque a opção Go to and play).
Fig. 132 - Action completo do botão Flash 5. Repare no posicionamento dos coman-
dos.
- Clique no botão Empresa. No painel Object Actions clique na linha 4. Apli-

que outro comando Tell target, digitando em Target: mcflash5.
- A seguir, aplique um action go to com:
Type: Frame number
Frame: 1
(Desmarque a opção Go to and play).
Cursos Virtuais
Curso de Flash 5 76
Fig. 133 - Action final inserido no botão Empresa.
- Agora, só faltam os dois últimos botões.
- Clique no botão Contatos. No painel Object Actions insira o action GetURL.

No campo URL digite: mailto:seu_email, onde seu_email é o endereço de
email que você quer.
Por exemplo: mailto:professora@cursosvirtuais.com.br
Fig. 134 - Action inserido no botão Contatos.
- Clique no botão Site. No painel Object Actions aplique o action Get URL.
No campo URL digite: http://www.macromedia.com.br
Em Window coloque _blank.
Cursos Virtuais
Curso de Flash 5 77
Fig. 135 - Action inserido no botão Site.
- Pronto. Salve seu arquivo, exporte, publique e teste. O projeto termina aqui!
Este é apenas um exemplo simples do que você pode criar com o Flash.
Esperamos que você possa ter aprendido um pouco mais sobre o software
e que esta apostila tenha lhe ajudado nesse processo.
A partir desse momento, visite sites na Internet, faça pesquisas e bus-

que tutoriais, arquivo .fla, livros para estudar e se aprofundar.
E, sobretudo, use a sua criatividade!
Cursos Virtuais
Curso de Flash 5 78
Sites
A seguir alguns sites onde você pode obter maiores informações sobre o
Flash 5 e recursos para usar nos seus projetos:
Empresa:
- Macromedia: site do fabricante: http://www.macromedia.com.br
Sites para desenvolvedores:

Contém tutoriais, artigos, arquivos .fla, entre outros recursos.
- Flash Planet: http://www.flashplanet.com/

- Flash Zone: http://www.flashzone.com/
- Flash Kit: http://www.flashkit.com/
- Extreme Flash: http://www.extremeflash.com/
Sons:
Arquivos de sons para download.
- WavCentral: http://www.wavcentral.com
- Sound America: http://soundamerica.com/
- WavList: http://www.wavlist.com/index.html
Imagens:
Arquivos de imagens, figuras e desenhos para downloads.
- Free Graphics: http://www.free-graphics.com/

- ClipArt Warehouse: http://www.clipart.co.uk/
- Animation Factory: http://www.animfactory.com/
Cursos Virtuais
Curso de Flash 5 79
Cursos Virtuais
Curso de Flash 5 80
Curso de Flash 5
Autora: Silvana T. Ynemine
Cursos Virtuais
O Site de Cursos do Brasil
Proibida qualquer reprodução dessa apostila.

Para entrar em contato com a autora, use o email:
professora@cursosvirtuais.com.br
Cursos Virtuais

Cur So Flash 5

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Cur So Flash 5

Enviado por

Direitos autorais:

Formatos disponíveis

Curso de Flash 5 1

Autora: Silvana T. Ynemine

Proibida qualquer reprodução dessa apostila.

Apostila criada exclusivamente para a Revista WWW.COM.BR - Fev/2001

Silvana Tauhata Ynemine é instrutora do site Cursos Virtuais e ministra diversos

É autora dos livros:“Flash 5”, “Aprenda Rápido Flash 5”, “Dreamweaver 3 ” e

Todas as marcas citadas na apostila são exclusivamente de uso didático. Todas as

Nesse curso iremos aprender como manipular o software e dominar seus

Para a correta instalação do programa, seu computador dever ter no

Fig. 01 - Tela de Início da instalação do programa Flash 5.

O programa de instalação será executado extraindo os arquivos neces-

Fig. 02 - Mensagem do programa antes da instalação.

Em seguida, o programa de instalação recomenda a você fechar todos

Fig. 03 - Contrato de licença do software.

A próxima etapa é ler o Contrato de Licença do software. Caso esteja de

Fig. 04 - Escolhendo o diretório de instalação

Em seguida, você deve selecionar o diretório de instalação. O programa

Fig. 05 - Escolhendo o tipo de instalação

O próximo passo é definir o tipo de instalação. Existem três tipos dispo-

Na próxima tela você deve indicar o nome do programa que aparecerá

Agora vem um passo importante: a instalação do Plug-in. Marque o na-

Fig. 07 - Instalação sendo efetuada.

Nessa etapa, processo de instalação será iniciado como é mostrado na

Pronto. O programa Flash 5 está instalado no seu computador e pronto

Menu principal Barra de Atalho de Menu Linha do Tempo - Timeline

Barra de visualização área de trabalho painéis Laucher Bar

Fig. 08 - Visão geral do programa Flash 5.

Vamos, a seguir, analisar cada um separadamente:

Fig. 09 - Menu Principal

Esse menu contém todos os comandos do software. E está dividido em:

filme (Publish), imprimir (Print), entre outros.

- View: contém recursos relacionados à visualização do programa Flash. Nesse

- Insert: esse menu contém os elementos a serem inseridos em seu filme,

- Modify: esse menu contém comandos de modificação dos elementos inse-

- Text: contém recursos de definição de atributos de texto, como tipo de fonte,

- Control: contém comandos de controle do filme. Nesse menu você pode

- Window: esse menu permite a manipulação das janelas na sua área de

- Help: esse menu apresenta os tópicos de ajuda, amostras (samples), lições

Barra de menu de atalho

Fig. 10 - Barra de menu de atalho.

Esta barra é também chamada de Barra de Ferramentas Padrão por

- New : Esse ícone cria um novo arquivo.

- Open : abre um arquivo já existente.

- Save : salva o arquivo atual.

- Print : imprime o arquivo.

- Print Preview : visualização prévia da impressão.

- Cut : corta um conteúdo.

- Copy : copia um conteúdo.

- Paste : cola um conteúdo.

- Undo : desfaz uma ação.

- Redo : refaz uma ação.

- Snap : ajusta à grade (encaixe).

- Smooth : suaviza a linha.

- Straighten : torna a linha mais reta.

- Rotate : rotaciona um elemento.

- Scale : altera a dimensão de um elemento.

- Align : alinha os elementos na vertical e na horizontal.

- Stop : para a execução de um filme.

- Rewind : rebobina o filme, retornando ao primeiro frame.

- Step Back : volta um frame por vez.

- Play : executa um filme.

- Step Forward : avança um frame por vez.

- Go to End : vai para o último frame do filme.

A barra de ferramentas apresenta os recursos para efetuar