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 57 60 65 67 69 71 73 78 81 82
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 .
. . . . . . . . . . . . . . . . . . . . . . . . . . . . 83 83 84 85 94
Tipos de componentes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Exibindo o formulrio preenchido. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Criando um formulrio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . As prximas etapas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
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.
3 4 5 6
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
2 3
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.
Introduo ao Tutorial do Flash MX
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 2 3 4 5
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 2
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.
5 6 7
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 2 3
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
1 2 3
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.
Na caixa de ferramentas, selecione a ferramenta Retngulo.
14
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.
5 6
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 2
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.
Criar e mascarar arte vetorial

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
2 3
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.
6 7
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.
22
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
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.
26
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.
1 2
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.
28
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.
Interpolar efeitos de bitmap em um clipe de filme

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
Na Linha de tempo, adicione uma nova camada e denomine-a Imagens.
30
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.
5 6
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.
1
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.
32
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.
2 3 4 5 6
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 2 3 4
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.
6 7 8 9
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
Na camada Exibio do fade 2, adicione um quadro-chave ao quadro 60.
35
2 3
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%. 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. Clique em qualquer quadro na camada Exibio do fade 2 entre os quadros 71 e 105 e pressione a tecla Delete.
4 5
Aparecimento do terceiro carro medida que o segundo carro desaparece, o terceiro aparece gradualmente. Voc criar essa animao agora.
1 2 3
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. Na camada Exibio do fade 3, adicione um quadro-chave ao quadro 60. 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.
5 6 7 8
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. Na camada Exibio do fade 3, selecione qualquer quadro entre os de nmero 60 e 69. No Inspetor de propriedades, selecione Movimento no menu pop-up Interpolar.
Desaparecimento do terceiro carro Agora voc criar a animao que faz com que o terceiro carro desaparea.
36
Captulo 1
1 2 3
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%. 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.
Aparecimento do primeiro carro medida que o terceiro carro desaparece, o primeiro aparece novamente para concluir a animao.
1 2 3 4 5 6 7
Na camada Exibio do fade 1, adicione um quadro-chave ao quadro 95. 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. Na camada Exibio do fade 1, selecione qualquer quadro entre os de nmero 95 e 104. No Inspetor de propriedades, selecione Movimento no menu pop-up Interpolar.
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 aplicativo Flash MX e abra Tutorials/FlashIntro/stiletto4.fla. Se usar o arquivo stiletto4.fla, salve-o com outro nome na pasta My_Stiletto para manter uma verso inalterada do original. 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 2
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.
3 4
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.
5 6
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.
38
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 2
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.
3 4 5
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
Para concluir esta seo, continue a trabalhar no arquivo mystiletto.fla ou navegue at a pasta do aplicativo Flash MX e abra Tutorials/FlashIntro/stiletto5.fla. Se usar o arquivo stiletto5.fla, salve-o com outro nome na pasta My_Stiletto para manter uma verso inalterada do original.
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 2 3
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
1 2 3
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.
4 5 6 7
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 2 3
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.
1 2 3 4
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.
46
Captulo 1
No menu pop-up Janela, selecione _blank para iniciar uma nova janela do navegador quando o usurio clicar no Boto 1.
6 7
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.
Adicionar eventos e sons de fluxo

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

Para concluir esta seo, continue a trabalhar no arquivo mystiletto.fla ou navegue at a pasta do aplicativo Flash MX e abra Tutorials/FlashIntro/stiletto6.fla. Se usar o arquivo stiletto6.fla, salve-o com outro nome na pasta My_Stiletto para manter uma verso inalterada do original.
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 2
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 2
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.
1 2 3 4
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.
48
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.
1 2
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.
3 4 5 6
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
7 8 9
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 2
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 2
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:
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 um filme
54
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.
Tutorial de introduo ao ActionScript
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 2 3
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.
3 4
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. 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:
10
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.
Clique em OK para fechar a mensagem da sintaxe.
64
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.
2 3
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.
4 5
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.
Escolha Arquivo > Salvar como e digite um novo nome de arquivo. Use um esquema de 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.

4
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.
5 6
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.
68
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 9
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 nomeao consecutivo para poder reverter para verses anteriores do arquivo, se necessrio.
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
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
de aes diferente.
if deixa o Flash verificar se h outra condio antes de executar um conjunto
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
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. O cdigo ser exibido da seguinte maneira:
on (release) { if (<not set yet>) { 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
6 7
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.
72
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 10
No painel Script, selecione a linha de cdigo com a ao else e clique duas vezes na ao evaluate. 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 nomeao consecutivo para poder reverter para verses anteriores do arquivo, se necessrio.
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
2 3
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
Na categoria Aes > Condies/Loops da caixa de ferramentas Aes, clique duas vezes na ao if, na ao else if e na ao else.
74
Captulo 2
Observao: Tambm possvel selecionar as aes no menu pop-up de adio (+).
O cdigo ser exibido da seguinte maneira:

function RotateDisplayOrDrag (whichPiece) { if (<not set yet>) { } 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.
Na categoria Aes > Aes diversas da caixa de ferramentas Aes, clique duas vezes na ao 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. Na categoria Aes > Aes diversas da caixa de ferramentas Aes, clique duas vezes na ao 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 11
Selecione a linha de cdigo else. Na categoria Aes > Controle do MovieClip na caixa de ferramentas Aes, clique duas vezes na ao startDrag. 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:
function RotateDisplayOrDrag (whichPiece) { 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
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.
76
Captulo 2
No Palco, clique duas vezes no smbolo da caixa de dilogo Parabns.
Caixa de dilogo Parabns smbolo
3 4 5
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
7 8 9
Clique duas vezes na ao evaluate novamente, para adicionar outra linha em branco. Digite _root.dialog = false na caixa de texto Expresso. Na categoria Aes > Aes diversas da caixa de ferramentas Aes, clique duas vezes na ao 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:
Escolha Editar > Editar documento. Clique no boto Voltar. 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
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.
7 8
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 10
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. 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:
Escolha Editar > Editar documento. Clique no boto Voltar. 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 4 5
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 9
Feche a janela Sada e o arquivo SWF e retorne para o modo de criao. Escolha Arquivo > Salvar como e digite um novo nome de arquivo. Use um esquema de nomeao consecutivo para poder reverter para verses anteriores do arquivo, se necessrio. 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 Radio button Check box Push button Combo box List box
Ao Representa uma nica escolha em um grupo de escolhas mutuamente exclusivas Representa uma nica escolha Executa um comando quando o usurio clica nele ou pressiona Enter ou Return Exibe uma lista de escolhas Exibe uma lista de escolhas
83
Nome Scroll pane Text scroll bar
Ao Fornece um painel de janela rolvel para exibir clipes de filme Adiciona uma barra de rolagem a um campo de texto
Como usar os componentes possvel usar os componentes das seguintes maneiras:

Formulrio da Web
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.
Monte seu carro
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. Crie uma pesquisa com vrias perguntas e partes que confira os resultados instantaneamente e disponha os dados resultantes da pesquisa em diagramas.
Pesquisa
lbum de fotografias
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. Projete uma calculadora de amortizao on-line que calcule
Calculadora de emprstimos
pagamentos de emprstimos.
Modelo para apresentaes baseadas na Web
Crie um modelo para apresentaes baseadas em slides com elementos de navegao simples, criados previamente, e um layout para imagens e texto.
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.
1 2 3
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.
84
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 Configurando os componentes 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 2 3 4
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.
Tutorial de introduo aos componentes
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:.
O componente ser exibido na pasta Componentes de interface do Flash no painel Biblioteca. 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.
O componente ser exibido na pasta Componentes de interface do Flash no painel Biblioteca.
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.
Configurando os componentes 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.
2 3 4 5 6
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
Selecione o componente ComboBox no Palco. Seus parmetros sero exibidos no Inspetor de propriedades.
88
Captulo 3
2 3 4
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.
5 6 7
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. No final, o Inspetor de propriedades dever ter a seguinte aparncia:
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.
2 3
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. No final, o Inspetor de propriedades dever ter a seguinte aparncia:
5 6 7 8
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.
90
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 color_box sweepstakes_box submit_btn name email return_btn name_result email_result color_result sweepstakes_text Descrio Caixa de combinao Cor na pgina 1 Caixa de seleo Bolo de apostas na pgina 1 Boto de ao Enviar na pgina 1 Caixa de texto de entrada de nome na pgina 1 Caixa de texto de entrada de endereo eletrnico na pgina 1 Boto de ao Retornar na pgina 2 Caixa de texto dinmica na pgina 2 para exibir o nome do usurio Caixa de texto dinmica na pgina 2 para exibir o endereo eletrnico do usurio Caixa de texto dinmica na pgina 2 para exibir a seleo de cores do usurio 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 2 3
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.
2 3 4 5
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

Tutorial Do Flash MX

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

Tutorial Do Flash MX

Enviado por

Direitos autorais:

Formatos disponíveis

Tutorial do Flash MX

CAPTULO 1 Introduo ao Tutorial do Flash MX .

CAPTULO 1 Introduo ao Tutorial do Flash MX

O que voc deve saber

Exibindo o filme concludo

Analisar o arquivo stiletto.fla

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

Introduo ao Tutorial do Flash MX

Introduo ao Tutorial do Flash MX

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

Introduo ao Tutorial do Flash MX

Definir as propriedades para um novo documento e criar um fundo gradiente

Selecionar este tom de cinza

Introduo ao Tutorial do Flash MX

Na caixa de ferramentas, selecione a ferramenta Retngulo.

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

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

Introduo ao Tutorial do Flash MX

Barra Gradiente Controle deslizante Gradiente

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

Clique neste tom de azul

Introduo ao Tutorial do Flash MX

Centralizar posio Largura Redimensionar Rotao

Introduo ao Tutorial do Flash MX

Criar e mascarar arte vetorial

boto Inserir camada

Introduo ao Tutorial do Flash MX

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

O crculo desenhado convertido em uma forma oval inclinada.

Introduo ao Tutorial do Flash MX

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

Introduo ao Tutorial do Flash MX

Introduo ao Tutorial do Flash MX

Introduo ao Tutorial do Flash MX

Interpolar efeitos de bitmap em um clipe de filme

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

Introduo ao Tutorial do Flash MX

Escolha Inserir > Converter em smbolo ou pressione F8.

Adicione quadros-chave aos quadros 25 e 35.

Introduo ao Tutorial do Flash MX

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

Introduo ao Tutorial do Flash MX

Carregar texto dinmico em tempo de execuo.

Introduo ao Tutorial do Flash MX

Na Linha de tempo, bloqueie a camada Logo.

Menu pop-up Tipo de linha

Introduo ao Tutorial do Flash MX

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

Caixa de ferramentas Aes

Introduo ao Tutorial do Flash MX

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.

Adicionar qualidades de animao e navegao a botes

Introduo ao Tutorial do Flash MX

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

Alinhar centro verticalmente

Para o Palco Distribuir centro horizontalmente

Introduo ao Tutorial do Flash MX

Adicionar eventos e sons de fluxo

Adicionar um som de fluxo ao filme Adicionar um som de evento a um boto

Introduo ao Tutorial do Flash MX

Organizar o painel Biblioteca