1

Manufotos Photographer Apresenta: Mais uma tradução do ingles para o portugues com su cesso com o uso do tradutor do google. Autor da tradução: Emanuel de Jesus Santos Email: manufotos@ig.com.br Site: www.manufotos2.blogspot.com

2

Tutoriais Flash MX Marcas Afterburner, AppletAce, atingir, Attain Enterprise Learning System, Attain Essentials, Attain Objects para Dreamweaver, Authorware, Authorware atingir, Authorware Interact ive Studio, Authorware Star, Authorware Synergy, Backst age, Backstage Designer, Backstage Desktop Studio, Backstage Enter prise Studio, Backstage Internet Studio, Design in Motion , Director, Director Multimedia Studio, Doc Around the Clock, Dreamweaver, Attain Dreamweaver, Drumbeat, Drumbeat 2000, Extreme 3D, Fireworks, Flash, Fontographer, FreeHand, FreeH and Graphics Studio, Generator, Generator Developer's S tudio, Generator Dynamic Graphics Server, Knowledge Objects, Knowled ge Stream, Knowledge Track, Lingo, Live Effects, Macro media, Macromedia M Logo & Design, Macromedia Flash, Macro media Xres, Macromind, Macromind Action, MAGIC, Mediamake r, Object Authoring, Power Applets, Priority Access, R oundtrip HTML, JSP, SoundEdit, ShockRave, Shockmachine, Shockwave, Shockwave Remote, Shockwave Internet Stu dio, Showcase, Tools to Power Your Ideas, Universal Medi a, Virtuoso, Web Design 101, Whirlwind e Xtra são marcas comerci ais da Macromedia, Inc. e podem ser registradas nos Estado s Unidos ou em outros jurisdições, inclusive internacionalmente. Outros n omes de produtos, logotipos, designs, títulos, palavras ou frases mencionados nesta publicação podem ser marcas registradas, serviço ou nomes comerciais da Macromedia, Inc. ou de outras entidad es e podem ser registradas em certas jurisdições, inclusive internacionalmente. Informações de terceiros Discurso de compressão e descompressão tecnologia licenciada da Nellymoser, Inc. www.nellymoser.com ( ). Sorenson ™ Spark ™ de compactação de vídeo e tecnol ogia licenciada da descompressão Sorenson Media, Inc. Este guia contém links para sites de terceiros na W eb que não estão sob o controle da Macromedia, ea Macromed ia não é responsável pelo conteúdo de qualquer site vinculad o. Se você acessar um terceiro site mencionado neste guia , então você faz por sua conta e risco. Macromedia fornece esses links apena s como uma conveniência, ea inclusão do link não implica q ue a Macromedia endossa ou aceita qualquer responsabilidade pelo co nteúdo desses sites de terceiros. Apple Disclaimer

3

APPLE COMPUTER, INC NÃO OFERECE GARANTIAS, EXPRESSAS OU IMPLÍCITAS, RELATIVAMENTE AO ENCLOSED PACOTE DE SOFTWARE DE COMPUTADOR, SUA COMERCIALIZAÇÃO OU ADEQUAÇÃO A UM DETERMINADO FINALIDADE. A EXCLUSÃO DE GARANTIAS IMPLÍCITAS NÃO É PERMITIDA EM ALGUNS ESTADOS. O EXCLUSÃO ACIMA PODE NÃO SE APLICAR A VOCÊ. ESTA GAR ANTIA LHE CONCEDE LEGAIS ESPECÍFICOS DIREITOS. Poderá haver direitos OUTROS QUE VOCÊ POD E TER QUE VARIAM DE ESTADO PARA ESTADO. Copyright © 2002 Macromedia, Inc. Todos os direitos reservados. Este manual não pode ser copiado, fotoc opiado, reproduzido, traduzido ou convertido para qualquer máquina eletr ônica ou de forma legível, no todo ou em parte, sem prévia a provação escrita da Macromedia, Inc. Agradecimentos Direção: Erick Vera Produtor: Wayne Wieseler Escrita: Jody Bleyle, Julee Burdekin, Mary Burger, Dale Crawford, Marcelle Taylor Design Instrucional: Stephanie Gowin, Barbara Nelso n Edição: Rosana Francescato, Lisa Stanziano, Anne Sz abla Design Multimédia e Produção: Aaron Begley, Benjami n Salles, Noah Zilberberg Print Design e Produção: Chris Basmajian, Caroline Branch Primeira Edição: Fevereiro de 2002 Macromedia, Inc. 600 Townsend St. San Francisco, CA 94103 3 ÍNDICE CAPÍTULO 1 Introdução ao Flash MX. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 O que você deve saber. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Ver o filme concluído. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Analisar o arquivo stiletto.fla. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6 Definir as propriedades para um novo documento e cr iar um fundo gradiente. . . . . . . . . . . 12 Criar e mascarar arte vetorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Efeitos de bitmap em um clipe de filme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Carregar texto dinâmico em tempo de execução. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36

4

Adicionar animação e navegação a botões. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 0 Adicionar streaming e sons do evento. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Organizar o painel Biblioteca. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Testar o desempenho de download e publicar o filme. . . . . . . . . . . . . . . . . . . . . . . . . . . . 48 Os próximos passos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 52 CAPÍTULO 2 Introdução ao ActionScript. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53 Ver um filme completo. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 54 Inicializar o filme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Salvar e recuperar informações. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Exibindo informações em uma caixa de texto dinâmico . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 63 Escreva uma expressão. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64 Controlar o fluxo do filme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66 Criando comandos e reutilizando códigos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 68 Use um objeto interno. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Teste o filme. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 75 Os próximos passos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77 CAPÍTULO 3 Introdução de Componentes Tutorial. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Tipos de componentes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 79 Exibir o formulário preenchido. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80

5

Criar um formulário. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 80 Os próximos passos. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

6

7

CAPÍTULO 1 Introdução ao Flash MX Este tutorial guia você através do processo de cria ção de uma experiência atraente da Web com Macromedia Flash MX. Ao concluir o tutorial, você a prenderá a criar um filme, de abertura de um novo documento para a publicação do filme para reprodução na Web. O tutorial tem cerca de três horas para ser concluído, dependendo da sua experiência, e vai ensinar-lhe como realizar as seguintes tarefas: • Analisar um filme completo • Definir as propriedades do documento e criar um gradiente • Criar e mascarar arte vetorial • Tween efeitos de bitmap em um clipe de filme Carregar texto dinâmico • • Modificar botões e adicionar navegação • Adicionar eventos e sons de streaming • Testar e publicar o filme Recomendamos que você complete os oito seções que c ompõem o tutorial em seqüência, embora você possa optar por analisar apenas as seçõ es que lhe interessam. Se você concluir a tutorial fora de seqüência, tenha em mente que as s eções mais tarde assumir que você já domina as competênci as introduzidas nas seções anteriores. O que deve saber Antes de tomar o tutorial, completar os sete lições encontradas na Ajuda do Flash. Estes interativo aulas criadas em Flash apresentá-lo aos conceitos q ue você precisa saber para completar o tutorial. Lição tópicos incluem o seguinte: • Introdução ao Flash MX • Ilustrando em Flash • Adicionando e editando texto • Criação e edição de símbolos • Camadas de Entendimento • Criação de Botões • Criação de animação interpolada Para tirar uma lição, escolha Ajuda> Aulas, em segu ida, selecione da lista. 6 Capítulo 1 Ver o filme completo Você pode abrir uma versão completa do filme tutori al para entender melhor como o seu final arquivo aparecerá. Nesta seção, você vai realizar as seguintes tarefas : • Analisar o filme completo usando o Inspetor de propriedades e Movie Explorer • Examine um clipe de filme e discernir a sua relaç ão com o filme principal • Ver os tipos de activos incluídos no filme

8

1 Na pasta do aplicativo Flash MX, navegue até Tuto rials / FlashIntro e clique duplo stiletto.swf para abrir o filme completo no stand-a lone do Flash Player. Publicado em filmes flash possuem a extensão SWF; documentos no ambiente de criação ter a extensão FLA. 2 Quando o filme abre, observe as três exibições do carro fade in e out. Você vai criar essa animação por interpolação de ef eitos de bitmap em um clipe de filme. 3 Ouça o som que reproduz continuamente enquanto o filme é reproduzido. Este é um exemplo de um streaming de som. 4 Passe o mouse sobre os três botões ao longo da bo rda inferior direito da janela para ver o efeito de sobreposição, e ouvir o evento vai ser incluído em cada botão. 5 Clique em um botão para ver onde as ligações, fec he o navegador que abriu e voltar para o arquivo SWF. 6 Após a exibição do filme, clique na caixa o seu f im. Analisar o arquivo stiletto.fla É útil analisar o arquivo FLA completo para ver com o o autor criou o documento. Para analisar o arquivo, você pode visualizar as proprie dades de um objeto, uma visão do timeline e Palco, olha recursos da biblioteca e use o Movie Explorer. Introdução ao Flash MX 7 1 No Flash, escolha Arquivo> Abrir. Vá até a pasta do aplicativo Flash e abrir Tutorials / FlashIntro / stiletto.fla. Agora você deve ver o filme completo tutorial no am biente de criação.

9

Arraste a ba rra que separa o Fase da Linh a de tempo

2 Para ver todas as camadas da Timeline principal, arraste a barra que separa o Palco do Linha do tempo. 3 Na Linha do Tempo, destrancar a camada de cópia e da camada de Imagens. Ver propriedades do documento O Inspetor de propriedades permite que você visuali ze as especificações dos objetos selecionados. As especif icações dependem sobre o tipo de objeto selecionado. Se você selecio nar um objeto de texto, por exemplo, as definições para vi sualizar e modificar atributos de texto aparecer. 1 Se o Inspetor de propriedades não estiver aberto, escolha Janela> Propriedades.

10

No Palco 2, desloque-se necessário e selecione o bl oco retangular onde o texto descritivo apareceu no filme acabado. O texto não aparece no a rquivo FLA, pois ele carrega a partir de um arquivo TXT externo em um campo de t exto dinâmico.

No Inspetor de propriedades, você pode ver o tamanh o, estilo e cor do texto, entre outros atributos.

Se o inspetor Property não estiver completamente ex pandido, clique no triângulo branco no canto inferior direit o. 3 No Palco, selecione o carro. As configurações de clipe de filme substituem as configurações de texto. Os clipes de filme são símb olos com os seus próprios Linha do tempo independentes. Você pode pensar dele s como filmes dentro de filmes. Ver o clipe de filme Agora você vai abrir o modo de edição para visualiz ar o cronograma para um clipe de filme. 1 No Palco, clique duas vezes no clipe de filme do carro. Como você aprendeu na aula Criando animação interpo lada, você define mudanças na animação keyframes. Ao percorrer a Linha do tempo, nota que as camadas têm quadros neles e que os quadros são quadros-chave. Início e quadros intermédios que incluem conteúdo e stão indicados no Cronograma de círculos sólidos, quadros-chave finais aparecem com o pequenos retângulos contornados.

11

2 Na Timeline, selecione o indicador de reprodução e arrastá-lo lentamente pelos quadros. Ver como as mudanças em ação no Palco correspondem a alterações no cronograma. À medida que arrasta a reprodução, o filme de forma sequencial. Você pod e adicionar ActionScript, o script do Flash linguagem, ao cinema para fazer o salto reprodução de quadros específicos. 3 Quando terminar de exibir o clipe de filme, siga um destes procedimentos para retornar ao filme princip al: • Escolha Editar> Editar documento. • Clique no botão Voltar. • Clique em Cena 1 acima do Palco. Biblioteca de ativos Ver O painel Biblioteca contém os símbolos e objetos im portados em seu documento. 1 Se o painel Biblioteca não estiver aberto, escolh a Janela> Biblioteca. 2 Arraste o painel Biblioteca para aumentá-la, se necessário, para exibir os objetos dentro da biblio teca. 3 Se a pasta Arte não é expandida, clique duas veze s nela para ver os objetos na pasta. 4 Clique view1.png para ver a imagem na área de visualização no topo do painel Biblioteca. 5 Expandir a outras pastas no painel Biblioteca par a visualizar os activos incluídos no documento, tais como botões e clipes de filme.

12

6 Ao terminar de exibir os ativos, feche o painel Biblioteca

Analisar a estrutura do filme com o Movie Explorer O Movie Explorer ajuda a organizar, localizar e edi tar mídia. Com sua estrutura de árvore hierárquica, Movie Explorer fornece informações sobre a organiza ção eo fluxo de um filme, especialmente útil quando você analisar um filme criado por algué m. 1 Se não o Movie Explorer estiver aberto, escolha J anela> Movie Explorer. 2 Se necessário, aumentar o Movie Explorer para exi bir a estrutura de árvore no painel. O Movie Explorer botões de filtragem exibir ou ocul tar informações.

13

3 Clique no menu pop-up na barra de título do Movie Explorer e verifique se Mostrar Movie Elements and Show Symbol Definitions são selecionad os.

4 Desmarque a opção Mostrar quadros e camadas botão na parte superior do Movie Explorer. Verifique se os botões de filtragem selecionados são Mostrar tex to; Show Buttons, Movie Clips e gráficos; Show ActionScripts; e Mostrar vídeo, sons e bitmaps .

5 Examine a lista para ver algumas das propriedades incluídas no filme e para ver a relação outros activos. 6 Para expandir um objeto ou categoria, clique no b otão Mais (+) à esquerda do nome 7 Selecione o Mostrar quadros e camadas botão de fi ltragem. Desça até a Symbol Definitions categoria. Com a categoria expandida, clique duas v ezes no clipe de filme de animação Carros. Você está agora em modo de edição de símbolo para o clipe de filme.

14

8 No Movie Explorer, com a categoria Animação carro selecionada e expandida, expanda o Exibir ícone 3 Fade, em seguida, clique duas vezes no quadro 60. Na Linha de tempo do clipe de filme, a reprodução p assa para o quadro 60 da camada View 3 Fade.

Para exibir um item listado na árvore hierárquica, clique no ícone correspondente. Se você clicar em um frame ícone, a reprodução passa para o quadro na Linha de tempo. Se você clicar em um ativo, como um bitmap imagem, o Inspetor de propriedades exibe as configu rações de imagem. Clique duas vezes em um ícone que representa um símbolo abre o modo de edição. 9 Feche o Movie Explorer. Para fechar o documento, escolha Arquivo> Fechar. Se você tiver feito alterações no arquivo, não salv á-los. Definir as propriedades para um novo documento e cr iar um gradiente fundo Para saber como criar um filme em Flash, vamos come çar a partir do primeiro passo no processo: a abertura um novo arquivo. Então, ao completar esta seção, vo cê aprenderá a realizar as seguintes tarefas: • Abrir um novo arquivo e definir propriedades do d ocumento • Criar e transformar um fundo gradiente Abra um novo arquivo Agora você está pronto para criar sua própria versã o do filme de tutorial. 1 Escolha Arquivo> Novo. 2 Escolha Arquivo> Salvar como. 3 mystiletto.fla Nome do arquivo e salvá-lo na past a do aplicativo Flash MX, no Tutoriais / FlashIntro / My_Stiletto sub-pasta. Nota: Como você completar o tutorial, lembre-se de salvar seu trabalho freqüentemente. Definir propriedades de documento Configurando propriedades do documento é um passo c omum na primeira criação. Você pode usar a propriedade inspetor de documentos e caixa de diálogo Proprieda des para especificar as configurações que afetam todo o film e, como os quadros por segundo (fps) taxa de reproduçã o, o tamanho do Palco e cor de fundo. 1 Se o Inspetor de propriedades não estiver aberto, escolha Janela> Propriedades. No Inspetor de propriedades, verificar que 12 é o número na caixa de texto Frame Rate. O filme será reproduzido a 12 fotogramas por segund o, uma taxa de quadro ideal para reproduzir animações na web. Nota: Se o inspetor Property não estiver completame nte expandido, clique no triângulo branco no canto inferior direit o.

15

2 O fundo da caixa de cor indica a cor do Stage. Cl ique na seta para baixo no Antecedentes caixa de cores, em seguida, mover a fe rramenta Eyedropper pelas amostras de cores para ver o seu hexadecimal valores na caixa de texto hexadecimal. 3 Localize e clique na amostra de cor cinza com o v alor hexadecimal de 999999. caixa de texto Hexadecimal Selecione neste tom de cinza 4 Para redimensionar o Stage, clique no botão Downl oad, que indica o tamanho do Stage. No documento Caixa de diálogo Propriedades, digite 640 px na pri meira caixa de texto e Dimensões 290 px na segunda Dimensões caixa de texto. Verifique se Pixels é sel ecionado no menu pop-up e clique em OK.

As dimensões do Palco mudar para refletir as novas configurações de 640 x 290 pixels. Especificar configurações de rede No Palco, você pode alinhar os objetos ao longo das linhas da grade horizontal e vertical. Mesmo quando a grade é não visível, você pode encaixar objetos nela. Agora você vai modificar a distância entre a horizontal e linhas verticais da grade e criar uma rede em alinh amento com as bordas do Palco. 1 Escolha View> Grid> Edit Grid. 2 Na caixa de diálogo Grid, tipo 10 px na caixa de texto de largura e 10 px na caixa de texto de altura. 3 Selecione Snap to Grid e verifique se Mostrar gra de não está marcada. Objetos de agora será a grade, mesmo quando a grade não está visível.

16

4 Verifique se o normal é selecionada para Snap Pre cisão e clique em OK. A precisão do encaixe determina o quão perto um obj eto deve ser o de uma linha de grade antes de agarrar a ela.

Criar um fundo gradiente Um gradiente mostra as variações sutis de uma cor, ou transições entre duas ou mais cores. No acabados arquivo tutorial, o fundo é um gradiente q ue mescla preto e azul escuro com uma área transparente que permite que parte da cor cinz a do Palco a ser exibido. Esse efeito é obtido utilizando o Misturador de cores. Nota: Embora os gradientes oferecer efeitos interes santes nos filmes, o uso excessivo de gradientes podem afe tar adversamente computador velocidades do processador e diminuir a velocidade com que uma animação. Ao projetar um filme, considerar tant o seus requisitos de desempenho artístico e para dete rminar a melhor utilização dos gradientes. Desenhe um retângulo Anteriormente no tutorial, você criou uma grade que alinhado ao Palco e permitiu-lhe Encaixar objetos para as linhas de grade. Agora voc ê desenhe um retângulo que se encaixa na área da grad e junto ao Palco. 1 No menu pop-up acima do lado direito do palco, en tre 75% a exibir todo o Palco. Essa configuração indica seu ampliada ou reduzida e xibição do Palco. A definição não afetar o real tamanho do Palco em seu filme, que fo i especificado no documento Caixa de diálogo Propriedades.

2 Na caixa de ferramentas, selecione a ferramenta Rectangle.

17

3 Na caixa de ferramentas, clique no controle Cor d o traço. Selecione Nenhum traço (o botão com o vermelho linha diagonal acima da paleta de cores).

O preenchimento selecionada cor da forma não é impo rtante, pois você logo mudar a cor. 4 A partir do canto superior esquerdo do Palco, arr aste para o canto inferior direito do Palco desenhe um retângulo que cobre o palco. Quando você soltar o ponteiro, o retângulo se ajust a às arestas do Palco, ao longo da grade escondida.

Observação: Enquanto conclui o tutorial, você pode encontrá-lo útil para desfazer uma alteração que você fez. Flash pode des fazer várias das alterações recentes, dependendo do número de ní veis de desfazer que você definiu nas preferências. Para desfazer, escolha Editar> Desfazer ou pressione Control + Z (Windows) ou Command + Z(Macintosh). Inversamente, você pode refazer o que você desfez e scolhendo Editar> Refazer ou pressionando Control + Y (Windows) ou Command + Y (Macintosh).

Especifique uma cor para o gradiente Azul escuro é a primeira cor que você adicionar à s ua inclinação.

1 Na caixa de ferramentas, selecione a ferramenta Seta. No Palco, clique dentro do retângulo para

selecionar a preencher. Quando você desenhou o retângulo, o Inspetor de propriedades exibidas as propriedades do Retângulo ferramenta. Quando você selecionar uma forma que já foi criado, o inspector exibe Imóvel propriedades para a forma. 2 Se o Misturador de cores não estiver aberto, esco lha Janela> Misturador de cores.

18

3 Para expandir o Misturador de cores, clique na se ta branca da barra de título do painel. Clique aqui para expandir o painel 4 Se o Misturador de cores não estiver completament e expandido, clique na seta no canto inferior direito do painel.

5 No estilo pop-up menu Fill, selecione Radial. 6 Clique no controle deslizante de gradiente à esqu erda da barra de gradiente para selecioná-lo. Gradient bar Gradient slider 7 Clique na caixa de cores no canto superior esquer do da janela para abrir a paleta de cores. Use um dos seguintes métodos para selecionar azul escuro: • Digite 000066 na caixa de texto de valor hexadeci mal e pressione Enter ou Return.

19

• Mova o conta-gotas pelas amostras de cores até en contrar o azul escuro com o hexadecimal valor de 000066, em seguida, clique na amostra para selecioná-lo. Clique neste tom de azul Altere o valor de alfa No Misturador de cores, a caixa de texto Alpha indi ca a transparência da cor, com 0%, indicando que a cor é completamente transparente e 100%, indi cando que a cor é completamente opaco. Você especificar um valor alfa de 0% para criar um gradiente que inclui o azul escuro e preto, além com a cor cinza do Palco, que mostra através das ár eas transparentes do gradiente. • No Misturador de cores, tipo 0 na caixa de texto Alpha e pressione Enter ou Return, ou mover o Alpha deslizante para 0.

Adicionar uma segunda cor gradiente Agora você adicionará preto para o gradiente. 1 No Misturador de cores, clique no controle desliz ante de gradiente à direita da barra de gradiente para sele cioná-lo.

20

2 Clique na caixa de cor para abrir a paleta de cor es e escolha a preto com um hexadecimal valor de 000000. Lembre-se, você pode digitar o valor hexadecimal na caixa de texto hexadecimal e aperte Enter ou Return, ou você pode encontrar e seleciona r a cor com o mesmo valor hexadecimal.

Transformar o preenchimento de gradiente Ao transformar um objeto, girar, escala, ou inclina do. Você pode transformar um preenchimento usando os Preencha ferramenta Transform.

1 Na caixa de ferramentas, selecione a ferramenta Transformar preenchimento. No Palco, clique em qual quer

lugar dentro do retângulo. Uma elipse que indica a forma ea posição do gradien te aparece em volta do palco. A elipse tem controles para a localização, largura, escala e rotação do gradiente radial. Center placement Width Scale Rotation

21

2 Arraste o controle do centro para a esquerda do P alco de modo que é aproximadamente 1 / 3 da distância da margem esquerda do palco, como mostra a ilustraç ão a seguir.

Como você muda a forma ea posição da elipse, a form a ea posição da cor transições da mudança da etapa de conformidade. 3 Arraste a alça quadrada na elipse, que controla a largura do gradiente, para a esquerda para fazer o elipse estreita; a forma aproximada da elipse é mos trado na ilustração seguinte.

22

4 Arraste a alça intermediária circular, que contro la o tamanho do gradiente, o direito de fazer a elipse maior, como mostra a ilustração a seguir.

5 Arraste a alça circular inferior, que controla a rotação da elipse, para a esquerda para girar a elipse ao ângulo aproximado mostrado na ilu stração a seguir.

23

Nome e bloquear uma camada A forma de gradiente aparece na camada 1 na Linha d e tempo, momento a única camada em sua documento. Em preparação para adicionar e mover obj etos adicionais no palco, você renomear, bloquear a camada. Na próxima seção do tu torial, você criará uma nova camada. Como você aprendeu na aula Entendendo camadas, ao b loquear a camada, você garante que você ou outros usuários não façam alterações inadvertidamen te a objetos na camada. 1 Na Linha de tempo, dê um duplo clique na camada 1 nome e tipo de fundo para renomear a camada. 2 Clique fora do nome da camada, em seguida, clique no ícone do cadeado para bloquear a camada. Criar e mascarar arte vetorial Quando você desenhar no Flash, você cria arte vetor , que é uma representação matemática das linhas, curvas, cor e posição. Vector art é independente da resolução, você pode redimensionar a arte a todos os tamanhos ou exibi-lo em qualquer resolução sem perder a clar eza. Além disso, downloads de arte vetorial mais rápido do qu e comparável imagens bitmap. Junto com o gradiente, o arquivo final contém forma s de fundo. Você vai usar a ferramenta Oval para criar as formas. Especificamente, nesta seção você vai aprender a re alizar as seguintes tarefas: • Adicionar uma camada • Criar e "cortar" as formas • Máscara a camada que contém as formas Para concluir esta seção, você pode continuar a tra balhar no arquivo mystiletto.fla, ou você pode navegar até a pasta do aplicativo Flash MX e abrir Tutorials/FlashIntro/stiletto2.fla. Se você fizer stiletto2.fla utilizar o arquivo, salve o arquivo c om um novo nome na pasta My_Stiletto para manter um versão adulterada do arquivo original. Adicione uma camada Ao invés de criar as formas sobre a camada de fundo , você vai adicionar uma nova camada em que você pode desenhar as formas. 1 Para adicionar uma nova camada, escolha Inserir> Camada ou clique no botão Insert Layer. Nome do novo Formas camada. Botão Inserir Camada

2 Na caixa de ferramentas, selecione a ferramenta Oval.

24

3 No Inspetor de propriedades, selecione Linha fina do estilo pop-up menu Stroke. Clique no curso Controle de cor. Na paleta de cores, selecione a ci nza com um valor hexadecimal de 999999. Lembre-se, você pode inserir o valor hexadecimal na caixa de texto hexadecimal, ou localizar e clique na amostra de cor com o mesmo valor hexadeci mal. 4 Se o Misturador de cores não estiver aberto, esco lha Janela> Misturador de cores. No estilo pop-up menu de preenchimento, Solid selecionar. Clique no controle Cor do preench imento para selecioná-lo. No vermelho (R), digite 109. No G caixas de texto (verde) e B (azul), digite 45 e pre ssione Enter ou Return. Você está especificando os valores para a quantidad e de vermelho, verde e azul de uma cor. 5 Na Linha de tempo, verificar que a camada Formas é selecionado. No Palco, restringir o oval de um círculo pressionando a tecla Shift enquanto arrasta para desenhar um círculo que se estende da área da tela acima Palco para a área abaixo do Palco.

Nota: Se você cometer um erro, escolha Editar> Desf azer e tente novamente. 6 Selecione a ferramenta Arrow na caixa de ferramen tas, clique duas vezes o círculo no palco para seleccion ar as preenchimento e traço. 7 Se o painel Transformar não é aberto, escolha Jan ela> Transformar.

25

8 Para expandir o painel Transform, clique na seta branca no canto superior esquerdo. Selecione e Skew Tipo de 20,0 na caixa de texto Skew Horizontalmente , em seguida, pressione Enter ou Return.

O círculo que você desenhou as alterações em uma fo rma oval inclinada.

Criar e transformar uma forma duplicada Você vai agora criar e transformar um oval duplicad o. 1 Com o preenchimento oval eo curso ainda seleciona do no Palco, escolha Editar> Duplicar.

26

2 No Inspetor de propriedades, use o controle de preenchimento de cor preta para selecionar.

3 Na caixa de ferramentas, selecione a ferramenta F ree Transform.

Um guia com alças aparece em torno do oval duplicad o. 4 Mova o ponteiro sobre uma alça de canto até um in dicador diagonal com setas em ambas as extremidades aparece. Arraste a alça de canto para dentro para f azer o oval menor. Verifique se o curso do dentro de oval não está tocando o curso do oval ext erior.

27

5 Mova o ponteiro sobre a alça de canto até que o p onteiro se transforma em uma rotação circular indicador. Arraste o indicador de rotação para a es querda para girar a forma oval para a posição aproximada mostrado na ilustração seguinte.

Criar um "recorte" com o duplicado Quando você cria uma forma em cima do outro na mesm a camada, e as duas formas são diferentes cores, bem como não agrupada, a forma em cima "cort a" a área da figura abaixo. Você excluir a cópia oval para ver o efeito do recorte. 1 Com a guia da ferramenta Free Transform ao redor do oval duplicados, clique em qualquer lugar no palco ou tela, distante das formas, em seguida, clique o preenchimento do oval interior. Pressione a tecla D elete em seu teclado para apagar o preenchimento.

28

2 O oval agora tem um exterior e um curso interno. Com a ferramenta Arrow, clique ultraperiféricas da curso sobre o oval para selecionar e, em seguida, c lique em Shift para selecionar o curso interno também. Arras te o traços ligeiramente à direita do preenchimento, com o mostra a ilustração a seguir.

3 Cada área da cor do preenchimento na área dividid a pelo traço representa um segmento discreto que você pode colorir individualmente. Selecione um a área da forma de preenchimento, e use o Misturador de co res para alterar a cor de preenchimento para um tom marrom, com um vermelho (R) o valor de 117, um G (verde) com valor de 78, e B (azul) com valor de 53. Se desejar, repita este passo para mudar uma outra área para preencher o isqueiro tonalidades de marrom, como mostrado na ilustração a seguir:

29

4 Selecione a ferramenta Transformação livre. Arras te em torno do fundo ovais para selecionar todos os formas, arraste o canto identificador da guia para ampliar as formas, como mostrado na figura a seguir.

5 Arraste as formas no Palco de modo que parte da c urva mostra no canto superior esquerdo e direito lado do palco. Nota:

Nota: Como você completar o tutorial, lembre-se de salvar seu arquivo com freqüência.

Criar uma máscara A arte que você criou na camada Formas estende para além do palco, bem dentro da área. Embora a área sobre a propaganda eleitoral não apar ecerá no filme publicado, a arte além do Estágio pode ser uma distração no ambiente de criação. Embo ra você possa apagar parte das formas que estendem para a tela, uma solução melhor é aplicar uma máscara durante o estágio de modo que apenas a área sob a máscara todo o Palco, neste caso, permanece v isível. Dessa forma, se você quiser voltar às formas de modificá-los, eles vão estar intacto.

30

1 Com a camada Formas selecionada, adicione uma nov a camada para a Linha de tempo e nomeá-la Máscara. 2 Na caixa de ferramentas, selecione a ferramenta R etângulo e desenhe um retângulo que se estende da esquerda p ara a parte superior canto do palco para o canto inferior direito. Este retângulo é a forma da sua máscara. Qualquer c oisa abaixo do retângulo será visível.

3 direito do mouse (Windows) ou clique com Control (Macintosh) no nome da camada de máscara na Linha d e tempo e Máscara de escolher no menu de contexto.

31

A camada é convertida em uma camada de máscara, ind icada por um ícone de seta para baixo. A camada imediatam ente abaixo dele está ligada à camada de máscara e seu c onteúdo é exibido em toda a área preenchida da máscara. O nome da camada mascarada é recuado, e se u ícone muda para uma seta apontando para direita. O arte na tela não é mais visível no palco.

Camadas de máscara deve ser bloqueado para o efeito máscara para mostrar. Para editar as formas, você pode desb loquear o Máscara e camadas Formas de fundo. Quando você term inar a edição da arte, bloquear as camadas novamente para invocar a máscara. 4 Salve o arquivo. Efeitos de bitmap em um clipe de filme Além de criar arte vetorial no Flash, você pode imp ortar imagens bitmap, que utilizam pixels para exibição de gráficos, para o filme Flash e aplicar vários efeitos de cor. Nesta seção, você realizar as seguintes tarefas: • Importação de imagens bitmap • compactação de bitmap Modificar • Criar e editar um símbolo de clipe de filme Efeitos de bitmap • Tween a desvanecer-se as exibiç ões do carro e sai Para concluir esta seção, você pode continuar a tra balhar no arquivo mystiletto.fla, ou você pode navegar até a pasta do aplicativo Flash MX e abra Tutorials/FlashIntro/stiletto3.fla. Se você fizer stiletto3.fla utilizar o arquivo, salve o arquivo c om um novo nome na pasta My_Stiletto para manter um versão adulterada do arquivo original. Importar imagens para a biblioteca Quando você importar um arquivo em Flash, você pode importá-lo diretamente para a biblioteca. 1 Em Linha do tempo, adicione uma nova camada e cha me-o de Imagens. 2 Escolha Arquivo> Importar para biblioteca. Quando você selecionar Importar para biblioteca, em vez de importar, as imagens devem ser colocadas no Palco antes que eles irão aparecer.

32

3 Vá até o seu Tutorials / FlashIntro / Ativos past a na pasta do aplicativo Flash MX e view1.png selecionar, em seguida, a tecla Shift pre ssionada clique para adicionar view2.png e view3.png à seleç ão. Clique em Abrir. 4 No Fireworks PNG Import Settings caixa de diálogo , clique em Importar como um único bitmap achatado, em seguida, clique em OK. As três imagens estão agora na biblioteca. Modificar a compactação de bitmap Quando você importa uma imagem, você pode verificar e modificar as configurações de compactação da imagem . Enquanto comprimir imagens reduz o tamanho do arquivo do seu filme, a compressão pode afetar a qualidade da imagem, o objetivo é encontrar um equilíbrio entre as configu rações de compactação e qualidade de imagem. 1 Se o painel Biblioteca não estiver aberto, escolh a Janela> Biblioteca. Ampliar a janela, se necessário, para Veja os três arquivos que você importou.

2 Faça duplo clique no arquivo view1.png. Compressão JPEG é a seleção padrão. 3 Na janela pop-up menu Compactação, selecione Sem perdas (PNG / GIF) para uma qualidade de imagem superior. 4 Para testar como a imagem aparece com a nova conf iguração, clique em Teste. Se necessário, arraste o carro em ver na janela de visualização. Quando terminar de v isualizar a imagem, clique em OK.

33

5 Volte ao painel Biblioteca. Dê um duplo clique vi ew2.png e repita o passo 3, clique em OK. 6 No painel Biblioteca, Lossless view3.png duplo-cl ique e especificar (PNG / GIF), clique em OK. Criar um símbolo de clipe de filme No arquivo terminar, três exibições do carro elétri co fade in e out na cena de abertura. Este efeito é alcançado através da criação de um símbolo de cli pe de filme que tem um independente Cronologia dos principais Timeline. Em seguida, você tween a transparência al fa entre três exibições do carro para criar um fade in / fade out efeito. Para começar a criar o efeito , você vai criar o clipe de filme. 1 Com a camada de Imagens ainda selecionado na Linh a de tempo, arraste o objeto view1.png da Biblioteca painel para o palco, colocando o carro dentro da ár ea mais leve que o fundo é degradê.

2 Escolha Inserir> Converter em símbolo, ou pressio nar F8. 3 Na caixa Símbolo Converter ao diálogo, o nome do símbolo da animação de carro. Verifique se Movie Clip está selecionada e que o centro da praça está selec ionada no indicador de Registro e clique em OK. Bitmaps, assim como outros objetos Flash, têm ponto s de registro utilizado para o posicionamento e transformação. Ao alinhar as três exibições do carr o dentro do clipe de filme, todas as três exibições deve alinhar em relação a um ponto de registro cent ral.

Editar um símbolo Para visualizar a Timeline do clipe de filme, você deve estar no modo de edição de símbolo. Você pode abrir o modo de edição clicando duas vezes no símbolo no Palco ou no painel Biblioteca. 1 No Palco, clique duas vezes no carro para abrir o modo de edição. O nome do símbolo aparece acima da área da tela, ju ntamente com a Scene 1 link que retorna você para o filme principal. No símbolo do modo de edição, agora você está vendo a Timeline do clipe de filme e não o Linha de tempo do filme principal. 2 Renomear Camada 1 Veja 1 Fade.

34

3 O carro que você vê no palco é uma imagem bitmap, não um símbolo, no âmbito da Animação de carro símbolo. Tornar o carro um símbolo selecionando-o n o Palco e pressione F8. 4 Na caixa Símbolo Converter ao diálogo, o nome do símbolo Exibição do carro 1, em seguida, verifique se Movie Clip está marcada. 5 Verifique se o centro da praça está selecionada n o indicador de Registro e clique em OK. 6 rolagem horizontal em toda a Linha de tempo até c hegar ao quadro 105. Selecione o quadro e escolha F6 Insert> Keyframe ou pressione para adicionar um quadro-chave. O indicador do quadro atual mostra o quadro selecio nado. Current frame 7 Adicionar keyframes para Quadros 25 e 35. 8 Adicione um keyframe ao quadro 34 e, em seguida, clique em qualquer ponto da camada entre os quadros 36 e 104, e pressione a tecla Delete no teclado. Um quadro-chave vazio aparecerá no quadro 35, eo ca rro não aparece no Palco da frame 35 em diante. Nota:

Nota: Se você cometer um erro na adição de keyframe s e quer eliminá-los, selecione uma ou mais quadros e rightclick (Windows) ou clique com Control (Macintosh) e escol ha Limpar quadro-chave no menu de contexto.

Bitmap efeitos Tween Criando um efeito de bitmap é semelhante a criar um a interpolação de movimento em linha reta: você espec ificar configurações para começando e terminando keyframes, em seguida, espec ificar interpolação desses quadros e os quadros intermediá rios. Flash cria a animação de transição do primeiro quad ro-chave na animação para o passado. 1 In the Car Animation Timeline, clique selecione o quadro 34, a exibição do carro 1 no Palco para que o Inspetor de propriedades aparece exibindo propriedades do clipe de filme.

35

2 Na janela pop-up Cor menu do Inspetor de propried ades, selecione Alfa. No montante Alpha menu pop-up, digite 0% na caixa de texto e pression e Enter ou Return, ou usar o pop-up deslizante para selecionar 0%. Bounding rectangle

3 Na Timeline, selecione qualquer quadro entre 25 e 34. No Inspetor de propriedades, selecione Motion Tween no menu pop-up menu. Uma seta com uma linha sólida atravessa os quadros interpolados. A linha tracejada entre os quadros indica que a interpolação não é implementada corret amente, o que geralmente ocorre quando um começo ou quadro-chave final está faltando. Fade no segundo carro Como a exibição do carro 1 desaparecer, uma outra v isão do carro deve desaparecer dentro 1 Adicione uma nova camada para a animação Carros T imeline e nomeá-la View 2 Fade. 2 Na 2 camada, adicione um quadro-chave ao quadro 2 5. 3 Com a reprodução ainda no quadro 25, arraste view 2.png do painel Biblioteca para o Palco. 4 Se o painel Info não estiver aberto, escolha Jane la> Info. Verifique se o centro da praça está seleciona do no o indicador de registo, em seguida, digite 0 na cai xa de texto coordenada X e digite 0 na Y coordenar a caixa de texto. Pressione Enter ou Retu rn. O Inspetor de propriedades também tem caixas de tex to X e Y, no entanto, essas coordenadas são relativas a um ponto de registro no canto superior esquerdo do cli pe de filme.

36

5 Selecione o view2.png no Palco e pressione F8 par a torná-lo um símbolo. No Convert to Symbol caixa de diálogo, o nome do símbolo Exibição do car ro 2. Verifique se Clipe de filme está selecionada e cliq ue em OK.

6 No Inspetor de propriedades de clipe de filme, se lecione Alfa no menu pop-up Cor de menu e digite 0% na Alpha caixa de texto Valor. 7 Acrescentar um ao quadro 35 da camada Exibição do fade 2. 8 No Palco, clique dentro do retângulo de delimitaç ão do carro transparente. No clipe de filme Inspetor de propriedades, insira 100% na caixa de t exto Valor de alfa. 9 No 2 camada, selecione qualquer quadro entre 25 e 34. Na propriedade inspector, selecione Movimento no menu pop-up menu Tween. Desaparecimento do segundo carro Agora você criará a animação que faz do segundo car ro. 1 Na 2 camada, adicione um quadro-chave ao quadro 6 0. 2 Na 2 camada, adicione um quadro-chave ao quadro 7 0 e outro ao quadro 69. 3 Selecione o quadro-chave no quadro 69 da camada E xibição do fade 2. Selecione a Exibição do carro 2 no Palco e usar o Inspetor de propriedades para selecionar u ma transparência alfa de 0%. 4 Na 2 camada, selecione qualquer quadro entre 60 e 68. Na propriedade inspector, selecione Movimento no menu pop-up menu Tween. 5 Clique em qualquer quadro na 2 camada Exibição do fade entre os quadros 71 e 105, e prima Apagar. Nota: Como você completar o tutorial, lembre-se de salvar seu trabalho freqüentemente. Fade no terceiro carro Desvanece-se como o segundo carro para fora, o terc eiro carro desaparece dentro Você vai criar essa animação agor a. 1 Com a mesma camada 2 selecionada, adicione uma no va camada de Timeline e nomeá-la View 3 Fade. 2 No View 3 camada, adicione um quadro-chave ao qua dro 60.

37

3 Com o quadro 60 ainda selecionado, arraste o view 3.png do painel Biblioteca para o Palco. Use o Painel Info (escolha Janela> Info se o painel está fechado) para especificar 0 para ambos os X e Y coordenadas, e para verificar o ponto de registro e stá centralizado, como você fez para o view2.png. 4 view3.png Selecione no Palco e pressione F8 para torná-lo um símbolo. No Convert to Symbol caixa de diálogo, o nome do símbolo Exibição do car ro 3. Verifique se Clipe de filme está selecionada e cliq ue em OK.

5 No Inspetor de propriedades, selecione Alfa no me nu pop-up Cor de menu e digite 0% na Alpha Caixa de texto Valor. 6 Adicione um keyframe ao quadro 70 da camada View 3 Fade. 7 No Palco, selecione dentro do retângulo de delimi tação da Exibição do carro 3. No Inspetor de propriedades, insira 100% na caixa de texto Valor de alfa. 8 No 3 Ver camada, selecione qualquer quadro entre 60 e 69. Na propriedade inspector, selecione Movimento no menu pop-up menu Tween. Desaparecimento do terceiro carro Agora você criará a animação que faz do terceiro ca rro. 1 Em modo de exibição 3 camada, adicione um quadro- chave para Quadros 95 e 105. 2 Com o quadro 105 selecionados na View 3 camada, s elecione a Exibição do carro 3 no palco e usar Inspetor de propriedades para selecionar uma transp arência alfa de 0%. 3 Na View 3 camada, selecione qualquer quadro entre 95 e 104. Na propriedade inspector, selecione Movimento no menu pop-up menu Tween. Aparecimento do primeiro carro À medida que o terceiro carro para fora, o primeiro carro deve desaparecer para completar a animação. 1 No 1 camada, adicione um quadro-chave ao quadro 9 5. 2 Com o quadro 95 ainda selecionado, arraste o clip e de filme 1 carro (não view1.png) da Biblioteca Painel para o Palco. 3 No painel Info, digite 0 na caixa de texto coorde nada X e digite 0 na coordenada Y caixa de texto. Pressione Enter ou Return. 4 No Inspetor de propriedades, selecione Alfa no me nu pop-up Cor de menu e digite 0% na Alpha Caixa de texto Valor. 5 Selecione o quadro 104 da camada Exibição do fade 1.

38

6 Clique no interior do rectângulo delimitadora do clipe de filme Exibição do carro 1 no Palco. Na propriedade inspector, insira 100% na caixa de texto Valor de a lfa. 7 No 1 camada, selecione qualquer quadro entre os d e número 95 e 104. Na propriedade inspector, selecione Movimento no menu pop-up menu Tween. Nota: Como você completar o tutorial, lembre-se de salvar seu trabalho freqüentemente. Testar o filme Em qualquer ponto durante a criação, você pode test ar como seu filme vai jogar como um arquivo SWF. 1 Salve seu filme e escolha Controlar> Testar filme . O Flash exporta uma cópia de seu filme SWF. No filme SWF, a animação automaticamente joga em um loop contínuo. 2 Quando terminar de exibir o filme, feche o arquiv o SWF, clicando em sua caixa de fechar. Em sua Flash documento, escolha Editar> Editar documento ou cliq ue em Cena 1 para retornar à Linha de tempo principal. Carregar texto dinâmico em tempo de execução Na lição Adicionando e editando texto, você treinou a digitação de texto diretamente no Palco. Você pode também projetar o filme para incluir o texto de arq uivos externos. Uma das maneiras mais fáceis de realizar isso é usar a ação loadVariables para carregar o te xto de um arquivo de texto em um campo de texto dinâmico em tempo de execução. No arquivo FLA, você pode especi ficar atributos de texto, como estilo, tamanho e cor, para o campo de texto dinâmico. Uma vantagem de manter o t exto em arquivos externos é que quem quer modificar o texto pode trabalhar com o arquivo de t exto em vez do arquivo FLA. Nesta seção, você aprenderá como realizar as seguin tes tarefas: • Importação e alinhar um logotipo • Criar um campo de texto dinâmico • Use o Inspetor de propriedades para atribuir um t exto variável nome • Use a ação loadVariables para carregar o texto de um arquivo externo Para concluir esta seção, você pode continuar a tra balhar no arquivo mystiletto.fla, ou você pode navegar até a pasta do aplicativo Flash MX e abra Tutorials/FlashIntro/stiletto4.fla. Se você fizer stiletto4.fla utilizar o arquivo, salve o arquivo c om um novo nome na pasta My_Stiletto para manter um versão adulterada do arquivo original. Importar o logotipo Antes de criar o campo de texto dinâmico, você vai importar o logotipo, um arquivo para Macromedia FreeHand que o Flash adiciona automaticamente uma camada na Timeline. 1 Na Linha de tempo, selecione a camada de Imagens e adicione uma nova camada acima dela. Nomeie a nova camada Cópia. 2 Com a camada cópia selecionada, escolha File> Imp ort. Anteriormente no tutorial, você objetos importados para a biblioteca. Agora você vai importar o logotipo de f orma que ele aparece no palco. 3 Navegue na pasta do aplicativo Flash MX para os T utoriais / FlashIntro / Ativos pasta e Clique logo.fh10, em seguida, clique em Abrir.

39

4 Na caixa de diálogo Importação do FreeHand, verif icar que Scenes, Camadas, e todos são selecionados. Também verifique Incluir a camada de fundo e Manter blocos de texto é selecionado, e clique em OK.

5 Na Linha de tempo, o Flash criou uma camada denom inada Logo. Arraste o nome Logo para mover a camada abaixo da camada Cópia. 6 Você pode especificar as coordenadas da logomarca . No Inspetor de propriedades, com o logotipo selecionada, digite 10 na caixa de texto X e 20 na caixa de texto Y. Em seguida, pressione Enter ou Return. 7 Na Linha de tempo, bloqueie a camada Logo.

Criar um campo de texto dinâmico Agora você vai criar um campo de texto dinâmico. Em vez de digitar texto no campo, você vai especificar o texto variável que carrega para o campo durante a execução. 1 Na Linha de tempo, selecione a camada Cópia. Na c aixa de ferramentas, selecione a ferramenta Texto. Na propr iedade inspector, selecione Texto dinâmico no menu pop-up Tipo de texto do menu. 2 Na janela pop-up Font menu, selecione _sans. _sans é uma fonte de dispositivo adequado para o pe queno texto que aparece em várias plataformas de computad or. Para mais informações sobre fontes de dispositivo, consulte "Usando fontes de dispositivo (somente texto horizo ntal)", em Ajuda> Usando o Flash. 3 Na caixa de texto Size Point, tipo 12. 4 Clique no texto (preenchimento) e selecione Caixa de cor amarela, com um valor hexadecimal de FFCC00.

40

5 Na janela pop-up Tipo de linha de menu, selecione Multiline, que é para várias linhas de texto que se rá moldado. Digite o texto pop-up menu

Fonte menu pop-up Ponto de c aixa de texto de tamanho

Linha de pop-up Tipo de menu 6 No Palco, clique abaixo do logotipo. Arraste o po nteiro para criar um campo de texto com a largura do logot ipo texto e da profundidade aproximada da linha vertica l que está agrupado com o logotipo, como mostrado na A ilustração a seguir.

7 No Inspetor de propriedade TextField, digite na c aixa de texto Var.

O arquivo de texto que será carregado no campo de t exto dinâmico, como visto na ilustração a seguir, texto que inclui os nomes de variáveis: =. textFiel d Quando você digita esse nome no texto Var caixa, você está nomeando a variável que o filme de ve carregar. Linha de pop-up Tipo de menu

41

Use a ação loadVariables para carregar texto A ação loadVariables inclui um parâmetro para espec ificar o caminho para o texto variável. O texto está em um arquivo chamado copy.txt, dentro de seu Tutorials / FlashIntro / pasta Assets. 1 Na Linha de tempo, adicione uma nova camada e cha me-o de ações. Se necessário, arraste a camada de Ações par a no topo da Timeline. Uma boa prática é manter as ações na camada superio r em uma linha do tempo. 2 Se o painel Ações não estiver aberto, escolha Jan ela> Ações. Aumentar o painel Ações, se necessário, ao clicar na seta branca da barra de tí tulo para expandir a janela e arrastando no canto inferior direito do painel para exibir a c aixa de ferramentas Ações eo painel Script. O tipo de painel Ações que é exibida depende do obj eto ao qual você está adicionando um ação. Se você selecionou um quadro, por exemplo, o painel Ações exibirá para quadros. Se você selecionou um botão, o painel Ações exibirá pa ra os botões. 3 Clique no triângulo no canto superior direito da barra de título do painel para exibir o menu pop-up. Verifique se o modo normal, ao invés de modo expert , é selecionado. Modo de perito oferece recursos úteis para os exper ientes com o ActionScript. No modo normal, Os campos e controles de orientá-lo na criação de A ctionScript. Options menu button

Actions toolbox Script pane

42

4 Na caixa de ferramentas Ações, escolha Ações> Nav egador / Rede, clique duas vezes em loadVariables. O ActionScript é adicionado ao painel Script. Parâm etros para a ação aparecem acima do Painel Script. 5 Na caixa de texto URL, digite o caminho para o ar quivo de texto: .. / assets / copy.txt.

Teste seu filme • Salve seu filme e escolha Controlar> Testar filme . Você também pode pressionar Ctrl + Enter (Windows) ou Command + Return (Macintosh). Adicionar animação e navegação a botões Quando você especificar que um novo símbolo é um bo tão, o Flash cria linha do tempo para os estados de botão. Na lição Criando botões, você aprendeu a mudar a co r de preenchimento de uma forma dentro de uma estado de botão. Nesta seção, você aprenderá mais s obre como modificar botões, incluindo a adição de animação de um botão. Especificamente, nesta seção você vai aprender a re alizar as seguintes tarefas: • Importação de uma biblioteca de outro arquivo FLA • Alinhar botões • Adicione animação a um estado de botão • Adicionar um botão de navegação para ligar a um W eb site • Utilize o recurso Ativar botões simples • Adicione o botão de navegação

43

Para concluir esta seção, você pode continuar a tra balhar no arquivo mystiletto.fla, ou você pode navegar até a pasta do aplicativo Flash MX e abra Tutorials/FlashIntro/stiletto5.fla. Se você fizer stiletto5.fla utilizar o arquivo, salve o arquivo c om um novo nome na pasta My_Stiletto para manter um versão adulterada do arquivo original. Importar a biblioteca de outro arquivo FLA Os botões que você vai usar em seu filme residem na biblioteca de outro arquivo FLA. Para utilizar o botões, você abrir o arquivo FLA que contém os botõ es como uma biblioteca. 1 Com o painel Biblioteca aberta, escolha Arquivo> Abrir como Biblioteca. Navegue dentro do seu Flash MX pasta do aplicativo ao Tutorials / FlashIntro / pas ta de Ativos e buttons.fla clique duplo. A biblioteca para o arquivo buttons.fla aparece par a além da biblioteca para o documento.

Alinhar botões Você pode alinhar os três botões ao longo dos eixos horizontal e vertical, utilizando o painel de alinhamento. 1 Na Linha de tempo, com a camada cópia selecionada,

adicione uma nova camada e nomeie-Buttons. Bloquear todos as camadas exceto a camada Botões. 2 Na janela pop-up Exibir Estágio menu, à direita a cima do Palco, insira 150% para ampliar a sua visão do Palco. Em seguida, role para o lado inferior dir eito do Palco.

44

3 Arraste o Botão 1 do painel Biblioteca buttons.fl a e coloque-o no canto inferior direito da o campo de texto dinâmico.

Quando você arrastar um botão do

painel Biblioteca buttons.fla, torna-se parte do biblioteca para o documento. 4 Arraste o botão 2 e 3 de botão no painel Bibliote ca buttons.fla, colocando-os à esquerda do Button 1. Use o espaçamento mostrado na ilustração seguinte:

5 Com a ferramenta Seta, arraste para selecionar os três botões.

6 Para abrir o painel Align, escolha Janela> Alinha r. Verifique se nessa fase, não está marcada. Você faz Não quero alinhar os botões em relação ao Stage. Cl ique Align Vertical Center e, em seguida, clique em Distribute Horizontal Center. Align Vertical Center Para a terceira fase Distribute Horizontal Center Os botões de alinhar no Palco.

45

Ativar botões simples Quando o recurso Ativar botões simples é ativa, voc ê pode ouvir os sons incluídos com Botões 2 e 3, e você pode ver as cores usadas para os esta dos de botão. Mais design botão complexo, como animação, não joga. 1 Escolha Controlar> Ativar Botões Simples, então r olar e clique em cada botão. O botão da direita, Botão 1, não está terminado. Vo cê vai modificar o botão Avançar. 2 Quando terminar de testar os botões, escolha Cont rolar> Ativar Botões Simples para desmarcar esse recurso. Modificar um estado de botão Você vai criar um clipe de filme dentro do longo es tado de botão 1, em seguida, criar uma interpolação de forma na clipe de filme. A interpolação de forma cria um efe ito que muda a cor de cinza para vermelho. 1 No Palco, clique duas vezes no botão da direita, Botão 1, para abrir o modo de edição. 2 Na Linha de tempo do botão 1, ocultar todas as ca madas exceto a camada de cor. Na camada de cor, selecione a Over-chave. 3 No Palco, selecione a forma oval negro para o bot ão direito. Pressione F8 para fazer o oval de um símbolo. Na caixa Símbolo Converter em diálogo, o n ome do símbolo do botão de animação. Selecione Clipe de filme, e clique em OK. 4 No Palco, clique duas vezes no símbolo do botão d e animação para abrir o modo de edição. 5 Renomear Camada 1 Color Change, e adicione um qua dro-chave ao quadro 15. 6 Com a reprodução ainda no frame 15, selecione a f orma de botão no Palco e escolha um brilhante tonalidades de vermelho da cor de preenchimento pop -up menu na caixa de ferramentas. 7 Na Linha de tempo, clique em qualquer quadro entr e 1 e 13. No Inspetor de propriedades, selecione Shape Tween no menu pop-up menu. Arraste a reprodução dos quadros 1 a 15, para ver a mudança de cor. Adicionar acções a botões Quando o usuário clica no botão ea animação interpo lada joga, você quer que o indicador de reprodução para mover para o fim da animação do botão Timeline, ent ão pare. Você pode usar o ActionScript, o Flash linguagem de script, para controlar o movimento de reprodução em um cronograma. 1 Adicione uma nova camada para a animação do botão Timeline e nomeá-la de Ações. 2 Na camada Actions, adicione um quadro-chave ao qu adro 15. 3 Se o painel Ações não estiver aberto, escolha Jan ela> Ações. Aumentar o painel, se necessário, para Exibir a caixa de ferramentas Ações eo painel Scrip t.

46

4 Com o quadro 15 da camada Ações selecionado, vá p ara a Acção> Filme categoria Controle da Ações de ferramentas e parar de clique duplo. A ação stop permite especificar que a reprodução va i parar quando chegar ao quadro 15.

Na animação Button Timeline, quadro 15 da camada Aç ões agora exibe uma pequena, o que indica que uma ação está ligado a esse quadro .

Nota: Como você completar o tutorial, lembre-se de salvar seu trabalho freqüentemente. Adicionar botão de navegação Você pode usar a ação getURL para adicionar navegaç ão de um botão que abre um site. 1 Escolha Editar> Editar documento ou clique em Cen a 1 para retornar ao filme principal. 2 No Palco, clique no botão 1, o botão direito. 3 No painel Ações, escolha Ações> Navegador / Rede e clique duas vezes getURL. Nas 4 caixa de texto URL, digite qualquer URL compl eto, como http://www.macromedia.com.

47

5 Na janela pop-up menu, selecione _blank para lanç ar uma nova janela do navegador quando o usuário clica no botão 1.

6 Salve o arquivo e escolha Controlar> Testar filme . Clique no Botão 1 para ir para o site que você especificada na etapa 4. 7 Feche o navegador e do arquivo SWF, e então retor nar para o ambiente de criação do Flash. Se desejado, você pode selecionar o botão 2 no Palco e repita os passos 3 a 7 para vinculá-lo a um Web site diferente, em seguida, repita os passos pa ra o botão 3. Quando você terminar de ligar os botões, fechar o painel de Ações.

Adicionar streaming e sons de eventos Quando um filme está baixando de uma fonte na Inter net, um som de fluxo pode começar a jogar como logo no início do arquivo de som tem baixado. Esses sons são especialmente adequadas para contínuos sons de fundo. Os sons de evento deve fazer o download completo e carregados na RAM antes de jogar; sons de evento são útil para os botões. Nesta seção, você aprenderá co mo realizar as seguintes tarefas: • Adicionar um fluxo de som ao seu filme • Adicionar um som de evento para um botão Para concluir esta seção, você pode continuar a tra balhar no arquivo mystiletto.fla, ou você pode navegar até a pasta do aplicativo Flash MX e abra Tutorials/FlashIntro/stiletto6.fla. Se você fizer stiletto6.fla utilizar o arquivo, salve o arquivo c om um novo nome na pasta My_Stiletto para manter um versão adulterada do arquivo original.

48

Adicionar um som de streaming Você pode incluir som no seu filme, arrastando o so m para o Palco. Você adicionará fundo música que os córregos e joga para um determinado n úmero de vezes. 1 Na Linha de tempo, com a camada Botões selecionad a, adicione uma nova camada e nomeie-Sounds. 2 Escolha File> Import. Na pasta do aplicativo Flas h MX, navegue até Tutorials / FlashIntro / Ativos e clique track1.mp3. Control-cl ick (Windows) ou Command (Macintosh) para adicionar ping.mp3 à seleção, cliq ue em Abrir. Os arquivos são importados para a biblioteca. 3 Com os Sons camada selecionada, arraste o som tra ck1.mp3 do painel Biblioteca para o Palco. Na Linha de tempo, uma pequena representação das on das sonoras aparece no quadro. 4 Na Linha de tempo, selecione o primeiro quadro da camada Sons. No Inspetor de propriedades, tipo 999 na caixa de texto Loop para especificar o número de vezes que o som pode reproduzir continuamente. Testar o filme 1 Salve o arquivo e escolha Controlar> Testar filme para ouvir o som. 2 Quando você terminar de jogar o filme, a caixa de fechar o filme, clique em. Adicionar um som de evento para um botão Além de arrastar um som para o Palco, você pode sel ecionar um som do Inspetor de propriedades. Você vai usar esse método para adicionar um som de evento a um botão. Como você aprendeu na aula Criando botões, quando v ocê cria um símbolo de botão, o Flash cria quadros para os diferentes estados do botão em rela ção ao ponteiro do mouse. Durante o quadro, por exemplo, representa o estado do botão quando o pont eiro está sobre o botão. Outros quadros botão / estados estão Up, Down e Hit. Agora você vai adicionar um som de evento para um b otão, o que faz com que o som para tocar durante o estado Sobre . Porque você está adicionando o som ao símbolo de bo tão na biblioteca, não apenas a uma instância do símbolo, o som será reproduzido para cada instância do botão. 1 No painel Biblioteca, clique duas vezes no botão 1 exemplo para abrir o modo de edição. 2 Na Linha de tempo para o botão 1, adicionar uma n ova camada e nomeie a nova camada de som. 3 Selecione o quadro Sobre (quadro 2) da camada de som e escolha Inserir> Keyframe ou pressione F6. 4 Para definir as propriedades de som, clique no qu adro 2 da camada de som. No Inspetor de propriedades, ping.mp3 selecione o som pop-up menu. Verifique se o evento é selecionado no Sync menu pop-up. 5 Salve o documento e escolha Controlar> Testar fil me para ouvir os sons do botão. Quando você terminar de exibir o arquivo SWF, feche a janela pa ra retornar ao documento.

49

Organizar o painel Biblioteca No momento, há um propriedades no painel Biblioteca . Para mantê-las organizadas, de fácil encontrar, e classificados por tipo, você vai criar pastas, em seguida, mova-as para as pastas. Dica: Manter o painel da biblioteca organizada é um a boa prática para qualquer filme de autor que você, especialmente porque os outros trabalhando no mesmo arquivo pode então localizar o s bens facilmente. 1 Se o painel Biblioteca não estiver aberto, escolh a Janela> Biblioteca. 2 Expandir e aumentar a janela, se necessário, para exibir todas as propriedades no painel Biblioteca. No parte inferior do painel Biblioteca, clique no botã o Nova pasta quatro vezes, para criar quatro novas pastas.

3 Faça duplo clique no nome da pasta sem título 1, e renomeá-lo de carro Animation Movie Clips. 4 Renomeie as outras três pastas Sounds, Arte e bot ões. 5 Arraste Exibição do carro 1, Exibição do carro 2, 3 Exibir carro, e carro de animação para o filme de a nimação Carros Pasta Clips. 6 Arraste ping.mp3 e track1.mp3 para a pasta Sons. 7 view1.png Drag, view2.png e view3.png para a past a de Obra.

50

8 Drag Button 1, Button 2, 3 e Button para a pasta botões. Com a pasta Buttons selecionada, clique em Nova pasta novamente para cr iar uma subpasta com a pasta botões. 9 Nome da nova pasta Button Movie Clips, arraste o botão restantes activos clipe de filme para esta pasta.

10 Feche o painel Library e salvar seu documento. Teste de performance de download e publicar o filme Para completar seu documento, você irá usar o coman do Publicar para criar um Web compatível filme com a extensão SWF. Se você usar o comando Publicar com as configuraçõe s padrão, o Flash prepara o arquivo para a web. Flash irá publicar o SWF e criar um arquivo HTML co m as tags necessárias para exibir o SWF. Depois de definir as opções necessárias Publish Set tings, você pode repetidamente exportação para todos os selecionados formatos de uma só vez, basta escolher Arquivo> Pub licar. Flash armazena as configurações de publicação que v ocê especificar com o documento, para cada filme pode ter suas próp rias configurações.

51

Nesta seção, você aprenderá a realizar as seguintes tarefas: • Utilize o Bandwidth Profiler para testar o desemp enho do download do filme • Publicar o filme em uma única etapa • Rever e modificar as configurações de publicação • Ver o filme em um navegador da Web Para concluir esta seção, você pode continuar a tra balhar no arquivo mystiletto.fla, ou você pode navegar até a pasta do aplicativo Flash MX e abra Tutorials/FlashIntro/stiletto7.fla. Se você fizer stiletto7.fla utilizar o arquivo, salve o arquivo c om um novo nome na pasta My_Stiletto para manter um versão adulterada do arquivo original. Testar o desempenho de download de filmes Para um filme em Flash para reproduzir corretamente sobre o Internet, um quadro deve ser descarregado antes do filme chega a esse quadro. Se o filme alcançar um quadro que não baixou ainda, ele faz uma pausa até que a dados chegam. A largura de banda baixa de arquivos Flash promove downloads rápidos. Você pode usar o Bandwidth Profiler para testar seu filme e identificar onde podem ocorrer as pausas. O Bandwidth Profiler mostra graficamente a quantida de de dados enviados em cada frame do filme, de acordo com a velocidade do modem selecionado. 1 Guarde o documento e escolha Controlar> Testar fi lme. 2 No menu Debug, selecione uma velocidade do modem para determinar a taxa de download que o Flash irá simular. Você também pode escolher Personalizar para inserir uma taxa de download. 3 Escolha Exibir> Bandwidth Profiler para ver o SWF com um gráfico de desempenho do download.

52

A barra sombreada representa o primeiro e único em seu filme principal. Filmes com múltiplas quadros terá várias barras sombreadas. A altura da barra representa o tamanho do quadro em bytes e kilobytes. Bares que se estendem acima da linha v ermelha, especialmente se a barra representa um quadro de ou tras do que o primeiro quadro, indicam que poderá haver atrasos na reprodução de filmes. Você pode otimizar o seu filme para downloads mais rápidos. Para obter detal hes, consulte "Otimizando os filmes" em Ajuda> Usando o Flash. 4 Quando terminar de exibir o Bandwidth Profiler, e scolha Exibir> Bandwidth Profiler para desmarcar. Feche a janela de SWF para retornar ao a mbiente de criação. Use o comando Publicar Você pode publicar seu documento do Flash para a re produção da Web em uma única etapa. • Com o documento salvo, escolha Arquivo> Publicar. Flash publica o seu filme, criando um arquivo SWF e possivelmente arquivos adicionais, com base no atributos na caixa de diálogo Configurações de publ icação. Você vai encontrar os arquivos publicados, por padrão, no mesma pasta onde você salvou o FLA. Exibir configurações de publicação Usando as configurações caixa de diálogo Publicar, é fácil de reconfigurar o seu arquivo de forma publica. 1 Para ver as configurações de publicação, escolha Arquivo> Configurações de Publicação.

O flash é configurado, por padrão, para criar um ar quivo HTML de suporte, que exibe o filme do Flash. Quando você seleciona um formato que exige configur ações adicionais, uma nova guia é exibida. 2 Na guia Formatos, verificar que o Flash (SWF.) E HTML (HTML.) São selecionados. Clique na guia Flash. Por padrão, o filme é publicado para o Flash Player . O processo de publicação também se aplica filme e compressão JPEG.

53

3 Clique na guia HTML. Por padrão, o processo de publicação cria um docume nto HTML que insere o arquivo SWF em um janela do navegador. Configurações na guia HTML da caixa de diálogo Configurações de publicação determinar como o filme aparece no navegador. Alterar as configurações de publicação Por padrão, o Flash dá ao arquivo SWF o mesmo nome do arquivo FLA. Você pode dizer ao Flash para mudar o nome. 1 Na guia Formatos da caixa de diálogo Configuraçõe s de Publicação, desmarque a opção Usar nomes padrão. 2 No HTML (. Caixa de texto html), selecione o text o existente e digite um novo nome, como stilettoElectric.html. Em seguida, clique em Public ar. Quando a janela de status Publishing abre, clique em OK na caixa de diálogo Configurações de publicação. Ver o filme publicado em um navegador Você pode ler o arquivo HTML e SWF, que você acabou de publicar, no seu navegador. 1 Abra seu navegador, abra o arquivo HTML que você criou. Por padrão, o arquivo HTML estiver na mesma pasta q ue seu arquivo FLA. Quando você abre o arquivo HTML, o filme de SWF é r eproduzido no seu browser. 2 No seu navegador, você pode usar um comando como Exibir> Fonte da página ou Exibir> Código-fonte para exibir o HTML. As marcas OBJECT e EMBED garantir que o filme de SW F é exibida no navegador.

Para obter informações adicionais sobre o Flash tem plates HTML, consulte "Sobre a publicação HTML modelos "em Ajuda> Usando o Flash.

54

Os próximos passos Ao concluir todas as oito seções do tutorial, você aprendeu muito sobre a criação de filmes Flash, incluindo a forma de realizar as seguintes tarefas: • Analisar um filme completo • Definir as propriedades do documento e criar um gradiente • Criar e mascarar arte vetorial • Tween efeitos de bitmap em um clipe de filme Carregar texto dinâmico • • Modificar botões e adicionar navegação • Adicionar eventos e sons de streaming • Testar e publicar um filme Continuar a aprender mais sobre os recursos do Flas h, tomando a Introdução à ActionScript Tutorial em Ajuda> Tutoriais. Projetado para princi piantes ActionScript, o tutorial lhe apresenta para scripting conceitos, permitindo-lhe construir um pu zzle com ações. Além disso, você pode busca de artigos e notas técnicas sobre o Flash MX da Macromedia prêmio vencedor de Apoio Center. Para acessar o site, vá para www.macromedia .com e clique em Suporte.

55

CAPÍTULO 2

Introdução ao ActionScript ActionScript é a linguagem de script do Macromedia Flash MX. Uma linguagem de programação é uma forma de comunicar-se com um programa, você pode usá-lo ao F lash o que fazer e para perguntar o que é Flash acontecendo como um filme é executado. Esta comunic ação bidirecional permite que você crie filmes interativ os. Em Neste tutorial, você irá analisar as tarefas envolv idas na criação de um quebra-cabeça interativo. Este tutorial foi desenvolvido para usuários que sã o iniciantes Flash ActionScript, mas que querem traba lhar para ampliar suas habilidades. Você já deve estar familiarizado com ações básicas e saber atribuí-los no painel Ações. Para tirar o máximo pr oveito deste tutorial, você deve primeiro completar Introdução ao Flash MX, em Ajuda> Tutoriais. Você t ambém deve ser confortável com os conceitos apresentados em "Escrevendo script s com o ActionScript" e "Criando interação com o ActionScript "em Ajuda> Usando o Flash. Este tutorial leva cerca de uma hora para ser concl uído, dependendo de sua experiência, e vai te ensinar como fazer as seguintes tarefas: • Inicializar o filme • Guardar e recuperar informações • Apresentar informações em uma caixa de texto dinâ mico • Escreva uma expressão • Controlar o fluxo de um filme • Criar comandos e reutilizando códigos • Utilize um objeto interno • Teste o filme

56

Ver um filme completo Antes de começar a trabalhar em seu próprio filme, ver uma versão completa do tutorial para obter uma idéia de que você vai criar. Além disso, o tutorial concluído permite analisar o cronograma, Movie Explorer, Palco e painel Ações para compreend er as práticas de criação. 1 Na pasta do aplicativo Flash MX, navegue até Tuto rials / ActionScript / Finished. Puzzle.swf duplo clique para abrir o filme completo no stand-alone do Flash Player.

2 No filme puzzle.swf, clique no botão OK. As peças do quebra-cabeça. 3 Clique em todos os botões Mostrar / Ocultar. Observe como os diferentes padrões e números de peç as são indicadas para orientá-lo na conclusão o enigma. 4 Clique em uma parte do enigma e arraste para a ár ea de solução. A peça se encaixa. 5 Shift-clique em uma parte do enigma. O número aparece na parte do círculo sob a área de solução. Você pode combinar a peça número para a sua localização no guia número da peç a, se você ficar preso. 6 tecla Alt (Windows) ou Option (Macintosh) uma par te do enigma. A peça gira no sentido horário. 7 Quando terminar de exibir o arquivo SWF, você pod e fechar a janela ou deixá-la aberta para servir como uma referência.

57

Analisar o arquivo puzzle.fla É útil analisar o arquivo FLA completo para determi nar como o autor colocá-lo em conjunto e onde os elementos do ActionScript estão localizados . 1 No Flash, escolha Arquivo> Abrir. Na pasta do apl icativo Flash MX, navegue até Tutorials / ActionScript / terminados e abra o arquivo puzzle.f la. Agora você deve ver o filme completo tutorial no am biente de criação. 2 Para ver todo o conteúdo do Palco, escolha Exibir > Ampliação> Mostrar Frame. O filme contém apenas um quadro, exibido na Linha d e tempo principal do arquivo puzzle.fla. Você vai usar o ActionScript para mostrar e ocultar as v árias caixas de diálogo e guias padrão que aparecem no enigma. 3 Para redimensionar a Linha do Tempo e Palco, arra ste a barra que separa o palco da Linha de tempo até e para baixo. Percorrer a Linha do tempo para ver c omo as camadas são organizadas. Mova esta barra para redimensionar a Linha de tempo.

4 Para ver as caixas de diálogo e guias no Palco no ambiente de criação, clique no X vermelho na coluna Olho à direita do nome de uma camada. Um X vermelho indica uma camada oculta. Você clique na coluna Bloquear para bloquear uma ca mada, o que impede que ele seja selecionado. Esta é útil se você está selecionando um item no Palco, qu e está abaixo de um item em uma outra camada. O Esboço coluna, indicada por um quadrado acima da co luna, ativa os contornos de todos os elementos em uma camada, o que pode tornar mais fácil para ve r bordas da forma e pode causar Flash para trabalhar com mais rapidez. 5 Selecione o quadro 1 da camada Ações. O Quadro 1 tem um minúsculo, o que indica que ações são associadas com o quadro. Para adicionar um elemento do ActionScript de um fi lme, você deve atribuir a um botão, um quadro ou um clipe de filme. Scripts quadro são indicados por um minúsculo em um quadro na Timeline. Para localizar scripts de botão e clipe de filme, siga um dos segu intes procedimentos: • Abra o painel Ações e selecione um script na barr a de salto-a lista pop-up no âmbito do Ações barra de título do painel.

58

• Botões Select e clipes de filme no Palco com o pa inel Ações aberto. • Utilize as teclas de filtragem ou a caixa de text o para pesquisar o script no Movie Explorer. 6 Para ver as ações, escolha Janela> Ações. O painel Ações se abre. Expanda o painel, se necess ário, para ver as ações associadas ao quadro. O painel Ações tem dois modos, normal e expert. Est e tutorial explica como adicionar Ações no modo normal.

Ações no Movie Explorer 1 Para localizar todas as ações no filme, use o Mov ie Explorer. Se não for aberta, selecione Janela> Movie Explorer. No Movie Explorer, desmarque todos os botões de fil tragem, exceto o botão ActionScript. Em Além das ações no Quadro 1 da camada Ações, as açõe s também estão incluídos em cada um dos Show / Hide botões, os botões em diversas caixas de diálogo que aparecem, e cada parte do enigma. 2 Escolha File> Close para fechar o filme puzzle.fl a quando você está acabado. Não salvar alterações o arquivo final. Inicializando o filme Todos os filmes têm um estado inicial. Isto mostra como um filme parece antes de executar qualquer um e interage com ele. Às vezes, você deve definir as variáveis e propriedades de clipe de filme para estabelecer este primeiro es tado. Para exemplo, no arquivo puzzle.fla, determinadas caixas de diálogo e guias padrão deve ser escondido na estado inicial. Cada clipe de filme em um filme do Flash tem um con junto de qualidades ou propriedades, que você pode manipular com ActionScript. Cada uma dessas propriedades é identi ficado por um nome precedido por um sublinhado (_) caráter. Por exemplo, cada clipe de filme tem uma p ropriedade _xscale, _yscale uma propriedade, e uma propriedade _rotation, entre outros. ActionScript usa variáveis para armazenar informaçõ es. Por exemplo, a variável meu_nome pode ter o valor "Jody Singer". Você pode aprender mais sobre as variáveis na seção "Salvar e recuperar informações "na página 61.

59

Você inicializar as propriedades e variáveis no pri meiro fotograma de um filme. Você pode atribuir uma ação de quadro em Linha do tempo, ou anexar um objeto de ação a um cl ipe de filme. No filme quebra-cabeça, as propriedades do guia de modelo e clipes de filme caixa de diálogo s ão iniciadas no primeiro frame da Timeline principal.

Abra o arquivo de partida Agora você está pronto para criar sua própria versã o do filme de tutorial. 1 Escolha File> Open. 2 Na pasta do aplicativo Flash MX, navegue até Tuto rials / ActionScript / for usado e aberto mypuzzle.fla. 3 Se você receber uma mensagem de substituição de f ontes, clique em Usar padrão. Você vê um filme parcialmente concluída tutorial. O filme pode olhar terminado porque todos os símbolos estão no lugar no palco. No entanto, você ainda precisa adicionar alguns scripts para fazer o filme interativo. 4 Escolha Arquivo> Salvar Como e salve o arquivo co m um novo nome e seqüencial, como mypuzzle2.fla, na mesma pasta que mypuzzle.fla. Fazer uma cópia do arquivo permite que você ou outr o usuário para completar o tutorial novamente usando o mypuzzle.fla arquivo original. Além disso, se você regularmente salvar o arquivo com um novo e sequenc ial nome, você pode reverter para um arquivo anterior s e você cometer um erro que você não é capaz de resolver em o seu arquivo atual. Definir as propriedades de clipe de filme O filme puzzle.fla tem três caixas de diálogo: um a lerta quando o enigma é terminado, e os outros dois perguntar se você quer embaralhar as pe ças do puzzle. Além disso, vários padrões e guias sobreposição de área a solução para ajudar os usuár ios a resolver o enigma. Cada uma destas caixas de diálog o, padrões e guias é um clipe de filme. Para inicializar o filme, você tem que esconder vár ios clipes de filme para que apenas o início de diálogo e as peças do quebra-cabeça. Você vai fazer isso po r configuração suas propriedades _visible para falso. 1 Selecione Quadro 1 na camada Ações. Se o painel A ções não estiver aberto, escolha Janela> Ações. O painel Ações mostra ações associadas ao quadro selecionado. Texto após barras duplas (/ /) é um texto comentado, que oferece informações úteis para a compreensão dos scripts.

60

2 Clique no menu pop-up no canto superior direito d a barra de título do painel Ações. Verifique se Modo Normal e Exibir números de linha são seleciona dos.

3 No painel Script, clique na linha 4 para selecion ar o código comentado / / INSERIR o código aqui. 4 Na categoria Ações> Ações diversas da caixa de ferramentas Ações, à esquerda, clique duas vezes na ação evaluate para adicionar u ma linha em branco do código que termina com um ponto e vírg ula. Um ponto e vírgula (;), em uma declaração do Action Script é como um ponto (.) Em uma frase. 5 Com o ponto de inserção na caixa de texto Express ão do painel Ações, clique em Inserir Botão Target Path. O Insert Target Path caixa de diálogo aparece. Verifique se 6 pontos, ou seja, a notação de pontos , e absoluto, o que significa caminho absoluto, são selecionados. Na caixa de diálogo, você verá uma lista de clips d e vídeo a partir do qual você pode selecionar. 7 Selecione o clipe de filme arestas da árvore de c lipe de filme, clique em OK. O código a seguir aparece na caixa de texto Express ão: _root.edges A trajectória diz ActionScript a localização de um clipe de filme dentro da estrutura global de um Filme do Flash. A propriedade _root refere-se à Lin ha de tempo principal e as bordas vive clipe de filme no Palco da Timeline principal. Qualquer caminho de destino que começa com _root é chamado de uma absoluta caminho, porque ele dá o caminho completo para um c lipe de filme na Timeline principal.

61

8 Com o ponto de inserção após _root.edges, entrar. _visible = False na caixa de texto Expressão. Esta linha de código faz com que o clipe de filme i nvisível no Palco. Você pode digitar o código manualmente, ou você pod e escolher itens ActionScript das propriedades e Operadores de pastas na caixa de ferramentas Ações. Se você cometer um erro ao digitar uma ação e decid ir que você gostaria de excluí-lo, selecione a ação na painel Script e clique no botão Menos (-) no painel Ações. 9 Na caixa de ferramentas Ações, clique duas vezes novamente na ação evaluate para adicionar uma linha de código vazia terminando com um ponto e vírgula. Repita os passos 5 e 6, em seguida, escolher o clipe de filme no padrão de Inserção Target Path caixa de diálogo. Repita o passo 8, dig itando novamente. _visible = False na caixa de texto Expre ssão. 10 Continue a repetir as etapas 4 a 8, a escolha da imagem, piecenumbers, scramblebutton, areYouSure e clips de parabéns filme na caixa de di álogo Inserir caminho de destino, e digitando . _visible = false para cada clipe de filme você te rminar, seu script deverá aparecer como segue:

11 Escolha Arquivo> Salvar como e digite um novo no me. Use um esquema de nomeação consecutivo, como mypuzzle3.fla, para poder reverter para versões ant eriores do arquivo, se necessário.

62

Utilize o painel de Referência

Durante a criação, se desejar obter informações adicionais sobre o ActionScript que você entra, voc ê selecione a ação na caixa de ferramentas Ações ou p ainel Script, clique no botão de Referência. O Referência do painel, um sistema de ajuda organizad o de maneira semelhante ao painel Ações, exibe informaçõ es sobre a ação selecionada.

Teste a sua sintaxe ActionScript, como a linguagem escrita, depende da sintaxe correta. Se a sintaxe estiver incorreta, o ação não será executada corretamente. Flash oferece uma variedade de maneiras para você testar a sua sintax e. 1 Clique no menu Opções no canto superior direito d a barra de título do painel Ações e escolha Verificar sintaxe. Se a sintaxe estiver correta, aparecerá uma mensage m informando que o script não contém erros. Se a sintaxe está incorreta, aparecerá uma mensagem informando que o script contém erros, a saída janela se abre e exibe informações sobre o erro. 2 Clique em OK para fechar a mensagem de sintaxe.

63

No modo normal, os erros de sintaxe do ActionScript apareça em vermelho no painel Script. Se você mover o ponteiro do mouse sobre o erro, uma dica de ferramenta exibe a mensagem de erro. Erro de sintaxe mensagens também aparecem em destaque na área de st atus inferior do painel Ações.

Além disso, como você aprendeu na Introdução ao Fla sh MX, você pode escolher de Controle> Testar filme durante a criaçã o para testar se o filme é reproduzido como esperado. Salvar e recuperar informações Para criar um filme do Flash complexo interativo, v ocê precisa de um caminho para o flash para acompanhar informação e de atividade do usuário: botões que fo ram pressionados, um nome de usuário, uma partitura, ou que secções que um usuário tenha visitado. ActionScript usa variáveis para armazenar peças de informação que você pode recuperar e usar novamente. Você pode declarar uma variável em um script em qualquer Linha de tempo e usá-lo em qualq uer Timeline outros no mesmo filme. Você deve escrever um caminho de destino para uma variável, a fim de utilizar o variável em um script, como você deve escrever um c aminho de destino para usar um clipe de filme em um script. No arquivo puzzle.fla, o ActionScript usa a variáve l de diálogo para acompanhar ou não um caixa de diálogo está visível. Quando uma caixa de diálogo, a variável de diálogo é definido como verdadeiro, quando um us uário clica em um botão em uma caixa de diálogo, a variáv el de diálogo é definido como false. Essa variável não afeta a visibilidade das caixas de diálogo si, é simplesmen te um recipiente que contém informações que você pode usar em scripts em todo o filme. No arquivo pu zzle.fla, se diálogo é definido como verdadeiro, um usuário não pode mover uma peça do puzzle. Declare uma variável e atribuir um valor a ela Quando você precisar de uma variável, você deve nom eá-la ou declará-lo. Você também deve atribuir um valor a ela. Você pode fazer as duas coisas ao mesmo tempo, ou você pode d eclarar uma variável em uma declaração e, em seguida, atribuir- lhe uma valor em uma declaração posterior.

64

ActionScript usa três tipos de variáveis: variáveis locais, variáveis globais e variáveis Timeline. Você pode usar a ação var dentro de um bloco de cód igo (designado por chaves ()) para criar um variável local, que desaparece quando o bloco de có digo termina a execução. Você pode usar o conjunto ação variável para criar uma variável Cronograma an exado ao Cronograma de um clipe de filme, o que pode ser usados em qualquer script no documento. Para ob ter mais informações sobre variáveis, consulte "Compreendend o a linguagem ActionScript "em Ajuda> Usando o Flash. O arquivo puzzle.fla var usa a ação ea ação conjunt o variável, dependendo da situação. Quando uma variável só é necessária em um bloco de código, a ação var é usado. A caixa de diálogo variável é definida e atribuída utilizando a acção conjunto de variáveis. Agora você vai declarar e atribuir um valor à variá vel de diálogo: 1 Escolha File> Open e escolher a versão de mypuzzl e.fla salvo pela última vez. Nota: Você também pode navegar até a pasta do aplic ativo Flash MX e abrir Tutorials / ActionScript / Finished / puzzle2.fla. Se você usar o puzzle2.fla arquivo, sa lve o arquivo com um novo nome na pasta for usado para manter uma versão adulterada do arquivo original. 2 Selecione Quadro 1 da camada Ações. Se o painel A ções não estiver aberto, escolha Janela> Ações. 3 No painel Script do painel Ações, selecione a lin ha 11, que é a última linha de código no Secção Inicializar. Na caixa de ferramentas Ações, escolha Ações> Variáveis e clique duas vezes no set ação variável. 4 tipo de diálogo na caixa de texto Variable. 5 True Type na caixa de texto Valor. Selecione Expr essão, à direita da caixa de texto Valor. Ao selecionar Expressão, você está dizendo a verdad e Flash que não é uma seqüência de caracteres literal. No estado inicial do filme, uma caixa de diálogo é visível no palco. Portanto, a variável de diálogo deve ser definido como verdadeiro no início do film e, caso contrário, um usuário pode mover as peças do puzzle antes de serem mexidos.

6 Escolha Arquivo> Salvar como e digite um novo nom e. Use um esquema de nomeação consecutivo para poder reverter para ve rsões anteriores do arquivo, se necessário.

65

Exibição de informações em uma caixa de texto dinâm ica Caixas de texto dinâmicas podem exibir conteúdos al terados em um filme do Flash. Você usa a propriedade Inspetor de criar uma caixa de texto dinâmico e atr ibuir-lhe um nome de variável. O valor da variável é exibido no campo de texto. No arquivo puzzle.fla, uma dinâmica caixa de texto exibe números de peças de puzzle quando um usuário clica em um Sh ift - peça. Agora você vai atribuir um nome de variável p ara a caixa de texto dinâmico. 1 Se necessário, selecione Arquivo> Abrir e escolha a versão salva do arquivo que você salvou. Nota: Você também pode navegar até a pasta do aplic ativo Flash MX e abrir Tutorials / ActionScript / Finished / puzzle3.fla. Se você usar o puzzle3.fla arquivo, sa lve o arquivo com um novo nome na pasta for usado para manter uma versão adulterada do arquivo original. 2 Na Linha de tempo, desbloqueie a camada guia de n úmeros, se ele está bloqueado. 3 Clique duas vezes o número de clipe de filme círc ulo no palco sob o canto inferior direito da a área de solução do enigma. Peça clipe de filme círculo Isso abre o círculo Peça símbolo em modo de edição.

66

4 Selecione a camada de texto na Timeline. No Palco , clique no centro do círculo Peça para selecionar o campo de texto.

5 Se o Inspetor de propriedades não estiver aberto, escolha Janela> Propriedades. No Inspetor de propriedades, selecion e Texto dinâmico no menu pop-up Tipo de texto do menu. 6 Na janela pop-up Tipo de linha de menu, verificar se Single Line está marcada. 7 Type _root.pieceNumber na caixa de texto Var e pressione Enter ou Return.

Todas as variáveis, como as funções e clipes de víd eo, devem ser referenciadas por seus caminhos. O pieceNumber variável é declarada e actualizada em f unção RotateDisplayOrDrag no Timeline principal, mas a caixa de texto variável é o número círculo Piece Timeline. Quando você digite o caminho completo para a variável pieceNumb er, o valor é atualizado e mostra no campo de texto no palco, sempre que muda o valor da variável no te mpo principal. 8 Escolha Editar> Editar documento, clique no botão Voltar ou clique em Cena 1 para retornar ao Timeline principal. 9 Escolha Arquivo> Salvar como e digite um novo nom e. Use um esquema de nomeação consecutivo para poder reverter para versões anteriores do arquivo, se nec essário. Escreva uma expressão Se você adicionou dois números em uma equação matem ática, você já usou um operador. Um operador é um símbolo que executa uma tarefa ou operação, em uma parte, o u pedaços de dados, ou operandos. Por exemplo, no expressão 2 + 2, o sinal mais (+) é o operador e ca da número é um operando. Uma expressão é qualquer código ActionScript que po de ser avaliada para produzir um único valor. Para exemplo, o código minha_idade + 17 é uma expressão, porque quando o código é executado, o ActionScript verifica o valor da variável minha_idade, adiciona-lo ao núm ero 17, e produz um novo valor único. Se o valor de minha_idade é de 47, o novo valor seria 64. Os operadores permitem que você tome as informações coletadas e armazenadas em variáveis e manipulá-lo em expressões para criar ou determinar outros valor es. Por exemplo, você pode saber que um usuário tenha caiu uma parte do enigma para a área de solução, ma s como fazê-lo a determinar se a peça está no local correto? E se a peça está no lugar correto, c omo você determina se o quebra-cabeça tem sido resolvido? Para examinar as expressões construídas com operadores aritméticos em tal cenário, selecione Quadro 1 da Linha de tempo principal, abra o painel Ações, e olhar para a função IsItDone on line 50. O ActionScript tem numéricos ou aritméticos, operad ores, mas também tem outros tipos de operadores que executar diferentes tipos de operações. Por exemplo , um operador de comparação compara os valores de determinar se um operando é superior, inferior ou i gual ao outro, e um operador lógico calcula um valor verdadeiro ou falso, também chamad o de um valor booleano, por uma expressão.

67

Agora você vai usar um operador chamado o operador lógico NOT para escrever uma expressão que mostra e esconde o padrão de quebra-cabeça. O operador lógic o NOT, que é representado por um ponto de exclamação (!), Calcula o valor booleano oposto de seu operand o. Por exemplo, os rendimentos a expressão! Verdade o valor falso. 1 Se necessário, selecione Arquivo> Abrir e escolha a versão salva do arquivo que você salvou. Nota: Você também pode navegar até a pasta do aplicativo Flash MX e abrir Tutorials / ActionScript / Finished / puzzle4.fla. Se você usar o puzzle4.fla arquivo, sa lve o arquivo com um novo nome na pasta for usado para manter uma versão adulterada do arquivo original. 2 Clique no botão Mostrar / Ocultar Pattern botão b ordas do Palco. Se o painel Ações não estiver aberto, escolh a Janela> Ações. O painel Ações mostra ações associadas com o botão. 3 Selecione a seguinte linha de código no painel Sc ript: / / INSERIR o código aqui 4 Na caixa de ferramentas Ações, escolha Ações> Açõ es diversas e arraste a avaliação da acção para o painel Script. Quando você adicionar o recurso, ela é colocada em um código chamado de manipulador de eventos. O código parece esta: on (release) ( ; ) 5 Na caixa de ferramentas Ações, clique duas vezes na ação evaluate para adicionar outra linha de código vazia . O código agora é assim: on (release) ( ;; ) 6 Selecione a primeira linha vazia, a linha com o p rimeiro ponto e vírgula e coloque o ponto de inserção no caixa de texto Expressão. Agora você digite o código que esconde o clipe de f ilme padrão, um usuário deve ver o padrão clipe de filme ou o clipe de filme bordas, mas não ambos. 7 Digite _root.pattern._visible = false na caixa de texto Expressão. Você pode digitar o caminho diretamente na caixa de texto Expressão ou usar a caixa de diálogo Inserir caminh o de destino caixa para selecionar o clipe de filme padrão. Se v ocê usar o Insert Target Path caixa de diálogo, selecione Dots e Absoluto. Nota: Ao inserir parâmetros e propriedades no modo normal, você vai perceber as referências de código-tooltips que aparecem sugerindo a sintaxe completa para uma ação, você po de clicar em uma dica de código para entrar na sintaxe. Para obt er mais informações sobre dicas de código, inclui a ativação ea desativ ação los, consulte "Usando referências de código" em Ajuda> U sando o Flash.

68

8 Selecione a segunda linha vazia e coloque o ponto de inserção na caixa de texto Expressão.

9 Tipo _root.edges._visible =! na caixa de texto Expressão. Ignorar a mensagem de erro de sintaxe que aparece. O ponto de exclamação (!) É um operador lógico NOT. Além de simplesmente digitando-a na Expressões caixa de texto, você pode adicioná-lo à caixa de texto da caixa de ferramentas Ações, escolhendo Operadores> Operadores lógicos e duplo clique sobre o ponto de exclamação. Entre 10 _root.edges._visible novamente na caixa de texto Expressão após o operador. Seu código deve ser semelhante a este: on (release) ( _root.pattern._visible = false; _root.edges._visible =! _root.edges._visible; ) A primeira linha de código dentro do manipulador de eventos define a visibilidade do clipe de filme padrão para falsa. A segunda linha de código define a visibilid ade do clipe de filme bordas para o oposto do o que é atualmente. Isso cria uma alternância que m ostra ou esconde o clipe de filme. 11 Escolha Arquivo> Salvar como e digite um novo no me. Use um esquema de nomeação consecutivo para poder reverter para versões anteriores do arquivo, se nec essário.

Controlar o fluxo do filme Sem ActionScript, um filme de execuções do Quadro 1 até o último quadro e é repetido do Frame 1 ou pára. Você pode usar o ActionScript para controlar a progressão de um filme com mais precisão; Você também pode usá-lo para dar o controle do usuá rio. Por exemplo, você poderia colocar uma ação no Quadro 5 que pára o filme até que um usuário pressiona o bot ão Play. Este é um exemplo simples de controlar a fluxo de um filme.

69

Você pode usar o if, else e else if acções (também chamadas de comandos) para criar um mais complexo fluxo filme chamado lógica. Estas três acções reali zar as seguintes tarefas: • A ação permite que se verifique uma condição Flas h no filme e executar determinadas ações que se condição é verda deira. • A declaração mais o Flash a executar um conjunto diferente de ações se a condição if for falsa. • A outra instrução if permite verificar Flash para outra condição antes de executar um diferente conjunto de ações. Escreva uma instrução condicional Você já usou um operador para mostrar e ocultar um clipe de filme. Agora você vai usar uma declaração if para criar uma lógica que mostra e esconde o pedaço de c lipe de filme números. Por uma questão de educação, este exemplo usa um elemento do ActionScript diferentes para atingir o mesmo resultado. 1 Se necessário, selecione Arquivo> Abrir e escolha a versão salva do arquivo que você salvou. Nota : Você também pode navegar até a pasta do aplicativ o Flash MX e abrir Tutorials / ActionScript / Finished / puzzle5.fla. Se você usar o arquivo puzzle5.fla, sa lve o arquivo com um novo nome na sua pasta for usado para manter uma versão adulterada do arquivo original. 2 No Palco, clique no botão Mostrar / Ocultar Piece botão matriz número. Se o painel Ações não é aberto, escolha Janela> Ações. Na caixa de ferramen tas Ações, escolha Ações> Condições / Categoria Loops. 3 Clique duas vezes a ação se. O seguinte código ap arece no painel Ações: on (release) ( Se definido (<not yet>) ( ) ) 4 Com a linha de código que se contém a ação seleci onada, dê um duplo clique na ação a mais no Caixa de ferramentas Ações. O código é semelhante ao seguinte: on (release) ( Se definido (<not yet>) ( ) Else ( ) ) 5 Selecione a linha 3, que começa com o caso, e com o ponto de inserção na caixa de texto Condição, clique no botão Inserir. Selecione o clipe de filme piecenumbers, Pontos e Absoluto e clique em OK. O código a seguir aparece na caixa de texto Condição: _root.piecenumbers 6 Com o ponto de inserção na caixa de texto Condiçã o, digite. _visible Após _root.piecenumbers. De 7 a categoria Ações> Ações diversas da caixa de ferramentas Ações, clique duas vezes no avaliar a ação de adicionar uma linha de código vaz ia.

70

8 Digite _root.piecenumbers._visible = false na caixa de texto Expressão. Você pode usar o botão Inserir ou digitar o código manualmente. O código agora parece o seguinte: on (release) ( if (_root.piecenumbers._visible) ( _root.piecenumbers._visible = false; ) Else ( ) ) Quando o filme, o Flash avalia a expressão dentro d os parênteses condição. A expressão deve ser igual a um dos valores boolean os: verdadeiro ou falso. Este exemplo usa a condição da ação para se verificar se o clipe de fi lme piecenumbers é visível no palco. Se a propriedade _visible é verdade, o ActionScript executa o código dentro das chaves e define a propriedade como false , que esconde o clipe de filme no Palco. 9 No painel Script, selecione a linha de código com a ação de outra pessoa e clique duplo a avaliar ação. 10 Digite _root.piecenumbers._visible = true na cai xa de texto Expressão. O código ActionScript final fica assim: on (release) ( if (_root.piecenumbers._visible) ( _root.piecenumbers._visible = false; ) Else ( _root.piecenumbers._visible = true; ) ) 11 Escolha Arquivo> Salvar como e digite um novo no me. Use um esquema de nomeação consecutivo para poder reverter para versões anteriores do arquivo, se nec essário. Criando comandos e reutilizando códigos ActionScript tem ações que permitem controlar um fi lme de formas específicas. Por exemplo, o jogo ação se move a reprodução avançar na linha do tempo , e as cargas ação loadMovie outro Filme do Flash no Flash Player. Cada uma dessas açõ es instrui o Flash para executar uma determinada tarefa. Você pode querer criar seus próprios comandos em se us filmes. Por exemplo, em puzzle.fla, você precisa um comando para embaralhar as peças do puzzle. Para descobrir como escrever tal comando com ActionScript, você deve determinar cada passo neces sário para embaralhar as peças do puzzle e determinar quais os elementos do ActionScript podem ser usados para atingir esses objetivos. Primeiro, as peças devem ser espalhadas em uma dete rminada área no palco, cada um clipe de filme tem um _x e propriedade _y que você pode usar para definir a sua posição e uma propriedade _rotation que você pode usar para definir sua rotação. Para inserir e girar cada peça aleatoriamente, é preciso gerar um número aleatório para usar em uma expressão. O ActionScript tem um o bjeto embutido em Matemática com um método aleatório que você pode usar para esta finalidade.

71

Um comando em ActionScript é chamada de uma função. Uma função é um script que você pode usar uma e mais uma vez em um filme para executar uma determinada tarefa. Por exemplo, em puzzle.fla, cada vez que um usuário clica um botão Embaralhar peças, a função S cramble é executado, ou chamado. Esta função coloca o enigma peças em posições aleatórias no Palco. Em vez de reescrever o mesmo s cript em cada um dos dois Botões Pieces Scramble, a função é escrita , ou declarados, de uma vez chamado a partir de cada botão. Para examinar a função Scramble, selecione o quadro 1 na Linha de tempo principal e abra a Acções painel. Role para baixo no painel Script até ver a função Scramble. Você pode pensar em uma função como uma máquina que faz trabalho extra para você. A máquina pode produzir resultados diferentes dependendo do que você coloco u nele. Por exemplo, se você colocar as bananas no liquidificad or, obterá um purê de banana, não purê de pêssegos. Os elementos que você passar para uma função para trabalhar são chamados parâmetros ou argumentos. Os parâmetros sã o passados dentro dos parênteses que seguem o função. Por exemplo, a função RotateDisplayOrDrag ( whichPiece) é passado o nome de uma parte do enigma, e opera apenas naquele pedaço. Os parâmetros permitem reutilizar funções em várias situações diferentes. As funções são geralmente declaradas no primeiro fo tograma de um filme. Nos arquivos puzzle.fla, as funções são declaradas no Quadro 1. Escreva uma função Agora você declarar uma função que vai rodar, da te la ou arrastar cada peça do quebra quando o usuário clica nele. 1 Se necessário, selecione Arquivo> Abrir e escolha a versão salva do arquivo que você salvou. Nota: Você também pode navegar até a pasta do aplic ativo Flash MX e abrir Tutorials / ActionScript / Finished / puzzle6.fla. Se você usar o arquivo puzzle6.fla, sa lve o arquivo com um novo nome na sua pasta for usado para manter uma versão adulterada do arquivo original. 2 Selecione o primeiro quadro da camada Ações e abr a o painel Ações se ele ainda não estiver aberto. 3 Role para baixo no painel Script e selecione a li nha 31. Comentou o seguinte linha deve ser destaque: / / ENTER RotateDisplayOrDrag () função aqui 4 De Ações> User Defined categoria Funções na caixa de ferramentas Ações, clique duas vezes no ação da função. Tipo RotateDisplayOrDrag na caixa de texto Nome. Wh ichPiece Digite o texto Parâmetros caixa. O código da linha 32 agora se parece com est a: função RotateDisplayOrDrag (whichPiece) ( ) O parâmetro whichPiece, que identifica a parte do e nigma selecionados, serão chamados três vezes no corpo da função. Quando a função é chamada , o parâmetro passado é substituídos por whichPiece em cada declaração. 5 de Ações> Condições / Loops categoria na caixa de ferramentas Ações, clique duas vezes no caso acção, a outra se a ação, ea ação de outra pessoa. Nota: Você também pode selecionar as ações a partir do sinal (+) menu pop-up

72

O código fica assim: função RotateDisplayOrDrag (whichPiece) ( Se definido (<not yet>) ( ) Else if set (<not yet>) ( ) Else ( ) ) Este código cria a estrutura lógica da função. Você irá preencher as condições a serem verificadas em cada declaração if. Você também vai preencher o código dentro de cada conjunto de chaves que é exec utado quando as condições são verdadeiras. 6 Selecione a linha de comando if de código. Digite Key.isDown (18) na caixa de texto Condition. Key é um objeto interno do ActionScript, que você t ambém pode encontrar na categoria Objetos> Filme> chave> Categoria Methods. Key permite determinar o que um usuário tecla pressionada no teclado. O Número 18 é a representação numérica do Alt (Window s) e Option (Macintosh) chaves. Esta linha de código verifica s e um usuário pressionou essas teclas. Para saber mais sobre incorporado objetos, consulte "Usar um objeto embutido" na página 73. De 7 a categoria Ações> Ações diversas da caixa de ferramentas Ações, clique duas vezes no avaliação da acção de introduzir uma nova linha de código. Digite _root [whichPiece]. _rotation + = 90 no Expressão caixa de texto, sem espaço entre as tecla s + e =. Esta linha de código gira a peça selecionada 90 °, se o usuário pressiona a tecla Alt (Windows) ou Option (Macintosh chave). Os colchetes permitem recuperar dinamicamente o valor de um nome de instância. Para mais informações, consulte "Dot e operadores de ace sso à matriz" em Ajuda> Usando o Flash. 8 Selecione a outra se a linha de código. Digite Ke y.isDown (Key.SHIFT) na caixa de texto Condição. Esta linha de código verifica se um usuário pressio nou a tecla Shift. 9 Na categoria Ações> Ações diversas da caixa de fe rramentas Ações, clique duas vezes no avaliação da acção de introduzir uma nova linha de código. Tipo pieceNumber = whichPiece.slice (5) no Caixa de texto Expressão. Esta linha de código exibe o número da peça na caix a de texto no palco, quando um usuário pressiona o Tecla Shift. O método fatia do objeto String remove um número especificado de caracteres (em Neste caso, 5) de exemplo, o número da peça, de mod o que apenas o número da peça exibida. Em efeito, o método "corta" os primeiros cinco caracte res e atribui o número resultante para o pieceNumber variável, que por sua vez é atribuído a o campo de texto no Palco. 10 Selecione a linha de código else. Na Actions> Mo vie Clip Control na categoria Ações caixa de ferramentas, dê um duplo clique na ação st artDrag. 11 Digite _root [whichPiece] na caixa de texto Dest ino e clique em Expressão.

73

12 Selecione Restringir ao retângulo. Tipo 20 em L (esquerda) e S (superior) caixas de texto. No R (di reita) e B (inferior) caixas de texto, tipo 780 e 580, respectivamente. A palavra falso no script indica que lockCenter (qu e indica que a parte do enigma sempre encaixada no centro do ponteiro do mouse qua ndo clicado) não é especificado. O números 20, 20, 780 e 580 especificam a esquerda, s uperior, direita e inferior coordenadas do texto caixa no palco. Quando um usuário clica em um item, a seguinte funç ão que você escreveu é chamado. A função usa o Objeto Key para determinar se as teclas Shift, Alt ou Option é pressionado quando um pedaço é clicado. Se o Tecla Shift pressionada enquanto uma peça é clicado , uma caixa de texto dinâmica exibe o número da peça do p uzzle; Se a chave é pressionada a tecla Alt (Windows) ou O ption (Mac), a parte do enigma gira 90 °. Se Shift, Alt o u Teclas de opção não está pressionado, o usuário pod e arrastar a peça. Seu código deve ser semelhante a e ste: função 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); ) ) Nota: Como você completar o tutorial, lembre-se de salvar seu trabalho freqüentemente. Chamar uma função Funções podem ser chamadas de qualquer quadro em um filme onde você precisa de uma tarefa concluída. Você dev e utilizar um caminho de destino para chamar uma funç ão, assim como você deve usar um caminho para acessar u ma variável ou um clipe de filme. Todas as funções no filme puzzle.fla são declarados no primeiro quadro da camada Ações, no Timeline principal, para o caminho absoluto para ca da um começa com _root. Agora você vai chamar a função que embaralha as peç as do quebra-cabeça no palco. 1 Na Linha de tempo, ocultar a caixa de diálogo Ini ciar Scramble e camadas de diálogo, se não estiver escon dido. Selecione a camada Congrats diálogo.

74

2 No Palco, clique duas vezes na caixa de diálogo P arabéns símbolo. DialogParabéns símbolo 3 No Palco, selecione o botão OK. Se o painel Ações não estiver aberto, escolha Janela> Ações. 4 Em Ações> categoria definida pelo usuário Funções da caixa de ferramentas Ações, clique duas vezes no ação chamada de função. 5 Com o ponto de inserção na caixa de texto Objeto do painel Ações, clique em Inserir o alvo Botão Path. Verificar Pontos e Absoluto são selecio nados. Selecione _root e clique em OK. 6 Tipo Scramble na caixa de texto Método. A função Scramble não requer quaisquer parâmetros, você pode deixar o texto Parâmetros caixa vazia. O código agora é assim: on (release) ( _root.Scramble (); ) Este é o ActionScript que chama a função. Você tamb ém precisa adicionar algumas linhas adicionais de código que pertençam ao on (release) do manipulador . Você vai fazer isso nas próximas etapas. Com a _root.Scramble ... linha de código selecionad o no painel Script, clique duas vezes em avaliar da categoria Ações> Ações diversas da caixa de ferr amentas Ações. Tipo _root.scramblebutton._visible = true na caixa de te xto Expressão. 7 Clique duas vezes na ação evaluate novamente, par a adicionar outra linha em branco. Tipo _root.dialog = false na caixa de texto Expressão.

75

8 De categoria a Ações> Ações diversas da caixa de ferramentas Ações, clique duas vezes no avaliação da acção. 9 De categoria em Propriedades na caixa de ferramen tas Ações, clique duas vezes _visible. Com a ponto de inserção após _visible, tipo = 0 na caixa de texto Expressão. Este código especifica que a caixa de diálogo não é visível após o usuário clicar no botão OK. O código final aparece como segue: on (release) ( _root.Scramble (); _root.scramblebutton._visible = true; _root.dialog = false; _visible = 0 ) 10 Fazer um dos seguintes para voltar à Timeline pr incipal: • Escolha Editar> Editar documento. • Clique no botão Voltar. • Clique em Cena 1. 11 Escolha Arquivo> Salvar como e digite um novo no me. Use um esquema de nomeação consecutivo para poder reverter para versões anteriores do arquivo, se necessário. Nota: Como você completar o tutorial, lembre-se de salvar seu trabalho freqüentemente. Use um objeto interno O ActionScript tem variáveis que permitem armazenar informações, tem funções que permitem que você crie especiais comandos e reutilizando códigos, tem ações que perm item controlar o fluxo de um filme, e ele tem filme clip s com propriedades que você pode mudar. ActionScript também tem um outro tipo de elemento c hamado um objeto interno. Objetos fornecem uma maneira de agr upamento de informações para que você possa usá-lo em um script . Os objetos podem ter propriedades, métodos (que são como funçõ es) e constantes (por exemplo, o valor numérico de Pi). Na função RotateDisplayOrDrag que você criou na "Cr iar comandos e reutilizando códigos" Na página 68, você usou o o bjeto chave para determinar o último usuário uma tecla pression ada no teclado. O Objeto da peça é construída em ActionScr ipt para permitir o acesso a informações sobre o teclado. Outro objeto do ActionScript é o MovieClip. O objet o MovieClip é uma coleção de métodos que você pode usar para mani pular os clipes de filme, que são os mais fundamentais e pod erosas elementos do Flash. Para saber mais sobre as partic ularidades do objeto MovieClip e usar clips de vídeo, consulte "T rabalhando com clipes de filme e botões" em Ajuda> Usando o Fl ash. Agora você irá utilizar o método onPress do objeto MovieClip para verificar se o mouse ponteiro está tocando uma peça do puzzle. 1 Se necessário, selecione Arquivo> Abrir e escolha a versão salva do arquivo que você salvou. Nota: Você também pode navegar até a pasta do aplic ativo Flash MX e abrir Tutorials / ActionScript / Finished / puzzle7.fla. Se você usar o puzzle7.fla arquivo, sa lve o arquivo com um novo nome na pasta for usado para manter um versão adulterada do arquivo original.

76

2 ações Piece é um clipe de filme aninhado dentro d e cada instância de uma parte do enigma. Para selecionar o Piece ações de clipe de filme a partir da hierarquia do p ainel Biblioteca, clique no botão Editar símbolos no cant o inferior canto direito da Timeline e escolha Misc> Piece.

O clipe de filme ações abre em modo de edição de sí mbolo. 3 Nas ações Piece Timeline, selecione o quadro 1 da camada Ações.

4 Se o painel Ações não estiver aberto, escolha Jan ela> Ações. No painel Script, selecione linha 3 com a seguinte linha de código: / / INSERIR o código aqui 5 Na Objects> Movie> MovieClip> Eventos da caixa de ferramentas Ações, clique duas vezes no ação onPress. O método onPress é um tipo especial de ação chamada um manipulador de eventos, ou simplesmente um evento. Um evento permite que você escreva uma função que é ex ecutado quando um determinado evento ocorrer. Tipos de even tos incluir, quando o botão do mouse é pressionado, qua ndo o indicador de reprodução entra em um frame, e quando um clipe de filme carrega. Neste processo, o código dentro das chaves que segu em onPress é executado quando um usuário pressiona o botão do mouse no filme.

77

6 _parent Type na caixa de texto Objeto. Como as ações Piece está aninhado dentro do clipe d e filme, _parent especifica que deve onPress executar código em um n ível acima, no mesmo nível que a parte do enigma. Em 7 de Ações> Condições / categoria Loops da caixa de ferramentas Ações, clique duas vezes na ação se. 8 Tipo _root.dialog! Na caixa de texto Condition. O código aparece da seguinte forma: _parent.onPress = function () ( if (_root.dialog!) ( ( ); O código que você adicionou nesta etapa testa se o valor da caixa de diálogo é variável chamada true (visível) ou fal so (não visível). Se o valor for verdadeiro, então o próxim o script para rodar e arraste a parte do enigma não será executad o. Se o valor da variável é falso, então o script a seguir correr. O s usuários não podem rodar ou arrastar um item, ou exibir o número da peça, se a caixa de diálogo é exibido. 9 Na caixa de ferramentas Ações, clique duas vezes na ação evaluate em Ações> Diversos Categoria Ações para adicioná-lo dentro das chaves da declaração if. 10 _root.RotateDisplayOrDrag Tipo (_parent._name) n a caixa Expressão. _name é a propriedade para o nome da instância de p arte do enigma que o usuário clica. O código final fica assim: _parent.onPress = function () ( if (_root.dialog!) ( _root.RotateDisplayOrDrag (_parent._name); ) ); 11 Fazer um dos seguintes para voltar à Timeline pr incipal: • Escolha Editar> Editar documento. • Clique no botão Voltar. • Clique em Cena 1. 12 Escolha Arquivo> Salvar como e digite um novo no me. Use um esquema de nomeação consecutivo para poder reverter para versões anteriores do arquivo, se nec essário. Testar o filme "Teste rápido e teste sempre" é um mantra para os d esenvolvedores web. Quanto mais cedo você testar seu filme, o que é mais fácil determinar a causa de resultados i nesperados. É uma boa idéia para salvar múltiplas versões de seu arquivo usando nomes seqüenciais, por exemplo, mypuzzle1.fla, mypu zzle2.fla, e assim por diante, como você tem feito neste tutoria l. Desta forma, o maior arquivo numerado sempre é o mais novo e é f ácil de reverter para uma versão anterior. Como você aprendeu na Introdução ao Flash MX, a fer ramenta de autoria Flash inclui um versão do Flash Player, que permite a você testar seu filme em qualquer ponto durante a criaçã o por escolhendo Control> Test Movie. Esta versão do Flas h Player tem vários comandos e instrumentos para ajudar a soluci onar o seu filme. A razão mais comum para resultados inesperad os em um filme do Flash é um caminho incorreto para um função de v ariáveis, objeto ou clipe de filme. Isso pode causar uma variável pa ra conter o valor incorreto, evitar uma função de ser chamada, ou impedir um cli pe de filme de jogar corretamente.

78

A ação trace permite escrever notas e expressões em seus scripts, cujos resultados são enviados para uma janela chamada de janela de saída. Agora você adicionará uma ação trace para testar se a função foi chamada com êxito. Nota: O Flash também inclui um depurador, que permi te examinar os valores das variáveis globais e locais, incluindo quando a mudança como o filme. Além disso, com o de purador você pode usar pontos de interrupção para parar o f ilme e testar o ActionScript linha por linha. Para obter mais informações, consulte "Usando o Depurador" em Ajuda > Usando o Flash. 1 Escolha Arquivo> Abrir e escolha a versão salva d o arquivo que você salvou. Nota: Você também pode navegar até a pasta do aplic ativo Flash MX e abrir Tutorials / ActionScript / Finishe d / puzzle8.fla. Se você usar o arquivo puzzle8.fla, sa lve o arquivo com um novo nome na sua pasta for usado par a manter uma versão adulterada do arquivo original. Quando o usuário clica no botão OK no filme SWF, as peças do quebra-cabeça deve. Você pode usar uma ação trace para testar se a funç ão Scramble está sendo chamado. 2 Na camada Ações na Timeline, selecione o quadro 1 e abra o painel Ações. 3 No painel Script, escolha e selecione a linha 18, a linha comentada que diz / / enter trace ação aqui. 4 Na caixa de ferramentas Ações, clique duas vezes na ação trace de Ações> Diversos Categoria Ações. 5 Digite função Scramble foi chamado na caixa de te xto Mensagem. Você está colocando esta mensagem na função Scrambl e. 6 Salve o documento e escolha Controlar> Testar fil me.

79

7 Clique no botão OK no filme SWF. A janela de saída aparece, que traça os eventos em seu filme. Ampliar a janela, como necessário, para ler as mensagens. A mensagem de função Scramble foi chamada aparece n a janela de saída.

Se a mensagem não aparecer,

seu próximo passo seria determinar o motivo. O mais razão provável é que você especificou um caminho incorret o para a função. 8 Feche a janela de saída eo arquivo SWF e retornar ao modo de criação. 9 Escolha Arquivo> Salvar como e digite um novo nom e. Use um esquema de nomeação consecutivo para poder reverter para versões anteriores do arquivo, se nec essário. Você fez um grande progresso no aprendizado do ActionScr ipt!

Os próximos passos Ao concluir o tutorial, você realizou um grande em um período relativamente curto de tempo. Você aprendeu a usar o ActionScript para criar pont o de partida um filme do Flash, como criar comandos e reutilizan do códigos para fazer retornar ações, e como controlar com pre cisão o fluxo do filme. ActionScript Usando variáveis e expressões, você sabe como manter o controle da atividade do usuário em s eu filme e como exibir alterar o conteúdo para seus usuários. Finalmente, você aprendeu a Teste seu filme. Para continuar a aprender sobre o ActionScript, con sulte o Dicionário ActionScript on-line na Ajuda menu e artigos no Flash Support Center. A partir da pasta de exemplos dentro do seu Flash MX pasta do aplicativo, você também pode abrir uma ver são avançada do filme puzzle.fla e desconstruir o ActionScript que foi usado para criar um timer e parte do enigma animado.

80

CAPÍTULO 3 Introdução de Componentes Tutorial Você pode usar componentes Macromedia Flash UI de f orma rápida e facilmente adicionar interface de utilizad or simples elementos no seu documento do Flash. Este tutorial se destina a criar componentes para u suários iniciantes e intermediários do Flash e mostrar como elas podem ser usadas para criar facil mente uma aplicação simples. Antes de tomar este tutorial , você deve concluir a Introdução ao Flash MX e Introdução à ActionScript Tutorial, que pode ser acessado selecionando Ajuda> Tutoriais. Depois de concluir este tutorial, você vai saber co mo fazer as seguintes tarefas: • Adicionar componentes a um documento do Flash • configurar os componentes • Adicionar ActionScript para fazer o trabalho de componentes Tipos de componentes O Flash MX contém os seguintes componentes:

Nome Ação

botão de rádio Representa o uma única escolha em um grupo de opções mutuamente exclusivas caixa de verificação Representa um de escolh a única Aperte o botão Executa um comando quan do o usuário clicar nele ou pressionar Enter ou Return Caixa de combinação exibe uma lista de opçõ es Caixa de listagem exibe uma lista de opçõ es Painel de rolagem Fornece um painel da ja nela de rolagem para exibir clipes de filme Texto da barra de rolagem Adiciona uma barra de r olagem para um campo de texto

81

Como você pode usar componentes Aqui estão algumas maneiras que você pode usar comp onentes: Web Design formar um formulário que pede o endereço de um usuário, telefone, endereço de e-mail, e outros informações pessoais, em seguida, valida os dados antes de enviá-lo para um servidor. Construa o seu carro Criar um formulário Web que pe rmite aos usuários para um carro, selecionando vários gráfico s opções em vez de digitar as informações. Os campos são gerados a partir da gráfica interações. Construir um levantamento de vários questão, a pesq uisa parte de vários que instantaneamente e confira os resultados gráficos os dados resultantes da pesquisa. Álbum de fotos Crie um álbum de fotos pessoais que tem um repertório de imagens e miniaturas e envolve-los co m a interface em Flash e elementos de navegação. Empréstimo Design c alculadora uma amortização calculadora online que calcula os pagam entos de empréstimos. Web-apresentação com modelo Criar um modelo para o slide-se apresentações com simples, prebuilt elementos de navegação e um layout de imag ens e texto. Visualizar o formulário preenchido Você pode navegar através de componentes em um form ulário fazendo o seguinte: • Clique no componente para selecioná-lo. • Pressione Tab para avançar, pressione Shift + Tab para mover para trás. • Use as setas do teclado para navegar pelos itens do menu. 1 Escolha File> Open e navegue até o diretório do p rograma Flash MX. Abra Tutorials / Componentes / Finished / sweepstakes.swf. Este é o filme completo. 2 Use as técnicas de navegação descrito acima para testar cada um dos botões e caixas no formulário. 3 sweepstakes.fla Agora abra. Escolha File> Open e navegue até o programa Flash MX diretório. Abra Tutorials / Compo nents / Finished / sweepstakes.swf. Este é o documento do Flash que gerou o filme. Dois quadros estão incluídas no cronograma. 4 página Examine 1. Ele contém a caixa de seleção, caixa de combinação e botões que são usados para recolher a informação. Tem também dois campos de entrada de texto para o nome do usuário e endereço de e-mail. 5 Examine a página 2. É a página de resultados e co ntém várias caixas de texto dinâmico para mostrar os resultados da informação recolhida na página 1. Para poupar tempo, já criamo s para você. Criar um formulário Neste tutorial, você irá usar componentes para cria r um simples formulário de página para entrar em um sorteio para ganhar um carro elétrico Stiletto grátis. A primeira página é utili zada para coletar as informações, eo segundo página é usada p ara mostrar os resultados. Você vai seguir estes três passos para completar o formulário: • Adicionar componentes ao formulário • configurar os componentes • Adicionar o ActionScript ao documento para fazer o trabalho de componentes Para começar, nós incluímos o fundo, os campos de texto e gráficos para o formulário. Você irá adicionar e configurar componentes e ActionScript para torná-lo uma forma interactiva.

82

Adicionar componentes O primeiro passo é adicionar os componentes para o Palco e colocá-los no formulário. Você irá adicionar um caixa de seleção, uma caixa de combinação e um botã o para a primeira página do formulário. Você também irá adic ionar um impulso botão para a segunda página. Para adicionar componentes a um documento, você pod e arrastar elementos do painel Componentes para Palco, ou clique duplo-los no painel Componentes pa ra colocá-los no centro do Palco. Depois que você adicionar um componente a um docume nto, ele aparece no painel Biblioteca do documento. É uma boa idéia para criar uma nova camada para os componentes. 1 Escolha File> Open e navegue até o diretório do p rograma Flash MX. Abra Tutorials / Componentes / my_sweepstakes / mysweepstakes.fla. 2 Escolha Arquivo> Salvar Como e salve o arquivo co m um novo nome, como novo_bolo. 3 Crie uma nova camada e nomeie-UI. Você vai coloca r os componentes nesta camada. 4 Clique no Quadro 6 na camada de interface do usuá rio do Timeline. Escolha Inserir> Blank Keyframe para adic ionar um espaço em branco Keyframe. Isso será usado para componentes na segun da página. 5 Certifique-se os seguintes painéis estão abertos: • painel Library (Window> Library) • painel Components (Window> Components) • Inspetor de propriedades (Janela> Propriedades) Adicionar uma caixa de seleção Use o componente CheckBox para criar uma caixa com um valor de verdadeiro ou falso. 1 Selecione Quadro 1 na camada de interface do usuá rio. 2 Arraste o componente CheckBox do painel Component es para o Palco. Coloque-o sob o parágrafo que pergunta se o usuário quer entrar no sorteio.

O componente será exibido na pasta Componentes de i nterface do Flash no painel Biblioteca.

83

Adicionar uma caixa de combinação Use o componente ComboBox para criar uma simples dr op-down menu de itens que podem ser selecionados por usuários. Você também pode usar uma caixa de combin ação para construir um drop-down mais complexo do menu, que automaticamente rola para um item de menu começando com a letra ou letras digitadas no campo de texto pelo usuário. • Arraste o componente ComboBox do painel Component es para o Palco. Coloque-o sob "Escolha sua cor favorita".

O componente será exibido na pasta Componentes de i nterface do Flash no painel Biblioteca. Adicionar botões Use o componente PushButton criar dois botões. Um b otão estará na primeira página e será usado para enviar as informações no formulár io. O botão seguinte será na segunda página e será usado para retornar à primeira página e preenchê-lo com os valores que foram anteriormente apresentadas. 1 Arraste o componente PushButton do painel Compone ntes para o Palco. Coloque-o no canto inferior direito do formulário para que seja alinhado horizontalmente com o nome e e-mail os campos de te xto. O componente será exibido na pasta Componentes de i nterface do Flash no painel Biblioteca.

Depois de arrastar um componente do painel Componen tes para o Palco, selecione instâncias adicionais de que a partir do painel Bib lioteca.

84

2 Vá para o quadro-chave em branco no Quadro 6. No painel Biblioteca, abra o Flash UI Components pasta e arrastar o componente PushButton do painel Biblioteca para o Palco. Coloque-o no canto inferior direito.

Configurar os componentes O próximo passo é configurar os componentes para qu e eles sejam criados com as informações corretas para um usuário selecionar. Você define os parâmetros para um componente usando a guia Parâmetros do Inspetor de propriedades ou o Componentes do painel Parâmetros. Os usuários avançados podem utilizar métodos de API e propriedades de cada componente para definir os parâmetros, tamanho, aparência e outras propriedades do compone nte. Os métodos e propriedades disponíveis para cada elemento componente estão listados no Dic ionário do ActionScript com o nome do componente. Configure a caixa de seleção 1 Selecione Quadro 1 na camada de interface do usuá rio, selecione o componente CheckBox no Palco. Sua parâmetros são exibidos no Inspetor de propriedades .

2 sweepstakes_box Type na caixa de texto Nome da Instância. 3 Tipo Absolutamente! na caixa de texto Rótulo. 4 No parâmetro Initial Value pop-up menu, selecione Verdadeiro. Isto especifica se o estado inicial do componente CheckBox está selecionado (True) ou n ão (False). 5 No parâmetro Label Placement pop-up menu, deixe o valor padrão definido para alinhamento à direita. O rótulo será exibido à direita da caixa de seleção .

85

6 Não altere o parâmetro Change Handler. O parâmetro Change Handler é a função que você dese ja executar quando o usuário seleciona um item. Esta função deve ser definida na mesma Lin ha de tempo como a instância do componente. Este parâmetro é opcional e precisa ser especificado som ente se você quer uma ação para ter lugar logo como o usuário acessa um componente. Quando terminar, o Inspetor de propriedades deve te r o seguinte aspecto:

Para obter mais informações sobre como usar os méto dos API do componente FCheckBox para definir opções adicionais para o componente, consulte o FCh eckBox componente () entrada na linha Dicionário do ActionScript na Ajuda do Flash. Configure a caixa de combinação 1 Selecione o componente ComboBox no Palco. Seus pa râmetros são exibidos na Inspetor de propriedades.

2 color_box Type na caixa de texto Nome da Instânci a. 3 Certifique-se o parâmetro editável é definida par a Falso. Isso impede que os usuários digitem seu próprio tex to. Introdução de Componentes Tutorial 85

86

4 O parâmetro Labels exibe uma lista de valores que os usuários podem selecionar. Clique no campo Etiqueta s, clique em a lupa para abrir o pop-up Valores janela. Clique n o botão Mais (+) para inserir um novo valor.

5 Clique no campo do valor padrão, em seguida, tipo relâmpago para o primeiro valor. 6 Clique no botão Mais (+) para inserir o próximo v alor. Clique no campo de valor padrão, digite Cobalto para o próximo valor. 7 Da mesma forma, adicionar à lista de esmeralda. Quando estiver concluído, o pop-up Valores janela d eve se parecer com o seguinte:

8 Clique em OK para fechar a janela pop-up Valores janela. O parâmetro de dados é opcional. Ele é usado para especificar os valores associados com os itens (etiquetas) na caixa de lista. Não há necessidade d e fazer isso neste tutorial.

87

9 Row The Count parâmetro especifica quantas linhas serão exibidas na janela. Uma vez que não São três opções, altere o valor para 3. Não há necessidade de introduzir um nome de parâmet ro Change Handler. Quando estiver concluído, o Inspetor de propriedade s deve ter o seguinte aspecto:

Para obter mais informações sobre como usar os méto dos API para alterar as propriedades adicionais, consulte o FComboBox (componente) entrada no dicionário online do ActionScript na Ajuda do Flash. Configure os botões 1 Selecione o componente PushButton no Quadro 1. Os parâmetros do componente são exibidos no Inspeto r de propriedades.

2 submit_btn Digite o inspector Instância proprieda de caixa de texto Nome. 3 Tipo Enviar na caixa de texto Propriedade inspec tor Label. Este texto é exibido no corpo do botão. 4 onClick Digite o nome do Click Handler. Mais tard e você vai escrever o ActionScript para definir o que o Clique manipulador deve fazer. Quando estiver concluído, o Inspetor de propriedade s deve ter o seguinte aspecto:

5 Selecione o componente PushButton no Quadro 6. 6 return_btn Digite o inspector Instância proprieda de caixa de texto Nome. 7 Tipo de retorno na caixa de texto Propriedade ins pector Label. 8 onClick Digite o nome do Click Handler.

88

Para obter mais informações sobre como usar os méto dos API do componente FPushButton para mudar propriedades adic ionais, consulte o FPushButton componente () na entrada do ActionScript on-line Dicionário na Ajuda do Flash. Escrevendo o ActionScript para coletar os dados Parte do ActionScript será para todo o filme, enqua nto alguns vão estar relacionadas a um determinado moldura. A tabela a seguir irá ajudá-lo a par de no mes de instância. Nome da Instância Descrição color_box caixa de combinação de cores na página 1 sweepstake_BOX Sorteios na página 1 submit_btn botão Enviar na página 1 Name da caixa de texto de entrada para o nome da página 1 email caixa de texto de entrada pa ra o endereço de e-mail na página 1 return_btn botão Voltar na página 2 name_result Dynamic caixa de texto na pá gina 2 para exibir o nome do usuário email_result Dynamic caixa de texto na pá gina 2 para exibir o usuário de e-mail. color_result Dynamic caixa de texto na pá gina 2 para exibir a seleção do usuário da cor sweepstakes_text caixa de texto dinâmico na p ágina 2 que exibe o texto diferente se o usuário tiver opta do ou não escolhido para entrar no sorteio Escrevendo o ActionScript para todo o filme ActionScript para componentes é colocado em quadros -chave. O Click manipulador de parâmetro especifica o que acontece quando o componente PushButton está ativad o. O valor padrão é onClick, que significa que quando o usuário clica em um dos botõ es, ele é ativado. Vamos começar por criar uma função para onClick. Esta será uma ramificação da função que irá determinar se o primeiro foi o botão pressionado Submeter ou o botão Voltar, em seguida, realizar ações nesse sentido. 1 Crie uma nova camada e nomeie Todas as ações. Iss o será usado para o ActionScript que deve ser executado durante todo o filme. 2 Se o painel Ações não estiver aberto, escolha Jan ela> Ações. 3 Mude o modo expert para pressionando Control + Sh ift + E (Windows) ou Command + Shift + E (Macintosh), ou clicando no controle no canto super ior direito (um triângulo com uma marca de seleção acima) e selecionando Expert Mode do menu pop-up.

89

4 Primeiro, insira a função de retorno para os botõ es. Esta é uma instrução condicional que ramos, dependendo de qual botão é clicado. Se o bot ão Enviar for clicado, ele será ramo para a função getResults e ir à página 2. Se o botão de retorno é clicado, ele irá para a página 1. Digite o seguinte código no painel Ações. / / Callback botão function onClick (btn) ( if (btn == submit_btn) ( getResults (); gotoAndStop ( "pg2"); ) Else if (btn == return_btn) ( gotoAndStop ( "pg1"); ) ) Nota: Embora não seja recomendável, se você não qui ser escrever o ActionScript, você pode copiar o texto d este tutorial e colá-lo no painel Ações. 5 Agora, escreva a função getResults. Isso obtém os resultados a partir da caixa de sorteios e a caixa de combinação de cores. Ela recebe os resul tados da caixa de combinação como um rótulo para que ele pos sa mostrar os resultados. / / Obter os resultados de pg 1 getResults function () ( sweepstakes_result = sweepstakes_box.getValue (); color_result = color_box.getSelectedItem () label.; selectedItem = color_box.getSelectedIndex (); ) 6 Em seguida, escreva a função initValues. Isto ini cializa os valores na página 1 com os valores da usuário tenha selecionado anteriormente. Ele é exec utado quando o usuário clica no botão Voltar. / / Inicializar os valores de pg 1 com os valores q ue o usuário tenha previamente seleccionados initValues function () ( sweepstakes_result (sweepstakes_box.setValue); if (! iniciados) ( color_box.setSelectedIndex (0); started = true; ) Else ( selectedItem (color_box.setSelectedIndex); ) )

90

7 Finalmente, adicione uma chamada para o initValue s função para o início do ActionScript. Quando você terminar, o A ctionScript deve olhar como este: initValues (); / / Callback botão function onClick (btn) ( if (btn == submit_btn) ( getResults (); gotoAndStop ( "pg2"); ) Else if (btn == return_btn) ( gotoAndStop ( "pg1"); ) ) / / Inicializar os valores de pg 1 com os valores q ue o usuário tenha previamente seleccionados initValues function () ( sweepstakes_result (sweepstakes_box.setValue); if (! iniciados) ( color_box.setSelectedIndex (0); started = true; ) Else ( selectedItem (color_box.setSelectedIndex); ) ) / / Obter os resultados de pg 1 getResults function () ( sweepstakes_result = sweepstakes_box.getValue (); color_result = color_box.getSelectedItem () label.; selectedItem = color_box.getSelectedIndex (); ) Você completou o script que precisa ser executado p ara todo o filme. No entanto, você ainda precisa de adicionar um script para os quadros na página 1 e página 2. Adicionar ActionScript para cada quadro-chave Parte do ActionScript precisa ser executado somente quando um usuário seleciona um quadro específico. Em Para faz er o trabalho do ActionScript, é necessário o nome de cada quadro -chave. 1 Crie uma nova camada e nomeie-Frame Ações. Seleci one Quadro 1, em seguida, escolha Inserir> Blank Keyframe para in serir um quadro-chave. Use o Inspetor de propriedades para o nome do quadro-pg1. No mesma forma, inserir um quadro-chave no Quadro 6 e nomeá-la pg2.

2 Selecione o quadro-chave no Quadro 1 da camada Aç ões quadro e escreva o seguinte ActionScript para parar o filme no (pg1) Frame 1: stop ();

91

3 (Opcional) Se quiser exibir determinado texto, se o usuário tiver selecionado a caixa de seleção sortei os e outro texto, se o usuário não tiver, você pode escr ever uma instrução condicional com o texto que vai no campo de texto dinâmico sweepstakes_text na página 2. Selecione o quadro-chave no chamado pg2 Frame da camada ações e insira o seguinte no painel Ações: / / Texto sorteios if (sweepstakes_result == true) ( sweepstakes_text = "Você foi inscrito no Stiletto F antasy sorteios. Os vencedores são anunciados no final de cada mês. " ) Else ( sweepstakes_text = "Você não foi inscrito no Stilet to Fantasy sorteios. " ) Nota: Não copie e cole este ActionScript no painel Ações. Ele não funcionará corretamente, pois existem quebras de li nha entre a primeira ea segunda linha de texto.

Teste seu filme Para ver o que a aparência dos componentes, execute o seu filme no Flash Player 6. 1 Selecione Control> Test Movie. O filme é executado no Flash Player. 2 Seleccione e desmarque a caixa verifique se ele funciona. 3 Selecione uma cor e certifique-se que aparece na página 2. 4 Quando terminar, selecione Arquivo> Fechar para f echar o filme no leitor. 5 Se você percebeu algum erro, use a ferramenta de seta para seleccionar o componente, em seguida, fazer a correcções no Inspetor de propriedades. Se necessár io, o filme reteste. Os próximos passos Este tutorial apresentou os passos básicos para a c riação de um grupo simples de componentes e, em seguida, exibindo os resultados. Para obter mais informações , consulte Usando o Flash eo Dicionário do ActionScri pt, ambos encontrados no menu Ajuda.