Curso - Macromedia - Tutorial Do Flash MX

Tutorial do Flash MX
macromedia
Marcas comerciais
Afterburner, AppletAce, Attain, Attain Enterprise Learning System, Attain Essentials, Attain Objects for Dreamweaver,
Authorware, Authorware Attain, Authorware Interactive Studio, Authorware Star, Authorware Synergy, Backstage, Backstage
Designer, Backstage Desktop Studio, Backstage Enterprise Studio, Backstage Internet Studio, Design in Motion, Director,
Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Dreamweaver Attain, Drumbeat, Drumbeat 2000, Extreme
3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand Graphics Studio, Generator, Generator Developer's Studio, Generator
Dynamic Graphics Server, Knowledge Objects, Knowledge Stream, Knowledge Track, Lingo, Live Effects, Macromedia,
Macromedia M Logo & Design, Macromedia Flash, Macromedia Xres, Macromind, Macromind Action, MAGIC, Mediamaker,
Object Authoring, Power Applets, Priority Access, Roundtrip HTML, Scriptlets, SoundEdit, ShockRave, Shockmachine,
Shockwave, Shockwave Remote, Shockwave Internet Studio, Showcase, Tools to Power Your Ideas, Universal Media, Virtuoso,
Web Design 101, Whirlwind e Xtra so marcas comerciais da Macromedia, Inc. e podem estar registradas nos EUA ou em outras
jurisdies, inclusive internacionalmente. Outros nomes de produtos, logotipos, designs, ttulos, palavras ou frases mencionados
nesta publicao podem ser marcas comerciais, marcas de servio ou nomes comerciais da Macromedia, Inc. ou de outras
entidades e podem estar registrados em certas jurisdies, inclusive internacionais.
Informaes de terceiros
Tecnologia de compactao e descompactao de voz licenciada da Nellymoser, Inc. (www.nellymoser.com).
Tecnologia Sorenson Spark de compactao e descompactao de vdeo licenciada da
Sorenson Media, Inc.
Este guia contm links para sites da Web de terceiros que no esto sob o controle da Macromedia. Neste caso, a Macromedia no
responsvel pelo contedo de nenhum site vinculado. Se voc acessar um dos sites da Web de terceiros mencionados neste guia,
estar assumindo os riscos inerentes. A Macromedia oferece esses links apenas como uma convenincia, e a incluso de um link
no significa que a Macromedia apia ou aceita qualquer responsabilidade pelo contedo apresentado nos sites de terceiros.
Iseno de responsabilidade da Apple
A APPLE COMPUTER, INC. NO CONCEDE GARANTIA ALGUMA, NEM EXPLCITA NEM IMPLCITA, RELATIVA AO PACOTE DE SOFTWARES PARA COMPUTADORES EM ANEXO, A SUA COMERCIALIZAO OU SUA
ADEQUAO A QUALQUER FINALIDADE ESPECFICA. A EXCLUSO DE GARANTIAS IMPLCITAS NO
PERMITIDA EM CERTOS ESTADOS. A EXCLUSO ACIMA PODE NO SE APLICAR NO SEU CASO. ESTA
GARANTIA LHE CONCEDE DIREITOS LEGAIS ESPECFICOS. VOC PODE TER OUTROS DIREITOS QUE
VARIAM CONFORME O ESTADO.
Copyright 2000 Macromedia, Inc. Todos os direitos reservados. Este manual no pode ser copiado, fotocopiado,
reproduzido, traduzido ou convertido em nenhum formato eletrnico ou que possa ser lido por mquina, por inteiro ou em
parte, sem o consentimento prvio por escrito da Macromedia, Inc.
Agradecimentos
Direo: Erick Vera
Produo: Wayne Wieseler
Redao: Jody Bleyle, JuLee Burdekin, Mary Burger, Dale Crawford, Marcelle Taylor
Design instrucional: Stephanie Gowin, Barbara Nelson
Edio: Rosana Francescato, Lisa Stanziano, Anne Szabla
Design e produo de multimdia: Aaron Begley, Benjamin Salles, Noah Zilberberg
Design e produo de impresso: Chris Basmajian, Caroline Branch
Localizao: Michael Dominguez, Cristina Guembe, Yoshika Hedberg, Tim Hussey, Masayo Noppe Noda, Simone Pux, Yoko
Shindo, Yuko Yagi
Primeira edio: maro de 2002
Macromedia, Inc.
600 Townsend St.
San Francisco, CA 94103
NDICE
CAPTULO 1
Introduo ao Tutorial do Flash MX .
.................................. 5
O que voc deve saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Exibindo o filme concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Analisar o arquivo stiletto.fla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
Definir as propriedades para um novo documento e criar um fundo gradiente . . . . . . . 12
Criar e mascarar arte vetorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21
Interpolar efeitos de bitmap em um clipe de filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30
Carregar texto dinmico em tempo de execuo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
Adicionar qualidades de animao e navegao a botes . . . . . . . . . . . . . . . . . . . . . . . . 42
Adicionar eventos e sons de fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47
Organizar o painel Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49
Testar o desempenho de download e publicar o filme . . . . . . . . . . . . . . . . . . . . . . . . . . 50
As prximas etapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54
CAPTULO 2
Tutorial de introduo ao ActionScript .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57
Exibindo um filme concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Inicializando o filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Salvando e recuperando informaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Exibindo informaes em uma caixa de texto dinmica . . . . . . . . . . . . . . . . . . . . . . . . .
Escrevendo uma expresso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Controlando o fluxo de um filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Criando comandos e reutilizando cdigos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Usando um objeto interno. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Testando o filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
As prximas etapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
CAPTULO 3
Tutorial de introduo aos componentes .
57
60
65
67
69
71
73
78
81
82
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
Tipos de componentes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Exibindo o formulrio preenchido. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
Criando um formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
As prximas etapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
83
84
85
94
ndice
CAPTULO 1
Introduo ao Tutorial do Flash MX
Este tutorial fornece orientaes sobre o processo de criao de uma experincia atraente da Web
com o Macromedia Flash MX. Ao concluir o tutorial, voc ter aprendido a criar um filme, desde
a etapa de abertura de um novo documento publicao desse filme para reproduo na Web. So
necessrias aproximadamente trs horas para concluir o tutorial, dependendo da sua experincia.
Com ele voc aprender a realizar as seguintes tarefas:
Analisar um filme completo

Definir as propriedades do documento e criar um gradiente
Criar e mascarar arte vetorial
Interpolar efeitos de bitmap em um clipe de filme
Carregar texto dinmico
Modificar botes e adicionar navegao
Adicionar eventos e sons de fluxo
Testar e publicar o filme
recomendvel concluir as oito sees includas no tutorial em seqncia, embora seja possvel
optar por revisar apenas as sees que forem interessantes no seu caso. Se seguir o tutorial fora da
seqncia, tenha em mente que as sees posteriores pressupem a dominao dos conhecimentos
introduzidos nas sees anteriores.
O que voc deve saber

Antes de seguir o tutorial, conclua as sete aulas apresentadas na Ajuda do Flash. Essas aulas
interativas criadas no Flash apresentam os conceitos necessrios para concluir o tutorial. Os
tpicos das aulas incluem o seguinte:
Guia de introduo ao Flash MX

Ilustrando no Flash
Adicionando e editando texto
Criando e editando smbolos
Entendendo camadas
Criando botes
Criando animao interpolada
Para acessar uma aula, escolha Ajuda > Aulas. Em seguida, selecione uma aula na lista.
Exibindo o filme concludo

possvel abrir uma verso completa do filme do tutorial para entender melhor qual ser a
aparncia do arquivo finalizado.
Nesta seo, voc realizar as seguintes tarefas:
Analisar o filme completo utilizando o Inspetor de propriedades e o Movie Explorer

Examinar um clipe de filme e distinguir seu relacionamento com o filme principal
Exibir os tipos de propriedades includas no filme
1
Dentro da pasta do aplicativo Flash MX, navegue para Tutorials/FlashIntro e clique duas vezes
em stiletto.swf para abrir o filme completo no Flash Player independente.
Os filmes publicados do Flash apresentam a extenso SWF; os documentos do ambiente de
criao possuem a extenso FLA.
Quando o filme for aberto, observe as trs exibies do carro aparecerem e desaparecerem
gradualmente.
Crie essa animao interpolando efeitos de bitmap em um clipe de filme.
Oua o som executado continuamente durante a reproduo do filme. Este um exemplo de

som de fluxo.
Role pelos trs botes ao longo da borda inferior direita da janela para exibir o efeito de
sobreposio e para ouvir os sons de evento includos em cada boto.
Clique em um boto para ver seu vnculo e, em seguida, feche o navegador e retorne para o
arquivo SWF.
Aps a exibio do filme, clique em sua caixa de fechamento.
Analisar o arquivo stiletto.fla

til analisar o arquivo FLA completo para ver como o autor criou o documento. Para analisar o
arquivo, exiba as propriedades de um objeto, exiba a Linha de tempo e o Palco, examine as
propriedades de biblioteca e use o Movie Explorer.
Captulo 1
No Flash, escolha Arquivo > Abrir. Navegue para a pasta do aplicativo Flash e abra Tutorials/
FlashIntro/stiletto.fla.
Agora voc ver o filme do tutorial concludo no ambiente de criao.
Arrastar a barra que separa o Palco
da Linha de tempo
Para exibir todas as camadas na Linha de tempo principal, arraste a barra que separa o Palco da
Linha de tempo.
Na Linha de tempo, desbloqueie as camadas Copiar e Imagem.
Exibir propriedades de documento

O Inspetor de propriedades permite exibir as especificaes dos objetos selecionados. As
especificaes dependem do tipo de objeto selecionado. Se elecionar um objeto de texto, por
exemplo, as configuraes para exibir e modificar atributos de texto sero mostradas.
1
Se o Inspetor de propriedades no estiver aberto, escolha Janela > Propriedades.
No Palco, role para baixo se necessrio e selecione o bloco retangular em que o texto descritivo
apareceu no arquivo SWF finalizado. O texto no aparece no arquivo FLA porque carregado
de um arquivo TXT externo em um campo de texto dinmico.
Caixa de texto
No Inspetor de propriedades possvel exibir o tamanho, o estilo e a cor do texto, entre outros
atributos.
Se o Inspetor de propriedades no estiver completamente expandido, clique no tringulo

branco do canto inferior direito.
3
No Palco, selecione o carro.

As configuraes de clipe de filme substituem as configuraes de texto. Os clipes de filme so
smbolos que possuem suas prprias Linhas de tempo independentes. Pense neles como filmes
dentro de filmes.
Exibir o clipe de filme

Agora voc abrir o modo de edio de smbolo para exibir a Linha de tempo de um clipe de
filme.
1
No Palco, clique duas vezes no clipe de filme do carro.

Como voc aprendeu na aula Criando animao interpolada, defina as alteraes na animao
em quadros-chave. Ao percorrer a Linha de tempo, observe quais camadas possuem quadroschave e quais quadros so quadros-chave.
Os quadros-chave inicial e intermedirio que incluem contedo so indicados na Linha de
tempo por crculos slidos; j os quadros-chave finais aparecem como pequenos retngulos
contornados.
Captulo 1
Na Linha de tempo, selecione a reproduo e arraste-a lentamente pelos quadros.

Agora observe como as alteraes nas aes no Palco correspondem s alteraes na Linha de
Tempo. medida que arrasta a reproduo, o filme executado seqencialmente. possvel
adicionar ActionScript, a linguagem de script do Flash, aos filmes para fazer com que a
reproduo v para quadros especficos.
Ao terminar de exibir o clipe de filme, siga um destes procedimentos para retornar ao filme
principal:
Escolha Editar > Editar documento.

Clique no boto Voltar.
Clique em Cena 1 acima do Palco.
Exibir propriedades de biblioteca
O painel Biblioteca contm os smbolos e objetos importados no documento.
1
Se o painel Biblioteca no estiver aberto, escolha Janela > Biblioteca.
Arraste o painel Biblioteca para aument-lo, se necessrio, para exibir os objetos contidos na
biblioteca.
Se a pasta Arte no estiver expandida, clique duas vezes nela para exibir os objetos da pasta.
Clique em view1.png para exibir a imagem na rea de visualizao na parte superior do painel
Biblioteca.
Expanda as outras pastas no painel Biblioteca para exibir as propriedades includas no

documento, como os botes e clipes de filme.
Ao terminar de exibir as propriedades, feche o painel Biblioteca.
Analisar a estrutura do filme com o Movie Explorer

O Movie Explorer o ajuda a organizar, localizar e editar mdia. Com sua estrutura de rvore
hierrquica, o Movie Explorer oferece informaes sobre a organizao e o fluxo de um filme.
Essas informaes so especialmente teis durante a anlise de um filme criado por outra pessoa.
1
Se o Movie Explorer ainda no estiver aberto, escolha Janela > Movie Explorer.
Se necessrio, aumente o Movie Explorer para exibir a estrutura de rvore no painel.

Os botes de filtragem do Movie Explorer exibem ou ocultam informaes.
10
Captulo 1
Clique no menu pop-up da barra de ttulo do Movie Explorer e verifique se as opes Mostrar
elementos do filme e Mostrar definies de smbolos esto selecionadas.
Cancele a seleo do boto Mostrar quadros e camadas na parte superior do Movie Explorer.
Verifique se os nicos botes de filtragem selecionados so Mostrar texto, Mostrar botes,
Clipes de filme e Grficos, Mostrar ActionScripts; e Mostrar vdeo, sons e bitmaps.
Examine a lista para exibir algumas das propriedades includas no filme e para ver a relao
delas com outras propriedades.
Para expandir um objeto ou categoria, clique no boto Mais (+) esquerda do nome.
Selecione o boto de filtragem Mostrar quadros e camadas. Percorra a categoria Definies do

smbolo. Com a categoria expandida, clique duas vezes no clipe de filme Animao de carro.
Agora voc est no modo de edio de smbolo do clipe de filme.
11
No Movie Explorer, Com a categoria Animao de carro selecionada e expandida, expanda o

cone Exibio do fade 3 e, em seguida, clique duas vezes em Quadro 60.
Na Linha de tempo do clipe de filme, a reproduo passa para o Quadro 60 da camada
Exibio do fade 3.
Para exibir um item listado na rvore hierrquica, clique no cone correspondente. Se clicar em
um cone de quadro, a reproduo se mover para o quadro na Linha de tempo. Se clicar em
uma propriedade, como uma imagem de bitmap, o Inspetor de propriedades exibir as
configuraes da imagem. Clique duas vezes em um cone que representa um smbolo para
abrir o modo de edio de smbolo.
9
Feche o Movie Explorer. Para fechar o documento, escolha Arquivo > Fechar.
Se tiver feito alteraes no arquivo, no as salve.
Definir as propriedades para um novo documento e criar um

fundo gradiente
Para aprender a criar um filme no Flash, comece pela primeira etapa do processo: a abertura de
um novo arquivo. Em seguida, ao terminar esta seo, voc ter aprendido a realizar as seguintes
tarefas:
Abrir um novo arquivo e definir as propriedades de documento

Criar e transformar um fundo gradiente
Abrir um novo arquivo
Agora voc est pronto para criar sua prpria verso do filme de tutorial.
1
Escolha Arquivo > Novo.
Escolha Arquivo > Salvar como.
Denomine o arquivo como mystiletto.fla e salve-o na pasta do aplicativo Flash MX, na

subpasta Tutorials/FlashIntro/My_Stiletto.
Observao: Lembre-se de salvar seu trabalho com freqncia enquanto conclui o tutorial.
Definir propriedades de documento

Configurar as propriedades de um documento geralmente uma das primeiras etapas na criao.
Use a caixa de dilogo Inspetor de propriedades e Propriedades do documento para especificar
configuraes que afetam todo o filme, como a taxa de reproduo de quadros por segundo (qps),
o tamanho do Palco e a cor de fundo.
12
Captulo 1
Se o Inspetor de propriedades no estiver aberto, escolha Janela > Propriedades. Na caixa de

dilogo Inspetor de propriedades, verifique se a caixa de texto Taxa de Quadros contm o
nmero 12.
O filme ser reproduzido a 12 quadros por segundo, uma taxa de quadros tima para se
reproduzir animaes na Web.
Observao: Se o Inspetor de propriedades no estiver completamente expandido, clique no tringulo branco
do canto inferior direito.
A caixa Cor de fundo indica a cor do Palco. Clique na seta para baixo da caixa Cor de fundo e
mova a ferramenta Conta-gotas sobre as amostras de cores para exibir seus valores hexadecimais
na caixa de texto Hexadecimal.
Localize e clique na amostra de cor cinza com o valor hexadecimal 999999.

Caixa de texto Hexadecimal
Selecionar este tom de cinza
Para redimensionar o Palco, clique no boto Tamanho, que indica o tamanho do Palco.
Na caixa de dilogo Propriedades do documento, digite 640 px na primeira caixa de texto
Dimenses e 290 px na segunda. Verifique se a opo Pixels est selecionada no menu pop-up
e clique em OK.
As dimenses do Palco so alteradas para refletir as novas configuraes de 640 x 290 pixels.
Especificar as configuraes da grade
No Palco, possvel alinhar objetos ao longo das linhas de grade horizontais e verticais. Mesmo
quando a grade no est visvel, possvel encaixar objetos nela. Agora voc modificar a distncia
entre as linhas de grade horizontais e verticais e criar uma grade alinhada s bordas do Palco.
13
Escolha Exibir > Grade > Editar Grade.
Na caixa de dilogo Grade, digite 10 px na caixa de texto de largura da grade e 10 px na caixa

de texto de altura.
Selecione Encaixar na grade e certifique-se de que a opo Mostrar grade no est selecionada.
Agora, os objetos sero encaixados na grade at mesmo quando ela no estiver visvel.
Verifique se a opo Normal est selecionada para Preciso do encaixe e clique em OK.
A preciso do encaixe determina quo prximo um objeto dever estar de uma linha de grade
antes de ser encaixado nela.
Criar um fundo gradiente

Um gradiente exibe variaes de cor sutis ou transies entre duas ou mais cores. No arquivo do
tutorial finalizado, o fundo um gradiente que mescla preto e azul escuro com uma rea
transparente que permite a exibio de parte da cor cinza do Palco. Esse efeito obtido atravs do
uso do Misturador de cores.
Observao: Embora os gradientes apresentem efeitos interessantes nos filmes, seu uso em excesso pode afetar
negativamente as velocidades do processador do computador e diminuir a velocidade de reproduo de uma
animao. Durante a criao de um filme, considere os requisitos artsticos e de desempenho para determinar a
melhor utilizao de gradientes.
Desenhar um retngulo
Anteriormente no tutorial, voc criou uma grade que se alinhava ao Palco e permitia o encaixe de
objetos em suas linhas. Agora voc desenhar um retngulo que se encaixa na rea da grade junto
ao Palco.
1
No menu pop-up acima do lado direito do Palco, insira 75% para exibir todo o Palco.
Essa configurao indica a exibio ampliada ou reduzida do Palco. Ela no afeta o tamanho
real do Palco no filme, que foi especificado na caixa de dilogo Propriedades do documento.
14
Na caixa de ferramentas, selecione a ferramenta Retngulo.
Captulo 1
Na caixa de ferramentas, clique no controle Cor do trao. Selecione Nenhum trao (o boto
com a linha diagonal vermelha acima da paleta de cores).
A cor de preenchimento selecionada da forma no importante, pois voc logo a alterar.

4
Arraste do canto superior esquerdo at o canto inferior direito do Palco para desenhar um
retngulo que envolva todo o Palco.
Ao soltar o ponteiro, o retngulo ser encaixado nas bordas do Palco, ao longo da grade oculta.
Observao: Enquanto conclui o tutorial, aconselhvel desfazer qualquer alterao que voc tenha feito. O
Flash pode desfazer vrias alteraes recentes, dependendo do nmero de nveis de desfazer que voc
configurou em Preferncias. Para desfazer, escolha Editar > Desfazer ou pressione Control+Z (Windows) ou
Command+Z (Macintosh). Inversamente, voc pode refazer o que desfez escolhendo Editar > Refazer ou
pressionando Control+Y (Windows) ou Command+Y (Macintosh).
Especificar uma cor para o gradiente

Azul escuro a primeira cor que ser adicionada ao gradiente.
1
Na caixa de ferramentas, selecione a ferramenta Seta. No Palco, clique dentro do retngulo para
selecionar o preenchimento.
Quando o retngulo foi desenhado, o Inspetor de propriedades exibiu as propriedades da
ferramenta Retngulo. Quando voc seleciona uma forma que j foi criada, o Inspetor de
propriedades exibe as propriedades dessa forma.
Se o Misturador de cores no estiver aberto, escolha Janela > Misturador de cores.
15
Para expandir o Misturador de cores, clique na seta branca da barra de ttulo do painel.
Clique aqui para expandir o painel
Se o Misturador de cores no estiver completamente expandido, clique na seta no canto

inferior direito do painel.
No menu pop-up Estilo de preenchimento, selecione Radial.
Clique no controle deslizante de gradiente esquerda da barra de gradiente para selecion-lo.
Barra Gradiente
Controle deslizante Gradiente
Clique na caixa de cor do canto superior esquerdo da janela para abrir a paleta de cores. Siga
um destes mtodos para selecionar azul escuro:
Digite 000066 na caixa de texto de valor hexadecimal e pressione Enter ou Return.
16
Captulo 1
Mova o conta-gotas pelas amostras de cores at localizar azul escuro com o valor hexadecimal
de 000066 e, em seguida, clique na amostra para selecion-la.
Clique neste tom de azul
Alterar o valor de alfa

No Misturador de cores, a caixa de texto Alfa indica a transparncia da cor, sendo que 0% indica
que a cor completamente transparente e 100% indica que ela completamente opaca.
Especifique um valor de alfa de 0% para criar um gradiente que inclui azul escuro e preto, alm da
cor cinza do Palco que mostrada atravs das reas transparentes do gradiente.
No Misturador de cores, digite 0 na caixa de texto Alfa e pressione Enter ou Return ou mova o
controle deslizante Alfa para 0.
Adicionar uma segunda cor ao gradiente

Agora voc adicionar preto ao gradiente.
1
No Misturador de cores, clique no controle deslizante de gradiente direita da barra de

gradiente para selecion-lo.
17
Clique na caixa de cor para abrir a paleta de cores e selecione a opo de preto com um valor
hexadecimal de 000000.
Lembre-se de que possvel digitar o valor hexadecimal na caixa de texto Hexadecimal e
pressionar Enter ou Return ou pode localizar e selecionar a caixa de cor com o mesmo valor
hexadecimal.
Transformar o preenchimento de gradiente

Ao transformar um objeto, ele girado, dimensionado ou inclinado. possvel modificar um
preenchimento utilizando a ferramenta Transformar preenchimento.
1
Na caixa de ferramentas, selecione a opo Transformar preenchimento. No Palco, clique em

qualquer ponto do retngulo.
Uma elipse que indica a forma e a posio do gradiente aparece em volta do Palco. Essa elipse
possui controles para o local, a largura, a dimenso e a rotao do gradiente radial.
Centralizar posio
Largura
Redimensionar
Rotao
18
Captulo 1
Arraste o controle do centro para a esquerda do Palco de forma que ele fique a
aproximadamente1/3 da distncia da borda esquerda do Palco, conforme mostrado na
ilustrao a seguir.
medida que altera a forma e a posio da elipse, a forma e a posio das transies de cores no
Palco tambm so modificadas.
3
Arraste a ala quadrada da elipse, que controla a largura do gradiente, para a esquerda para
tornar a elipse mais estreita; a forma aproximada da elipse mostrada na ilustrao a seguir.
19
Arraste a ala intermediria circular, que controla o tamanho do gradiente, para a direita para
tornar a elipse maior, conforme mostrado na ilustrao a seguir.
Arraste a ala circular inferior, que controla a rotao da elipse, para a esquerda para girar a
elipse para o ngulo aproximado mostrado na ilustrao a seguir.
Nomear e bloquear uma camada

A forma de gradiente aparece na Camada 1 da Linha de tempo, no momento a nica camada do
documento. Como preparao para adicionar e mover outros objetos no Palco, voc renomear e
bloquear a camada. Na prxima seo do tutorial, voc criar uma nova camada.
20
Captulo 1
Conforme aprendeu na aula Entendendo camadas, ao bloquear a camada, voc garante que outros
usurios (ou voc mesmo) no faam alteraes inadvertidamente aos objetos na camada.
1
Na Linha de tempo, clique duas vezes no nome da Camada 1 e digite Fundo para renomear a
camada.
Clique fora do nome da camada e clique no cone do cadeado para bloque-la.

Ao desenhar no Flash, cria arte vetorial, que uma representao matemtica de linhas, curvas,
cores e posies. A arte vetorial no depende da resoluo. possvel redimensionar a arte para
qualquer tamanho ou exibi-la com qualquer resoluo sem perda de definio. Alm disso, o
download da arte vetorial mais rpido do que das imagens de bitmap equivalentes.
O arquivo finalizado contm formas de fundo ao longo do gradiente. Use a ferramenta Oval para
criar as formas.
Especificamente, nesta seo voc aprender a realizar as seguintes tarefas:
Adicionar uma camada

Criar e recortar formas
Mascarar a camada que contm as formas
Para concluir esta seo, possvel continuar a trabalhar no arquivo mystiletto.fla ou pode navegar
para a pasta do aplicativo Flash MX e abrir Tutorials/FlashIntro/stiletto2.fla. Se usar o arquivo
stiletto2.fla, salve-o com outro nome na pasta My_Stiletto para manter uma verso inalterada do
arquivo original.
Adicionar uma camada
Em vez de criar as formas na camada Fundo, voc adicionar outra camada na qual desenhar as
formas.
1
Para adicionar uma nova camada, escolha Inserir > Camada ou clique no boto Inserir camada.
D o nome de Formas nova camada.
boto Inserir camada
Na caixa de ferramentas, selecione a ferramenta Oval.
No Inspetor de propriedades, selecione Linha fina no menu pop-up Estilo do trao. Clique
no controle Cor do trao. Na paleta de cores, selecione o cinza com um valor hexadecimal
de 999999.
Lembre-se de que possvel inserir o valor hexadecimal na caixa de texto hexadecimal ou
localizar e clicar na amostra de cor com o mesmo valor hexadecimal.
21
Se o Misturador de cores no estiver aberto, escolha Janela > Misturador de cores. No menu
pop-up Estilo de preenchimento, selecione Slido. Clique no controle Cor do preenchimento
para selecion-lo. No campo R (vermelho), digite 109. Nas caixas de texto G (verde) e B (azul),
digite 45 e pressione Enter ou Return.
Voc est especificando os valores para a quantidade de vermelho, verde e azul de uma cor.
Na Linha de tempo, verifique se a camada Formas est selecionada. No Palco, limite a forma
oval a um crculo pressionando Shift medida que arrasta para desenhar um crculo que se
estende da rea da tela acima do Palco para a rea abaixo do Palco.
Observao: Se cometer um erro, escolha Editar > Desfazer e tente novamente.
22
Selecione a ferramenta Seta na caixa de ferramentas e clique duas vezes no crculo no Palco para
selecionar o preenchimento e o trao.
Se o painel Transformar no estiver aberto, escolha Janela > Transformar.
Captulo 1
Para expandir o painel Transformar, clique na seta branca do canto superior direito. Selecione
Inclinar e digite 20.0 na caixa de texto Inclinar horizontalmente e, em seguida, pressione Enter
ou Return.
O crculo desenhado convertido em uma forma oval inclinada.
Criar e transformar uma forma duplicada

Agora voc criar e transformar uma forma oval duplicada.
23
Com as opes de preenchimento oval e trao ainda selecionadas no Palco, escolha Editar >
Duplicar.
No Inspetor de propriedades, use o controle Cor do preenchimento para selecionar preto.
Na caixa de ferramentas, selecione a opo Transformao livre.

Uma guia com alas aparece em volta da forma oval duplicada.
24
Captulo 1
Mova o ponteiro sobre uma ala de canto at aparecer um indicador diagonal com setas nas
duas extremidades. Arraste a ala de canto para dentro para tornar menor a forma oval.
Verifique se o trao da forma oval interior no toca o trao da exterior.
Mova o ponteiro acima da ala de canto at que ele se transforme em um indicador de rotao
circular. Arraste o indicador de rotao para a esquerda para girar a forma oval para a posio
aproximada mostrada na ilustrao a seguir.
Crie um recorte com a cpia

Ao criar uma forma sobre outra na mesma camada e as duas tm cores diferentes, alm de estarem
desagrupadas, a forma na frente recorta a rea da forma sob ela. Voc excluir a cpia oval para
exibir o efeito do recorte.
25
26
Com a guia da ferramenta Transformao livre em torno da cpia oval, clique em qualquer
lugar do Palco ou da tela, distante das formas e, em seguida, clique no preenchimento da forma
oval interior. Pressione a tecla Delete para excluir o preenchimento.
A forma oval agora possui um trao interno e outro externo. Com a tecla de seta, clique no
trao mais externo da forma oval para selecion-lo e clique pressionando a tecla Shift para
selecionar o trao interno tambm. Arraste os traos ligeiramente para a direita do
preenchimento, conforme mostrado na ilustrao a seguir.
Captulo 1
Agora, cada rea da cor do preenchimento contida na rea dividida pelo trao representa um
segmento discreto que pode ser colorido individualmente. Selecione uma rea do preenchimento da forma e utilize o Misturador de cores para alterar a cor do preenchimento para um
tom de marrom com R (vermelho) com valor de 117, um G (verde) com valor de 78 e um
B (azul) com valor de 53. Se desejar, repita esta etapa para alterar outra rea de preenchimento
com um tom mais claro de marrom, conforme mostrado na ilustrao a seguir:
Selecione a ferramenta Transformao livre. Arraste em volta das formas de fundo ovais para
selecionar todas as formas e, em seguida, arraste a ala de canto direita da guia para aumentar as
formas, conforme mostrado na ilustrao a seguir.
27
Arraste as formas do Palco para que parte da curva seja mostrada no canto superior esquerdo e
lado direito do Palco.
Observao: Lembre-se de salvar seu arquivo com freqncia enquanto conclui o tutorial.
Criar uma mscara

A arte criada na camada Formas estende-se para alm dos limites do Palco, para dentro da rea da
tela. Embora esta rea no aparea no filme publicado, a arte alm do Palco pode ser um elemento
dispersivo no ambiente de criao. Embora seja possvel apagar parte das formas que se estendem
para a tela, uma soluo melhor aplicar uma mscara sobre o Palco para que a nica rea sob essa
mscara todo o Palco, neste caso permanea visvel. Assim, se quiser retornar s formas para
modific-las, elas estaro intactas.
28
Com a camada Formas selecionada, adicione uma nova camada Linha de tempo e denominea Mscara.
Na caixa de ferramentas, selecione a opo retngulo e desenhe um retngulo do canto superior

esquerdo ao canto inferior direito do Palco.
Captulo 1
Este retngulo a forma da mscara. Qualquer item sob o retngulo estar visvel.
Clique com o boto direito do mouse (Windows) ou clique com a tecla Control pressionada
(Macintosh) no nome da camada Mscara na Linha de tempo e escolha Mscara no menu de
contexto.
29
A camada convertida em uma camada de mscara, indicada por um cone de direo para
baixo. A camada imediatamente abaixo est vinculada camada de mscara e seu contedo
exibido atravs da rea preenchida da mscara. O nome da camada mascarada recuado, e seu
cone muda para uma seta apontando para a direita. A arte na tela no est mais visvel no
Palco.
As camadas da mscara devem estar bloqueadas para que o efeito Mscara seja mostrado. Para
editar as formas, desbloqueie as camadas Mscara e Formas de fundo. Ao terminar de editar a
arte, bloqueie as camadas novamente para ativar a mscara.
4
Salve o arquivo.

Alm de criar arte vetorial no Flash, possvel importar imagens de bitmap, que utilizam pixels
para exibir grficos, para o filme do Flash e aplicar vrios efeitos de cor. Nesta seo, voc realizar
as seguintes tarefas:
Importar imagens de bitmap

Modificar a compactao de bitmap
Criar e editar um smbolo de clipe de filme
Interpolar efeitos de bitmap para fazer com que as exibies do carro surjam e desapaream
gradualmente
Para concluir esta seo, continue a trabalhar no arquivo mystiletto.fla ou navegue para a pasta do
aplicativo Flash MX e abra Tutorials/FlashIntro/stiletto3.fla. Se usar o arquivo stiletto3.fla, salve-o
com outro nome na pasta My_Stiletto para manter uma verso inalterada do original.
Importar imagens para a biblioteca
Ao importar um arquivo para o Flash, pode import-lo diretamente para a biblioteca.
1
30
Na Linha de tempo, adicione uma nova camada e denomine-a Imagens.
Captulo 1
Escolha Arquivo > Importar para biblioteca.

Ao selecionar Importar para biblioteca em vez de Importar, as imagens devem ser colocadas no
Palco antes de aparecerem.
Navegue para a pasta Tutorials/FlashIntro/Assets contida na pasta do aplicativo Flash MX e

selecione view1.png. Em seguida, clique pressionando a tecla Shift para adicionar view2.png e
view3.png seleo. Clique em Abrir.
Na caixa de dilogo Configuraes de importao do Fireworks PNG, clique em Importar

como um nico bitmap achatado e, a seguir, clique em OK.
As trs imagens agora esto na biblioteca.
Modificar a compactao de bitmap

Ao importar uma imagem, pode verificar e modificar as configuraes de compactao dessa
imagem. Embora a compactao de imagens reduza o tamanho de arquivo do filme, ela pode
afetar a qualidade da imagem; o objetivo atingir o equilbrio entre as configuraes de
compactao e a qualidade da imagem.
1
Se o painel Biblioteca no estiver aberto, escolha Janela > Biblioteca. Se necessrio, aumente a
janela para ver os trs arquivos importados.
Clique duas vezes no arquivo view1.png.

A compactao JPEG a seleo padro.
No menu pop-up Compactao, selecione Sem perdas (PNG/GIF) para obter uma maior
qualidade de imagem.
31
Para ver qual ser a aparncia da imagem com a nova configurao, clique em Testar. Arraste o
carro para exibi-lo na janela de visualizao, caso necessrio. Quando terminar de visualizar a
imagem, clique em OK.
Volte ao painel Biblioteca. Clique duas vezes em view2.png, repita a etapa 3 e clique em OK.
No painel Biblioteca, clique duas vezes em view3.png, especifique Sem perdas (PNG/GIF) e
clique em OK.
Criar um smbolo de clipe de filme

No arquivo finalizado, trs exibies do carro eltrico aparecem e desaparecem gradualmente na
cena de abertura. Esse efeito obtido pela criao de um smbolo de clipe de filme que possui
uma Linha de tempo independente da Linha de tempo principal. Em seguida, interpole a
transparncia alfa entre as trs exibies do carro para criar um efeito de aparecimento/
desaparecimento gradual. Para comear a criar o efeito, crie o clipe de filme.
32
Com a camada Imagens ainda selecionada na Linha de tempo, arraste o objeto view1.png do
painel Biblioteca para o Palco, colocando o carro na rea em que o fundo gradiente mais
claro.
Escolha Inserir > Converter em smbolo ou pressione F8.
Captulo 1
Na caixa de dilogo Converter em smbolo, d o nome Animao de carro ao smbolo.

Verifique se a opo Clipe de filme est selecionada, se a centralizao de quadrado foi
escolhida no indicador Registro e clique em OK.
Os bitmaps, assim como outros objetos do Flash, tm pontos de registro utilizados para
posicionamento e transformao. Ao alinhar as trs exibies do carro no clipe de filme,
todas elas devem se alinhar em relao a um ponto de registro central.
Ponto de registro
Editar um smbolo
Para exibir a Linha de tempo do clipe de filme, necessrio estar no modo de edio de smbolo.
Ao abrir o modo de edio de smbolo clicando duas vezes no smbolo no Palco ou no painel
Biblioteca.
1
No Palco, clique duas vezes no carro para abrir o modo de edio de smbolo.
O nome do smbolo aparece acima da rea da tela, junto com um vnculo Cena 1 que o leva de
volta ao filme principal.
No modo de edio de smbolo, a Linha de tempo do clipe de filme estar sendo exibida, em
vez da Linha de tempo do filme principal.
Mude o nome da Camada 1 para Exibio do fade 1.
O carro apresentado no Palco uma imagem de bitmap, e no um smbolo, dentro do smbolo

Animao de carro. Crie o smbolo do carro selecionando-o no Palco e pressionando F8.
Na caixa de dilogo Converter em smbolo, d o nome Exibio do carro 1 ao smbolo e

verifique se a opo Clipe de filme est selecionada.
Verifique se a centralizao de quadrado est selecionada no indicador Registro e clique em

OK.
Percorra a Linha de tempo horizontalmente at chegar ao quadro 105. Selecione o quadro e

escolha Inserir > Quadro-chave ou pressione F6 para adicionar um quadro-chave.
O indicador Quadro atual exibe o quadro selecionado.
Quadro atual
Adicione quadros-chave aos quadros 25 e 35.
33
Adicione um quadro-chave ao quadro 34, clique em qualquer ponto da camada entre os

quadros 36 e 104 e pressione a tecla Delete.
Um quadro-chave vazio aparecer no quadro 35. Alm disso o carro no aparecer no Palco a
partir do quadro 35 em diante.
Observao: Se cometer um erro ao adicionar quadros-chave e quiser exclu-los, selecione um ou mais quadros
e clique com o boto direito do mouse (Windows) ou pressionando a tecla Control (Macintosh) e escolha Limpar
quadro-chave no menu contextual.
Interpolar efeitos de bitmap

A criao de um efeito de bitmap semelhante criao de uma interpolao de movimento
direta: necessrio especificar as configuraes para os quadros-chave inicial e final e a
interpolao desses quadros e dos quadros intermedirios. O Flash cria a animao de transio
do primeiro quadro-chave na animao do ltimo.
1
Na Linha de tempo Animao de carro, selecione o quadro 34 e clique em Exibio do carro 1

no Palco para que o Inspetor de propriedades aparea exibindo as propriedades do clipe de
filme.
No menu pop-up Cor do Inspetor de propriedades, selecione Alfa. No menu pop-up Valor de
alfa, digite 0% na caixa de texto e pressione Enter ou Return, ou utilize o controle deslizante
pop-up para selecionar 0%.
Retngulo de delimitao
Na Linha de tempo, selecione qualquer quadro entre os de nmero 25 e 34. No Inspetor de

propriedades, selecione Movimento no menu pop-up Interpolar.
Uma seta com uma linha slida atravessa os quadros-chave interpolados. Uma linha tracejada
entre os quadros-chave indica que a interpolao no est implementada corretamente, o que
ocorre com freqncia quando um quadro-chave inicial ou final excludo acidentalmente.
34
Captulo 1
Aparecimento gradual do segundo carro

medida que a Exibio do carro 1 desaparecer, outra exibio de carro dever aparecer
gradualmente.
1
Adicione uma nova camada Linha de tempo Animao de carro e d a ela o nome de
Exibio do carro 2.
Na camada Exibio do fade 2, adicione um quadro-chave ao quadro 25.
Com a reproduo ainda no quadro 25, arraste view2.png do painel Biblioteca para o Palco.
Se o painel de informaes no estiver visvel, escolha Janela > Info. Verifique se a centralizao
de quadrado est selecionada no indicador Registro e digite 0 na caixa de texto da coordenada
X e tambm 0 para a coordenada Y. Pressione Enter ou Return.
O Inspetor de propriedades tambm tem caixas de texto X e Y; entretanto, essas coordenadas
so relativas a um ponto de registro no canto superior esquerdo do clipe de filme.
Selecione view2.png no Palco e pressione F8 para torn-lo m smbolo. Na caixa de dilogo

Converter em smbolo, d o nome Exibio do carro 2 ao smbolo. Verifique se a opo Clipe
de filme est selecionada e clique em OK.
No Inspetor de propriedades de clipe de filme, selecione Alfa no menu pop-up Cor e digite 0%
na caixa de texto Valor de alfa.
Adicione um quadro-chave ao quadro 35 da camada Exibio do fade 2.
No Palco, clique dentro do retngulo de delimitao do carro transparente. No Inspetor de

propriedades de clipe de filme, insira 100% na caixa de texto Valor de alfa.
Na camada Exibio do fade 2, selecione qualquer quadro entre os de nmero 25 e 34. No

Inspetor de propriedades, selecione Movimento no menu pop-up Interpolar.
Desaparecimento do segundo carro

Agora voc criar a animao que faz com que o segundo carro desaparea.
1
35
Nessa mesma camada, adicione um quadro-chave ao quadro 70 e outro ao quadro 69.
Selecione o quadro-chave do quadro 69 da camada Exibio do quadro 2. Selecione a Exibio

do carro 2 no Palco e utilize o Inspetor de propriedades para selecionar uma transparncia alfa
de 0%.

Clique em qualquer quadro na camada Exibio do fade 2 entre os quadros 71 e 105 e

pressione a tecla Delete.
Aparecimento do terceiro carro

medida que o segundo carro desaparece, o terceiro aparece gradualmente. Voc criar essa
animao agora.
1
Com a camada Exibio do Fade 2 selecionada, adicione uma nova camada Linha de tempo e
d a ela o nome Exibio do fade 3.
Com o quadro 60 ainda selecionado, arraste o arquivo view3.png do painel Biblioteca para o
Palco. Utilize o painel de informaes (escolha Janela > Info se ele estiver fechado) para
especificar 0 para as coordenadas X e Y e para verificar se o ponto de registro est centralizado,
como foi feito para o arquivo view2.png.
Selecione view3.png no Palco e pressione F8 para torn-lo um smbolo. Na caixa de dilogo

Converter em smbolo, d o nome Exibio do carro 3 ao smbolo. Verifique se a opo Clipe
de filme est selecionada e clique em OK.
No Inspetor de propriedades, selecione Alfa no menu pop-up Cor e digite 0% na caixa de texto
Valor de alfa.
Adicione um quadro-chave ao quadro 70 da camada Exibio do fade 3.
No Palco, selecione dentro do retngulo de delimitao da Exibio do carro 3. No Inspetor de

propriedades, insira 100% na caixa de texto Valor de alfa.

Desaparecimento do terceiro carro

Agora voc criar a animao que faz com que o terceiro carro desaparea.
36
Captulo 1
Na camada Exibio do fade 3, adicione um quadro-chave aos quadros 95 e 105.
Com o quadro 105 selecionado na camada Exibio do fade 3, selecione a Exibio do carro 3
no Palco e utilize o Inspetor de propriedades para selecionar uma transparncia alfa de 0%.

Aparecimento do primeiro carro

medida que o terceiro carro desaparece, o primeiro aparece novamente para concluir a
animao.
1
Com o quadro 95 ainda selecionado, arraste o clipe de filme Exibio do carro 1 (e no

view1.png) do painel Biblioteca para o Palco.
No painel de informaes, digite 0 na caixa de texto da coordenada X e 0 tambm para a

coordenada Y. Pressione Enter ou Return.
No Inspetor de propriedades, selecione alfa no menu pop-up Cor e insira 0% na caixa de texto
Valor de alfa.
Selecione o quadro 104 da camada Exibio do fade 1.
Clique dentro do retngulo de delimitao do clipe de filme Exibio do carro 1 no Palco. No

Inspetor de propriedades, insira 100% na caixa de texto Valor de alfa.

Testar o filme
Em qualquer ponto durante a criao, possvel testar o modo como o filme ser reproduzido
como um arquivo SWF.
1
Salve o seu filme e escolha Controlar > Testar Filme.

O Flash exporta uma cpia em SWF do seu filme.
No filme SWF, a animao reproduzida automaticamente de forma contnua.
Ao terminar de exibir o filme, feche o arquivo SWF clicando em sua caixa de fechamento. No
documento do Flash, escolha Editar > Editar documento ou clique em Cena 1 para retornar
Linha de tempo principal.
Carregar texto dinmico em tempo de execuo.

Na aula Adicionando e editando texto voc treinou a digitao de texto diretamente no Palco.
Tambm possvel criar um filme e incluir texto de fontes externas nele. Uma das maneiras mais
fceis de fazer isso utilizando a ao loadVariables. Ela serve para carregar texto de um arquivo
em um campo de texto dinmico durante o tempo de execuo. No arquivo FLA, possvel
especificar atributos de texto, como o estilo da fonte, o tamanho e a cor do campo de texto
dinmico. A vantagem de manter o texto em arquivos externos que qualquer usurio que queira
modificar o texto pode trabalhar com o arquivo de texto em vez do arquivo FLA.
Nesta seo, voc aprender a realizar as seguintes tarefas:
37
Importar e alinhar um logotipo

Criar um campo de texto dinmico
Utilizar o Inspetor de propriedades para atribuir um nome de varivel de texto
Utilizar a ao loadVariables para carregar texto de um arquivo externo
Para concluir esta seo, continue a trabalhar no arquivo mystiletto.fla ou navegue at a pasta do
Importar o logotipo
Antes de criar o campo de texto dinmico, importe o logotipo, um arquivo do Macromedia
FreeHand para o qual o Flash automaticamente adiciona uma camada na Linha de tempo.
1
Na Linha de tempo, selecione a camada Imagens e adicione uma nova camada acima dela. D
o nome de Cpia nova camada.
Com a camada Cpia selecionada, escolha Arquivo > Importar.

Anteriormente no tutorial, voc importou objetos para a biblioteca. Agora voc importar o
logotipo para que ele aparea no Palco.
38
Navegue na pasta do aplicativo Flash MX at a pasta Tutorials/FlashIntro/Assets e clique em

logo.fh10 e em Abrir.
Na caixa de dilogo Importar do FreeHand, verifique se as opes Cenas, Camadas e Tudo

esto selecionadas. Verifique tambm se as opes Incluir camada de fundo e Manter blocos de
texto esto selecionadas e clique em OK.
Na Linha de tempo, o Flash criou uma camada denominada Logo. Arraste o nome Logo para
mover a camada para baixo da camada Cpia.
possvel especificar coordenadas de Palco para o logotipo. No Inspetor de propriedades, com

o logotipo selecionado, digite 10 na caixa de texto X e 20 na caixa de texto Y. Em seguida,
pressione Enter ou Return.
Captulo 1
Na Linha de tempo, bloqueie a camada Logo.
Criar um campo de texto dinmico

Agora voc criar um campo de texto dinmico. Em vez de digitar texto no campo, especifique o
texto varivel que ser carregado no campo em tempo de execuo.
1
Na Linha de tempo, selecione a camada Cpia. Na caixa de ferramentas, selecione a ferramenta

Texto. No Inspetor de propriedades, selecione Texto dinmico no menu pop-up Tipo de texto.
No menu pop-up Fonte, selecione _sans.

_sans uma fonte de dispositivo apropriada para texto pequeno que aparece em vrias
plataformas de computador. Para obter mais informaes sobre fontes de dispositivo, consulte
Usando fontes de dispositivo (somente texto horizontal), em Ajuda > Usando o Flash.
Na caixa de texto Tamanho de ponto, digite 12.
Clique na caixa Cor do texto (preenchimento) e selecione amarelo com um valor hexadecimal
de FFCC00.
No menu pop-up Tipo de linha, selecione Multilinha, que a opo para vrias linhas de texto
que sero quebradas.
Menu pop-up Tipo de texto
Menu pop-up Fonte
Caixa de texto Tamanho do ponto
Menu pop-up Tipo de linha
39
No Palco, clique abaixo do logotipo. Arraste o ponteiro para criar um campo de texto com a
largura do texto do logotipo e a profundidade aproximada da linha vertical agrupada ao logo,
conforme mostrado na ilustrao a seguir.
No Inspetor de propriedades, digite textField na caixa de texto Var.
O arquivo de texto que ser carregado no campo de texto dinmico, conforme mostrado na
ilustrao a seguir, inclui texto que nomeia a varivel: textField=. Ao inserir este nome na caixa
de texto Var, estar nomeando a varivel que o filme dever carregar.
Usar a ao loadVariables para carregar texto

A ao loadVariables contm um parmetro para especificar o caminho para o texto da varivel. O
texto est em um arquivo denominado copy.txt, na pasta Tutorials/FlashIntro/Assets.
1
Na Linha de tempo, adicione uma nova camada e denomine-a Aes. Se necessrio, arraste a
camada Aes para o incio da Linha de tempo.
uma boa prtica manter as aes na camada superior de uma Linha de tempo.
Se o painel Aes no estiver aberto, escolha Janela > Aes. Aumente o painel Aes, se
necessrio, clicando na seta branca da barra de ttulo para expandir a janela e arrastando o
canto inferior direito do painel para exibir a caixa de ferramentas Aes e o painel Script.
O tipo de painel Aes exibido depender do objeto ao qual a ao est sendo adicionada. Se
selecionou um quadro, por exemplo, o painel Aes exibir opes para quadros. Caso tenha
selecionado um boto, esse painel exibir opes para botes.
40
Captulo 1
Clique no tringulo no canto superior direito da barra de ttulo do painel para exibir o menu
pop-up. Verifique se o modo Normal, em vez do modo Especialista, est selecionado.
O modo Especialista oferece recursos teis para os usurios experientes no uso do ActionScript.
No modo Normal, campos de parmetro e controles orientam na criao de itens do
ActionScript.
Boto do menu Opes
Caixa de ferramentas Aes
Painel Script
Na caixa de ferramentas Aes, escolha Aes > Navegador/Rede e clique duas vezes em
loadVariables.
O ActionScript adicionado ao painel Script. Os parmetros da ao aparecem acima do
painel Script.
41
Na caixa de texto URL, digite o caminho para o arquivo de texto: ../assets/copy.txt.
Testando seu filme
Salve o filme e escolha Controlar > Testar filme.

Tambm possvel pressionar Control+Enter (Windows) ou Command+Return (Macintosh).
Adicionar qualidades de animao e navegao a botes

Ao especificar que um novo smbolo um boto, o Flash cria a Linha de tempo para os estados do
boto. Na aula Criando botes voc aprendeu a alterar a cor de preenchimento de uma forma
dentro de um estado de boto. Nesta seo, voc saber mais sobre como modificar botes e isso
inclui como adicionar animao a um boto.
Especificamente, nesta seo voc aprender a realizar as seguintes tarefas:
Importar uma biblioteca de outro arquivo FLA

Alinhar botes
Adicionar animao a um estado de boto
Adicionar navegao a um boto para vincul-lo a um site da Web
Usar o recurso Ativar botes simples
Adicionar navegao ao boto
42
Captulo 1
Importar a biblioteca de outro arquivo FLA

Os botes utilizados no filme residem na biblioteca de outro arquivo FLA. Para us-los, abra o
arquivo FLA que os contm como uma biblioteca.
1
Com o painel Biblioteca aberto, escolha Arquivo > Abrir como biblioteca. Navegue na pasta do
aplicativo Flash MX at a pasta Tutorials/FlashIntro/Assets e clique duas vezes em buttons.fla.
Alm da biblioteca do documento, a biblioteca do arquivo buttons.fla tambm aparece.
Alinhar botes
possvel alinhar os trs botes ao longo de eixos verticais e horizontais com o painel Alinhar.
1
Na Linha de tempo, com a camada Cpia selecionada, adicione uma nova camada e
denomine-a Botes. Bloqueie todas as camadas, com exceo de Botes.
No menu pop-up Exibio do palco, direita e acima do Palco, insira 150% para aumentar a
exibio do Palco. Em seguida, role para o lado inferior direito do Palco.
Arraste o Boto 1 do painel Biblioteca buttons.fla e coloque-o no canto inferior direito do

campo de texto dinmico.
Ao arrastar um boto do painel Biblioteca buttons.fla, ele se torna parte da biblioteca do

documento.
43
Arraste o Boto 2 e o Boto 3 do painel Biblioteca buttons.fla, colocando-os esquerda de

Boto 1. Use o espaamento apropriado mostrado na ilustrao a seguir:
Com a ferramenta Seta, arraste para selecionar os trs botes.
Para abrir o painel Alinhar, escolha Janela > Alinhar. Certifique-se de que a opo 'No palco'
no est selecionada. Voc no deseja alinhar os botes em relao ao Palco. Clique em Alinhar
centro verticalmente e em Distribuir centro horizontalmente.
Alinhar centro verticalmente
Para o Palco
Distribuir centro horizontalmente
Os botes so alinhados no Palco.

Ativar botes simples
Quando o recurso Ativar botes simples est selecionado, possvel ouvir os sons includos nos
Botes 2 e 3, alm de exibir as cores utilizadas nos estados de botes. Itens de botes mais
complexos, como animao, no so reproduzidos.
1
Escolha Controlar > Ativar botes simples e role sobre e clique em cada boto.
O boto da direita, Boto 1, no est finalizado. Ele ser modificado a seguir.
Ao terminar de testar os botes, escolha Controlar > Ativar botes simples para desmarcar esse
recurso.
Modificar o estado de um boto

Voc criar um clipe de filme no estado Sobre do Boto 1 e uma interpolao de forma no clipe de
filme. A interpolao de forma gera um efeito que altera a cor de cinza para vermelho.
44
Captulo 1
No Palco, clique duas vezes no boto da direita, Boto 1, para abrir o modo de edio de
smbolo.
Na Linha de tempo do Boto 1, oculte todas as camadas menos a camada Cor. Na camada Cor,
selecione o quadro-chave Sobre.
No Palco, selecione a forma oval preta para o boto da direita. Pressione F8 para transformar a
forma oval em um smbolo. Na caixa de dilogo Converter em smbolo, d o nome Animao
de boto ao smbolo. Selecione Clipe de filme e clique em OK.
No Palco, clique duas vezes no smbolo Animao de boto para abrir o modo de edio de
smbolo.
Renomeie a Camada 1 como Alterao de cor e adicione um quadro-chave ao quadro 15.
Com a reproduo ainda no Quadro15, selecione a forma de boto no Palco e escolha um tom
vivo de vermelho no menu pop-up Cor do preenchimento na caixa de ferramentas.
Na Linha de tempo, clique em qualquer quadro entre os de nmero 1 e 13. No Inspetor de

propriedades, selecione Forma no menu pop-up Interpolar.
Arraste a reproduo dos quadros 1 ao 15 para ver a alterao da cor.
Adicionar aes a botes

Quando o usurio clicar em um boto e a animao interpolada for reproduzida, a reproduo
dever ir para o final da Linha de tempo Animao do boto e ento ser interrompida. Utilize o
ActionScript, a linguagem de script do Flash, para controlar o movimento de reproduo em uma
Linha de tempo.
1
Adicione uma nova camada Linha de tempo Animao do boto e denomine-a Aes.
Na camada Aes, adicione um quadro-chave ao quadro15.
Se o painel Aes no estiver aberto, escolha Janela > Aes. Aumente o painel, se necessrio,
para exibir a caixa de ferramentas Aes e o painel Script.
45
Com o quadro 15 da camada Aes selecionado, v para a categoria Aes > Controle do
filme da caixa de ferramentas Aes e clique duas vezes em stop.
A ao stop permite especificar que a reproduo ser interrompida quando chegar ao
quadro 15.
Na Linha de tempo Animao de boto, o Quadro 15 da camada Aes exibe agora um a

minsculo que indica a existncia de uma ao anexada a esse quadro.
Adicionar navegao ao boto

Utilize a ao getURL para adicionar navegao a um boto que abre um site da Web.
46
Escolha Editar > Editar documento ou clique em Cena 1 para retornar ao filme principal.
No Palco, clique em Boto 1, o boto direita.
No painel Aes, escolha Aes > Navegador/Rede e clique duas vezes em getURL.
Na caixa de texto URL, digite qualquer URL completa, como http://www.macromedia.com.
Captulo 1
No menu pop-up Janela, selecione _blank para iniciar uma nova janela do navegador quando o
usurio clicar no Boto 1.
Salve o arquivo e escolha Controlar > Testar filme. Clique no Boto 1 para ir para o site da Web
especificado na etapa 4.
Feche o navegador e o arquivo SWF e, em seguida, retorne ao ambiente de criao do Flash. Se

desejar, selecione o Boto 2 no Palco e repita as etapas 3 a 7 para vincul-lo a outro site da Web
e, em seguida, repita essas etapas para o Boto 3. Ao terminar de vincular os botes, feche o
painel Aes.

Quando um filme estiver sendo descarregado de uma fonte na Internet, possvel que um som de
fluxo comece a ser reproduzido assim que o incio do arquivo de som tiver sido descarregado.
Esses sons so especialmente adequados como sons de fundo contnuos.
Os sons de evento devem ser completamente descarregados e carregados na RAM antes de sua
reproduo; esses sons so teis para botes. Nesta seo, voc aprender a realizar as seguintes
tarefas:
Adicionar um som de fluxo ao filme

Adicionar um som de evento a um boto
47
Adicionar um som de fluxo

possvel incluir som no filme simplesmente arrastando-o para o Palco. Voc adicionar msica
de fundo que flui e reproduzida durante um determinado nmero de vezes.
1
Na Linha de tempo, com a camada Botes selecionada, adicione uma nova camada e
denomine-a Sons.
Escolha Arquivo > Importar. Na pasta do aplicativo Flash MX, navegue para Tutorials/
FlashIntro/Assets e clique em track1.mp3. Clique pressionando a tecla Control (Windows)
ou Command (Macintosh) para adicionar ping.mp3 seleo e clique em Abrir.
Os arquivos so importados para a biblioteca.
Com a camada Sons selecionada, arraste o som track1.mp3 do painel Biblioteca para o Palco.
Na Linha de tempo, uma pequena representao das ondas sonoras aparece no quadro.
Selecione o primeiro quadro da camada Sons na Linha de tempo. No Inspetor de propriedades,

digite 999 na caixa de texto Repetir para especificar quantas vezes o som poder ser
reproduzido continuamente.
Testar o filme
1
Salve o arquivo e escolha Controlar > Testar filme para ouvir o som.
Quando terminar de reproduzir o filme, clique em sua caixa de fechamento.
Adicionar um som de evento a um boto

Alm de arrastar um som para o Palco, tambm possvel selecionar um som no Inspetor de
propriedades. Utilize esse mtodo para adicionar um som de evento a um boto.
Como voc aprendeu na aula Criando botes, quando um smbolo de boto criado, o Flash
gera quadros para os diferentes estados do boto em relao ao ponteiro do mouse. O quadro
Sobre, por exemplo, representa o estado do boto quando o ponteiro est sobre ele. Outros
quadros/estados de boto so Para cima, Para baixo e rea.
Agora voc adicionar um som de evento a um boto, que faz com que o som seja executado
durante o estado Sobre. Como voc est adicionando o som ao smbolo do boto na biblioteca,
no apenas a uma instncia do smbolo, o som ser reproduzido para cada instncia do boto.
48
No painel Biblioteca, clique duas vezes na instncia do Boto 1 para abrir o modo de edio de
smbolo
Na Linha de tempo do Boto 1, adicione uma nova camada e denomine-a Som.
Selecione o quadro Sobre (quadro 2) da camada Som e escolha Inserir > Quadro-chave ou
pressione F6.
Para definir as propriedades de som, clique duas vezes no quadro 2 da camada Som. No
Inspetor de propriedades, selecione Ping.mp3 no menu pop-up Som. Verifique se a opo
Evento est selecionada no menu pop-up Sinc.
Salve o documento e escolha Controlar > Testar filme para ouvir os sons do boto. Quando
terminar de exibir o arquivo SWF, feche sua janela para retornar ao documento.
Captulo 1
Organizar o painel Biblioteca

No momento, h um bocado de propriedades no painel Biblioteca. Para mant-las organizadas,
fceis de localizar e classificadas por tipo, crie pastas e mova-as para essas pastas.
Dica: Manter o painel da biblioteca organizado uma boa prtica para qualquer filme criado, especialmente porque
outros usurios trabalhando no mesmo arquivo podero localizar as propriedades facilmente.
Se o painel Biblioteca no estiver aberto, escolha Janela > Biblioteca.
Expanda e aumente a janela, conforme necessrio, para exibir todas as propriedades do painel
Biblioteca. Na parte inferior do painel Biblioteca, clique no boto Nova pasta quadro vezes,
para criar quatro pastas novas.
Clique duas vezes no nome da pasta 1 sem ttulo e renomeie-a como Clipes de filme da
animao de carro.
Renomeie as outras trs pastas como Sons, Arte e Botes.
Arraste Exibio do carro 1, Exibio do carro 2, Exibio do carro 3 e Animao de carro para
a pasta Clipes de filme da animao de carro.
Arraste ping.mp3 e track1.mp3 para a pasta Sons.
49
Arraste view1.png, view2.png e view3.png para a pasta Arte.
Arraste Boto 1, Boto 2 e Boto 3 para a pasta Botes. Com a pasta Botes selecionada, clique
em Nova pasta outra vez para criar uma subpasta contida nela.
Denomine a subpasta como Clipes de filme de boto e arraste as propriedades de clipe de filme
de boto restantes para essa pasta.
10
Feche o painel Biblioteca e salve o documento.
Testar o desempenho de download e publicar o filme

Para concluir o documento, utilize o comando Publicar para criar um filme compatvel com a
Web que tenha a extenso SWF.
Se voc usar o comando Publicar com as configuraes padro, o Flash ir preparar o seu arquivo
para a Web. O Flash publicar o SWF e criar um arquivo HTML com as marcas necessrias para
exibio do SWF.
50
Captulo 1
Depois de inserir todas as opes necessrias de Configuraes de publicao, ser possvel

exportar vrias vezes para todos os formatos selecionados, escolhendo apenas Arquivo > Publicar.
O Flash armazena as configuraes de publicao especificadas com o documento, de forma que
cada filme tenha suas prprias configuraes.
Nesta seo, voc aprender a realizar as seguintes tarefas:
Utilizar o Perfil de largura de banda para testar o desempenho de download do filme

Publicar o filme em uma etapa
Revisar e modificar as configuraes de publicao
Exibir o filme em um navegador da Web
Para concluir esta seo, continue a trabalhar no arquivo mystiletto.fla ou navegue para a pasta do
aplicativo Flash MX e abra Tutorials/FlashIntro/stiletto7.fla. Se voc usar o arquivo stiletto7.fla,
salve-o com outro nome na pasta My_Stiletto para manter uma verso inalterada do original.
Testando o desempenho do download do filme
Para que um filme do Flash seja reproduzido corretamente na Internet, um quadro deve ser
descarregado antes que o filme o alcance. Se o filme alcanar um quadro que ainda no foi
descarregado, ele ser interrompido at que os dados cheguem. No entanto, a baixa largura de
banda dos arquivos do Flash favorece downloads rpidos.
Voc pode usar o Perfil de Largura de Banda para testar seu filme e identificar onde podem
ocorrer as pausas. O Perfil da Largura de Banda mostra graficamente o volume de dados enviado
de cada quadro no filme de acordo com a velocidade selecionada do modem.
1
Salve o seu documento e escolha Controlar > Testar filme.
No menu Depurar, selecione uma velocidade de modem para determinar a taxa de download
que o Flash ir simular.
Voc tambm pode escolher Personalizar para inserir uma taxa de download.
51
Escolha Exibir > Perfil da Largura de Banda para ver o SWF com um grfico do desempenho
de download.
A barra sombreada representa o primeiro e nico quadro do filme principal. Os filmes com
vrios quadros tero diversas barras sombreadas. A altura da barra representa o tamanho do
quadro em bytes e kilobytes. As barras que se estendem acima da linha vermelha, especialmente
se a barra representa um quadro diferente do primeiro, indicam que poder haver atrasos na
reproduo do filme. possvel otimizar o filme para obter downloads mais rpidos. Para obter
detalhes, consulte Otimizando os filmes em Ajuda > Usando o Flash.
4
Ao terminar de exibir o Perfil da Largura de Banda, escolha Exibir > Perfil da Largura de Banda
para desmarc-lo. Feche a janela SWF para retornar ao ambiente de criao.
Usando o comando Publicar

possvel publicar o documento do Flash para reproduo na Web em uma etapa.
Com o documento salvo, escolha Arquivo > Publicar.

O Flash publica o seu filme criando um arquivo SWF e possivelmente arquivos adicionais, com
base nos atributos especificados na caixa de dilogo Configuraes de Publicao. Por padro,
os arquivos publicados sero colocados na mesma pasta em o FLA foi salvo.
Exibindo as configuraes de publicao
Com a caixa de dilogo Configuraes de Publicao fcil reconfigurar a forma como o seu
arquivo ser publicado.
52
Captulo 1
Para exibir as configuraes de publicao, escolha Arquivo > Configuraes de Publicao.
Por padro, o Flash configurado para criar um arquivo HTML de suporte que exibe o filme
do Flash.
Quando voc seleciona um formato que exige configuraes adicionais, exibida uma nova
guia.
2
Na guia Formatos, verifique se as opes Flash (.swf ) e HTML (.html) esto selecionadas.
Clique na guia Flash.
Por padro, o filme publicado para o Flash Player. O processo de publicao tambm aplica
compactao de filme e JPEG.
Clique na guia HTML.

O processo de publicao cria um documento HTML, por padro, que insere o arquivo SWF
em uma janela do navegador. As configuraes da guia HTML da caixa de dilogo
Configuraes de publicao determinam como o filme aparece no navegador.
Alterando as configuraes de publicao

Por padro, o Flash atribui ao arquivo SWF o mesmo nome do arquivo FLA. possvel solicitar
ao Flash para alterar o nome.
1
Na guia Formatos da caixa de dilogo Configuraes de Publicao, desmarque Usar nomes

padro.
Na caixa de texto HTML (.html), selecione o texto existente e digite um novo nome como
stilettoElectric.html. Clique em Publicar. Quando a janela de status Publicando for fechada,
clique em OK na caixa de dilogo Configuraes de publicao.
53
Exibir o filme publicado em um navegador

possvel exibir o arquivo HTML e o filme SWF, que voc acabou de publicar, no navegador.
1
Abra o navegador e o arquivo HTML criado.

Por padro, o arquivo HTML fica na mesma pasta que o arquivo FLA.
Ao abrir o arquivo HTML, o filme SWF reproduzido no navegador.
No navegador, utilize um comando como Exibir > Fonte da pgina ou Exibir > Fonte para
exibir o HTML.
As marcas OBJECT e EMBED garantem que o filme SWF seja exibido no navegador.
Para obter mais informaes sobre os modelos de HTML do Flash, consulte Sobre os modelos de
publicao HTML, em Ajuda > Usando o Flash.
As prximas etapas
Ao concluir todas as oito sees do tutorial, voc ter aprendido bastante sobre a criao de filmes
do Flash, inclusive como concluir as seguintes tarefas:
54
Analisar um filme completo

Definir as propriedades do documento e criar um gradiente
Carregar texto dinmico
Modificar botes e adicionar navegao
Testar e publicar um filme
Captulo 1
Aprenda mais sobre os recursos do Flash atravs do Tutorial de introduo ao ActionScript em

Ajuda > Tutoriais. Criado para novatos no uso do ActionScript, o tutorial apresenta os conceitos
de script ao mesmo tempo em que permite criar um quebra-cabea com aes. Alm disso,
possvel procurar artigos e notas tcnicas sobre o Flash MX no premiado Centro de suporte da
Macromedia. Para acessar o site, v para www.macromedia.com e clique em Suporte.
55
56
Captulo 1
CAPTULO 2
Tutorial de introduo ao ActionScript
O ActionScript a linguagem de criao de scripts do Macromedia Flash MX. A linguagem de

criao de scripts uma forma de comunicao com um programa. Pode ser usada para informar
ao Flash o que deve ser feito e para perguntar-lhe o que est acontecendo durante a execuo de
um filme. Essa comunicao bidirecional permite criar filmes interativos. Neste tutorial, sero
examinadas as tarefas envolvidas na criao de um quebra-cabea interativo.
Este tutorial voltado para usurios do Flash iniciantes em ActionScript que desejem trabalhar
para ampliar suas habilidades. necessrio um conhecimento prvio das aes bsicas e saber
atribu-las no painel Aes. Para tirar o mximo proveito deste tutorial, conclua primeiro o
Tutorial de introduo ao Flash MX, em Ajuda > Tutoriais.Voc tambm dever estar
familiarizado com os conceitos apresentados em Escrevendo scripts com o ActionScript e em
Criando a interao com o ActionScript, em Ajuda > Usando o Flash.
Dependendo da sua experincia, este tutorial leva cerca de uma hora para ser concludo, e lhe
ensinar a realizar as seguintes tarefas:
Inicializando o filme
Salvando e recuperando informaes
Exibindo informaes em uma caixa de texto dinmica
Escrevendo uma expresso
Controlando o fluxo de um filme
Criando comandos e reutilizando cdigos
Usando um objeto interno
Testando o filme
Exibindo um filme concludo

Antes de comear a trabalhar no seu prprio filme, exiba uma verso completa do tutorial para ter
uma idia do que ser criado. Alm disso, o tutorial concludo permite examinar a Linha de
tempo, o Movie Explorer, o Palco e o painel Aes para compreender as prticas de criao.
57
Na pasta do aplicativo Flash MX, navegue at Tutorials/ActionScript/Finished. Clique duas

vezes em puzzle.swf para abrir o filme concludo no Flash Player independente.
No filme puzzle.swf, clique no boto OK.

As peas do quebra-cabea sero embaralhadas.
Clique em todos os botes Mostrar/Ocultar.

Observe como os diferentes padres e nmeros de peas so exibidos para orient-lo na
concluso do quebra-cabea.
Clique em uma pea do quebra-cabea e arraste-a para a rea de soluo.

A pea se encaixar no local.
Mantenha pressionada a tecla Shift e clique em uma pea do quebra-cabea.

O nmero da pea ser exibido no crculo abaixo da rea de soluo. Caso fique impedido de
prosseguir, combine o nmero da pea ao seu local na guia do nmero da pea.
Mantenha pressionada a tecla Alt (Windows) ou Option (Macintosh) e clique na pea do

quebra-cabea.
A pea ir girar no sentido horrio.
Ao terminar de exibir o arquivo SWF, voc pode fechar a janela ou deix-la aberta para servir
como uma referncia.
Analisando o arquivo puzzle.fla

til analisar o arquivo FLA concludo para determinar como o autor o elaborou e onde os
elementos do ActionScript esto localizados.
58
Captulo 2
No Flash, escolha Arquivo > Abrir. Na pasta do aplicativo Flash MX, navegue at Tutorials/
ActionScript/Finished e abra o arquivo puzzle.fla.
Agora voc ver o filme do tutorial concludo no ambiente de criao.
Para ver todos os contedos no Palco, escolha Exibir > Ampliao > Mostrar quadro.
O filme s contm um quadro, exibido na Linha de tempo principal do arquivo puzzle.fla. Use
o ActionScript para mostrar e ocultar as vrias caixas de dilogo e guias de padro exibidas no
quebra-cabea.
Para redimensionar a Linha de Tempo e o Palco, arraste a barra que separa o Palco da Linha de
Tempo para cima e para baixo. Role pela Linha de tempo para ver como as camadas esto
organizadas.
Mova esta barra para redimensionar a Linha

de tempo.
Para ver as caixas de dilogo e guias no Palco no ambiente de criao, clique no X vermelho na
coluna Olho direita do nome de uma camada. Um X vermelho indica uma camada oculta.
Clique na coluna Bloquear para bloquear uma camada, o que a impede de ser selecionada. Isso
til quando selecionado um item do Palco que est abaixo de um item em outra camada. A
coluna Contorno, indicada por um quadrado acima da coluna, ativa os contornos de todos os
elementos em uma camada. Isso pode facilitar a visualizao de bordas da forma e agilizar o
funcionamento do Flash.
Selecione Quadro 1 na camada Aes.

O Quadro 1 tem um a minsculo, o que indica a existncia de aes associadas ao quadro.
Para adicionar um elemento do ActionScript a um filme, atribua-o a um boto, quadro ou
clipe de filme. Os scripts de quadro so indicados por um a minsculo em um quadro na Linha
de tempo. Para localizar scripts de boto e clipe de filme, siga um destes procedimentos:
Abra o painel Aes e selecione um script na barra de salto a lista pop-up abaixo da barra de
ttulo do painel Aes.
Selecione botes e clipes de filme no Palco com o painel Aes aberto.
59
Use os botes de filtragem ou a caixa de texto Localizar para procurar o script no Movie
Explorer.
6
Para exibir as aes, escolha Janela > Aes.

O painel Aes ser aberto. Se necessrio, expanda o painel para consultar as aes anexadas ao
quadro.
O painel Aes tem dois modos: normal e especialista. Este tutorial explica como adicionar
aes no modo normal.
Exibindo aes no Movie Explorer

1
Para localizar todas as aes no filme, use o Movie Explorer. Caso no esteja aberto, selecione
Janela > Movie Explorer.
No Movie Explorer, desmarque todos os botes de filtragem, exceto o boto ActionScript.
Alm das aes no Quadro 1 da camada Aes, as aes tambm so includas em cada boto
Mostrar/Ocultar, nos botes nas diversas caixas de dilogo exibidas e em cada pea do quebracabea.
Selecione Arquivo > Fechar para fechar o filme puzzle.fla quando terminar. No salve alteraes
no arquivo concludo.
Inicializando o filme
Todos os filmes tm um estado inicial. Isso mostra a aparncia de um filme antes de ser executado
e de algum interagir com ele. s vezes, necessrio definir propriedades de clipes de filme e
variveis para estabelecer esse primeiro estado. Por exemplo, no arquivo puzzle.fla, determinadas
caixas de dilogo e guias de padro devem estar ocultas no estado inicial.
Cada clipe de filme em um filme do Flash tem um conjunto de qualidades, ou propriedades, que
pode ser manipulado com o ActionScript. Cada uma dessas propriedades identificada por um
nome precedido por um caractere de sublinhado (_). Por exemplo, cada clipe de filme tem uma
propriedade _xscale, uma propriedade _yscale e uma propriedade _rotation, entre outras.
O ActionScript usa variveis para armazenar informaes. Por exemplo, a varivel meu_nome pode
ter o valor Jody Singer. possvel aprender mais sobre variveis na seo Salvando e
recuperando informaes , na pgina 65.
60
Captulo 2
As propriedades e variveis so inicializadas no primeiro quadro de um filme. possvel atribuir

uma ao de quadro na Linha de tempo ou anexar uma ao de objeto a um clipe de filme. No
filme do quebra-cabea, as propriedades dos clipes de filme de guia de padro e caixa de dilogo
so inicializadas no primeiro quadro da Linha de tempo principal.
Abrindo o arquivo inicial
Agora voc est pronto para criar sua prpria verso do filme de tutorial.
1
Escolha Arquivo > Abrir.
Na pasta do aplicativo Flash MX, navegue at Tutorials/ActionScript/Meu_quebra-cabea e

abra o arquivo mypuzzle.fla.
Se for recebida uma mensagem de substituio de fonte, clique em Usar padro.

Voc ver um filme de tutorial parcialmente concludo. O filme poder parecer concludo
porque todos os smbolos esto no lugar no Palco. Entretanto, ainda ser necessrio adicionar
alguns scripts para tornar o filme interativo.
Escolha Arquivo > Salvar como e salve o arquivo com um nome novo e seqencial, como
mypuzzle2.fla, na mesma pasta que mypuzzle.fla.
Fazer uma cpia do arquivo permite concluir o tutorial novamente usando o arquivo
mypuzzle.fla original. Alm disso, se o arquivo for salvo regularmente com um nome novo e
seqencial, ser possvel reverter para um arquivo anterior no caso de um erro que no possa ser
solucionado no seu arquivo atual.
Definindo propriedades de clipe de filme

O filme puzzle.fla tem trs caixas de dilogo: uma avisa quando o quebra-cabea est concludo e
as outras duas perguntam se voc deseja embaralhar as peas do quebra-cabea. Alm disso, vrios
padres e guias so sobrepostos rea de soluo para ajudar os usurios a solucionar o quebracabea. Cada caixa de dilogo, padro e guia um clipe de filme.
Para inicializar o filme, oculte vrios clipes de filme para mostrar somente a caixa de dilogo
inicial e as peas do quebra-cabea. Faa isso definindo suas propriedades _visible como false.
1
Selecione Quadro 1 na camada Aes. Se o painel Aes no estiver aberto, escolha Janela >
Aes.
O painel Aes mostrar aes associadas ao quadro selecionado. O texto aps barras duplas (//)
um texto comentado, que oferece informaes teis para compreender os scripts.
61
Clique no menu pop-up no canto superior direito da barra de ttulo do painel Aes. Verifique
se as opes Modo normal e Exibir nmero da linha esto selecionadas.
No painel Script, clique na linha 4 para selecionar o cdigo comentado //INSERIR o cdigo
aqui.
Na categoria Aes > Aes diversas da caixa de ferramentas Aes esquerda, clique duas vezes
na ao evaluate para adicionar uma linha vazia de cdigo terminada em um ponto-e-vrgula.
Um ponto-e-vrgula (;) em um comando do ActionScript como um ponto (.) em uma frase
comum.
Com o ponto de insero na caixa de texto Expresso do painel Aes, clique no boto Inserir
caminho de destino.
A caixa de dilogo Inserir caminho de destino ser exibida.
Verifique se as opes Pontos, significando notao de pontos, e Absoluto, significando

caminho absoluto, esto selecionadas.
Na caixa de dilogo, ser exibida uma lista de clipes de filme que podero ser selecionados.
Selecione o clipe de filme edges na rvore de clipes de filme e clique em OK.

O seguinte cdigo ser exibido na caixa de texto Expresso:
_root.edges
Um caminho de destino informa ao ActionScript o local de um clipe de filme na estrutura

global de um filme do Flash. A propriedade _root refere-se Linha de tempo principal e o clipe
de filme edges reside no Palco da Linha de tempo principal. Qualquer caminho de destino que
comece com _root chamado de caminho absoluto porque fornece o caminho completo de um
clipe de filme na Linha de tempo principal.
62
Captulo 2
Com o ponto de insero aps _root.edges, digite ._visible = false na caixa de texto Expresso.
Essa linha de cdigo torna o clipe de filme invisvel no Palco.
possvel digitar o cdigo manualmente ou escolher itens do ActionScript nas pastas
Propriedades e Operadores da caixa de ferramentas Aes.
Se cometer um erro ao digitar uma ao e decidir exclu-la, selecione a ao no painel Script e
clique no boto de subtrao (-) no painel Aes.
Na caixa de ferramentas Aes, clique duas vezes novamente na ao evaluate para adicionar
uma linha de cdigo vazia terminada em um ponto-e-vrgula. Repita as etapas 5 e 6, e escolha
o clipe de filme pattern na caixa de dilogo Inserir caminho de destino. Repita a etapa 8,
digitando novamente ._visible = false na caixa de texto Expresso.
10
Continue repetindo as etapas de 4 a 8, escolhendo os clipes de filme image, piecenumbers,

scramblebutton, areYouSure e congrats na caixa de dilogo Inserir caminho de destino, e
digitando ._visible = false para cada clipe de filme. Quando terminar, seu script dever ter a
seguinte aparncia:
11
Escolha Arquivo > Salvar como e digite um novo nome de arquivo. Use um esquema de
nomeao consecutivo, como mypuzzle3.fla, para poder reverter para verses anteriores do
arquivo, se necessrio.
63
Usando o painel Referncia

Durante a criao, se desejar obter informaes adicionais sobre o ActionScript inserido por voc,
selecione a ao na caixa de ferramentas Aes ou no painel Script e clique no boto Referncia. O
painel Referncia, um sistema de ajuda organizado de maneira semelhante ao painel Aes, exibe
informaes sobre a ao selecionada.
Testando sua sintaxe

O ActionScript, como uma linguagem escrita, depende de uma sintaxe correta. Se a sintaxe estiver
incorreta, a ao no ser executada corretamente. O Flash oferece diversas maneiras de testar sua
sintaxe.
1
Clique no menu Opes no canto superior direito da barra de ttulo do painel Aes e escolha
Verificar sintaxe.
Se a sintaxe estiver correta, ser exibida uma mensagem informando que o script no contm
erros.
Se a sintaxe estiver incorreta, ser exibida uma mensagem informando que o script contm
erros. A janela Sada ser aberta e exibir informaes sobre o erro.
64
Clique em OK para fechar a mensagem da sintaxe.
Captulo 2
No modo normal, os erros de sintaxe do ActionScript aparecem realados em vermelho no painel

Script. Se o ponteiro do mouse for movido sobre o erro, uma dica de ferramenta exibir a
mensagem de erro. As mensagens de erro de sintaxe tambm aparecem realadas na rea de status
inferior do painel Aes.
Alm disso, como foi ensinado no Tutorial de introduo ao Flash MX, possvel escolher
Controlar > Testar filme durante a criao para testar se seu filme reproduzido como esperado.
Salvando e recuperando informaes

Para criar um filme interativo e complexo do Flash, necessrio fazer com que o Flash controle as
informaes e a atividade do usurio: botes que foram pressionados, o nome de um usurio, um
trao ou quais sees um usurio visitou. O ActionScript usa variveis para armazenar
informaes que podem ser recuperadas e usadas novamente. possvel declarar uma varivel em
um script em qualquer Linha de tempo e us-la em qualquer outra Linha de tempo no mesmo
filme. necessrio escrever um caminho de destino para uma varivel a fim de usar a varivel em
um script, assim como necessrio escrever um caminho de destino para usar um clipe de filme
em um script.
No arquivo puzzle.fla, o ActionScript usa a varivel dialog para controlar se uma caixa de dilogo
visvel ou no. Quando uma caixa de dilogo exibida, a varivel dialog definida como true.
Quando um usurio clica em um boto em uma caixa de dilogo, a varivel dialog definida
como false. Essa varivel no afeta a visibilidade das caixas de dilogo propriamente ditas. Ela s
um recipiente que retm informaes que podem ser usadas em scripts em todo o filme. No
arquivo puzzle.fla, se a varivel dialog for definida como true, um usurio no poder mover uma
pea do quebra-cabea.
65
Declarando uma varivel e atribuindo um valor a ela

Ao precisar de uma varivel, necessrio primeiro nome-la ou declar-la. Tambm necessrio
atribuir-lhe um valor. possvel fazer as duas coisas de uma s vez ou declarar uma varivel em
um comando e atribuir-lhe um valor em um comando posterior.
O ActionScript usa trs tipos de variveis: variveis locais, variveis globais e variveis da Linha de
tempo. possvel usar a ao var dentro de um bloco de cdigo (designado por chaves {}) para
criar uma varivel local, que desaparece quando o bloco de cdigo termina de ser executado.
possvel usar a ao set variable para criar uma varivel da Linha de tempo anexada Linha de
tempo de um clipe de filme, que pode ser usada em qualquer script no documento. Para obter
mais informaes sobre variveis, consulte Noes bsicas sobre a linguagem ActionScript em
Ajuda > Usando o Flash.
O arquivo puzzle.fla usa as aes var e set variable dependendo da situao. Quando uma
varivel s necessria em um bloco de cdigo, a ao var usada. A varivel dialog definida e
atribuda usando a ao set variable.
Em seguida, declare e atribua um valor varivel dialog:
1
Selecione Arquivo > Abrir e escolha a ltima verso salva de mypuzzle.fla.

Observao: Tambm possvel navegar at a pasta do aplicativo Flash MX e abrir Tutorials/ActionScript/
Finished/puzzle2.fla. Se o arquivo puzzle2.fla for usado, salve-o com um novo nome na pasta Meu_quebracabea para manter uma verso no adulterada do arquivo original.
Selecione Quadro 1 na camada Aes. Se o painel Aes no estiver aberto, escolha Janela >
Aes.
No painel Script do painel Aes, selecione a linha 11, que a ltima linha de cdigo na seo
Inicializar. Na caixa de ferramentas Aes, escolha Aes > Variveis e clique duas vezes na ao
set variable.
Digite dialog na caixa de texto Varivel.
Digite true na caixa de texto Valor. Selecione Expresso, direita da caixa de texto Valor.
A seleo de Expresso informa ao Flash que true no uma seqncia de caracteres literal.
66
Captulo 2
No estado inicial do filme, uma caixa de dilogo visvel no Palco. No entanto, a varivel
dialog deve ser definida como true no incio do filme; caso contrrio, um usurio poder
mover as peas do quebra-cabea antes de elas serem embaralhadas.
nomeao consecutivo para poder reverter para verses anteriores do arquivo, se necessrio.
Exibindo informaes em uma caixa de texto dinmica

As caixas de texto dinmicas podem exibir contedos alterados em um filme do Flash. Use o
Inspetor de propriedades para criar uma caixa de texto dinmica e atribuir-lhe um nome de
varivel. O valor da varivel exibido no campo de texto.
No arquivo puzzle.fla, uma caixa de texto dinmica exibe nmeros de peas do quebra-cabea
quando um usurio clica com a tecla Shift pressionada em uma pea. Em seguida, atribua um
nome de varivel para a caixa de texto dinmica.
1
Se necessrio, selecione Arquivo > Abrir e escolha a ltima verso salva do arquivo
mypuzzle.fla.
Na Linha de tempo, desbloqueie a camada Guia de nmeros de peas caso esteja bloqueada.
67
Clique duas vezes no clipe de filme com o Crculo de nmero da pea no Palco sob o canto
inferior direito da rea de soluo do quebra-cabea.
Clipe de filme com o Crculo de nmero da pea
Isso abre o Crculo de nmero da pea no modo de edio de smbolos.
68
Selecione a camada Texto na Linha de tempo. No Palco, clique no centro do Crculo de

nmero da pea para selecionar o campo de texto.
Se o Inspetor de propriedades no estiver aberto, escolha Janela > Propriedades. No Inspetor de

propriedades, selecione Texto dinmico no menu pop-up Tipo de texto.
No menu pop-up Tipo de linha, verifique se a opo Linha simples est selecionada.
Captulo 2
Digite _root.pieceNumber na caixa de texto Var e pressione Enter ou Return.
Todas as variveis, como funes e clipes de filme, devem ser referenciadas por seus caminhos.
A varivel pieceNumber declarada e atualizada na funo RotateDisplayOrDrag na Linha de
tempo principal, mas a caixa de texto de varivel est na Linha de tempo do Crculo de nmero
da pea. Quando o caminho completo da varivel pieceNumber inserido, o valor atualizado e
exibido no campo de texto do Palco sempre que o valor da varivel mudar na Linha de tempo
principal.
8
Escolha Editar > Editar documento, clique no boto Voltar ou clique em Cena 1 para retornar
Linha de tempo principal.
Escolha Arquivo > Salvar como e digite um novo nome de arquivo. Use a esquema de
Escrevendo uma expresso

Na adio de dois nmeros em uma equao matemtica, usado um operador. Um operador
um smbolo que executa uma tarefa, ou operao, com um ou mais dados, ou operandos. Por
exemplo, na expresso 2 + 2, o sinal de adio (+) o operador e cada nmero um operando.
Uma expresso qualquer cdigo do ActionScript que pode ser avaliado para produzir um valor
nico. Por exemplo, o cdigo minha_idade + 17 uma expresso porque, quando o cdigo
executado, o ActionScript verifica o valor da varivel minha_idade, adiciona-o ao nmero 17 e
produz um novo valor nico. Se o valor de minha_idade for 47, o novo valor seria 64.
Os operadores permitem utilizar as informaes coletadas e armazenadas em variveis e manipullas em expresses para criar ou determinar outros valores. Por exemplo, voc pode saber que um
usurio soltou uma pea do quebra-cabea na rea de soluo, mas como possvel determinar se
a pea est no local correto? E se a pea est no local correto, como possvel determinar se o
quebra-cabea foi solucionado? Para examinar expresses criadas com operadores aritmticos em
um cenrio como este, selecione o Quadro 1 da Linha de tempo principal, abra o painel Aes e
observe a funo IsItDone na linha 50.
O ActionScript tem operadores numricos, ou aritmticos, mas tambm tem outros tipos de
operadores que executam diferentes tipos de operaes. Por exemplo, um operador de comparao
compara valores para determinar se um operando maior que, menor que ou igual ao outro, e um
operador lgico calcula um valor true ou false, tambm chamado de valor booleano, de uma
expresso.
Agora, use o operador NOT lgico para escrever uma expresso que mostre e oculte o padro do
quebra-cabea. O operador NOT lgico, que representado por um ponto de exclamao (!),
calcula o valor booleano oposto ao seu operando. Por exemplo, a expresso !true produz o valor
false.
1
mypuzzle.fla.
69

Clique no boto Mostrar/ocultar bordas padronizadas no Palco. Se o painel Aes no estiver

aberto, escolha Janela > Aes.
O painel Aes mostra aes associadas ao boto.
Selecione a seguinte linha de cdigo no painel Script:

//
INSERIR o cdigo aqui
Na caixa de ferramentas Aes, escolha Aes > Aes diversas e arraste a ao evaluate para o
painel Script.
Quando a ao adicionada, ela colocada em um cdigo chamado de identificador de eventos.
O cdigo ser exibido da seguinte maneira:
on (release) {
;
}
Na caixa de ferramentas Aes, clique duas vezes na ao evaluate para adicionar outra linha de
cdigo vazia.
Agora o cdigo ser exibido da seguinte maneira:
on (release) {
;
;
}
Selecione a primeira linha vazia a linha com o primeiro ponto-e-vrgula e coloque o

ponto de insero na caixa de texto Expresso.
Insira o cdigo que ocultar o clipe de filme de padro. Um usurio deve ver o clipe de filme de
padro ou o de bordas, mas no ambos.
Digite _root.pattern._visible = false na caixa de texto Expresso.

possvel digitar o caminho diretamente na caixa de texto Expresso ou usar a caixa de dilogo
Inserir caminho de destino para selecionar o clipe de filme pattern. Se for usada a caixa de
dilogo Inserir caminho de destino, selecione Pontos e Absoluto.
Observao: Ao inserir parmetros e propriedades no modo normal, possvel observar referncias de cdigo
dicas de ferramentas que aparecem sugerindo a sintaxe completa de uma ao. Clique em uma referncia de
cdigo para inserir a sintaxe. Para obter mais informaes sobre referncias de cdigo, inclusive sobre como
ativ-las e desativ-las, consulte Usando referncias de cdigo em Ajuda > Usando o Flash.
70
Captulo 2
Selecione a segunda linha vazia e coloque o ponto de insero na caixa de texto Expresso.
Digite _root.edges._visible = ! na caixa de texto Expresso.

Ignore a mensagem de erro de sintaxe exibida.
O ponto de exclamao (!) um operador NOT lgico. Alm de simplesmente digit-lo na
caixa de texto Expresses, possvel adicion-lo caixa de texto na caixa de ferramentas Aes
ao escolher Operadores > Operadores lgicos e clicar duas vezes no ponto de exclamao.
10
Digite _root.edges._visible novamente na caixa de texto Expresso aps o operador.

O cdigo deve ser este:
on (release){
_root.pattern._visible = false;
_root.edges._visible = !_root.edges._visible;
}
A primeira linha de cdigo dentro do identificador de eventos define a visibilidade do clipe de

filme pattern como false. A segunda linha de cdigo define a visibilidade do clipe de filme
edges como o oposto do atual. Isso cria uma alternncia que mostra ou oculta o clipe de filme.
11
Controlando o fluxo de um filme

Sem o ActionScript, um filme reproduzido do Quadro 1 at o ltimo quadro e repetido do
Quadro 1 ou interrompido. possvel usar o ActionScript para controlar a progresso de um
filme com mais preciso. Tambm possvel us-lo para oferecer controle ao usurio. Por
exemplo, possvel colocar uma ao que interrompa o filme no Quadro 5 at um usurio
pressionar o boto Reproduzir. Este um simples exemplo de controle do fluxo de um filme.
possvel usar as aes if, else e else if (tambm chamadas de comandos) para criar um fluxo de
filme mais complexo chamado de lgico. Essas trs aes executam as seguintes tarefas:
71
A ao if deixa o Flash verificar uma condio no filme e executar determinadas aes se essa
condio for verdadeira.
O comando else instrui o Flash a executar um conjunto de aes diferente se a condio if for
falsa.
O comando else
if deixa o Flash verificar se h outra condio antes de executar um conjunto
de aes diferente.
Escrevendo um comando condicional
Um operador j foi usado para mostrar e ocultar um clipe de filme. Agora, um comando if ser
usado para criar uma lgica que mostre e oculte o clipe de filme piece numbers. Para fins de
aprendizado, este exemplo utiliza um elemento diferente do ActionScript para obter o mesmo
resultado.
1
mypuzzle.fla.
No Palco, clique boto de matriz de nmero Mostrar/ocultar pea. Se o painel Aes no

estiver aberto, escolha Janela > Aes. Na caixa de ferramentas Aes, escolha a categoria Aes
> Condies/Loops.
Clique duas vezes na ao if. O seguinte cdigo ser exibido no painel Aes:
on (release) {
if (<not set yet>) {
}
}
Com a linha de cdigo que contm a ao if selecionada, clique duas vezes na ao else da
caixa de ferramentas Aes.
on (release) {
else {
}
}
Selecione a linha 3 iniciada com if e, com o ponto de insero na caixa de texto Condio,
clique no boto Inserir caminho de destino. Selecione o clipe de filme piecenumbers, Pontos e
Absoluto e clique em OK. O seguinte cdigo ser exibido na caixa de texto Condio:
_root.piecenumbers
72
Com o ponto de insero na caixa de texto Condio, digite ._visible aps _root.piecenumbers.
Na categoria Aes > Aes diversas da caixa de ferramentas Aes, clique duas vezes na ao
evaluate para adicionar uma linha de cdigo vazia.
Captulo 2
Digite _root.piecenumbers._visible = false na caixa de texto Expresso.

possvel usar o boto Inserir caminho de destino ou digitar o cdigo manualmente. O cdigo
passar a ser exibido da seguinte maneira:
on (release) {
if (_root.piecenumbers._visible) {
_root.piecenumbers._visible = false;
else {
}
}
Quando o filme executado, o Flash avalia a expresso dentro dos parnteses da condio. A
expresso deve ser igual a um dos valores booleanos: true ou false. Este exemplo usa a condio
da ao if para verificar se o clipe de filme piecenumbers est visvel no Palco. Se a propriedade
_visible for true, o ActionScript executar o cdigo dentro das chaves e definir a propriedade
_visible como false, o que oculta o clipe de filme no Palco.
9
No painel Script, selecione a linha de cdigo com a ao else e clique duas vezes na ao
evaluate.
10
Digite _root.piecenumbers._visible = true na caixa de texto Expresso.

O cdigo final do ActionScript ser exibido da seguinte maneira:
on (release) {
if (_root.piecenumbers._visible) {
_root.piecenumbers._visible = false;
else {
_root.piecenumbers._visible = true;
}
}
11
Escolha Arquivo > Salvar como e digite um novo nome de arquivo. Use a esquema de
Criando comandos e reutilizando cdigos

O ActionScript tem aes que permitem controlar um filme de maneiras especficas. Por exemplo,
a ao play faz a reproduo avanar na Linha de tempo e a ao loadMovie carrega outro filme do
Flash no Flash Player. Cada uma dessas aes instrui o Flash a executar determinada tarefa.
possvel criar seus prprios comandos nos seus filmes. Por exemplo, no arquivo puzzle.fla,
necessrio um comando para embaralhar as peas do quebra-cabea. Para descobrir como escrever
tal comando com o ActionScript, determine cada etapa necessria para embaralhar as peas do
quebra-cabea e determine quais elementos do ActionScript podem ser usados para alcanar esses
objetivos.
Primeiro, as peas devem ser espalhadas em determinada rea no Palco. Cada clipe de filme tem
uma propriedade _x e _y que pode ser usada para definir sua posio e uma propriedade _rotation
que pode servir para definir sua rotao. Para inserir e girar cada pea aleatoriamente, gere um
nmero aleatrio para ser usado em uma expresso. O ActionScript tem um objeto Math interno
com um mtodo random que pode ser usado para esse fim.
73
Um comando no ActionScript chamado de funo. Uma funo um script que pode ser usado
diversas vezes em um filme para executar determinada tarefa. Por exemplo, no arquivo puzzle.fla,
sempre que um usurio clicar em um boto Embaralhar peas, a funo Scramble ser executada
ou chamada. Essa funo coloca as peas do quebra-cabea em posies aleatrias no Palco. Em
vez de rescrever o mesmo script em cada um dos dois botes Embaralhar peas, a funo escrita,
ou declarada, uma vez e chamada em cada boto. Para examinar a funo Scramble, selecione
Quadro 1 na Linha de tempo principal e abra o painel Aes. Role para baixo no painel Script at
ver uma funo Scramble.
Pense na funo como uma mquina que faz trabalho extra no seu lugar. A mquina pode
produzir diferentes resultados, dependendo do que for colocado nela. Por exemplo, se colocar
bananas em um liquidificador, obter um pur de banana, e no um pur de pssegos. Os
elementos passados para uma funo trabalhar so denominados parmetros ou argumentos. Os
parmetros so passados dentro dos parnteses que se seguem funo. Por exemplo, o nome de
uma pea do quebra-cabea passado para a funo RotateDisplayOrDrag(whichPiece) e ela s
opera nessa pea. Os parmetros permitem reutilizar funes em vrias situaes diferentes.
As funes geralmente so declaradas no primeiro quadro de um filme. Nos arquivos puzzle.fla, as
funes so declaradas no Quadro 1.
Escrevendo uma funo
Agora declare uma funo que gire, exiba ou arraste cada pea do quebra-cabea quando o usurio
clicar nela.
1
mypuzzle.fla.
Selecione o primeiro quadro da camada Aes e abra o painel Aes caso ele ainda no esteja
aberto.
Role para baixo no painel Script e selecione a linha 31. A seguinte linha comentada dever ser
realada:
// INSERIR a funo RotateDisplayOrDrag() aqui
Na categoria Aes > Funes definidas pelo usurio da caixa de ferramentas Aes, clique duas
vezes na ao function.
Digite RotateDisplayOrDrag na caixa de texto Nome. Digite whichPiece na caixa de texto
Parmetros. A partir de agora, o cdigo da linha 32 ser exibido da seguinte maneira:
function RotateDisplayOrDrag (whichPiece) {
}
O parmetro whichPiece, que identifica a pea selecionada do quebra-cabea, ser chamado trs
vezes no corpo da funo. Quando a funo chamada, o parmetro passado substitudo por
whichPiece em cada comando.
5
74
Na categoria Aes > Condies/Loops da caixa de ferramentas Aes, clique duas vezes na
ao if, na ao else if e na ao else.
Captulo 2
Observao: Tambm possvel selecionar as aes no menu pop-up de adio (+).

} else if (<not set yet>) {
else {
}
}
Esse cdigo cria a estrutura lgica da funo. Preencha as condies a serem verificadas em cada
comando if. Preencha tambm o cdigo em cada conjunto de chaves que ser executado
quando as condies forem verdadeiras.
6
Selecione a linha de cdigo do comando if. Digite Key.isDown(18) na caixa de texto

Condio.
Key um objeto interno do ActionScript, que tambm pode ser encontrado na categoria
Objetos > Filme > Key > Mtodos. Key permite determinar que tecla um usurio pressionou
no teclado. O nmero 18 a representao numrica das teclas Alt (Windows) e Option
(Macintosh). Essa linha de cdigo verifica se um usurio pressionou essas teclas.
Para aprender mais sobre objetos internos, consulte Usando um objeto interno , na pgina
78.
evaluate para inserir uma nova linha de cdigo. Digite _root[whichPiece]._rotation += 90 na
caixa de texto Expresso, sem espaos entre + e =.
Essa linha de cdigo gira a pea selecionada 90 quando o usurio pressiona a tecla Alt
(Windows) ou Option (Macintosh). As chaves permitem recuperar dinamicamente o valor de
um nome de instncia. Para obter mais informaes, consulte Operadores ponto e de acesso
matriz em Ajuda > Usando o Flash.
Selecione a linha de cdigo else if. Digite Key.isDown(Key.SHIFT) na caixa de texto

Condio.
Essa linha de cdigo verifica se um usurio pressionou a tecla Shift.
evaluate para inserir uma nova linha de cdigo. Digite pieceNumber = whichPiece.slice(5) na
caixa de texto Expresso.
Essa linha de cdigo exibe o nmero da pea na caixa de texto do Palco quando um usurio
pressiona a tecla Shift. O mtodo slice do objeto String remove um nmero de caracteres
especificado (neste caso, 5) da instncia do nmero da pea, para que apenas o nmero da pea
seja exibido. Com efeito, o mtodo corta os cinco primeiros caracteres e atribui o nmero
resultante varivel pieceNumber, que, por sua vez, atribuda ao campo de texto no Palco.
10
Selecione a linha de cdigo else. Na categoria Aes > Controle do MovieClip na caixa de
ferramentas Aes, clique duas vezes na ao startDrag.
11
Digite _root[whichPiece] na caixa de texto Destino e clique em Expresso.
75
12
Selecione Restringir ao retngulo. Digite 20 nas caixas de texto E (esquerda) e S (superior). Nas
caixas de texto D (direita) e I (inferior), digite 780 e 580, respectivamente.
A palavra false no script indica que lockCenter (que indica que a pea do quebra-cabea
sempre ser encaixada no centro do ponteiro do mouse quando clicada) no est especificado.
Os nmeros 20, 20, 780 e 580 especificam as coordenadas esquerda, superior, direita e inferior
da caixa de texto no Palco.
Quando um usurio clica em uma pea, a funo seguinte que voc escreveu chamada. A
funo usa o objeto Key para determinar se a tecla Shift, Alt ou Option pressionada quando
uma pea clicada. Se a tecla Shift for pressionada enquanto uma pea for clicada, uma caixa
de texto dinmica exibir o nmero da pea do quebra-cabea. Se a tecla pressionada for Alt
(Windows) ou Option (Mac), a pea do quebra-cabea girar 90. Se as teclas Shift, Alt ou
Option no forem pressionadas, o usurio poder arrastar a pea. O cdigo deve ser este:
if (Key.isDown(18)) {
_root[whichPiece]._rotation += 90;
} else if (Key.isDown(Key.SHIFT)) {
pieceNumber = whichPiece.slice(5);
else {
startDrag(_root[whichPiece],false, 20, 20, 780, 580);
}
}
Chamando uma funo

possvel chamar as funes de qualquer quadro em um filme onde seja necessrio concluir uma
tarefa. necessrio usar um caminho de destino para chamar uma funo, assim como usar um
caminho para acessar uma varivel ou um clipe de filme. Todas as funes no filme puzzle.fla so
declaradas no primeiro quadro da camada Aes, na Linha de tempo principal, para que o
caminho absoluto para cada uma delas comece com _root.
Agora, chame a funo que embaralha as peas do quebra-cabea no Palco.
1
76
Na Linha de tempo, oculte as camadas Caixa de dilogo Embaralhar e Caixa de dilogo Iniciar,
caso ainda no estejam ocultas. Selecione a camada Caixa de dilogo Parabns.
Captulo 2
No Palco, clique duas vezes no smbolo da caixa de dilogo Parabns.
Caixa de dilogo
Parabns smbolo
No Palco, selecione o boto OK. Se o painel Aes no estiver aberto, escolha Janela > Aes.
Na categoria Aes > Funes definidas pelo usurio da caixa de ferramentas Aes, clique duas
vezes na ao call function.
Com o ponto de insero na caixa de texto Objeto do painel Aes, clique no boto Inserir
caminho de destino. Verifique se Pontos e Absoluto esto selecionados. Selecione _root e clique
em OK.
Digite Scramble na caixa de texto Mtodo.

A funo Scramble no requer nenhum parmetro. possvel deixar a caixa de texto Parmetros
em branco.
Agora o cdigo ser exibido da seguinte maneira:
on (release) {
_root.Scramble();
}
Este o ActionScript que chama a funo. Tambm ser necessrio adicionar algumas linhas
de cdigo extras que pertenam ao identificador on(release). Faa isso nas prximas etapas.
Com uma linha de cdigo _root.Scramble... selecionada no painel Script, clique duas vezes
em evaluate na categoria Aes > Aes diversas da caixa de ferramentas Aes. Digite
_root.scramblebutton._visible = true na caixa de texto Expresso.
77
Clique duas vezes na ao evaluate novamente, para adicionar outra linha em branco. Digite
_root.dialog = false na caixa de texto Expresso.
evaluate.
Na categoria Propriedades da caixa de ferramentas Aes, clique duas vezes em _visible. Com
o ponto de insero aps _visible, digite = 0 na caixa de texto Expresso.
Esse cdigo especifica que a caixa de dilogo no esteja visvel aps o usurio clicar no boto
OK.
O cdigo final ser exibido da seguinte maneira:
on (release) {
_root.Scramble();
_root.scramblebutton._visible = true;
_root.dialog = false;
_visible = 0
}
10
Siga um destes procedimentos para retornar Linha de tempo principal:

Clique em Cena 1.
11
Usando um objeto interno

O ActionScript tem variveis que permitem armazenar informaes, tem funes que permitem
criar comandos especiais e reutilizar cdigos, tem aes que permitem controlar o fluxo de um
filme e tem clipes de filme com propriedades que podem ser alteradas.
O ActionScript tambm tem outro tipo de elemento denominado objeto interno. Os objetos
oferecem uma maneira de agrupar informaes para que possam ser usadas em um script. Os
objetos podem ter propriedades, mtodos (que so como funes) e constantes (por exemplo, o
valor numrico de Pi).
Na funo RotateDisplayOrDrag que foi criada em Criando comandos e reutilizando cdigos ,
na pgina 73, o objeto Key foi usado para determinar a ltima tecla que um usurio pressionou no
teclado. O objeto Key est contido no ActionScript para permitir o acesso a informaes sobre o
teclado.
Outro objeto do ActionScript o MovieClip. O objeto MovieClip uma coleo de mtodos que
podem ser usados para manipular clipes de filme, que so os elementos mais fundamentais e
poderosos do Flash. Para aprender mais sobre as caractersticas especiais do objeto MovieClip e
como usar clipes de filme, consulte Trabalhando com clipes de filme e botes em Ajuda >
Usando o Flash.
Agora, use o mtodo onPress do objeto MovieClip para verificar se o ponteiro do mouse est
tocando uma pea do quebra-cabea.
78
Captulo 2
mypuzzle.fla.
Aes de peas um clipe de filme aninhado dentro de cada instncia de uma pea do quebracabea. Para selecionar o clipe de filme Aes de peas na hierarquia do painel Biblioteca,
clique no boto Editar smbolos no canto inferior direito da Linha de tempo e escolha Misc >
Aes de peas.
O clipe de filme Aes de peas aberto no modo de edio de smbolos.

3
Na Linha de tempo Aes de peas, selecione Quadro 1 da camada Aes.
Se o painel Aes ainda no estiver aberto, escolha Janela > Aes. No painel Script, selecione a
linha 3 com a seguinte linha de cdigo:
//
INSERIR o cdigo aqui
79
Na categoria Objetos > Filme > MovieClip > Eventos da caixa de ferramentas Aes, clique
duas vezes na ao onPress.
O mtodo onPress um tipo especial de ao denominado identificador de eventos ou
simplesmente evento. Um evento permite escrever uma funo que seja executada quando
determinado evento ocorrer. Os tipos de eventos incluem o pressionamento do boto do
mouse, a insero de um quadro pela reproduo e o carregamento de um clipe de filme.
Neste procedimento, o cdigo dentro das chaves aps onPress executado quando um usurio
pressiona o boto do mouse no filme.
Digite _parent na caixa de texto Objeto.

Como Aes de peas est aninhado dentro do clipe de filme, _parent especifica que onPress
deve ser executado no cdigo um nvel acima, no mesmo nvel que a pea do quebra-cabea.
Na categoria Aes > Condies/Loops da caixa de ferramentas Aes, clique duas vezes na
ao if.
Digite !_root.dialog na caixa de texto Condio. O cdigo ser exibido da seguinte maneira:
_parent.onPress = function(){
if (!_root.dialog) {
{
};
O cdigo adicionado nesta etapa testa se o valor da varivel denominada dialog verdadeiro
(visvel) ou falso (no visvel). Se o valor for true, o prximo script a girar e arrastar a pea do
quebra-cabea no ser executado. Se o valor da varivel for false, o script seguinte ser
executado. Os usurios no podero girar nem arrastar uma pea, nem exibir o nmero da
pea, se a caixa de dilogo estiver sendo exibida.
9
Na caixa de ferramentas Aes, clique duas vezes na ao evaluate da categoria Aes > Aes
diversas para adicion-la dentro das chaves do comando if.
10
Digite _root.RotateDisplayOrDrag(_parent._name) na caixa Expresso.

_name
a propriedade do nome de instncia da pea do quebra-cabea em que o usurio clica.
O cdigo final ser exibido da seguinte maneira:

_parent.onPress = function(){
if (!_root.dialog) {
_root.RotateDisplayOrDrag(_parent._name);
}
};
11
Siga um destes procedimentos para retornar Linha de tempo principal:

Clique em Cena 1.
12
80
Captulo 2
Testando o filme
Testar cedo e testar sempre um mantra para desenvolvedores da Web. Quanto mais cedo o
filme for testado, mais fcil ser determinar a causa de resultados inesperados. recomendvel
salvar vrias verses do seu arquivo usando nomes seqenciais por exemplo, mypuzzle1.fla,
mypuzzle2.fla, e assim por diante, como tem sido feito neste tutorial. Dessa maneira, o arquivo
com o nmero mais alto sempre ser o mais recente e ser fcil reverter para uma verso anterior.
Como foi ensinado no Tutorial de introduo ao Flash MX, a ferramenta de criao Flash inclui
uma verso do Flash Player que permite testar seu filme em qualquer altura da criao ao escolher
Controlar > Testar filme. Essa verso do Flash Player tem vrios comandos e ferramentas para
ajud-lo a solucionar problemas do seu filme.
O motivo mais comum para resultados inesperados em um filme do Flash um caminho
incorreto para uma varivel, uma funo, um objeto ou um clipe de filme. Isso pode fazer com
que uma varivel contenha o valor errado, impedir uma funo de ser chamada ou impedir a
reproduo correta de um clipe de filme.
A ao trace permite escrever notas e expresses nos seus scripts cujos resultados sejam enviados
para uma janela denominada Sada.
Agora, adicione uma ao trace para testar se uma funo foi chamada com xito.
Observao: O Flash tambm inclui um Depurador, que permite examinar os valores de variveis globais e locais,
inclusive quando forem alteradas durante a reproduo do filme. Alm disso, com o Depurador possvel usar
pontos de interrupo para interromper o filme e testar o ActionScript linha por linha. Para obter mais informaes,
consulte Usando o Depurador em Ajuda > Usando o Flash.
Escolha Arquivo > Abrir e selecione a verso do arquivo mypuzzle.fla salvo por ltimo.
Quando o usurio clica no boto OK no filme SWF, as peas do quebra-cabea devem ser
embaralhadas. possvel usar um ao trace para testar se a funo Scramble est sendo
chamada.
2
3
Na camada Aes na Linha de tempo, selecione Quadro 1 e abra o painel Aes.

No painel Script, role at selecionar a linha 18, a linha comentada que diz // inserir a ao
trace aqui.
Na caixa de ferramentas Aes, clique duas vezes na ao trace da categoria Aes > Aes
diversas.
Digite A funo Scramble foi chamada na caixa de texto Mensagem.

Essa mensagem est sendo colocada na funo Scramble.
Salve o documento e escolha Controlar > Testar filme.
81
Clique no boto OK no filme SWF.

Ser exibida a janela Sada, que controla eventos no filme. Aumente a janela, conforme
necessrio, para ler as mensagens.
A mensagem A funo Scramble foi chamada ser exibida na janela Sada.
Se a mensagem no for exibida, sua prxima etapa ser determinar o motivo. O motivo mais
provvel que foi especificado um caminho incorreto para a funo.
8
Feche a janela Sada e o arquivo SWF e retorne para o modo de criao.
Voc teve um grande avano no aprendizado do ActionScript!
As prximas etapas
Concluindo o tutorial, voc ter aprendido bastante em relativamente pouco tempo. Voc
aprendeu a usar o ActionScript para configurar um ponto inicial do filme do Flash, a criar
comandos e reutilizar o cdigo para fazer com que as aes sejam recorrentes e a controlar
precisamente o fluxo do filme. Usando as variveis e expresses do ActionScript, possvel
controlar a atividade do usurio no filme e exibir contedos alterados para seus usurios.
Finalmente, voc aprendeu a testar seu filme.
Para continuar a aprender sobre o ActionScript, consulte o Dicionrio do ActionScript on-line no
menu Ajuda e os artigos do Centro de Suporte Flash. Na pasta Exemplos dentro da pasta do
aplicativo Flash MX, tambm possvel abrir uma verso avanada do filme puzzle.fla e
desconstruir o ActionScript que foi usado para criar uma animada pea do quebra-cabea.
82
Captulo 2
CAPTULO 3
Tutorial de introduo aos componentes
possvel usar os componentes de interface do Macromedia Flash para adicionar elementos

simples de interface do usurio ao documento do Flash de maneira rpida e fcil.
Este tutorial tem o objetivo de apresentar componentes a usurios iniciantes e intermedirios do
Flash e de mostrar como possvel us-los para criar facilmente um aplicativo simples. Antes de
fazer este tutorial, necessrio concluir o Tutorial de introduo ao Flash MX e o Tutorial de
introduo ao ActionScript, disponveis ao selecionar Ajuda > Tutoriais.
Aps concluir este tutorial, voc saber como executar as seguintes tarefas:
Adicionar componentes a um documento do Flash

Configurando os componentes
Adicionar o ActionScript para fazer com que os componentes funcionem
Tipos de componentes
O Flash MX contm os seguintes componentes:
Nome
Ao
Radio button
Representa uma nica escolha em um grupo de escolhas mutuamente

exclusivas
Check box
Representa uma nica escolha
Push button
Executa um comando quando o usurio clica nele ou pressiona Enter ou

Return
Combo box
Exibe uma lista de escolhas
List box
Exibe uma lista de escolhas
83
Nome
Ao
Scroll pane
Fornece um painel de janela rolvel para exibir clipes de filme
Text scroll bar
Adiciona uma barra de rolagem a um campo de texto
Como usar os componentes

possvel usar os componentes das seguintes maneiras:
Elabore um formulrio que solicite o endereo, telefone, correio eletrnico e
outras informaes pessoais de um usurio e, em seguida, valide os dados antes de envi-lo para
um servidor.
Formulrio da Web
Crie um formulrio da Web que permita aos usurios encomendar um carro

selecionando vrias opes grficas em vez de digitar as informaes. Os campos so gerados a
partir das interaes grficas.
Monte seu carro
Crie uma pesquisa com vrias perguntas e partes que confira os resultados
instantaneamente e disponha os dados resultantes da pesquisa em diagramas.
Pesquisa
Monte um lbum de fotografias pessoal que utilize um diretrio de

imagens e miniaturas e os envolva com a interface e os elementos de navegao do Flash.
lbum de fotografias
Calculadora de emprstimos
Projete uma calculadora de amortizao on-line que calcule
pagamentos de emprstimos.
Crie um modelo para apresentaes baseadas em
slides com elementos de navegao simples, criados previamente, e um layout para imagens e
texto.
Modelo para apresentaes baseadas na Web
Exibindo o formulrio preenchido

Para navegar por componentes em um formulrio, siga estes procedimentos:
Clique no componente para selecion-lo.

Pressione Tab para avanar; pressione Shift+Tab para recuar.
Use as teclas de direo para navegar por itens de menu.
84
Escolha Arquivo > Abrir e navegue at o diretrio do programa Flash MX. Abra Tutorials/
Components/Finished/sweepstakes.swf. Este o filme completo.
Use as tcnicas de navegao descritas acima para testar cada boto e caixa no formulrio.
Em seguida, abra o arquivo sweepstakes.fla. Escolha Arquivo > Abrir e navegue at o diretrio
do programa Flash MX. Abra Tutorials/Components/Finished/sweepstakes.swf. Este o
documento do Flash que gerou o filme. H dois quadros-chave includos na Linha de tempo.
Examine a pgina 1. Ela contm a caixa de seleo, a caixa de combinao e os botes de ao

usados para coletar informaes. Tambm possui dois campos de texto de entrada para o nome
e o endereo eletrnico do usurio.
Examine a pgina 2. Ela a pgina de resultados e contm vrias caixas de texto dinmicas para
mostrar os resultados das informaes coletadas na pgina 1. Para poupar tempo, elas j foram
criadas para voc.
Captulo 3
Criando um formulrio
Neste tutorial, sero usados componentes para criar um formulrio simples de duas pginas a fim
de inserir um bolo de apostas para ganhar um carro eltrico Stiletto grtis. A primeira pgina serve
para coletar as informaes e a segunda serve para exibir os resultados. Siga estas trs etapas para
preencher o formulrio:
Adicione componentes ao formulrio

Adicione o ActionScript ao documento para fazer com que os componentes funcionem
Para comear, foram includos o fundo, os campos de texto e os grficos do formulrio. Adicione
e configure componentes e o ActionScript para torn-lo um formulrio interativo.
Adicionando componentes
A primeira etapa adicionar os componentes ao Palco e inseri-los no formulrio. Adicione uma
caixa de seleo, uma caixa de combinao e um boto de ao primeira pgina do formulrio.
Adicione tambm um boto de ao segunda pgina.
Para adicionar componentes a um documento, arraste elementos do painel Componentes para o
Palco ou clique duas vezes nesses elementos a fim de coloc-los no centro do Palco. Depois de
adicionar um componente a um documento, ele ser exibido no painel Biblioteca do documento.
recomendvel criar uma nova camada para os componentes.
1
Escolha Arquivo > Abrir e navegue at o diretrio do programa Flash MX. Abra Tutorials/
Components/my_sweepstakes/mysweepstakes.fla.
Escolha Arquivo > Salvar como e salve o arquivo com um novo nome, como novo_bolo de
apostas.
Crie uma nova camada e a denomine UI. Coloque os componentes nessa camada.
Clique no Quadro 6 na camada Interface da Linha de tempo. Escolha Inserir > Quadro-chave
em branco para adicionar um quadro-chave em branco. Isso ser usado nos componentes da
segunda pgina.
Certifique-se de que os seguintes painis estejam abertos:
Painel Biblioteca (Janela > Biblioteca)

Painel Componentes (Janela > Componentes)
Inspetor de propriedades (Janela > Propriedades)
Adicionando uma caixa de seleo
Use o componente CheckBox para criar uma caixa com um valor verdadeiro ou falso.
1
Selecione Quadro 1 na camada Interface.
85
Arraste o componente CheckBox do painel Componentes para o Palco. Coloque-o sob o

pargrafo que pergunta se o usurio deseja inserir os bolos de apostas.
O componente ser exibido na pasta Componentes de interface do Flash no painel Biblioteca.

Adicionando uma caixa de combinao
Use o componente ComboBox para criar um menu drop-down simples de itens que possam ser
selecionados pelos usurios. Tambm possvel usar uma caixa de combinao para criar um
menu drop-down mais complexo que role automaticamente para um item de menu iniciado
pela(s) letra(s) inserida(s) no campo de texto pelo usurio.
Arraste o componente ComboBox do painel Componentes para o Palco. Coloque-o sob

Selecione sua cor favorita:.

Adicionando botes de ao
Use o componente PushButton para criar dois botes de ao. Um boto estar na primeira
pgina e ser usado para enviar as informaes no formulrio. O outro boto estar na segunda
pgina e ser usado para retornar primeira pgina e preench-la novamente com os valores
enviados anteriormente.
1
Arraste o componente PushButton do painel Componentes para o Palco. Coloque-o no canto

inferior direito do formulrio para que seja alinhado horizontalmente com os campos de texto
de nome e correio eletrnico.
86
Captulo 3
Depois de arrastar um componente do painel Componentes para o Palco, selecione outras

instncias dele no painel Biblioteca.
V para o quadro-chave em branco no Quadro 6. No painel Biblioteca, abra a pasta

Componentes de interface do Flash e arraste o componente PushButton do painel Biblioteca
para o Palco. Coloque-o no canto inferior direito.
A prxima etapa configurar os componentes para que tenham as informaes corretas a serem
selecionadas por um usurio.
Defina os parmetros de um componente usando a guia Parmetros do Inspetor de propriedades
ou o painel Parmetros de componente.
Os usurios avanados podem usar propriedades e mtodos API para cada componente a fim de
definir os parmetros, o tamanho, a aparncia e outras propriedades do componente. As
propriedades e os mtodos disponveis para cada elemento componente so listados no Dicionrio
do ActionScript com o nome do componente.
87
Configurando a caixa de seleo

1
Selecione Quadro 1 na camada Interface e, em seguida, selecione o componente CheckBox no

Palco. Seus parmetros sero exibidos no Inspetor de propriedades.
Digite sweepstakes_box na caixa de texto Nome da Instncia.
Digite Absolutely! na caixa de texto Rtulo.
No menu pop-up do parmetro Initial Value, selecione True. Isso especifica se o estado inicial
do componente CheckBox est selecionado (True) ou no (False).
No menu pop-up do parmetro Label Placement, defina o valor padro com o alinhamento
direito. O rtulo ser exibido direita da caixa de seleo.
No altere o parmetro Change Handler.

O parmetro Change Handler a funo que ser executada quando o usurio selecionar um
item. Essa funo deve ser definida na mesma Linha de tempo que a instncia componente.
Esse parmetro opcional e s precisar ser especificado para que uma ao ocorra assim que
o usurio acessar um componente.
No final, o Inspetor de propriedades dever ter a seguinte aparncia:
Para obter mais informaes sobre como usar os mtodos API do componente FCheckBox para
definir opes adicionais para o componente, consulte a entrada FCheckBox (componente) no
Dicionrio do ActionScript on-line na Ajuda do Flash.
Configurando a caixa de combinao
1
88
Selecione o componente ComboBox no Palco. Seus parmetros sero exibidos no Inspetor de

propriedades.
Captulo 3
Digite color_box na caixa de texto Nome da Instncia.
Certifique-se de que o parmetro Editable esteja definido como False. Isso impede que os
usurios digitem seu prprio texto.
O parmetro Labels exibe uma lista de valores que os usurios podem selecionar. Clique no
campo Rtulos e, em seguida, clique na lupa para abrir a janela pop-up Valores. Clique no
boto de adio (+) para inserir um novo valor.
Clique no campo valor padro e digite Lightning para o primeiro valor.
Clique no boto de adio (+) para inserir o prximo valor. Clique no campo valor padro e
digite Cobalt para o prximo valor.
Da mesma maneira, adicione Emerald lista.

No final, a janela pop-up Valores dever ter a seguinte aparncia:
Clique em OK para fechar a janela pop-up Valores.

O parmetro Data opcional. usado para especificar os valores associados aos itens (rtulos)
na caixa de listagem. No h necessidade de fazer isso neste tutorial.
89
O parmetro Row Count especifica quantas linhas so exibidas na janela. Como h trs opes,
altere o valor para 3.
No h necessidade de inserir um nome de parmetro Change Handler.
Para obter mais informaes sobre como usar mtodos API para alterar propriedades adicionais,
consulte a entrada FComboBox (componente) no Dicionrio do ActionScript on-line na Ajuda
do Flash.
Configurando os botes de ao
1
Selecione o componente PushButton no Quadro 1.

Os parmetros do componente sero exibidos no Inspetor de propriedades.
Digite submit_btn na caixa de texto Nome da Instncia do Inspetor de propriedades.
Digite Submit na caixa de texto Rtulo do Inspetor de propriedades.

Esse texto ser exibido no corpo do boto.
Digite onClick como o nome do Click Handler. Posteriormente, voc escrever o ActionScript
para definir o que o Click Handler dever fazer.
90
Selecione o componente PushButton no Quadro 6.
Digite return_btn na caixa de texto Nome da Instncia do Inspetor de propriedades.
Digite Return na caixa de texto Rtulo do Inspetor de propriedades.
Digite onClick como o nome do Click Handler.
Captulo 3
Para obter mais informaes sobre como usar os mtodos API do componente FPushButton para
alterar propriedades adicionais, consulte a entrada FPushButton (componente) no Dicionrio do
ActionScript on-line na Ajuda do Flash.
Escrevendo o ActionScript para coletar os dados
Parte do ActionScript ser para todo o filme, enquanto parte ser relacionada a determinado
quadro. A tabela a seguir o ajudar a controlar nomes de instncias.
Nome da instncia
Descrio
color_box
Caixa de combinao Cor na pgina 1
sweepstakes_box
Caixa de seleo Bolo de apostas na pgina 1
submit_btn
Boto de ao Enviar na pgina 1
name
Caixa de texto de entrada de nome na pgina 1
email
Caixa de texto de entrada de endereo eletrnico na pgina 1
return_btn
Boto de ao Retornar na pgina 2
name_result
Caixa de texto dinmica na pgina 2 para exibir o nome do usurio
email_result
Caixa de texto dinmica na pgina 2 para exibir o endereo eletrnico do usurio
color_result
Caixa de texto dinmica na pgina 2 para exibir a seleo de cores do usurio
sweepstakes_text
Caixa de texto dinmica na pgina 2 que exibir textos diferentes se o usurio tiver
escolhido ou no inserir o bolo de apostas
Escrevendo o ActionScript para todo o filme

O ActionScript para componentes colocado em quadros-chave. O parmetro Click Handler
especifica o que ocorre quando o componente PushButton ativado. O valor padro onClick, ou
seja, quando o usurio clica em um dos botes de ao, ele ativado. Primeiro, crie uma funo
para onClick. Ela ser uma funo ramificada que, primeiro, determinar se o boto clicado foi
Enviar ou Retornar e, em seguida, executar as respectivas aes.
1
Crie uma nova camada denominada Todas as aes. Ela ser usada para o ActionScript que
ser executado no filme.
Se o painel Aes no estiver aberto, escolha Janela > Aes.
Alterne para o modo especialista pressionando Control+Shift+E (Windows) ou Command+

Shift+E (Macintosh), ou clicando no controle no canto superior direito (um tringulo com
uma marca de seleo acima dele) e selecionando Modo especialista no menu pop-up.
91
Primeiro, insira a funo de retorno de chamada para os botes de ao. Ela um comando
condicional que ramifica, dependendo do boto clicado. Se o boto Enviar for clicado, ele
ramificar para a funo getResults e passar para a pgina 2. Se o boto Retornar for clicado,
ele passar para a pgina 1.
Insira o cdigo a seguir no painel Aes.
// retorno de chamada do PushButton
function onClick(btn) {
if (btn == submit_btn) {
getResults();
gotoAndStop("pg2");
} else if (btn == return_btn) {
gotoAndStop("pg1");
}
}
Observao: Embora no seja recomendvel, se no quiser escrever o ActionScript, poder copiar o texto
deste tutorial e col-lo no painel Aes.
Em seguida, escreva a funo getResults. Isso obtm os resultados da caixa de seleo do bolo
de apostas e da caixa de combinao de cor. Os resultados da caixa de combinao so obtidos
como um rtulo a fim de mostrar os resultados.
// obter resultados da pg. 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}
Em seguida, escreva a funo initValues. Isso inicializa os valores da pgina 1 com os valores
que o usurio selecionou anteriormente. A funo executada quando o usurio clica no boto
Retornar.
// inicializar os valores na pg. 1 com os valores que o usurio selecionou anteriormente
function initValues() {
sweepstakes_box.setValue(sweepstakes_result);
if (!started) {
color_box.setSelectedIndex(0);
started = true;
else {
color_box.setSelectedIndex(selectedItem);
}
}
92
Captulo 3
Finalmente, adicione uma chamada funo initValues no incio do ActionScript. No final, o

ActionScript dever ter a seguinte aparncia:
initValues();
// retorno de chamada do PushButton
function onClick(btn) {
if (btn == submit_btn) {
getResults();
gotoAndStop("pg2");
} else if (btn == return_btn) {
gotoAndStop("pg1");
}
}
// inicializar os valores na pg. 1 com os valores que o usurio selecionou anteriormente
function initValues() {
sweepstakes_box.setValue(sweepstakes_result);
if (!started) {
color_box.setSelectedIndex(0);
started = true;
else {
color_box.setSelectedIndex(selectedItem);
}
}
// obter resultados da pg. 1
function getResults() {
sweepstakes_result = sweepstakes_box.getValue();
color_result = color_box.getSelectedItem().label;
selectedItem = color_box.getSelectedIndex();
}
Voc concluiu o script que precisa ser executado para todo o filme. No entanto, ainda ser preciso
adicionar o script dos quadros nas pginas 1 e 2.
Adicionando o ActionScript a cada quadro-chave
Parte do ActionScript dever ser executada somente quando um usurio selecionar determinado
quadro. Para que o ActionScript funcione, nomeie cada quadro-chave.
1
Crie uma nova camada denominada Aes de quadro. Selecione Quadro 1 e escolha Inserir >
Quadro-chave em branco para inserir um quadro-chave. Use o Inspetor de propriedades para
denominar o quadro-chave como pg1. Da mesma maneira, insira um quadro-chave no Quadro
6 e d a ele o nome de pg2.
Selecione o quadro-chave no Quadro 1 da camada Aes de quadro e escreva o seguinte

ActionScript para interromper o filme no Quadro 1 (pg1):
stop();
93
(Opcional) Para exibir determinado texto, se o usurio tiver selecionado a caixa de seleo Bolo
de apostas, e outro texto, se o usurio no tiver selecionado essa caixa, escreva um comando
condicional com texto que v para o campo de texto dinmico sweepstakes_text na pgina 2.
Selecione o quadro-chave denominado pg2 na camada Aes de quadro e insira o seguinte no
painel Aes:
// texto do bolo de apostas
if (sweepstakes_result==true) {
sweepstakes_text="VocfoiincludonobolodeapostasStilettoFantasy.Osvencedores
sero anunciados no final de cada ms.";
else {
sweepstakes_text = "Voc no foi includo no bolo de apostas Stiletto Fantasy.";
}
Observao: No recorte e cole este ActionScript no painel Aes. Ele no funcionar corretamente, pois h
quebras de linha entre a primeira e a segunda linha do texto.
Testando seu filme

Para ver a aparncia dos componentes, execute o filme no Flash Player 6.
1
Escolha Controlar > Testar filme.

O filme ser executado no Flash Player.
Marque e desmarque a caixa de seleo para certificar-se de que funciona.
Selecione uma cor e certifique-se de que aparea na pgina 2.
Quando terminar, selecione Arquivo > Fechar para fechar o filme no exibidor.
Caso tenha observado algum erro, use a ferramenta Seta para selecionar o componente e faa as
correes no Inspetor de propriedades. Se necessrio, teste o filme novamente.
As prximas etapas
Este tutorial apresentou as etapas bsicas para criar um grupo simples de componentes e exibir os
resultados. Para obter mais informaes, consulte Usando o Flash e o Dicionrio do ActionScript,
encontrados no menu Ajuda.
94
Captulo 3

Curso - Macromedia - Tutorial Do Flash MX

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Curso - Macromedia - Tutorial Do Flash MX

Uploaded by

Copyright:

Available Formats

Tutorial do Flash MX

O que voc deve saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

Exibindo um filme concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

Analisar um filme completo

O que voc deve saber

Guia de introduo ao Flash MX

Exibindo o filme concludo

Analisar o filme completo utilizando o Inspetor de propriedades e o Movie Explorer

Oua o som executado continuamente durante a reproduo do filme. Este um exemplo de

Aps a exibio do filme, clique em sua caixa de fechamento.

Analisar o arquivo stiletto.fla

Na Linha de tempo, desbloqueie as camadas Copiar e Imagem.

Exibir propriedades de documento

Se o Inspetor de propriedades no estiver aberto, escolha Janela > Propriedades.

Introduo ao Tutorial do Flash MX

Se o Inspetor de propriedades no estiver completamente expandido, clique no tringulo

No Palco, selecione o carro.

Exibir o clipe de filme

No Palco, clique duas vezes no clipe de filme do carro.

Na Linha de tempo, selecione a reproduo e arraste-a lentamente pelos quadros.

Escolha Editar > Editar documento.

Se o painel Biblioteca no estiver aberto, escolha Janela > Biblioteca.

Expanda as outras pastas no painel Biblioteca para exibir as propriedades includas no

Introduo ao Tutorial do Flash MX

Ao terminar de exibir as propriedades, feche o painel Biblioteca.

Analisar a estrutura do filme com o Movie Explorer

Se necessrio, aumente o Movie Explorer para exibir a estrutura de rvore no painel.

Selecione o boto de filtragem Mostrar quadros e camadas. Percorra a categoria Definies do

Introduo ao Tutorial do Flash MX

No Movie Explorer, Com a categoria Animao de carro selecionada e expandida, expanda o

Definir as propriedades para um novo documento e criar um

Abrir um novo arquivo e definir as propriedades de documento

Escolha Arquivo > Novo.

Escolha Arquivo > Salvar como.

Denomine o arquivo como mystiletto.fla e salve-o na pasta do aplicativo Flash MX, na

Definir propriedades de documento

Se o Inspetor de propriedades no estiver aberto, escolha Janela > Propriedades. Na caixa de

Localize e clique na amostra de cor cinza com o valor hexadecimal 999999.

Selecionar este tom de cinza

Introduo ao Tutorial do Flash MX

Escolha Exibir > Grade > Editar Grade.

Na caixa de dilogo Grade, digite 10 px na caixa de texto de largura da grade e 10 px na caixa

Criar um fundo gradiente

Na caixa de ferramentas, selecione a ferramenta Retngulo.

A cor de preenchimento selecionada da forma no importante, pois voc logo a alterar.

Especificar uma cor para o gradiente

Se o Misturador de cores no estiver aberto, escolha Janela > Misturador de cores.

Introduo ao Tutorial do Flash MX

Se o Misturador de cores no estiver completamente expandido, clique na seta no canto

No menu pop-up Estilo de preenchimento, selecione Radial.

Clique no controle deslizante de gradiente esquerda da barra de gradiente para selecion-lo.

Digite 000066 na caixa de texto de valor hexadecimal e pressione Enter ou Return.

Clique neste tom de azul

Alterar o valor de alfa

Adicionar uma segunda cor ao gradiente

No Misturador de cores, clique no controle deslizante de gradiente direita da barra de

Introduo ao Tutorial do Flash MX

Transformar o preenchimento de gradiente

Na caixa de ferramentas, selecione a opo Transformar preenchimento. No Palco, clique em

Introduo ao Tutorial do Flash MX

Nomear e bloquear uma camada

Clique fora do nome da camada e clique no cone do cadeado para bloque-la.

Criar e mascarar arte vetorial

Adicionar uma camada