macromedia

Tutorial do Flash MX

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, RELA-TIVA 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

CAPTUL

Introdu

O que vocExibindo Analisar oDefinir asCriar e maInterpolarCarregar tAdicionarAdicionarOrganizarTestar o dAs prxim

CAPTUL

Tutorial

Exibindo InicializanSalvando Exibindo EscrevendControlanCriando cUsando uTestando As prxim

CAPTUL

Tutorial

Tipos de cExibindo Criando uAs prxim3O 1

o ao Tutorial do Flash MX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5

deve saber . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5o filme concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 arquivo stiletto.fla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 propriedades para um novo documento e criar um fundo gradiente . . . . . . . 12scarar arte vetorial . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 efeitos de bitmap em um clipe de filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30exto dinmico em tempo de execuo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 qualidades de animao e navegao a botes . . . . . . . . . . . . . . . . . . . . . . . . 42 eventos e sons de fluxo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 o painel Biblioteca . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 49esempenho de download e publicar o filme . . . . . . . . . . . . . . . . . . . . . . . . . . 50as etapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54

O 2

de introduo ao ActionScript . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57

um filme concludo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57do o filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

e recuperando informaes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 65informaes em uma caixa de texto dinmica . . . . . . . . . . . . . . . . . . . . . . . . . 67o uma expresso . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 69do o fluxo de um filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71omandos e reutilizando cdigos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73m objeto interno. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78o filme . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 81as etapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

O 3

de introduo aos componentes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83

omponentes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83o formulrio preenchido. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 84m formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 85as etapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94

ndice4

CAPTULO 1Introduo ao Tutorial do Flash MX

Este tucom oa etapanecessCom e

Ana De Cri Inte Car Mo Adi Tes recooptar seqnintrod

O que vAntes interattpico

Gu Ilus Adi Cri Ent Cri CriPara a5

torial fornece orientaes sobre o processo de criao de uma experincia atraente da Web Macromedia Flash MX. Ao concluir o tutorial, voc ter aprendido a criar um filme, desde de abertura de um novo documento publicao desse filme para reproduo na Web. So

rias aproximadamente trs horas para concluir o tutorial, dependendo da sua experincia. le voc aprender a realizar as seguintes tarefas:

lisar um filme completo

finir as propriedades do documento e criar um gradiente

ar e mascarar arte vetorial

rpolar efeitos de bitmap em um clipe de filme

regar texto dinmico

dificar botes e adicionar navegao

cionar eventos e sons de fluxo

tar e publicar o filme

mendvel concluir as oito sees includas no tutorial em seqncia, embora seja possvel por revisar apenas as sees que forem interessantes no seu caso. Se seguir o tutorial fora da cia, tenha em mente que as sees posteriores pressupem a dominao dos conhecimentos uzidos nas sees anteriores.

oc deve saberde seguir o tutorial, conclua as sete aulas apresentadas na Ajuda do Flash. Essas aulas ivas criadas no Flash apresentam os conceitos necessrios para concluir o tutorial. Os s das aulas incluem o seguinte:

ia de introduo ao Flash MX

trando no Flash

cionando e editando texto

ando e editando smbolos

endendo camadas

ando botes

ando animao interpolada

cessar uma aula, escolha Ajuda > Aulas. Em seguida, selecione uma aula na lista.

Captu6

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 Exa Exi1 De

em

Os cria

2 Qugra

Cri

3 Ousom

4 Rolsob

5 Cliarq

6 Ap

Analisa til arquivproprilo 1

minar um clipe de filme e distinguir seu relacionamento com o filme principal

bir os tipos de propriedades includas no filme

ntro da pasta do aplicativo Flash MX, navegue para Tutorials/FlashIntro e clique duas vezes stiletto.swf para abrir o filme completo no Flash Player independente.

filmes publicados do Flash apresentam a extenso SWF; os documentos do ambiente de o possuem a extenso FLA.

ando o filme for aberto, observe as trs exibies do carro aparecerem e desaparecerem dualmente.

e essa animao interpolando efeitos de bitmap em um clipe de filme.

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

e pelos trs botes ao longo da borda inferior direita da janela para exibir o efeito de reposio e para ouvir os sons de evento includos em cada boto.

que em um boto para ver seu vnculo e, em seguida, feche o navegador e retorne para o uivo SWF.

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

r o arquivo stiletto.flaanalisar o arquivo FLA completo para ver como o autor criou o documento. Para analisar o o, exiba as propriedades de um objeto, exiba a Linha de tempo e o Palco, examine as edades de biblioteca e use o Movie Explorer.

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.

2 ParLin

3 Na

Exibir pro

O Inspespeciexemp

1 Se o

Arrastar a barra que separa o Palco da Linha de tempoIntroduo ao Tutorial do Flash MX 7

a exibir todas as camadas na Linha de tempo principal, arraste a barra que separa o Palco da ha de tempo.

Linha de tempo, desbloqueie as camadas Copiar e Imagem.

priedades de documento

etor de propriedades permite exibir as especificaes dos objetos selecionados. As ficaes dependem do tipo de objeto selecionado. Se elecionar um objeto de texto, por lo, as configuraes para exibir e modificar atributos de texto sero mostradas.

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

Captu8

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

Noatri

Se obra

3 No

As smden

Exibir o c

Agorafilme.

1 No

Coemcha

Os temconlo 1

Inspetor de propriedades possvel exibir o tamanho, o estilo e a cor do texto, entre outros butos.

Inspetor de propriedades no estiver completamente expandido, clique no tringulo nco do canto inferior direito.

Palco, selecione o carro.

configuraes de clipe de filme substituem as configuraes de texto. Os clipes de filme so bolos que possuem suas prprias Linhas de tempo independentes. Pense neles como filmes tro de filmes.

lipe de filme

voc abrir o modo de edio de smbolo para exibir a Linha de tempo de um clipe de

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

mo voc aprendeu na aula Criando animao interpolada, defina as alteraes na animao quadros-chave. Ao percorrer a Linha de tempo, observe quais camadas possuem quadros-ve e quais quadros so quadros-chave.

quadros-chave inicial e intermedirio que incluem contedo so indicados na Linha de po por crculos slidos; j os quadros-chave finais aparecem como pequenos retngulos tornados.

Caixa de texto

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

3 Ao terminar de exibir o clipe de filme, siga um destes procedimentos para retornar ao filme prin

Esc Cli Cli

Exibir pro

O pain

1 Se o

2 Arrbib

3 Se a

4 CliBib

5 ExpdocIntroduo ao Tutorial do Flash MX 9

cipal:

olha Editar > Editar documento.

que no boto Voltar.

que em Cena 1 acima do Palco.

priedades de biblioteca

el Biblioteca contm os smbolos e objetos importados no documento.

painel Biblioteca no estiver aberto, escolha Janela > Biblioteca.

aste o painel Biblioteca para aument-lo, se necessrio, para exibir os objetos contidos na lioteca.

pasta Arte no estiver expandida, clique duas vezes nela para exibir os objetos da pasta.

que em view1.png para exibir a imagem na rea de visualizao na parte superior do painel lioteca.

anda as outras pastas no painel Biblioteca para exibir as propriedades includas no umento, como os botes e clipes de filme.

Captu10

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

Analisar

O MohierrqEssas i

1 Se o

2 Se n

Os lo 1

a estrutura do filme com o Movie Explorer

vie Explorer o ajuda a organizar, localizar e editar mdia. Com sua estrutura de rvore uica, o Movie Explorer oferece informaes sobre a organizao e o fluxo de um filme.

nformaes so especialmente teis durante a anlise de um filme criado por outra pessoa.

Movie Explorer ainda no estiver aberto, escolha Janela > Movie Explorer.

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

botes de filtragem do Movie Explorer exibem ou ocultam informaes.

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

4 CanVerCli

5 Exadela

6 Par

7 Selesm

AgoIntroduo ao Tutorial do Flash MX 11

cele a seleo do boto Mostrar quadros e camadas na parte superior do Movie Explorer. ifique se os nicos botes de filtragem selecionados so Mostrar texto, Mostrar botes, pes de filme e Grficos, Mostrar ActionScripts; e Mostrar vdeo, sons e bitmaps.

mine a lista para exibir algumas das propriedades includas no filme e para ver a relao s com outras propriedades.

a expandir um objeto ou categoria, clique no boto Mais (+) esquerda do nome.

cione o boto de filtragem Mostrar quadros e camadas. Percorra a categoria Definies do bolo. Com a categoria expandida, clique duas vezes no clipe de filme Animao de carro.

ra voc est no modo de edio de smbolo do clipe de filme.

Captu12

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

Parumumconabr

9 Fec

Se t

Definir fundo g

Para aum notarefas

Abr Cri

Abrir um

Agora

1 Esc

2 Esc

3 Desub

Observ

Definir pr

ConfiUse a configo tamalo 1

a exibir um item listado na rvore hierrquica, clique no cone correspondente. Se clicar em cone de quadro, a reproduo se mover para o quadro na Linha de tempo. Se clicar em a propriedade, como uma imagem de bitmap, o Inspetor de propriedades exibir as figuraes da imagem. Clique duas vezes em um cone que representa um smbolo para ir o modo de edio de smbolo.

he o Movie Explorer. Para fechar o documento, escolha Arquivo > Fechar.

iver feito alteraes no arquivo, no as salve.

as propriedades para um novo documento e criar um radienteprender a criar um filme no Flash, comece pela primeira etapa do processo: a abertura de vo arquivo. Em seguida, ao terminar esta seo, voc ter aprendido a realizar as seguintes :

ir um novo arquivo e definir as propriedades de documento

ar e transformar um fundo gradiente

novo arquivo

voc est pronto para criar sua prpria verso do filme de tutorial.

olha Arquivo > Novo.

olha Arquivo > Salvar como.

nomine o arquivo como mystiletto.fla e salve-o na pasta do aplicativo Flash MX, na pasta Tutorials/FlashIntro/My_Stiletto.

ao: Lembre-se de salvar seu trabalho com freqncia enquanto conclui o tutorial.

opriedades de documento

gurar as propriedades de um documento geralmente uma das primeiras etapas na criao. caixa de dilogo Inspetor de propriedades e Propriedades do documento para especificar uraes que afetam todo o filme, como a taxa de reproduo de quadros por segundo (qps), nho do Palco e a cor de fundo.

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.

2 A cmona

3 Loc

4 ParNaDime cl

As

Especific

No Paquandentre aIntroduo ao Tutorial do Flash MX 13

aixa Cor de fundo indica a cor do Palco. Clique na seta para baixo da caixa Cor de fundo e va a ferramenta Conta-gotas sobre as amostras de cores para exibir seus valores hexadecimais caixa de texto Hexadecimal.

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

a redimensionar o Palco, clique no boto Tamanho, que indica o tamanho do Palco. caixa de dilogo Propriedades do documento, digite 640 px na primeira caixa de texto enses e 290 px na segunda. Verifique se a opo Pixels est selecionada no menu pop-up

ique em OK.

dimenses do Palco so alteradas para refletir as novas configuraes de 640 x 290 pixels.

ar as configuraes da grade

lco, possvel alinhar objetos ao longo das linhas de grade horizontais e verticais. Mesmo o a grade no est visvel, possvel encaixar objetos nela. Agora voc modificar a distncia s linhas de grade horizontais e verticais e criar uma grade alinhada s bordas do Palco.

Selecionar este tom de cinza

Caixa de texto Hexadecimal

Captu14

1 Escolha Exibir > Grade > Editar Grade.

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

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

4 Ver

A pant

Criar um

Um grtutoriatranspuso do

Observnegativanimamelhor

Dese

Anteriobjetoao Pal

1 No

Essreal

2 Na lo 1

ifique se a opo Normal est selecionada para Preciso do encaixe e clique em OK.

reciso do encaixe determina quo prximo um objeto dever estar de uma linha de grade es de ser encaixado nela.

fundo gradiente

adiente exibe variaes de cor sutis ou transies entre duas ou mais cores. No arquivo do l finalizado, o fundo um gradiente que mescla preto e azul escuro com uma rea arente que permite a exibio de parte da cor cinza do Palco. Esse efeito obtido atravs do Misturador de cores.

ao: Embora os gradientes apresentem efeitos interessantes nos filmes, seu uso em excesso pode afetar amente as velocidades do processador do computador e diminuir a velocidade de reproduo de uma o. Durante a criao de um filme, considere os requisitos artsticos e de desempenho para determinar a utilizao de gradientes.

nhar um retngulo

ormente no tutorial, voc criou uma grade que se alinhava ao Palco e permitia o encaixe de s em suas linhas. Agora voc desenhar um retngulo que se encaixa na rea da grade junto co.

menu pop-up acima do lado direito do Palco, insira 75% para exibir todo o Palco.

a configurao indica a exibio ampliada ou reduzida do Palco. Ela no afeta o tamanho do Palco no filme, que foi especificado na caixa de dilogo Propriedades do documento.

caixa de ferramentas, selecione a ferramenta Retngulo.

3 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 c

4 Arrret

Ao

ObsFlasconCompres

Espe

Azul e

1 Na sele

Quferrpro

2 Se oIntroduo ao Tutorial do Flash MX 15

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

aste do canto superior esquerdo at o canto inferior direito do Palco para desenhar um ngulo que envolva todo o Palco.

soltar o ponteiro, o retngulo ser encaixado nas bordas do Palco, ao longo da grade oculta.

ervao: Enquanto conclui o tutorial, aconselhvel desfazer qualquer alterao que voc tenha feito. O h pode desfazer vrias alteraes recentes, dependendo do nmero de nveis de desfazer que voc figurou em Preferncias. Para desfazer, escolha Editar > Desfazer ou pressione Control+Z (Windows) ou

mand+Z (Macintosh). Inversamente, voc pode refazer o que desfez escolhendo Editar > Refazer ou sionando Control+Y (Windows) ou Command+Y (Macintosh).

cificar uma cor para o gradiente

scuro a primeira cor que ser adicionada ao gradiente.

caixa de ferramentas, selecione a ferramenta Seta. No Palco, clique dentro do retngulo para cionar o preenchimento.

ando o retngulo foi desenhado, o Inspetor de propriedades exibiu as propriedades da amenta Retngulo. Quando voc seleciona uma forma que j foi criada, o Inspetor de priedades exibe as propriedades dessa forma.

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

Captu16

3 Para expandir o Misturador de cores, clique na seta branca da barra de ttulo do painel.

4 Se oinfe

5 No

6 Cli

7 Clium

Dig

Clique aqui para expandir o painello 1

Misturador de cores no estiver completamente expandido, clique na seta no canto rior direito do painel.

menu pop-up Estilo de preenchimento, selecione Radial.

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

que na caixa de cor do canto superior esquerdo da janela para abrir a paleta de cores. Siga destes mtodos para selecionar azul escuro:

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

Controle deslizante Gradiente

Barra Gradiente

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.

Alter

No Mque a Especicor cin

Nocon

Adic

Agora

1 NograIntroduo ao Tutorial do Flash MX 17

ar o valor de alfa

isturador de cores, a caixa de texto Alfa indica a transparncia da cor, sendo que 0% indica cor completamente transparente e 100% indica que ela completamente opaca. fique um valor de alfa de 0% para criar um gradiente que inclui azul escuro e preto, alm da za do Palco que mostrada atravs das reas transparentes do gradiente.

Misturador de cores, digite 0 na caixa de texto Alfa e pressione Enter ou Return ou mova o trole deslizante Alfa para 0.

ionar uma segunda cor ao gradiente

voc adicionar preto ao gradiente.

Misturador de cores, clique no controle deslizante de gradiente direita da barra de diente para selecion-lo.

Clique neste tom de azul

Captu18

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

Transform

Ao trapreenc

1 Na qua

Umposlo 1

ar o preenchimento de gradiente

nsformar um objeto, ele girado, dimensionado ou inclinado. possvel modificar um himento utilizando a ferramenta Transformar preenchimento.

caixa de ferramentas, selecione a opo Transformar preenchimento. No Palco, clique em lquer ponto do retngulo.

a elipse que indica a forma e a posio do gradiente aparece em volta do Palco. Essa elipse sui controles para o local, a largura, a dimenso e a rotao do gradiente radial.

Largura

Redimensionar

Rotao

Centralizar posio

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

mPalc

3 ArrtornIntroduo ao Tutorial do Flash MX 19

edida que altera a forma e a posio da elipse, a forma e a posio das transies de cores no o tambm so modificadas.

aste a ala quadrada da elipse, que controla a largura do gradiente, para a esquerda para ar a elipse mais estreita; a forma aproximada da elipse mostrada na ilustrao a seguir.

Captu20

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

5 Arrelip

Nomear

A formdocumbloqulo 1

aste a ala circular inferior, que controla a rotao da elipse, para a esquerda para girar a se para o ngulo aproximado mostrado na ilustrao a seguir.

e bloquear uma camada

a de gradiente aparece na Camada 1 da Linha de tempo, no momento a nica camada do ento. Como preparao para adicionar e mover outros objetos no Palco, voc renomear e

ear a camada. Na prxima seo do tutorial, voc criar uma nova camada.

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.

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

Criar e Ao decores equalqudownl

O arqcriar a

Especi

Adi Cri MaPara cpara astilettoarquiv

Adiciona

Em veforma

1 ParD

2 Na

3 Nonode 9

Lemloca

boIntroduo ao Tutorial do Flash MX 21

mascarar arte vetorialsenhar no Flash, cria arte vetorial, que uma representao matemtica de linhas, curvas, posies. A arte vetorial no depende da resoluo. possvel redimensionar a arte para er tamanho ou exibi-la com qualquer resoluo sem perda de definio. Alm disso, o

oad da arte vetorial mais rpido do que das imagens de bitmap equivalentes.

uivo finalizado contm formas de fundo ao longo do gradiente. Use a ferramenta Oval para s formas.

ficamente, nesta seo voc aprender a realizar as seguintes tarefas:

cionar uma camada

ar e recortar formas

scarar a camada que contm as formas

oncluir esta seo, possvel continuar a trabalhar no arquivo mystiletto.fla ou pode navegar pasta do aplicativo Flash MX e abrir Tutorials/FlashIntro/stiletto2.fla. Se usar o arquivo 2.fla, salve-o com outro nome na pasta My_Stiletto para manter uma verso inalterada do o original.

r uma camada

z de criar as formas na camada Fundo, voc adicionar outra camada na qual desenhar as s.

a adicionar uma nova camada, escolha Inserir > Camada ou clique no boto Inserir camada. o nome de Formas nova camada.

caixa de ferramentas, selecione a ferramenta Oval.

Inspetor de propriedades, selecione Linha fina no menu pop-up Estilo do trao. Clique controle Cor do trao. Na paleta de cores, selecione o cinza com um valor hexadecimal 99999.

bre-se de que possvel inserir o valor hexadecimal na caixa de texto hexadecimal ou lizar e clicar na amostra de cor com o mesmo valor hexadecimal.

to Inserir camada

Captu22

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

5 Na Linha de tempo, verifique se a camada Formas est selecionada. No Palco, limite a forma ovaeste

Obs

6 Selesele

7 Se olo 1

l a um crculo pressionando Shift medida que arrasta para desenhar um crculo que se nde da rea da tela acima do Palco para a rea abaixo do Palco.

ervao: Se cometer um erro, escolha Editar > Desfazer e tente novamente.

cione a ferramenta Seta na caixa de ferramentas e clique duas vezes no crculo no Palco para cionar o preenchimento e o trao.

painel Transformar no estiver aberto, escolha Janela > Transformar.

8 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 c

Criar e tr

AgoraIntroduo ao Tutorial do Flash MX 23

rculo desenhado convertido em uma forma oval inclinada.

ansformar uma forma duplicada

voc criar e transformar uma forma oval duplicada.

Captu24

1 Com as opes de preenchimento oval e trao ainda selecionadas no Palco, escolha Editar > Duplicar.

2 No

3 Na

Umlo 1

Inspetor de propriedades, use o controle Cor do preenchimento para selecionar preto.

caixa de ferramentas, selecione a opo Transformao livre.

a guia com alas aparece em volta da forma oval duplicada.

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

5 Mocircapr

Crie um

Ao cridesagrexibir Introduo ao Tutorial do Flash MX 25

va o ponteiro acima da ala de canto at que ele se transforme em um indicador de rotao ular. Arraste o indicador de rotao para a esquerda para girar a forma oval para a posio oximada mostrada na ilustrao a seguir.

recorte com a cpia

ar uma forma sobre outra na mesma camada e as duas tm cores diferentes, alm de estarem upadas, a forma na frente recorta a rea da forma sob ela. Voc excluir a cpia oval para o efeito do recorte.

Captu26

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

2 A fotraseleprelo 1

rma oval agora possui um trao interno e outro externo. Com a tecla de seta, clique no o mais externo da forma oval para selecion-lo e clique pressionando a tecla Shift para cionar o trao interno tambm. Arraste os traos ligeiramente para a direita do enchimento, conforme mostrado na ilustrao a seguir.

3 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 preenchi-mento 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:

4 SeleseleformIntroduo ao Tutorial do Flash MX 27

cione a ferramenta Transformao livre. Arraste em volta das formas de fundo ovais para cionar todas as formas e, em seguida, arraste a ala de canto direita da guia para aumentar as

as, conforme mostrado na ilustrao a seguir.

Captu28

5 Arraste as formas do Palco para que parte da curva seja mostrada no canto superior esquerdo e lado direito do Palco.

Obs

Criar um

A artetela. Edisperpara amscamodif

1 Coa M

2 Na esqlo 1

ervao: Lembre-se de salvar seu arquivo com freqncia enquanto conclui o tutorial.

a mscara

criada na camada Formas estende-se para alm dos limites do Palco, para dentro da rea da mbora esta rea no aparea no filme publicado, a arte alm do Palco pode ser um elemento sivo no ambiente de criao. Embora seja possvel apagar parte das formas que se estendem tela, uma soluo melhor aplicar uma mscara sobre o Palco para que a nica rea sob essa ra todo o Palco, neste caso permanea visvel. Assim, se quiser retornar s formas para ic-las, elas estaro intactas.

m a camada Formas selecionada, adicione uma nova camada Linha de tempo e denomine-scara.

caixa de ferramentas, selecione a opo retngulo e desenhe um retngulo do canto superior uerdo ao canto inferior direito do Palco.

Este retngulo a forma da mscara. Qualquer item sob o retngulo estar visvel.

3 Cli(MconIntroduo ao Tutorial do Flash MX 29

que com o boto direito do mouse (Windows) ou clique com a tecla Control pressionada acintosh) no nome da camada Mscara na Linha de tempo e escolha Mscara no menu de texto.

Captu30

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 editarte

4 Salv

InterpolAlm para eas segu

Imp Mo Cri Inte

gra

Para caplicatcom o

Importar

Ao im

1 Na lo 1

camadas da mscara devem estar bloqueadas para que o efeito Mscara seja mostrado. Para ar as formas, desbloqueie as camadas Mscara e Formas de fundo. Ao terminar de editar a , bloqueie as camadas novamente para ativar a mscara.

e o arquivo.

ar efeitos de bitmap em um clipe de filmede criar arte vetorial no Flash, possvel importar imagens de bitmap, que utilizam pixels xibir grficos, para o filme do Flash e aplicar vrios efeitos de cor. Nesta seo, voc realizar intes tarefas:

ortar imagens de bitmap

dificar a compactao de bitmap

ar e editar um smbolo de clipe de filme

rpolar efeitos de bitmap para fazer com que as exibies do carro surjam e desapaream dualmente

oncluir esta seo, continue a trabalhar no arquivo mystiletto.fla ou navegue para a pasta do ivo Flash MX e abra Tutorials/FlashIntro/stiletto3.fla. Se usar o arquivo stiletto3.fla, salve-o utro nome na pasta My_Stiletto para manter uma verso inalterada do original.

imagens para a biblioteca

portar um arquivo para o Flash, pode import-lo diretamente para a biblioteca.

Linha de tempo, adicione uma nova camada e denomine-a Imagens.

2 Escolha Arquivo > Importar para biblioteca.

Ao selecionar Importar para biblioteca em vez de Importar, as imagens devem ser colocadas no Palco antes de aparecerem.

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

4 Na com

As

Modifica

Ao imimageafetar compa

1 Se ojan

2 Cli

A c

3 NoquaIntroduo ao Tutorial do Flash MX 31

caixa de dilogo Configuraes de importao do Fireworks PNG, clique em Importar o um nico bitmap achatado e, a seguir, clique em OK.

trs imagens agora esto na biblioteca.

r a compactao de bitmap

portar uma imagem, pode verificar e modificar as configuraes de compactao dessa m. Embora a compactao de imagens reduza o tamanho de arquivo do filme, ela pode a qualidade da imagem; o objetivo atingir o equilbrio entre as configuraes de ctao e a qualidade da imagem.

painel Biblioteca no estiver aberto, escolha Janela > Biblioteca. Se necessrio, aumente a ela para ver os trs arquivos importados.

que duas vezes no arquivo view1.png.

ompactao JPEG a seleo padro.

menu pop-up Compactao, selecione Sem perdas (PNG/GIF) para obter uma maior lidade de imagem.

Captu32

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

5 Vol

6 Nocliq

Criar um

No arqcena duma Ltranspdesapa

1 Copaiclar

2 Esclo 1

te ao painel Biblioteca. Clique duas vezes em view2.png, repita a etapa 3 e clique em OK.

painel Biblioteca, clique duas vezes em view3.png, especifique Sem perdas (PNG/GIF) e ue em OK.

smbolo de clipe de filme

uivo finalizado, trs exibies do carro eltrico aparecem e desaparecem gradualmente na e abertura. Esse efeito obtido pela criao de um smbolo de clipe de filme que possui inha de tempo independente da Linha de tempo principal. Em seguida, interpole a arncia alfa entre as trs exibies do carro para criar um efeito de aparecimento/recimento gradual. Para comear a criar o efeito, crie o clipe de filme.

m a camada Imagens ainda selecionada na Linha de tempo, arraste o objeto view1.png do nel Biblioteca para o Palco, colocando o carro na rea em que o fundo gradiente mais o.

olha Inserir > Converter em smbolo ou pressione F8.

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

Editar um

Para eAo abBiblio

1 No

O nvol

Novez

2 Mu

3 O cAni

4 Na veri

5 VerOK

6 Peresco

O i

7 AdiIntroduo ao Tutorial do Flash MX 33

smbolo

xibir a Linha de tempo do clipe de filme, necessrio estar no modo de edio de smbolo. rir o modo de edio de smbolo clicando duas vezes no smbolo no Palco ou no painel teca.

Palco, clique duas vezes no carro para abrir o modo de edio de smbolo.

ome do smbolo aparece acima da rea da tela, junto com um vnculo Cena 1 que o leva de ta ao filme principal.

modo de edio de smbolo, a Linha de tempo do clipe de filme estar sendo exibida, em da Linha de tempo do filme principal.

de o nome da Camada 1 para Exibio do fade 1.

arro apresentado no Palco uma imagem de bitmap, e no um smbolo, dentro do smbolo mao de carro. Crie o smbolo do carro selecionando-o no Palco e pressionando F8.

caixa de dilogo Converter em smbolo, d o nome Exibio do carro 1 ao smbolo e fique se a opo Clipe de filme est selecionada.

ifique se a centralizao de quadrado est selecionada no indicador Registro e clique em .

corra a Linha de tempo horizontalmente at chegar ao quadro 105. Selecione o quadro e lha Inserir > Quadro-chave ou pressione F6 para adicionar um quadro-chave.

ndicador Quadro atual exibe o quadro selecionado.

cione quadros-chave aos quadros 25 e 35.

Ponto de registro

Quadro atual

Captu34

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

Obse cliqua

Interpola

A criadireta:interpdo pri

1 Na no film

2 Noalfapop

3 Na pro

Umentocolo 1

ervao: Se cometer um erro ao adicionar quadros-chave e quiser exclu-los, selecione um ou mais quadros que com o boto direito do mouse (Windows) ou pressionando a tecla Control (Macintosh) e escolha Limpar dro-chave no menu contextual.

r efeitos de bitmap

o de um efeito de bitmap semelhante criao de uma interpolao de movimento necessrio especificar as configuraes para os quadros-chave inicial e final e a olao desses quadros e dos quadros intermedirios. O Flash cria a animao de transio meiro quadro-chave na animao do ltimo.

Linha de tempo Animao de carro, selecione o quadro 34 e clique em Exibio do carro 1 Palco para que o Inspetor de propriedades aparea exibindo as propriedades do clipe de e.

menu pop-up Cor do Inspetor de propriedades, selecione Alfa. No menu pop-up Valor de , digite 0% na caixa de texto e pressione Enter ou Return, ou utilize o controle deslizante -up para selecionar 0%.

Linha de tempo, selecione qualquer quadro entre os de nmero 25 e 34. No Inspetor de priedades, selecione Movimento no menu pop-up Interpolar.

a seta com uma linha slida atravessa os quadros-chave interpolados. Uma linha tracejada re os quadros-chave indica que a interpolao no est implementada corretamente, o que rre com freqncia quando um quadro-chave inicial ou final excludo acidentalmente.

Retngulo de delimitao

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.

2 Na camada Exibio do fade 2, adicione um quadro-chave ao quadro 25.

3 Co

4 Se ode qX e

O Iso

5 SeleCode f

6 Nona

7 Adi

8 Nopro

9 Na Ins

Desa

Agora

1 Na Introduo ao Tutorial do Flash MX 35

m a reproduo ainda no quadro 25, arraste view2.png do painel Biblioteca para o Palco.

painel de informaes no estiver visvel, escolha Janela > Info. Verifique se a centralizao uadrado est selecionada no indicador Registro e digite 0 na caixa de texto da coordenada

tambm 0 para a coordenada Y. Pressione Enter ou Return.

nspetor de propriedades tambm tem caixas de texto X e Y; entretanto, essas coordenadas relativas a um ponto de registro no canto superior esquerdo do clipe de filme.

cione view2.png no Palco e pressione F8 para torn-lo m smbolo. Na caixa de dilogo nverter em smbolo, d o nome Exibio do carro 2 ao smbolo. Verifique se a opo Clipe ilme est selecionada e clique em OK.

Inspetor de propriedades de clipe de filme, selecione Alfa no menu pop-up Cor e digite 0% caixa de texto Valor de alfa.

cione um quadro-chave ao quadro 35 da camada Exibio do fade 2.

Palco, clique dentro do retngulo de delimitao do carro transparente. No Inspetor de priedades de clipe de filme, insira 100% na caixa de texto Valor de alfa.

camada Exibio do fade 2, selecione qualquer quadro entre os de nmero 25 e 34. No petor de propriedades, selecione Movimento no menu pop-up Interpolar.

parecimento do segundo carro

voc criar a animao que faz com que o segundo carro desaparea.

camada Exibio do fade 2, adicione um quadro-chave ao quadro 60.

Captu36

2 Nessa mesma camada, adicione um quadro-chave ao quadro 70 e outro ao quadro 69.

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

4 Na camada Exibio do fade 2, selecione qualquer quadro entre os de nmero 60 e 68. No Inspetor de propriedades, selecione Movimento no menu pop-up Interpolar.

5 Clipre

Obs

Apar

medanima

1 Cod a

2 Na

3 CoPalcespcom

4 SeleCode f

5 NoVal

6 Adi

7 Nopro

8 Na Ins

Desa

Agoralo 1

que em qualquer quadro na camada Exibio do fade 2 entre os quadros 71 e 105 e ssione a tecla Delete.

ervao: Lembre-se de salvar seu trabalho com freqncia enquanto conclui o tutorial.

ecimento do terceiro carro

ida que o segundo carro desaparece, o terceiro aparece gradualmente. Voc criar essa o agora.

m a camada Exibio do Fade 2 selecionada, adicione uma nova camada Linha de tempo e ela o nome Exibio do fade 3.

camada Exibio do fade 3, adicione um quadro-chave ao quadro 60.

m o quadro 60 ainda selecionado, arraste o arquivo view3.png do painel Biblioteca para o o. Utilize o painel de informaes (escolha Janela > Info se ele estiver fechado) para

ecificar 0 para as coordenadas X e Y e para verificar se o ponto de registro est centralizado, o foi feito para o arquivo view2.png.

cione view3.png no Palco e pressione F8 para torn-lo um smbolo. Na caixa de dilogo nverter em smbolo, d o nome Exibio do carro 3 ao smbolo. Verifique se a opo Clipe ilme est selecionada e clique em OK.

Inspetor de propriedades, selecione Alfa no menu pop-up Cor e digite 0% na caixa de texto or de alfa.

cione um quadro-chave ao quadro 70 da camada Exibio do fade 3.

Palco, selecione dentro do retngulo de delimitao da Exibio do carro 3. No Inspetor de priedades, insira 100% na caixa de texto Valor de alfa.

camada Exibio do fade 3, selecione qualquer quadro entre os de nmero 60 e 69. No petor de propriedades, selecione Movimento no menu pop-up Interpolar.

parecimento do terceiro carro

voc criar a animao que faz com que o terceiro carro desaparea.

1 Na camada Exibio do fade 3, adicione um quadro-chave aos quadros 95 e 105.

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

3 Na camada Exibio do fade 3, selecione qualquer quadro entre os de nmero 95 e 104. No Inspetor de propriedades, selecione Movimento no menu pop-up Interpolar.

Apar

medanima

1 Na

2 Coview

3 Nocoo

4 NoVal

5 Sele

6 CliIns

7 Na Ins

Obs

Testar o

Em qucomo

1 Salv

O F

No

2 Ao docLin

CarregaNa auTambfceis em umespecidinmmodif

Nesta Introduo ao Tutorial do Flash MX 37

ecimento do primeiro carro

ida que o terceiro carro desaparece, o primeiro aparece novamente para concluir a o.

camada Exibio do fade 1, adicione um quadro-chave ao quadro 95.

m o quadro 95 ainda selecionado, arraste o clipe de filme Exibio do carro 1 (e no 1.png) do painel Biblioteca para o Palco.

painel de informaes, digite 0 na caixa de texto da coordenada X e 0 tambm para a rdenada Y. Pressione Enter ou Return.

Inspetor de propriedades, selecione alfa no menu pop-up Cor e insira 0% na caixa de texto or de alfa.

cione o quadro 104 da camada Exibio do fade 1.

que dentro do retngulo de delimitao do clipe de filme Exibio do carro 1 no Palco. No petor de propriedades, insira 100% na caixa de texto Valor de alfa.

camada Exibio do fade 1, selecione qualquer quadro entre os de nmero 95 e 104. No petor de propriedades, selecione Movimento no menu pop-up Interpolar.

ervao: Lembre-se de salvar seu trabalho com freqncia enquanto conclui o tutorial.

filme

alquer ponto durante a criao, possvel testar o modo como o filme ser reproduzido um arquivo SWF.

e o seu filme e escolha Controlar > Testar Filme.

lash exporta uma cpia em SWF do seu filme.

filme SWF, a animao reproduzida automaticamente de forma contnua.

terminar de exibir o filme, feche o arquivo SWF clicando em sua caixa de fechamento. No umento do Flash, escolha Editar > Editar documento ou clique em Cena 1 para retornar ha de tempo principal.

r texto dinmico em tempo de execuo.la Adicionando e editando texto voc treinou a digitao de texto diretamente no Palco. m possvel criar um filme e incluir texto de fontes externas nele. Uma das maneiras mais

de fazer isso utilizando a ao loadVariables. Ela serve para carregar texto de um arquivo campo de texto dinmico durante o tempo de execuo. No arquivo FLA, possvel

ficar atributos de texto, como o estilo da fonte, o tamanho e a cor do campo de texto ico. A vantagem de manter o texto em arquivos externos que qualquer usurio que queira icar o texto pode trabalhar com o arquivo de texto em vez do arquivo FLA.

seo, voc aprender a realizar as seguintes tarefas:

Captu38

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 externoPara concluir esta seo, continue a trabalhar no arquivo mystiletto.fla ou navegue at a pasta do aplicatcom o

Importar

Antes FreeH

1 Na o n

2 Co

Antlog

3 Navlog

4 Na esttext

5 Na mo

6 po loprelo 1

ivo Flash MX e abra Tutorials/FlashIntro/stiletto4.fla. Se usar o arquivo stiletto4.fla, salve-o utro nome na pasta My_Stiletto para manter uma verso inalterada do original.

o logotipo

de criar o campo de texto dinmico, importe o logotipo, um arquivo do Macromedia and para o qual o Flash automaticamente adiciona uma camada na Linha de tempo.

Linha de tempo, selecione a camada Imagens e adicione uma nova camada acima dela. D ome de Cpia nova camada.

m a camada Cpia selecionada, escolha Arquivo > Importar.

eriormente no tutorial, voc importou objetos para a biblioteca. Agora voc importar o otipo para que ele aparea no Palco.

egue na pasta do aplicativo Flash MX at a pasta Tutorials/FlashIntro/Assets e clique em o.fh10 e em Abrir.

caixa de dilogo Importar do FreeHand, verifique se as opes Cenas, Camadas e Tudo o selecionadas. Verifique tambm se as opes Incluir camada de fundo e Manter blocos de o esto selecionadas e clique em OK.

Linha de tempo, o Flash criou uma camada denominada Logo. Arraste o nome Logo para ver a camada para baixo da camada Cpia.

ossvel especificar coordenadas de Palco para o logotipo. No Inspetor de propriedades, com gotipo selecionado, digite 10 na caixa de texto X e 20 na caixa de texto Y. Em seguida, ssione Enter ou Return.

7 Na Linha de tempo, bloqueie a camada Logo.

Criar um

Agoratexto v

1 Na Tex

2 No

_saplatUs

3 Na

4 Clide F

5 NoqueIntroduo ao Tutorial do Flash MX 39

campo de texto dinmico

voc criar um campo de texto dinmico. Em vez de digitar texto no campo, especifique o arivel que ser carregado no campo em tempo de execuo.

Linha de tempo, selecione a camada Cpia. Na caixa de ferramentas, selecione a ferramenta to. No Inspetor de propriedades, selecione Texto dinmico no menu pop-up Tipo de texto.

menu pop-up Fonte, selecione _sans.

ns uma fonte de dispositivo apropriada para texto pequeno que aparece em vrias aformas de computador. Para obter mais informaes sobre fontes de dispositivo, consulte ando fontes de dispositivo (somente texto horizontal), em Ajuda > Usando o Flash.

caixa de texto Tamanho de ponto, digite 12.

que na caixa Cor do texto (preenchimento) e selecione amarelo com um valor hexadecimal FCC00.

menu pop-up Tipo de linha, selecione Multilinha, que a opo para vrias linhas de texto sero quebradas.

Menu pop-up Tipo de linha

Menu pop-up Tipo de texto

Menu pop-up FonteCaixa de texto Tamanho do ponto

Captu40

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

7 No

O ailusde t

Usar a a

A aotexto e

1 Na cam

u

2 Se oneccan

O tseleselelo 1

Inspetor de propriedades, digite textField na caixa de texto Var.

rquivo de texto que ser carregado no campo de texto dinmico, conforme mostrado na trao a seguir, inclui texto que nomeia a varivel: textField=. Ao inserir este nome na caixa exto Var, estar nomeando a varivel que o filme dever carregar.

o loadVariables para carregar texto

loadVariables contm um parmetro para especificar o caminho para o texto da varivel. O st em um arquivo denominado copy.txt, na pasta Tutorials/FlashIntro/Assets.

Linha de tempo, adicione uma nova camada e denomine-a Aes. Se necessrio, arraste a ada Aes para o incio da Linha de tempo.

ma boa prtica manter as aes na camada superior de uma Linha de tempo.

painel Aes no estiver aberto, escolha Janela > Aes. Aumente o painel Aes, se essrio, clicando na seta branca da barra de ttulo para expandir a janela e arrastando o to inferior direito do painel para exibir a caixa de ferramentas Aes e o painel Script.

ipo de painel Aes exibido depender do objeto ao qual a ao est sendo adicionada. Se cionou um quadro, por exemplo, o painel Aes exibir opes para quadros. Caso tenha cionado um boto, esse painel exibir opes para botes.

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

4 Na loa

O Apai

Boto do menu OpesIntroduo ao Tutorial do Flash MX 41

caixa de ferramentas Aes, escolha Aes > Navegador/Rede e clique duas vezes em dVariables.

ctionScript adicionado ao painel Script. Os parmetros da ao aparecem acima do nel Script.

Caixa de ferramentas Aes Painel Script

Captu42

5 Na caixa de texto URL, digite o caminho para o arquivo de texto: ../assets/copy.txt.

Testando

SalvTam

AdicionAo espboto.dentroinclui

Especi

Imp Alin Adi Adi Usa AdiPara caplicatcom olo 1

seu filme

e o filme e escolha Controlar > Testar filme.

bm possvel pressionar Control+Enter (Windows) ou Command+Return (Macintosh).

ar qualidades de animao e navegao a botesecificar que um novo smbolo um boto, o Flash cria a Linha de tempo para os estados do Na aula Criando botes voc aprendeu a alterar a cor de preenchimento de uma forma de um estado de boto. Nesta seo, voc saber mais sobre como modificar botes e isso como adicionar animao a um boto.

ficamente, nesta seo voc aprender a realizar as seguintes tarefas:

ortar uma biblioteca de outro arquivo FLA

har botes

cionar animao a um estado de boto

cionar navegao a um boto para vincul-lo a um site da Web

r o recurso Ativar botes simples

cionar navegao ao boto

oncluir esta seo, continue a trabalhar no arquivo mystiletto.fla ou navegue at a pasta do ivo Flash MX e abra Tutorials/FlashIntro/stiletto5.fla. Se usar o arquivo stiletto5.fla, salve-o utro nome na pasta My_Stiletto para manter uma verso inalterada do original.

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 b

poss

1 Na den

2 Noexib

3 Arrcam

Ao docIntroduo ao Tutorial do Flash MX 43

otes

vel alinhar os trs botes ao longo de eixos verticais e horizontais com o painel Alinhar.

Linha de tempo, com a camada Cpia selecionada, adicione uma nova camada e omine-a Botes. Bloqueie todas as camadas, com exceo de Botes.

menu pop-up Exibio do palco, direita e acima do Palco, insira 150% para aumentar a io do Palco. Em seguida, role para o lado inferior direito do Palco.

aste o Boto 1 do painel Biblioteca buttons.fla e coloque-o no canto inferior direito do po de texto dinmico.

arrastar um boto do painel Biblioteca buttons.fla, ele se torna parte da biblioteca do umento.

Captu44

4 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:

5 Co

6 Parnocen

Os

Ativar bo

QuandBotecompl

1 Esc

O b

2 Ao recu

Modifica

Voc cfilme. lo 1

m a ferramenta Seta, arraste para selecionar os trs botes.

a abrir o painel Alinhar, escolha Janela > Alinhar. Certifique-se de que a opo 'No palco' est selecionada. Voc no deseja alinhar os botes em relao ao Palco. Clique em Alinhar tro verticalmente e em Distribuir centro horizontalmente.

botes so alinhados no Palco.

tes simples

o o recurso Ativar botes simples est selecionado, possvel ouvir os sons includos nos s 2 e 3, alm de exibir as cores utilizadas nos estados de botes. Itens de botes mais exos, como animao, no so reproduzidos.

olha Controlar > Ativar botes simples e role sobre e clique em cada boto.

oto da direita, Boto 1, no est finalizado. Ele ser modificado a seguir.

terminar de testar os botes, escolha Controlar > Ativar botes simples para desmarcar esse rso.

r o estado de um boto

riar um clipe de filme no estado Sobre do Boto 1 e uma interpolao de forma no clipe de A interpolao de forma gera um efeito que altera a cor de cinza para vermelho.

Alinhar centro verticalmente

Distribuir centro horizontalmente

Para o Palco

1 No Palco, clique duas vezes no boto da direita, Boto 1, para abrir o modo de edio de smbolo.

2 Na Linha de tempo do Boto 1, oculte todas as camadas menos a camada Cor. Na camada Cor, selecione o quadro-chave Sobre.

3 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

4 Nosm

5 Ren

6 Covivo

7 Na pro

Arr

Adiciona

QuanddeverActionLinha

1 Adi

2 Na

3 Se oparIntroduo ao Tutorial do Flash MX 45

boto ao smbolo. Selecione Clipe de filme e clique em OK.

Palco, clique duas vezes no smbolo Animao de boto para abrir o modo de edio de bolo.

omeie a Camada 1 como Alterao de cor e adicione um quadro-chave ao quadro 15.

m a reproduo ainda no Quadro15, selecione a forma de boto no Palco e escolha um tom de vermelho no menu pop-up Cor do preenchimento na caixa de ferramentas.

Linha de tempo, clique em qualquer quadro entre os de nmero 1 e 13. No Inspetor de priedades, selecione Forma no menu pop-up Interpolar.

aste a reproduo dos quadros 1 ao 15 para ver a alterao da cor.

r aes a botes

o o usurio clicar em um boto e a animao interpolada for reproduzida, a reproduo ir para o final da Linha de tempo Animao do boto e ento ser interrompida. Utilize o Script, a linguagem de script do Flash, para controlar o movimento de reproduo em uma

de tempo.

cione uma nova camada Linha de tempo Animao do boto e denomine-a Aes.

camada Aes, adicione um quadro-chave ao quadro15.

painel Aes no estiver aberto, escolha Janela > Aes. Aumente o painel, se necessrio, a exibir a caixa de ferramentas Aes e o painel Script.

Captu46

4 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 min

Obs

Adiciona

Utilize

1 Esc

2 No

3 No

4 Na lo 1

Linha de tempo Animao de boto, o Quadro 15 da camada Aes exibe agora um a sculo que indica a existncia de uma ao anexada a esse quadro.

ervao: Lembre-se de salvar seu trabalho com freqncia enquanto conclui o tutorial.

r navegao ao boto

a ao getURL para adicionar navegao a um boto que abre um site da Web.

olha Editar > Editar documento ou clique em Cena 1 para retornar ao filme principal.

Palco, clique em Boto 1, o boto direita.

painel Aes, escolha Aes > Navegador/Rede e clique duas vezes em getURL.

caixa de texto URL, digite qualquer URL completa, como http://www.macromedia.com.

5 No menu pop-up Janela, selecione _blank para iniciar uma nova janela do navegador quando o usurio clicar no Boto 1.

6 Salvesp

7 Fecdese, epai

AdicionQuandfluxo cEsses s

Os sonreprodtarefas

Adi AdiPara caplicatcom oIntroduo ao Tutorial do Flash MX 47

e o arquivo e escolha Controlar > Testar filme. Clique no Boto 1 para ir para o site da Web ecificado na etapa 4.

he o navegador e o arquivo SWF e, em seguida, retorne ao ambiente de criao do Flash. Se ejar, selecione o Boto 2 no Palco e repita as etapas 3 a 7 para vincul-lo a outro site da Web m seguida, repita essas etapas para o Boto 3. Ao terminar de vincular os botes, feche o nel Aes.

ar eventos e sons de fluxoo um filme estiver sendo descarregado de uma fonte na Internet, possvel que um som de omece a ser reproduzido assim que o incio do arquivo de som tiver sido descarregado. ons so especialmente adequados como sons de fundo contnuos.

s de evento devem ser completamente descarregados e carregados na RAM antes de sua uo; esses sons so teis para botes. Nesta seo, voc aprender a realizar as seguintes :

cionar um som de fluxo ao filme

cionar um som de evento a um boto

oncluir esta seo, continue a trabalhar no arquivo mystiletto.fla ou navegue at a pasta do ivo Flash MX e abra Tutorials/FlashIntro/stiletto6.fla. Se usar o arquivo stiletto6.fla, salve-o utro nome na pasta My_Stiletto para manter uma verso inalterada do original.

Captu48

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.

2 Escolha Arquivo > Importar. Na pasta do aplicativo Flash MX, navegue para Tutorials/Flaou

Os

3 Co

Na

4 Seledigrep

Testar o

1 Salv

2 Qu

Adiciona

Alm propri

Comogera qSobre,quadr

Agoraduranno ap

1 Nosm

2 Na

3 Selepre

4 ParInsEve

5 Salvtermlo 1

shIntro/Assets e clique em track1.mp3. Clique pressionando a tecla Control (Windows) Command (Macintosh) para adicionar ping.mp3 seleo e clique em Abrir.

arquivos so importados para a biblioteca.

m a camada Sons selecionada, arraste o som track1.mp3 do painel Biblioteca para o Palco.

Linha de tempo, uma pequena representao das ondas sonoras aparece no quadro.

cione o primeiro quadro da camada Sons na Linha de tempo. No Inspetor de propriedades, ite 999 na caixa de texto Repetir para especificar quantas vezes o som poder ser roduzido continuamente.

filme

e o arquivo e escolha Controlar > Testar filme para ouvir o som.

ando terminar de reproduzir o filme, clique em sua caixa de fechamento.

r um som de evento a um boto

de arrastar um som para o Palco, tambm possvel selecionar um som no Inspetor de edades. Utilize esse mtodo para adicionar um som de evento a um boto.

voc aprendeu na aula Criando botes, quando um smbolo de boto criado, o Flash uadros para os diferentes estados do boto em relao ao ponteiro do mouse. O quadro por exemplo, representa o estado do boto quando o ponteiro est sobre ele. Outros os/estados de boto so Para cima, Para baixo e rea.

voc adicionar um som de evento a um boto, que faz com que o som seja executado te o estado Sobre. Como voc est adicionando o som ao smbolo do boto na biblioteca, enas a uma instncia do smbolo, o som ser reproduzido para cada instncia do boto.

painel Biblioteca, clique duas vezes na instncia do Boto 1 para abrir o modo de edio de bolo

Linha de tempo do Boto 1, adicione uma nova camada e denomine-a Som.

cione o quadro Sobre (quadro 2) da camada Som e escolha Inserir > Quadro-chave ou ssione F6.

a definir as propriedades de som, clique duas vezes no quadro 2 da camada Som. No petor de propriedades, selecione Ping.mp3 no menu pop-up Som. Verifique se a opo nto est selecionada no menu pop-up Sinc.

e o documento e escolha Controlar > Testar filme para ouvir os sons do boto. Quando inar de exibir o arquivo SWF, feche sua janela para retornar ao documento.

Organizar o painel BibliotecaNo 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.

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

2 ExpBibpar

3 Cliani

4 Ren

5 Arra p

6 ArrIntroduo ao Tutorial do Flash MX 49

anda e aumente a janela, conforme necessrio, para exibir todas as propriedades do painel lioteca. Na parte inferior do painel Biblioteca, clique no boto Nova pasta quadro vezes, a criar quatro pastas novas.

que duas vezes no nome da pasta 1 sem ttulo e renomeie-a como Clipes de filme da mao de carro.

omeie as outras trs pastas como Sons, Arte e Botes.

aste Exibio do carro 1, Exibio do carro 2, Exibio do carro 3 e Animao de carro para asta Clipes de filme da animao de carro.

aste ping.mp3 e track1.mp3 para a pasta Sons.

Captu50

7 Arraste view1.png, view2.png e view3.png para a pasta Arte.

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

9 Denomine a subpasta como Clipes de filme de boto e arraste as propriedades de clipe de filme de boto restantes para essa pasta.

10 Fec

Testar oPara cWeb q

Se vocpara aexibilo 1

he o painel Biblioteca e salve o documento.

desempenho de download e publicar o filme oncluir o documento, utilize o comando Publicar para criar um filme compatvel com a ue tenha a extenso SWF.

usar o comando Publicar com as configuraes padro, o Flash ir preparar o seu arquivo Web. O Flash publicar o SWF e criar um arquivo HTML com as marcas necessrias para o do SWF.

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 Pub Rev ExiPara caplicatsalve-o

Testando

Para qdescardescarbanda

Voc pocorrede cad

1 Salv

2 Noque

VocIntroduo ao Tutorial do Flash MX 51

licar o filme em uma etapa

isar e modificar as configuraes de publicao

bir o filme em um navegador da Web

oncluir esta seo, continue a trabalhar no arquivo mystiletto.fla ou navegue para a pasta do ivo Flash MX e abra Tutorials/FlashIntro/stiletto7.fla. Se voc usar o arquivo stiletto7.fla, com outro nome na pasta My_Stiletto para manter uma verso inalterada do original.

o desempenho do download do filme

ue um filme do Flash seja reproduzido corretamente na Internet, um quadro deve ser regado antes que o filme o alcance. Se o filme alcanar um quadro que ainda no foi regado, ele ser interrompido at que os dados cheguem. No entanto, a baixa largura de dos arquivos do Flash favorece downloads rpidos.

ode usar o Perfil de Largura de Banda para testar seu filme e identificar onde podem r as pausas. O Perfil da Largura de Banda mostra graficamente o volume de dados enviado a quadro no filme de acordo com a velocidade selecionada do modem.

e o seu documento e escolha Controlar > Testar filme.

menu Depurar, selecione uma velocidade de modem para determinar a taxa de download o Flash ir simular.

tambm pode escolher Personalizar para inserir uma taxa de download.

Captu52

3 Escolha Exibir > Perfil da Largura de Banda para ver o SWF com um grfico do desempenho de download.

A bvrquase arepdet

4 Ao par

Usando o

poss

CoO Fbasos a

Exib

Com aarquivlo 1

arra sombreada representa o primeiro e nico quadro do filme principal. Os filmes com ios quadros tero diversas barras sombreadas. A altura da barra representa o tamanho do dro em bytes e kilobytes. As barras que se estendem acima da linha vermelha, especialmente barra representa um quadro diferente do primeiro, indicam que poder haver atrasos na roduo do filme. possvel otimizar o filme para obter downloads mais rpidos. Para obter alhes, consulte Otimizando os filmes em Ajuda > Usando o Flash.

terminar de exibir o Perfil da Largura de Banda, escolha Exibir > Perfil da Largura de Banda a desmarc-lo. Feche a janela SWF para retornar ao ambiente de criao.

comando Publicar

vel publicar o documento do Flash para reproduo na Web em uma etapa.

m o documento salvo, escolha Arquivo > Publicar.

lash publica o seu filme criando um arquivo SWF e possivelmente arquivos adicionais, com e nos atributos especificados na caixa de dilogo Configuraes de Publicao. Por padro, rquivos publicados sero colocados na mesma pasta em o FLA foi salvo.

indo as configuraes de publicao

caixa de dilogo Configuraes de Publicao fcil reconfigurar a forma como o seu o ser publicado.

1 Para exibir as configuraes de publicao, escolha Arquivo > Configuraes de Publicao.

Pordo

Qugui

2 Na Cli

Porcom

3 Cli

O pemCo

Alter

Por paao Fla

1 Na pad

2 Na stilcliqIntroduo ao Tutorial do Flash MX 53

padro, o Flash configurado para criar um arquivo HTML de suporte que exibe o filme Flash.

ando voc seleciona um formato que exige configuraes adicionais, exibida uma nova a.

guia Formatos, verifique se as opes Flash (.swf ) e HTML (.html) esto selecionadas. que na guia Flash.

padro, o filme publicado para o Flash Player. O processo de publicao tambm aplica pactao de filme e JPEG.

que na guia HTML.

rocesso de publicao cria um documento HTML, por padro, que insere o arquivo SWF uma janela do navegador. As configuraes da guia HTML da caixa de dilogo nfiguraes de publicao determinam como o filme aparece no navegador.

ando as configuraes de publicao

dro, o Flash atribui ao arquivo SWF o mesmo nome do arquivo FLA. possvel solicitar sh para alterar o nome.

guia Formatos da caixa de dilogo Configuraes de Publicao, desmarque Usar nomes ro.

caixa de texto HTML (.html), selecione o texto existente e digite um novo nome como ettoElectric.html. Clique em Publicar. Quando a janela de status Publicando for fechada, ue em OK na caixa de dilogo Configuraes de publicao.

Captu54

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.

2 Noexib

As

Para opublic

As prxAo condo Fla

Ana De Cri Inte Car Mo Adi Teslo 1

navegador, utilize um comando como Exibir > Fonte da pgina ou Exibir > Fonte para ir o HTML.

marcas OBJECT e EMBED garantem que o filme SWF seja exibido no navegador.

bter mais informaes sobre os modelos de HTML do Flash, consulte Sobre os modelos de ao HTML, em Ajuda > Usando o Flash.

imas etapascluir todas as oito sees do tutorial, voc ter aprendido bastante sobre a criao de filmes

sh, inclusive como concluir as seguintes tarefas:

lisar um filme completo

finir as propriedades do documento e criar um gradiente

ar e mascarar arte vetorial

rpolar efeitos de bitmap em um clipe de filme

regar texto dinmico

dificar botes e adicionar navegao

cionar eventos e sons de fluxo

tar e publicar um filme

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.Introduo ao Tutorial do Flash MX 55

Captu56 lo 1

CAPTULO 2Tutorial de introduo ao ActionScript

O Actcriaoao Flaum filexami

Este tupara aatribuTutorifamiliCrian

Depenensina

Inic Salv Exi Esc Co Cri Usa Tes

ExibindAntes uma idtempo57

ionScript a linguagem de criao de scripts do Macromedia Flash MX. A linguagem de de scripts uma forma de comunicao com um programa. Pode ser usada para informar

sh o que deve ser feito e para perguntar-lhe o que est acontecendo durante a execuo de me. Essa comunicao bidirecional permite criar filmes interativos. Neste tutorial, sero nadas as tarefas envolvidas na criao de um quebra-cabea interativo.

torial voltado para usurios do Flash iniciantes em ActionScript que desejem trabalhar mpliar suas habilidades. necessrio um conhecimento prvio das aes bsicas e saber -las no painel Aes. Para tirar o mximo proveito deste tutorial, conclua primeiro o al de introduo ao Flash MX, em Ajuda > Tutoriais.Voc tambm dever estar arizado com os conceitos apresentados em Escrevendo scripts com o ActionScript e em do a interao com o ActionScript, em Ajuda > Usando o Flash.

dendo da sua experincia, este tutorial leva cerca de uma hora para ser concludo, e lhe r a realizar as seguintes tarefas:

ializando o filme

ando e recuperando informaes

bindo informaes em uma caixa de texto dinmica

revendo uma expresso

ntrolando o fluxo de um filme

ando comandos e reutilizando cdigos

ndo um objeto interno

tando o filme

o um filme concludode comear a trabalhar no seu prprio filme, exiba uma verso completa do tutorial para ter ia do que ser criado. Alm disso, o tutorial concludo permite examinar a Linha de , o Movie Explorer, o Palco e o painel Aes para compreender as prticas de criao.

Captu58

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

2 No

As

3 Cli

Obcon

4 Cli

A p

5 Ma

O npro

6 Maque

A p

7 Ao com

Analisan

til elemenlo 2

filme puzzle.swf, clique no boto OK.

peas do quebra-cabea sero embaralhadas.

que em todos os botes Mostrar/Ocultar.

serve como os diferentes padres e nmeros de peas so exibidos para orient-lo na cluso do quebra-cabea.

que em uma pea do quebra-cabea e arraste-a para a rea de soluo.

ea se encaixar no local.

ntenha pressionada a tecla Shift e clique em uma pea do quebra-cabea.

mero da pea ser exibido no crculo abaixo da rea de soluo. Caso fique impedido de sseguir, combine o nmero da pea ao seu local na guia do nmero da pea.

ntenha pressionada a tecla Alt (Windows) ou Option (Macintosh) e clique na pea do bra-cabea.

ea ir girar no sentido horrio.

terminar de exibir o arquivo SWF, voc pode fechar a janela ou deix-la aberta para servir o uma referncia.

do o arquivo puzzle.fla

analisar o arquivo FLA concludo para determinar como o autor o elaborou e onde os tos do ActionScript esto localizados.

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

2 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 que

3 ParTemorg

4 Parcolu

Cli tcoluelemfun

5 Sele

O Q

Parclipde t

Abrttu

SeleTutorial de introduo ao ActionScript 59

bra-cabea.

a redimensionar a Linha de Tempo e o Palco, arraste a barra que separa o Palco da Linha de po para cima e para baixo. Role pela Linha de tempo para ver como as camadas esto

anizadas.

a ver as caixas de dilogo e guias no Palco no ambiente de criao, clique no X vermelho na na Olho direita do nome de uma camada. Um X vermelho indica uma camada oculta.

que na coluna Bloquear para bloquear uma camada, o que a impede de ser selecionada. Isso il quando selecionado um item do Palco que est abaixo de um item em outra camada. A na Contorno, indicada por um quadrado acima da coluna, ativa os contornos de todos os entos em uma camada. Isso pode facilitar a visualizao de bordas da forma e agilizar o

cionamento do Flash.

cione Quadro 1 na camada Aes.

uadro 1 tem um a minsculo, o que indica a existncia de aes associadas ao quadro.

a adicionar um elemento do ActionScript a um filme, atribua-o a um boto, quadro ou e de filme. Os scripts de quadro so indicados por um a minsculo em um quadro na Linha empo. Para localizar scripts de boto e clipe de filme, siga um destes procedimentos:

a o painel Aes e selecione um script na barra de salto a lista pop-up abaixo da barra de lo do painel Aes.

cione botes e clipes de filme no Palco com o painel Aes aberto.

Mova esta barra para redimensionar a Linha de tempo.

Captu60

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 a

Exibindo

1 ParJan

NoAlMocab

2 Seleno

InicializTodose de alvarivcaixas

Cada pode snome propri

O Actter o vrecupelo 2

es no modo normal.

aes no Movie Explorer

a localizar todas as aes no filme, use o Movie Explorer. Caso no esteja aberto, selecione ela > Movie Explorer.

Movie Explorer, desmarque todos os botes de filtragem, exceto o boto ActionScript. m das aes no Quadro 1 da camada Aes, as aes tambm so includas em cada boto strar/Ocultar, nos botes nas diversas caixas de dilogo exibidas e em cada pea do quebra-ea.

cione Arquivo > Fechar para fechar o filme puzzle.fla quando terminar. No salve alteraes arquivo concludo.

ando o filme os filmes tm um estado inicial. Isso mostra a aparncia de um filme antes de ser executado gum interagir com ele. s vezes, necessrio definir propriedades de clipes de filme e eis para estabelecer esse primeiro estado. Por exemplo, no arquivo puzzle.fla, determinadas de dilogo e guias de padro devem estar ocultas no estado inicial.

clipe de filme em um filme do Flash tem um conjunto de qualidades, ou propriedades, que er manipulado com o ActionScript. Cada uma dessas propriedades identificada por um precedido por um caractere de sublinhado (_). Por exemplo, cada clipe de filme tem uma edade _xscale, uma propriedade _yscale e uma propriedade _rotation, entre outras.

ionScript usa variveis para armazenar informaes. Por exemplo, a varivel meu_nome pode alor Jody Singer. possvel aprender mais sobre variveis na seo Salvando e rando informaes , na pgina 65.

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 Esc

2 Na abr

3 Se f

Vocporalgu

4 Escmy

Fazmyseqsolu

Definindo

O filmas outpadrecabea

Para ininicial

1 SeleA

O p umTutorial de introduo ao ActionScript 61

olha Arquivo > Abrir.

pasta do aplicativo Flash MX, navegue at Tutorials/ActionScript/Meu_quebra-cabea e a o arquivo mypuzzle.fla.

or recebida uma mensagem de substituio de fonte, clique em Usar padro.

ver um filme de tutorial parcialmente concludo. O filme poder parecer concludo que todos os smbolos esto no lugar no Palco. Entretanto, ainda ser necessrio adicionar ns scripts para tornar o filme interativo.

olha Arquivo > Salvar como e salve o arquivo com um nome novo e seqencial, como puzzle2.fla, na mesma pasta que mypuzzle.fla.

er uma cpia do arquivo permite concluir o tutorial novamente usando o arquivo puzzle.fla original. Alm disso, se o arquivo for salvo regularmente com um nome novo e encial, ser possvel reverter para um arquivo anterior no caso de um erro que no possa ser cionado no seu arquivo atual.

propriedades de clipe de filme

e puzzle.fla tem trs caixas de dilogo: uma avisa quando o quebra-cabea est concludo e ras duas perguntam se voc deseja embaralhar as peas do quebra-cabea. Alm disso, vrios s e guias so sobrepostos rea de soluo para ajudar os usurios a solucionar o quebra-. Cada caixa de dilogo, padro e guia um clipe de filme.

icializar o filme, oculte vrios clipes de filme para mostrar somente a caixa de dilogo e as peas do quebra-cabea. Faa isso definindo suas propriedades _visible como false.

cione Quadro 1 na camada Aes. Se o painel Aes no estiver aberto, escolha Janela > es.

ainel Aes mostrar aes associadas ao quadro selecionado. O texto aps barras duplas (//) texto comentado, que oferece informaes teis para compreender os scripts.

Captu62

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

3 Noaqu

4 Na na a

Umcom

5 Cocam

A c

6 Vercam

Na

7 Sele

O s

_ro

Umglode fcomcliplo 2

painel Script, clique na linha 4 para selecionar o cdigo comentado //INSERIR o cdigo i.

categoria Aes > Aes diversas da caixa de ferramentas Aes esquerda, clique duas vezes o evaluate para adicionar uma linha vazia de cdigo terminada em um ponto-e-vrgula.

ponto-e-vrgula (;) em um comando do ActionScript como um ponto (.) em uma frase um.

m o ponto de insero na caixa de texto Expresso do painel Aes, clique no boto Inserir inho de destino.

aixa de dilogo Inserir caminho de destino ser exibida.

ifique se as opes Pontos, significando notao de pontos, e Absoluto, significando inho absoluto, esto selecionadas.

caixa de dilogo, ser exibida uma lista de clipes de filme que podero ser selecionados.

cione o clipe de filme edges na rvore de clipes de filme e clique em OK.

eguinte cdigo ser exibido na caixa de texto Expresso:

ot.edges

caminho de destino informa ao ActionScript o local de um clipe de filme na estrutura bal de um filme do Flash. A propriedade _root refere-se Linha de tempo principal e o clipe ilme edges reside no Palco da Linha de tempo principal. Qualquer caminho de destino que ece com _root chamado de caminho absoluto porque fornece o caminho completo de um

e de filme na Linha de tempo principal.

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

9 Na umo cldig

10 Coscrdigseg

11 EscnomarqTutorial de introduo ao ActionScript 63

caixa de ferramentas Aes, clique duas vezes novamente na ao evaluate para adicionar a linha de cdigo vazia terminada em um ponto-e-vrgula. Repita as etapas 5 e 6, e escolha ipe de filme pattern na caixa de dilogo Inserir caminho de destino. Repita a etapa 8, itando novamente ._visible = false na caixa de texto Expresso.

ntinue repetindo as etapas de 4 a 8, escolhendo os clipes de filme image, piecenumbers, amblebutton, areYouSure e congrats na caixa de dilogo Inserir caminho de destino, e itando ._visible = false para cada clipe de filme. Quando terminar, seu script dever ter a uinte aparncia:

olha Arquivo > Salvar como e digite um novo nome de arquivo. Use um esquema de eao consecutivo, como mypuzzle3.fla, para poder reverter para verses anteriores do

uivo, se necessrio.

Captu64

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

O Actincorrsintaxe

1 CliVer

Se aerro

Se aerro

2 Clilo 2

sua sintaxe

ionScript, como uma linguagem escrita, depende de uma sintaxe correta. Se a sintaxe estiver eta, a ao no ser executada corretamente. O Flash oferece diversas maneiras de testar sua .

que no menu Opes no canto superior direito da barra de ttulo do painel Aes e escolha ificar sintaxe.

sintaxe estiver correta, ser exibida uma mensagem informando que o script no contm s.

sintaxe estiver incorreta, ser exibida uma mensagem informando que o script contm s. A janela Sada ser aberta e exibir informaes sobre o erro.

que em OK para fechar a mensagem da sintaxe.

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 Contr

SalvandPara cinformtrao oinformum scfilme. um scem um

No arq visvQuandcomo um rarquivpea dTutorial de introduo ao ActionScript 65

disso, como foi ensinado no Tutorial de introduo ao Flash MX, possvel escolher olar > Testar filme durante a criao para testar se seu filme reproduzido como esperado.

o e recuperando informaesriar um filme interativo e complexo do Flash, necessrio fazer com que o Flash c