Sei sulla pagina 1di 91

Manufotos Photographer Apresenta:

Mais uma tradução do ingles para o portugues com sucesso


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

1
Tutoriais Flash MX
Marcas
Afterburner, AppletAce, atingir, Attain Enterprise Learning
System, Attain Essentials, Attain Objects para
Dreamweaver,
Authorware, Authorware atingir, Authorware Interactive
Studio, Authorware Star, Authorware Synergy, Backstage,
Backstage
Designer, Backstage Desktop Studio, Backstage Enterprise
Studio, Backstage Internet Studio, Design in Motion,
Director,
Director Multimedia Studio, Doc Around the Clock,
Dreamweaver, Attain Dreamweaver, Drumbeat, Drumbeat 2000,
Extreme
3D, Fireworks, Flash, Fontographer, FreeHand, FreeHand
Graphics Studio, Generator, Generator Developer's Studio,
Generator
Dynamic Graphics Server, Knowledge Objects, Knowledge
Stream, Knowledge Track, Lingo, Live Effects, Macromedia,
Macromedia M Logo & Design, Macromedia Flash, Macromedia
Xres, Macromind, Macromind Action, MAGIC, Mediamaker,
Object Authoring, Power Applets, Priority Access, Roundtrip
HTML, JSP, SoundEdit, ShockRave, Shockmachine,
Shockwave, Shockwave Remote, Shockwave Internet Studio,
Showcase, Tools to Power Your Ideas, Universal Media,
Virtuoso,
Web Design 101, Whirlwind e Xtra são marcas comerciais da
Macromedia, Inc. e podem ser registradas nos Estados Unidos
ou em outros
jurisdições, inclusive internacionalmente. Outros nomes 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 entidades 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 tecnologia
licenciada da descompressão
Sorenson Media, Inc.
Este guia contém links para sites de terceiros na Web que
não estão sob o controle da Macromedia, ea Macromedia não
é
responsável pelo conteúdo de qualquer site vinculado. Se
você acessar um terceiro site mencionado neste guia, então
você faz por sua
conta e risco. Macromedia fornece esses links apenas como
uma conveniência, ea inclusão do link não implica que a
Macromedia
endossa ou aceita qualquer responsabilidade pelo conteúdo
desses sites de terceiros.
Apple Disclaimer

2
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 GARANTIA
LHE CONCEDE LEGAIS ESPECÍFICOS
DIREITOS. Poderá haver direitos OUTROS QUE VOCÊ PODE TER
QUE VARIAM DE ESTADO PARA ESTADO.
Copyright © 2002 Macromedia, Inc. Todos os direitos
reservados. Este manual não pode ser copiado, fotocopiado,
reproduzido,
traduzido ou convertido para qualquer máquina eletrônica ou
de forma legível, no todo ou em parte, sem prévia aprovaçã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 Nelson
Edição: Rosana Francescato, Lisa Stanziano, Anne Szabla
Design Multimédia e Produção: Aaron Begley, Benjamin
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 criar 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

3
Adicionar animação e navegação a botões. . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . 40
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

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

5
6
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ê aprenderá
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 compõ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 seções
mais tarde assumir que você já domina as competências
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 que 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 seguida,
selecione da lista.
6 Capítulo 1
Ver o filme completo
Você pode abrir uma versão completa do filme tutorial 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

7
1 Na pasta do aplicativo Flash MX, navegue até Tutorials /
FlashIntro e clique duplo
stiletto.swf para abrir o filme completo no stand-alone 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 efeitos 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 borda
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, feche o
navegador que abriu e voltar para o arquivo SWF.
6 Após a exibição do filme, clique na caixa o seu fim.
Analisar o arquivo stiletto.fla
É útil analisar o arquivo FLA completo para ver como o
autor criou o documento. Para
analisar o arquivo, você pode visualizar as propriedades 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 ambiente
de criação.

8
Arraste a barra que separa o
Fase da Linha 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ê visualize as
especificações dos objetos selecionados. As especificações
dependem
sobre o tipo de objeto selecionado. Se você selecionar um
objeto de texto, por exemplo, as definições para visualizar
e modificar
atributos de texto aparecer.
1 Se o Inspetor de propriedades não estiver aberto, escolha
Janela> Propriedades.

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

No Inspetor de propriedades, você pode ver o tamanho,


estilo e cor do texto, entre
outros atributos.

Se o inspetor Property não estiver completamente expandido,


clique no triângulo branco no canto inferior direito.
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ímbolos com
os seus próprios
Linha do tempo independentes. Você pode pensar deles como
filmes dentro de filmes.
Ver o clipe de filme
Agora você vai abrir o modo de edição para visualizar 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 interpolada,
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 estão
indicados no Cronograma de
círculos sólidos, quadros-chave finais aparecem como
pequenos retângulos contornados.

10
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ê pode
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 principal:
• 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 importados
em seu documento.
1 Se o painel Biblioteca não estiver aberto, escolha
Janela> Biblioteca.
2 Arraste o painel Biblioteca para aumentá-la, se
necessário, para exibir os objetos dentro da biblioteca.
3 Se a pasta Arte não é expandida, clique duas vezes 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 para
visualizar os activos incluídos no documento,
tais como botões e clipes de filme.

11
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 editar
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 Janela>
Movie Explorer.
2 Se necessário, aumentar o Movie Explorer para exibir a
estrutura de árvore no painel.
O Movie Explorer botões de filtragem exibir ou ocultar
informações.

12
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 selecionados.

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 texto; 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 botão
Mais (+) à esquerda do nome
7 Selecione o Mostrar quadros e camadas botão de filtragem.
Desça até a Symbol Definitions
categoria. Com a categoria expandida, clique duas vezes no
clipe de filme de animação Carros.
Você está agora em modo de edição de símbolo para o clipe
de filme.

13
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 passa
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 configuraçõ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 criar 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, você aprenderá a
realizar as seguintes tarefas:
• Abrir um novo arquivo e definir propriedades do documento
• 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 pasta 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 comum na primeira
criação. Você pode usar a propriedade
inspetor de documentos e caixa de diálogo Propriedades para
especificar as configurações que afetam todo o filme,
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 segundo, uma taxa de
quadro ideal para reproduzir animações
na web.
Nota: Se o inspetor Property não estiver completamente expandido,
clique no triângulo branco no canto inferior direito.

14
2 O fundo da caixa de cor indica a cor do Stage. Clique na seta
para baixo no
Antecedentes caixa de cores, em seguida, mover a ferramenta
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 valor
hexadecimal de 999999.
caixa de texto Hexadecimal

Selecione neste tom de cinza

4 Para redimensionar o Stage, clique no botão Download, que


indica o tamanho do Stage. No documento
Caixa de diálogo Propriedades, digite 640 px na primeira caixa
de texto e Dimensões 290 px na segunda
Dimensões caixa de texto. Verifique se Pixels é selecionado 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 alinhamento 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 grade não está
marcada.
Objetos de agora será a grade, mesmo quando a grade não está
visível.

15
4 Verifique se o normal é selecionada para Snap Precisão e
clique em OK.
A precisão do encaixe determina o quão perto um objeto 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 que
mescla preto e azul escuro com uma
área transparente que permite que parte da cor cinza do
Palco a ser exibido. Esse efeito é obtido
utilizando o Misturador de cores.
Nota: Embora os gradientes oferecer efeitos interessantes
nos filmes, o uso excessivo de gradientes podem afetar
adversamente computador
velocidades do processador e diminuir a velocidade com que
uma animação. Ao projetar um filme, considerar tanto
seus requisitos de desempenho artístico e para determinar 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 grade
junto ao Palco.
1 No menu pop-up acima do lado direito do palco, entre 75%
a exibir todo o Palco.
Essa configuração indica seu ampliada ou reduzida exibição
do Palco. A definição não
afetar o real tamanho do Palco em seu filme, que foi
especificado no documento
Caixa de diálogo Propriedades.

2 Na caixa de ferramentas, selecione a ferramenta


Rectangle.

16
3 Na caixa de ferramentas, clique no controle Cor do 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 é importante, pois você


logo mudar a cor.
4 A partir do canto superior esquerdo do Palco, arraste para o canto
inferior direito do Palco
desenhe um retângulo que cobre o palco.
Quando você soltar o ponteiro, o retângulo se ajusta à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 desfazer 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 escolhendo 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 à sua
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, escolha
Janela> Misturador de cores.

17
3 Para expandir o Misturador de cores, clique na seta
branca da barra de título do painel.

Clique aqui para expandir o painel

4 Se o Misturador de cores não estiver completamente


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 à esquerda da
barra de gradiente para selecioná-lo.

Gradient bar

Gradient slider

7 Clique na caixa de cores no canto superior esquerdo 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 hexadecimal e
pressione Enter ou Return.

18
• Mova o conta-gotas pelas amostras de cores até encontrar
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 indica a
transparência da cor, com 0%, indicando
que a cor é completamente transparente e 100%, indicando
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 áreas
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 deslizante de
gradiente à direita da barra de gradiente para selecioná-
lo.

19
2 Clique na caixa de cor para abrir a paleta de cores 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 selecionar a cor
com o mesmo valor hexadecimal.

Transformar o preenchimento de gradiente


Ao transformar um objeto, girar, escala, ou inclinado. Você
pode transformar um preenchimento usando os
Preencha ferramenta Transform.
1 Na caixa de ferramentas, selecione a ferramenta
Transformar preenchimento. No Palco, clique em qualquer
lugar dentro do retângulo.
Uma elipse que indica a forma ea posição do gradiente
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

20
2 Arraste o controle do centro para a esquerda do Palco 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 forma 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 é mostrado na
ilustração seguinte.

21
4 Arraste a alça intermediária circular, que controla 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 ilustração
a seguir.

22
Nome e bloquear uma camada
A forma de gradiente aparece na camada 1 na Linha de tempo,
momento a única camada em sua
documento. Em preparação para adicionar e mover objetos
adicionais no palco, você
renomear, bloquear a camada. Na próxima seção do tutorial, você
criará uma nova camada.
Como você aprendeu na aula Entendendo camadas, ao bloquear a
camada, você garante que você ou
outros usuários não façam alterações inadvertidamente 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 clareza. Além
disso, downloads de arte vetorial mais rápido do que
comparável imagens bitmap.
Junto com o gradiente, o arquivo final contém formas de fundo.
Você vai usar a ferramenta Oval para
criar as formas.
Especificamente, nesta seção você vai aprender a realizar 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 trabalhar 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 com 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.

23
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 cinza 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 hexadecimal.
4 Se o Misturador de cores não estiver aberto, escolha
Janela> Misturador de cores. No estilo pop-up menu de
preenchimento,
Solid selecionar. Clique no controle Cor do preenchimento
para selecioná-lo. No vermelho (R), digite 109. No G
caixas de texto (verde) e B (azul), digite 45 e pressione
Enter ou Return.
Você está especificando os valores para a quantidade de
vermelho, verde e azul de uma cor.
5 Na Linha de tempo, 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> Desfazer e


tente novamente.
6 Selecione a ferramenta Arrow na caixa de ferramentas,
clique duas vezes o círculo no palco para seleccionar as
preenchimento e traço.
7 Se o painel Transformar não é aberto, escolha Janela>
Transformar.

24
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 forma oval


inclinada.

Criar e transformar uma forma duplicada


Você vai agora criar e transformar um oval duplicado.
1 Com o preenchimento oval eo curso ainda selecionado no
Palco, escolha Editar> Duplicar.

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

3 Na caixa de ferramentas, selecione a ferramenta Free


Transform.
Um guia com alças aparece em torno do oval duplicado.
4 Mova o ponteiro sobre uma alça de canto até um indicador
diagonal com setas em ambas as extremidades
aparece. Arraste a alça de canto para dentro para fazer o
oval menor. Verifique se o curso do
dentro de oval não está tocando o curso do oval exterior.

26
5 Mova o ponteiro sobre a alça de canto até que o ponteiro
se transforma em uma rotação circular
indicador. Arraste o indicador de rotação para a esquerda
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 mesma
camada, e as duas formas são diferentes
cores, bem como não agrupada, a forma em cima "corta" 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 Delete em
seu
teclado para apagar o preenchimento.

27
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, clique em
Shift para selecionar o curso interno também. Arraste o
traços ligeiramente à direita do preenchimento, como mostra
a ilustração a seguir.

3 Cada área da cor do preenchimento na área dividida pelo


traço representa um segmento discreto
que você pode colorir individualmente. Selecione uma área
da forma de preenchimento, e use o Misturador de cores
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:

28
4 Selecione a ferramenta Transformação livre. Arraste 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 curva


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 aparecerá no
filme publicado, a arte além do Estágio
pode ser uma distração no ambiente de criação. Embora 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 visível.
Dessa forma, se você quiser voltar
às formas de modificá-los, eles vão estar intacto.

29
1 Com a camada Formas selecionada, adicione uma nova camada
para a Linha de tempo e nomeá-la Máscara.
2 Na caixa de ferramentas, selecione a ferramenta Retângulo
e desenhe um retângulo que se estende da esquerda para a
parte superior
canto do palco para o canto inferior direito.
Este retângulo é a forma da sua máscara. Qualquer coisa
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 de tempo
e
Máscara de escolher no menu de contexto.

30
A camada é convertida em uma camada de máscara, indicada
por um ícone de seta para baixo. A camada imediatamente
abaixo dele está ligada à camada de máscara e seu conteúdo
é exibido em toda a área preenchida da
máscara. O nome da camada mascarada é recuado, e seu í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 desbloquear
o
Máscara e camadas Formas de fundo. Quando você terminar 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 importar
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 trabalhar
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 com 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 chame-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.

31
3 Vá até o seu Tutorials / FlashIntro / Ativos pasta na pasta
do aplicativo Flash MX e
view1.png selecionar, em seguida, a tecla Shift pressionada
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 configurações de
compactação e qualidade de imagem.
1 Se o painel Biblioteca não estiver aberto, escolha 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 configuração,
clique em Teste. Se necessário, arraste o carro em
ver na janela de visualização. Quando terminar de visualizar a
imagem, clique em OK.

32
5 Volte ao painel Biblioteca. Dê um duplo clique view2.png e repita o
passo 3, clique em OK.
6 No painel Biblioteca, Lossless view3.png duplo-clique 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étrico fade in e out na
cena de abertura. Este efeito
é alcançado através da criação de um símbolo de clipe de filme que tem
um independente Cronologia dos principais
Timeline. Em seguida, você tween a transparência alfa 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 Linha de tempo, arraste
o objeto view1.png da Biblioteca
painel para o palco, colocando o carro dentro da área mais leve que o
fundo é degradê.

2 Escolha Inserir> Converter em símbolo, ou pressionar 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á selecionada no indicador
de Registro e clique em OK.
Bitmaps, assim como outros objetos Flash, têm pontos de registro
utilizado para o posicionamento e
transformação. Ao alinhar as três exibições do carro dentro do clipe
de filme, todas as três exibições
deve alinhar em relação a um ponto de registro central.

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, juntamente 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.

33
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 no 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 no
indicador de Registro e clique em OK.
6 rolagem horizontal em toda a Linha de tempo até chegar 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 selecionado.

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 carro não
aparece no Palco da
frame 35 em diante.
Nota:

Nota: Se você cometer um erro na adição de keyframes e quer eliminá-los,


selecione uma ou mais quadros e rightclick
(Windows) ou clique com Control (Macintosh) e escolha Limpar quadro-chave no
menu de contexto.

Bitmap efeitos Tween


Criando um efeito de bitmap é semelhante a criar uma
interpolação de movimento em linha reta: você especificar
configurações para
começando e terminando keyframes, em seguida, especificar
interpolação desses quadros e os quadros intermediários.
Flash cria a animação de transição do primeiro quadro-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.

34
2 Na janela pop-up Cor menu do Inspetor de propriedades,
selecione Alfa. No montante Alpha
menu pop-up, digite 0% na caixa de texto e pressione 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 corretamente,
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 visão do
carro deve desaparecer dentro
1 Adicione uma nova camada para a animação Carros Timeline
e nomeá-la View 2 Fade.
2 Na 2 camada, adicione um quadro-chave ao quadro 25.
3 Com a reprodução ainda no quadro 25, arraste view2.png do
painel Biblioteca para o Palco.
4 Se o painel Info não estiver aberto, escolha Janela>
Info. Verifique se o centro da praça está selecionado no
o indicador de registo, em seguida, digite 0 na caixa de
texto coordenada X e digite 0 na Y
coordenar a caixa de texto. Pressione Enter ou Return.
O Inspetor de propriedades também tem caixas de texto X e
Y, no entanto, essas coordenadas são relativas a um
ponto de registro no canto superior esquerdo do clipe de
filme.

35
5 Selecione o view2.png 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 carro 2.
Verifique se Clipe de filme está selecionada e clique em OK.

6 No Inspetor de propriedades de clipe de filme, selecione 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 texto 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 carro.
1 Na 2 camada, adicione um quadro-chave ao quadro 60.
2 Na 2 camada, adicione um quadro-chave ao quadro 70 e outro ao
quadro 69.
3 Selecione o quadro-chave no quadro 69 da camada Exibição do
fade 2. Selecione a Exibição do carro 2 no Palco
e usar o Inspetor de propriedades para selecionar uma
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 terceiro carro
desaparece dentro Você vai criar essa animação agora.
1 Com a mesma camada 2 selecionada, adicione uma nova camada de
Timeline e nomeá-la View 3 Fade.
2 No View 3 camada, adicione um quadro-chave ao quadro 60.

36
3 Com o quadro 60 ainda selecionado, arraste o view3.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 está
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 carro 3.
Verifique se Clipe de filme está selecionada e clique em
OK.

5 No Inspetor de propriedades, selecione Alfa no menu 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 delimitaçã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 carro.
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, selecione
a Exibição do carro 3 no palco e usar
Inspetor de propriedades para selecionar uma transparê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 95.
2 Com o quadro 95 ainda selecionado, arraste o clipe de
filme 1 carro (não view1.png) da Biblioteca
Painel para o Palco.
3 No painel Info, digite 0 na caixa de texto coordenada X e
digite 0 na coordenada Y caixa de texto.
Pressione Enter ou Return.
4 No Inspetor de propriedades, selecione Alfa no menu 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.

37
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 alfa.
7 No 1 camada, selecione qualquer quadro entre os de 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 testar 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 arquivo SWF, clicando
em sua caixa de fechar. Em sua Flash
documento, escolha Editar> Editar documento ou clique 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 arquivos externos.
Uma das maneiras mais fáceis de realizar
isso é usar a ação loadVariables para carregar o texto de um
arquivo de texto em um campo de texto dinâmico em
tempo de execução. No arquivo FLA, você pode especificar atributos
de texto, como estilo, tamanho e cor, para o
campo de texto dinâmico. Uma vantagem de manter o texto em arquivos
externos é que quem quer
modificar o texto pode trabalhar com o arquivo de texto em vez do
arquivo FLA.
Nesta seção, você aprenderá como realizar as seguintes tarefas:
• Importação e alinhar um logotipo
• Criar um campo de texto dinâmico
• Use o Inspetor de propriedades para atribuir um texto 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 trabalhar 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 com 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> Import.
Anteriormente no tutorial, você objetos importados para a
biblioteca. Agora você vai importar o logotipo de forma que
ele aparece no palco.
3 Navegue na pasta do aplicativo Flash MX para os Tutoriais /
FlashIntro / Ativos pasta e
Clique logo.fh10, em seguida, clique em Abrir.

38
4 Na caixa de diálogo Importação do FreeHand, verificar 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 denominada 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 caixa de
ferramentas, selecione a ferramenta Texto. Na propriedade
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 pequeno
texto que aparece em várias plataformas de computador.
Para mais informações sobre fontes de dispositivo, consulte
"Usando fontes de dispositivo (somente texto horizontal)",
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.

39
5 Na janela pop-up Tipo de linha de menu, selecione
Multiline, que é para várias linhas de texto que será
moldado.

Digite o texto pop-up menu

Fonte menu pop-up

Ponto de caixa de texto de tamanho

Linha de pop-up Tipo de menu

6 No Palco, clique abaixo do logotipo. Arraste o ponteiro


para criar um campo de texto com a largura do logotipo
texto e da profundidade aproximada da linha vertical que
está agrupado com o logotipo, como mostrado na
A ilustração a seguir.

7 No Inspetor de propriedade TextField, digite na caixa de


texto Var.

O arquivo de texto que será carregado no campo de texto


dinâmico, como visto na ilustração a seguir,
texto que inclui os nomes de variáveis: =. textField Quando
você digita esse nome no texto Var
caixa, você está nomeando a variável que o filme deve
carregar.
Linha de pop-up Tipo de menu

40
Use a ação loadVariables para carregar texto
A ação loadVariables inclui um parâmetro para especificar 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 chame-o de
ações. Se necessário, arraste a camada de Ações para
no topo da Timeline.
Uma boa prática é manter as ações na camada superior em uma
linha do tempo.
2 Se o painel Ações não estiver aberto, escolha Janela> 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 caixa de
ferramentas Ações eo painel Script.
O tipo de painel Ações que é exibida depende do objeto 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á para 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 experientes com o
ActionScript. No modo normal,
Os campos e controles de orientá-lo na criação de ActionScript.

Options menu button

Actions toolbox
Script pane

41
4 Na caixa de ferramentas Ações, escolha Ações> Navegador /
Rede, clique duas vezes em
loadVariables.
O ActionScript é adicionado ao painel Script. Parâmetros
para a ação aparecem acima do
Painel Script.
5 Na caixa de texto URL, digite o caminho para o arquivo 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 botão, o
Flash cria linha do tempo para os estados de botão.
Na lição Criando botões, você aprendeu a mudar a cor de
preenchimento de uma forma dentro de uma
estado de botão. Nesta seção, você aprenderá mais sobre
como modificar botões, incluindo a adição de
animação de um botão.
Especificamente, nesta seção você vai aprender a realizar
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 Web site
• Utilize o recurso Ativar botões simples
• Adicione o botão de navegação

42
Para concluir esta seção, você pode continuar a trabalhar
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 com 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 / pasta de
Ativos e buttons.fla clique duplo.
A biblioteca para o arquivo buttons.fla aparece para 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 acima do
Palco, insira 150% para ampliar a sua visão
do Palco. Em seguida, role para o lado inferior direito do
Palco.

43
3 Arraste o Botão 1 do painel Biblioteca buttons.fla 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 Biblioteca
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> Alinhar. Verifique


se nessa fase, não está marcada. Você faz
Não quero alinhar os botões em relação ao Stage. Clique 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.

44
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 estados de botão.
Mais design botão complexo,
como animação, não joga.
1 Escolha Controlar> Ativar Botões Simples, então rolar e clique
em cada botão.
O botão da direita, Botão 1, não está terminado. Você vai
modificar o botão Avançar.
2 Quando terminar de testar os botões, escolha Controlar> Ativar
Botões Simples para desmarcar
esse recurso.
Modificar um estado de botão
Você vai criar um clipe de filme dentro do longo estado de botão
1, em seguida, criar uma interpolação de forma na
clipe de filme. A interpolação de forma cria um efeito 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 camadas 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 nome 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 de animação
para abrir o modo de edição.
5 Renomear Camada 1 Color Change, e adicione um quadro-chave ao
quadro 15.
6 Com a reprodução ainda no frame 15, selecione a forma 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 entre 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 interpolada 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 quadro 15.
3 Se o painel Ações não estiver aberto, escolha Janela> Ações.
Aumentar o painel, se necessário, para
Exibir a caixa de ferramentas Ações eo painel Script.

45
4 Com o quadro 15 da camada Ações selecionado, vá para 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 vai 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 Cena 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 completo,
como http://www.macromedia.com.

46
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 retornar 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 para 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 Internet, 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á como 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 trabalhar 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 com um novo
nome na pasta My_Stiletto para manter um
versão adulterada do arquivo original.

47
Adicionar um som de streaming
Você pode incluir som no seu filme, arrastando o som 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 selecionada, adicione
uma nova camada e nomeie-Sounds.
2 Escolha File> Import. Na pasta do aplicativo Flash MX, navegue
até Tutorials /
FlashIntro / Ativos e clique track1.mp3. Control-click (Windows)
ou Command
(Macintosh) para adicionar ping.mp3 à seleção, clique em Abrir.
Os arquivos são importados para a biblioteca.
3 Com os Sons camada selecionada, arraste o som track1.mp3 do
painel Biblioteca para o Palco.
Na Linha de tempo, uma pequena representação das ondas 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 selecionar 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 você 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 ponteiro 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 botão, o que
faz com que o som para tocar durante o estado Sobre.
Porque você está adicionando o som ao símbolo de botã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 nova 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 quadro 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 filme para ouvir
os sons do botão. Quando você
terminar de exibir o arquivo SWF, feche a janela para retornar
ao documento.

48
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 é uma boa
prática para qualquer filme de autor que você,
especialmente porque os outros
trabalhando no mesmo arquivo pode então localizar os bens
facilmente.
1 Se o painel Biblioteca não estiver aberto, escolha
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 animaçã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 pasta de
Obra.

49
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 criar 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 comando
Publicar para criar um Web compatível
filme com a extensão SWF.
Se você usar o comando Publicar com as configurações
padrão, o Flash prepara o arquivo para a web.
Flash irá publicar o SWF e criar um arquivo HTML com as
tags necessárias para exibir o SWF.
Depois de definir as opções necessárias Publish Settings,
você pode repetidamente exportação para todos os
selecionados
formatos de uma só vez, basta escolher Arquivo> Publicar.
Flash armazena as configurações de publicação que você
especificar
com o documento, para cada filme pode ter suas próprias
configurações.

50
Nesta seção, você aprenderá a realizar as seguintes
tarefas:
• Utilize o Bandwidth Profiler para testar o desempenho 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 trabalhar
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 com 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 quantidade de
dados enviados em cada frame do filme,
de acordo com a velocidade do modem selecionado.
1 Guarde o documento e escolha Controlar> Testar filme.
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.

51
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 vermelha,
especialmente se a barra representa um quadro de outras
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 detalhes, consulte
"Otimizando os filmes" em Ajuda> Usando o Flash.
4 Quando terminar de exibir o Bandwidth Profiler, escolha Exibir>
Bandwidth Profiler para
desmarcar. Feche a janela de SWF para retornar ao ambiente de
criação.
Use o comando Publicar
Você pode publicar seu documento do Flash para a reproduçã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 publicaçã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 arquivo HTML de


suporte, que exibe o filme do Flash.
Quando você seleciona um formato que exige configuraçõ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.

52
3 Clique na guia HTML.
Por padrão, o processo de publicação cria um documento 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ções de
Publicação, desmarque a opção Usar nomes padrão.
2 No HTML (. Caixa de texto html), selecione o texto existente e
digite um novo nome, como
stilettoElectric.html. Em seguida, clique em Publicar. 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 que seu
arquivo FLA.
Quando você abre o arquivo HTML, o filme de SWF é reproduzido 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 SWF é exibida
no navegador.

Para obter informações adicionais sobre o Flash templates


HTML, consulte "Sobre a publicação HTML
modelos "em Ajuda> Usando o Flash.

53
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 Flash,
tomando a Introdução à ActionScript
Tutorial em Ajuda> Tutoriais. Projetado para principiantes
ActionScript, o tutorial lhe apresenta para
scripting conceitos, permitindo-lhe construir um puzzle 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.

54
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 Flash o
que fazer e para perguntar o que é Flash
acontecendo como um filme é executado. Esta comunicação
bidirecional permite que você crie filmes interativos. Em
Neste tutorial, você irá analisar as tarefas envolvidas 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 trabalhar
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 proveito
deste tutorial, você deve primeiro completar
Introdução ao Flash MX, em Ajuda> Tutoriais. Você também
deve ser confortável
com os conceitos apresentados em "Escrevendo scripts com o
ActionScript" e "Criando interação
com o ActionScript "em Ajuda> Usando o Flash.
Este tutorial leva cerca de uma hora para ser concluí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

55
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 compreender as
práticas de criação.
1 Na pasta do aplicativo Flash MX, navegue até Tutorials /
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 área 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 parte do
enigma.
A peça gira no sentido horário.
7 Quando terminar de exibir o arquivo SWF, você pode fechar
a janela ou deixá-la aberta para
servir como uma referência.

56
Analisar o arquivo puzzle.fla
É útil analisar o arquivo FLA completo para determinar 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 aplicativo Flash MX,
navegue até Tutorials /
ActionScript / terminados e abra o arquivo puzzle.fla.
Agora você deve ver o filme completo tutorial no ambiente 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 de 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, arraste a barra que
separa o palco da Linha de tempo até
e para baixo. Percorrer a Linha do tempo para ver como 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 camada, o que impede
que ele seja selecionado. Esta é
útil se você está selecionando um item no Palco, que está abaixo de um
item em uma outra camada. O
Esboço coluna, indicada por um quadrado acima da coluna, ativa os
contornos de todos os elementos
em uma camada, o que pode tornar mais fácil para ver 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 filme, 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 seguintes
procedimentos:
• Abra o painel Ações e selecione um script na barra de salto-a lista
pop-up no âmbito do
Ações barra de título do painel.

57
• Botões Select e clipes de filme no Palco com o painel Ações aberto.
• Utilize as teclas de filtragem ou a caixa de texto 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. Este 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 Movie Explorer.
Se não for aberta, selecione
Janela> Movie Explorer.
No Movie Explorer, desmarque todos os botões de filtragem,
exceto o botão ActionScript. Em
Além das ações no Quadro 1 da camada Ações, as ações 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.fla 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 estado. 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 conjunto de
qualidades ou propriedades, que você pode manipular com
ActionScript. Cada uma dessas propriedades é identificado por um
nome precedido por um sublinhado (_)
caráter. Por exemplo, cada clipe de filme tem uma propriedade
_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.

58
Você inicializar as propriedades e variáveis no primeiro 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 clipe 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é Tutorials /
ActionScript / for usado e aberto
mypuzzle.fla.
3 Se você receber uma mensagem de substituição de fontes,
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 com 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 outro
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 sequencial
nome, você pode reverter para um arquivo anterior se 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 alerta
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ários a
resolver o enigma. Cada uma destas caixas de diálogo,
padrões e
guias é um clipe de filme.
Para inicializar o filme, você tem que esconder vários
clipes de filme para que apenas o início de diálogo
e as peças do quebra-cabeça. Você vai fazer isso por
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.

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

3 No painel Script, clique na linha 4 para selecionar 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 uma linha
em branco do código que termina com um ponto e vírgula.
Um ponto e vírgula (;), em uma declaração do ActionScript é
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 de vídeo
a partir do qual você pode selecionar.
7 Selecione o clipe de filme arestas da árvore de clipe 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 à Linha 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 clipe de
filme na Timeline principal.

60
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 invisível
no Palco.
Você pode digitar o código manualmente, ou você pode
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 decidir 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, digitando
novamente. _visible = False na caixa de texto Expressã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ê terminar,
seu script deverá aparecer como segue:

11 Escolha Arquivo> Salvar como e digite um novo nome. Use


um esquema de nomeação consecutivo, como
mypuzzle3.fla, para poder reverter para versões anteriores
do arquivo, se necessário.

61
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 painel
Script, clique no botão de Referência. O
Referência do painel, um sistema de ajuda organizado 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 sintaxe.

1 Clique no menu Opções no canto superior direito da barra


de título do painel Ações e escolha
Verificar sintaxe.

Se a sintaxe estiver correta, aparecerá uma mensagem


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.

62
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 status inferior do
painel Ações.

Além disso, como você aprendeu na Introdução ao Flash 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, você precisa de um


caminho para o flash para acompanhar
informação e de atividade do usuário: botões que foram 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 qualquer
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 caminho de destino
para usar um clipe de filme em um script.
No arquivo puzzle.fla, o ActionScript usa a variável 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 usuário
clica em um botão em uma caixa de diálogo, a variável de diálogo é
definido como false. Essa variável não afeta a
visibilidade das caixas de diálogo si, é simplesmente um recipiente
que contém informações que você
pode usar em scripts em todo o filme. No arquivo puzzle.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 nomeá-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 declarar uma
variável em uma declaração e, em seguida, atribuir-lhe uma
valor em uma declaração posterior.

63
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ódigo (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 anexado ao Cronograma
de um clipe de filme, o que pode
ser usados em qualquer script no documento. Para obter mais
informações sobre variáveis, consulte "Compreendendo
a linguagem ActionScript "em Ajuda> Usando o Flash.
O arquivo puzzle.fla var usa a ação ea ação conjunto 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 mypuzzle.fla salvo pela
última vez.
Nota: Você também pode navegar até a pasta do aplicativo Flash MX e
abrir Tutorials / ActionScript / Finished /
puzzle2.fla. Se você usar o puzzle2.fla arquivo, salve 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 linha 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 Expressão, à direita da
caixa de texto Valor.
Ao selecionar Expressão, você está dizendo a verdade 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 filme, 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 nome. Use um esquema


de nomeação consecutivo para poder reverter para versões anteriores do
arquivo, se necessário.

64
Exibição de informações em uma caixa de texto dinâmica
Caixas de texto dinâmicas podem exibir conteúdos alterados em um
filme do Flash. Você usa a propriedade
Inspetor de criar uma caixa de texto dinâmico e atribuir-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 Shift -
peça. Agora você vai atribuir um nome de variável para 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 aplicativo Flash
MX e abrir Tutorials / ActionScript / Finished /
puzzle3.fla. Se você usar o puzzle3.fla arquivo, salve 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írculo 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.

65
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, selecione 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ídeo, devem ser referenciadas


por seus caminhos. O
pieceNumber variável é declarada e actualizada em funçã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 pieceNumber, o valor é atualizado e
mostra no campo de texto
no palco, sempre que muda o valor da variável no tempo 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 nome. Use um esquema de
nomeação consecutivo para poder
reverter para versões anteriores do arquivo, se necessá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, ou pedaços de dados, ou
operandos. Por exemplo, no
expressão 2 + 2, o sinal mais (+) é o operador e cada número é um operando.
Uma expressão é qualquer código ActionScript que pode 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úmero 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 valores. Por exemplo, você pode
saber que um usuário tenha
caiu uma parte do enigma para a área de solução, mas como fazê-lo a determinar
se a peça está no
local correto? E se a peça está no lugar correto, como 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, operadores, 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 igual ao outro, e um
operador lógico
calcula um valor verdadeiro ou falso, também chamado de um valor booleano, por
uma expressão.

66
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ógico NOT, que é
representado por um ponto de exclamação
(!), Calcula o valor booleano oposto de seu operando. 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, salve 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 bordas do
Palco. Se o painel Ações não estiver aberto, escolha
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 Script:
/ / 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 primeiro 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 filme 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 caminho de destino
caixa para selecionar o clipe de filme padrão. Se você 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ê pode clicar em
uma dica de código para entrar na sintaxe. Para obter mais
informações
sobre dicas de código, inclui a ativação ea desativação los,
consulte "Usando referências de código" em Ajuda> Usando o
Flash.

67
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 visibilidade do clipe
de filme bordas para o oposto do
o que é atualmente. Isso cria uma alternância que mostra ou
esconde o clipe de filme.
11 Escolha Arquivo> Salvar como e digite um novo nome. Use um
esquema de nomeação consecutivo para poder
reverter para versões anteriores do arquivo, se necessá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.

68
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 realizar as
seguintes tarefas:
• A ação permite que se verifique uma condição Flash no filme e
executar determinadas ações que se condição é verdadeira.
• 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 clipe 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 aplicativo Flash
MX e abrir Tutorials / ActionScript / Finished /
puzzle5.fla. Se você usar o arquivo puzzle5.fla, salve 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 ferramentas Ações,
escolha Ações> Condições /
Categoria Loops.
3 Clique duas vezes a ação se. O seguinte código aparece no
painel Ações:
on (release) (
Se definido (<not yet>) (
)
)
4 Com a linha de código que se contém a ação selecionada, 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 vazia.

69
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 dos parênteses
condição.
A expressão deve ser igual a um dos valores booleanos: verdadeiro ou
falso. Este exemplo usa a
condição da ação para se verificar se o clipe de filme 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 caixa 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 nome. Use um esquema
de nomeação consecutivo para poder
reverter para versões anteriores do arquivo, se necessário.
Criando comandos e reutilizando códigos
ActionScript tem ações que permitem controlar um filme 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 seus 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 necessá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 determinada á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 objeto embutido em
Matemática com um método aleatório que você
pode usar para esta finalidade.

70
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 Scramble é
executado, ou chamado. Esta função coloca o enigma peças em posições
aleatórias no Palco. Em vez de reescrever o mesmo script 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ê colocou nele. Por
exemplo, se você colocar as bananas no liquidificador,
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 fotograma 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 tela 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 aplicativo Flash MX e
abrir Tutorials / ActionScript / Finished /
puzzle6.fla. Se você usar o arquivo puzzle6.fla, salve 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 abra o painel Ações se
ele ainda não estiver aberto.
3 Role para baixo no painel Script e selecione a linha 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. WhichPiece Digite o
texto Parâmetros
caixa. O código da linha 32 agora se parece com esta:
função RotateDisplayOrDrag (whichPiece) (
)
O parâmetro whichPiece, que identifica a parte do enigma 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

71
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 é executado 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ê també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 (Windows) e Option
(Macintosh) chaves. Esta linha de código verifica se 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 teclas + 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 acesso à matriz"
em Ajuda> Usando o Flash.
8 Selecione a outra se a linha de código. Digite Key.isDown
(Key.SHIFT) na caixa de texto Condição.
Esta linha de código verifica se um usuário pressionou a tecla
Shift.
9 Na 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. Tipo
pieceNumber = whichPiece.slice (5) no
Caixa de texto Expressão.
Esta linha de código exibe o número da peça na caixa 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 modo que apenas
o número da peça exibida. Em
efeito, o método "corta" os primeiros cinco caracteres e atribui
o número resultante para o
pieceNumber variável, que por sua vez é atribuído ao campo de
texto no Palco.
10 Selecione a linha de código else. Na Actions> Movie Clip
Control na categoria Ações
caixa de ferramentas, dê um duplo clique na ação startDrag.
11 Digite _root [whichPiece] na caixa de texto Destino e clique
em Expressão.

72
12 Selecione Restringir ao retângulo. Tipo 20 em L
(esquerda) e S (superior) caixas de texto. No R (direita)
e B (inferior) caixas de texto, tipo 780 e 580,
respectivamente.
A palavra falso no script indica que lockCenter (que indica
que a parte do enigma
sempre encaixada no centro do ponteiro do mouse quando
clicado) não é especificado. O
números 20, 20, 780 e 580 especificam a esquerda, superior,
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 puzzle;
Se a chave é pressionada a tecla Alt (Windows) ou Option
(Mac), a parte do enigma gira 90 °. Se Shift, Alt ou
Teclas de opção não está pressionado, o usuário pode
arrastar a peça. Seu código deve ser semelhante a este:
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ê deve
utilizar um caminho de destino para chamar uma função,
assim como você deve usar um caminho para acessar uma
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 cada 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 Iniciar
Scramble e camadas de diálogo, se não estiver escondido.
Selecione a camada Congrats diálogo.

73
2 No Palco, clique duas vezes na caixa de diálogo Parabé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 selecionados.
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 selecionado no painel
Script, clique duas vezes em avaliar
da categoria Ações> Ações diversas da caixa de ferramentas
Ações. Tipo
_root.scramblebutton._visible = true na caixa de texto
Expressão.
7 Clique duas vezes na ação evaluate novamente, para adicionar
outra linha em branco. Tipo _root.dialog = false
na caixa de texto Expressão.

74
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 ferramentas 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 principal:
• Escolha Editar> Editar documento.
• Clique no botão Voltar.
• Clique em Cena 1.
11 Escolha Arquivo> Salvar como e digite um novo nome. 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 permitem
controlar o fluxo de um filme, e ele tem filme clips com
propriedades que você pode mudar.
ActionScript também tem um outro tipo de elemento chamado um
objeto interno. Objetos fornecem uma maneira de agrupamento 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 "Criar comandos
e reutilizando códigos" Na página 68, você usou o objeto chave
para determinar o último usuário uma tecla pressionada no
teclado. O Objeto da peça é construída em ActionScript para
permitir o acesso a informações sobre o teclado.
Outro objeto do ActionScript é o MovieClip. O objeto MovieClip é
uma coleção de métodos que você pode usar para manipular os
clipes de filme, que são os mais fundamentais e poderosas
elementos do Flash. Para saber mais sobre as particularidades do
objeto MovieClip e usar clips de vídeo, consulte "Trabalhando
com clipes de filme e botões" em Ajuda> Usando o Flash.
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 aplicativo Flash
MX e abrir Tutorials / ActionScript / Finished /
puzzle7.fla. Se você usar o puzzle7.fla arquivo, salve o arquivo
com um novo nome na pasta for usado para manter um
versão adulterada do arquivo original.

75
2 ações Piece é um clipe de filme aninhado dentro de cada
instância de uma parte do enigma. Para selecionar o Piece
ações de clipe de filme a partir da hierarquia do painel
Biblioteca, clique no botão Editar símbolos no canto 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 Janela> 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 é executado
quando um determinado evento ocorrer. Tipos de eventos
incluir, quando o botão do mouse é pressionado, quando 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 seguem onPress é
executado quando um usuário
pressiona o botão do mouse no filme.

76
6 _parent Type na caixa de texto Objeto.
Como as ações Piece está aninhado dentro do clipe de 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 falso (não
visível). Se o valor for verdadeiro, então o próximo script para
rodar e arraste a parte do enigma não será executado. Se o valor da
variável é falso, então o script a seguir correr. Os 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) na caixa
Expressão.
_name é a propriedade para o nome da instância de parte 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 principal:
• Escolha Editar> Editar documento.
• Clique no botão Voltar.
• Clique em Cena 1.
12 Escolha Arquivo> Salvar como e digite um novo nome. Use um
esquema de nomeação consecutivo para poder
reverter para versões anteriores do arquivo, se necessário.
Testar o filme
"Teste rápido e teste sempre" é um mantra para os desenvolvedores
web. Quanto mais cedo você testar seu filme, o
que é mais fácil determinar a causa de resultados inesperados. É
uma boa idéia para salvar múltiplas versões de seu arquivo usando
nomes seqüenciais, por exemplo, mypuzzle1.fla, mypuzzle2.fla, e
assim por diante, como você tem feito neste tutorial. 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 ferramenta 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 Flash Player tem
vários comandos e instrumentos para ajudar a solucionar o seu
filme. A razão mais comum para resultados inesperados em um filme
do Flash é um caminho incorreto para um função de variáveis, objeto
ou clipe de filme. Isso pode causar uma variável para conter o
valor incorreto,
evitar uma função de ser chamada, ou impedir um clipe de filme de
jogar corretamente.

77
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 permite
examinar os valores das variáveis globais e locais,
incluindo
quando a mudança como o filme. Além disso, com o depurador
você pode usar pontos de interrupção para parar o filme
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 do
arquivo que você salvou.
Nota: Você também pode navegar até a pasta do aplicativo
Flash MX e abrir Tutorials / ActionScript / Finished /
puzzle8.fla. Se você usar o arquivo puzzle8.fla, salve o
arquivo com um novo nome na sua pasta for usado para
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 texto
Mensagem.
Você está colocando esta mensagem na função Scramble.
6 Salve o documento e escolha Controlar> Testar filme.

78
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 na 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 incorreto 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 nome. Use um
esquema de nomeação consecutivo para poder
reverter para versões anteriores do arquivo, se necessário. Você
fez um grande progresso no aprendizado do ActionScript!
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 ponto de partida
um filme do Flash, como criar comandos e reutilizando códigos
para fazer retornar ações, e como controlar com precisão o fluxo
do
filme. ActionScript Usando variáveis e expressões, você sabe
como manter o controle da atividade do usuário em seu 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, consulte 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 versão avançada
do filme puzzle.fla e desconstruir
o ActionScript que foi usado para criar um timer e parte do
enigma animado.

79
CAPÍTULO 3
Introdução de Componentes Tutorial
Você pode usar componentes Macromedia Flash UI de forma
rápida e facilmente adicionar interface de utilizador
simples
elementos no seu documento do Flash.
Este tutorial se destina a criar componentes para usuários
iniciantes e intermediários do Flash e
mostrar como elas podem ser usadas para criar facilmente
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 como 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 escolha
única
Aperte o botão Executa um comando quando 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 janela de
rolagem para exibir clipes de filme
Texto da barra de rolagem Adiciona uma barra de rolagem
para um campo de texto

80
Como você pode usar componentes

Aqui estão algumas maneiras que você pode usar componentes:


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 permite aos
usuários para um carro, selecionando vários gráficos 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 pesquisa 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 com a interface em
Flash e elementos de navegação. Empréstimo Design calculadora uma
amortização calculadora online que calcula os pagamentos 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 imagens e texto.
Visualizar o formulário preenchido
Você pode navegar através de componentes em um formulá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 programa 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 / Components / 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 contém várias
caixas de texto dinâmico para mostrar os resultados da informação
recolhida na página 1. Para poupar tempo, já criamos para você.
Criar um formulário
Neste tutorial, você irá usar componentes para criar 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 é utilizada para
coletar as informações, eo segundo página é usada para 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.

81
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á adicionar um
impulso
botão para a segunda página.
Para adicionar componentes a um documento, você pode
arrastar elementos do painel Componentes para
Palco, ou clique duplo-los no painel Componentes para
colocá-los no centro do Palco.
Depois que você adicionar um componente a um documento, 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 programa
Flash MX. Abra Tutorials /
Componentes / my_sweepstakes / mysweepstakes.fla.
2 Escolha Arquivo> Salvar Como e salve o arquivo com um
novo nome, como novo_bolo.
3 Crie uma nova camada e nomeie-UI. Você vai colocar os
componentes nesta camada.
4 Clique no Quadro 6 na camada de interface do usuário do
Timeline. Escolha Inserir> Blank Keyframe para adicionar um
espaço em branco
Keyframe. Isso será usado para componentes na segunda
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 Componentes 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 interface


do Flash no painel Biblioteca.

82
Adicionar uma caixa de combinação
Use o componente ComboBox para criar uma simples drop-down menu
de itens que podem ser selecionados por
usuários. Você também pode usar uma caixa de combinaçã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 Componentes para o
Palco. Coloque-o sob
"Escolha sua cor favorita".

O componente será exibido na pasta Componentes de interface do


Flash no painel Biblioteca.

Adicionar botões

Use o componente PushButton criar dois botões. Um botão estará


na primeira página
e será usado para enviar as informações no formulário. 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 Componentes 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 texto.
O componente será exibido na pasta Componentes de interface do
Flash no painel Biblioteca.

Depois de arrastar um componente do painel Componentes para o


Palco, selecione
instâncias adicionais de que a partir do painel Biblioteca.

83
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 que 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 componente. Os
métodos e propriedades disponíveis
para cada elemento componente estão listados no Dicioná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.

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

Para obter mais informações sobre como usar os métodos API


do componente FCheckBox para definir
opções adicionais para o componente, consulte o FCheckBox
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 parâmetros


são exibidos na
Inspetor de propriedades.

2 color_box Type na caixa de texto Nome da Instância.


3 Certifique-se o parâmetro editável é definida para Falso.
Isso impede que os usuários digitem seu próprio texto.
Introdução de Componentes Tutorial 85

85
4 O parâmetro Labels exibe uma lista de valores que os
usuários podem selecionar. Clique no campo Etiquetas,
clique em
a lupa para abrir o pop-up Valores janela. Clique no 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 valor.
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 deve 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 de fazer
isso neste tutorial.

86
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âmetro
Change Handler.
Quando estiver concluído, o Inspetor de propriedades deve
ter o seguinte aspecto:

Para obter mais informações sobre como usar os métodos 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 Inspetor de
propriedades.

2 submit_btn Digite o inspector Instância propriedade caixa


de texto Nome.
3 Tipo Enviar na caixa de texto Propriedade inspector
Label.
Este texto é exibido no corpo do botão.
4 onClick Digite o nome do Click Handler. Mais tarde você
vai escrever o ActionScript para definir o que o
Clique manipulador deve fazer.
Quando estiver concluído, o Inspetor de propriedades deve
ter o seguinte aspecto:

5 Selecione o componente PushButton no Quadro 6.


6 return_btn Digite o inspector Instância propriedade caixa
de texto Nome.
7 Tipo de retorno na caixa de texto Propriedade inspector
Label.
8 onClick Digite o nome do Click Handler.

87
Para obter mais informações sobre como usar os métodos API do
componente FPushButton para mudar propriedades adicionais,
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, enquanto alguns
vão estar relacionadas a um determinado
moldura. A tabela a seguir irá ajudá-lo a par de nomes 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 para 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 optado 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á ativado. 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. Isso será
usado para o ActionScript que deve ser executado
durante todo o filme.
2 Se o painel Ações não estiver aberto, escolha Janela>
Ações.
3 Mude o modo expert para pressionando Control + Shift + E
(Windows) ou Command + Shift + E
(Macintosh), ou clicando no controle no canto superior
direito (um triângulo com uma marca de seleção
acima) e selecionando Expert Mode do menu pop-up.

88
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 quiser
escrever o ActionScript, você pode copiar o texto deste
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 resultados da
caixa de combinação como um rótulo para que ele possa
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 inicializa
os valores na página 1 com os valores da
usuário tenha selecionado anteriormente. Ele é executado
quando o usuário clica no botão Voltar.
/ / Inicializar os valores de pg 1 com os valores que 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);
)
)

89
7 Finalmente, adicione uma chamada para o initValues função para
o início do ActionScript. Quando você terminar, o ActionScript
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 que 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 para 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 fazer o trabalho
do ActionScript, é necessário o nome de cada quadro-chave.
1 Crie uma nova camada e nomeie-Frame Ações. Selecione Quadro 1,
em seguida, escolha Inserir> Blank Keyframe para inserir 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 ();

90
3 (Opcional) Se quiser exibir determinado texto, se o
usuário tiver selecionado a caixa de seleção sorteios e
outro texto, se o usuário não tiver, você pode escrever 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 Fantasy
sorteios. Os vencedores são anunciados no final de cada
mês. "
) Else (
sweepstakes_text = "Você não foi inscrito no Stiletto
Fantasy
sorteios. "
)

Nota: Não copie e cole este ActionScript no painel Ações. Ele não
funcionará corretamente, pois existem quebras de linha 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 fechar 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ário, o
filme reteste.

Os próximos passos

Este tutorial apresentou os passos básicos para a criaçã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 ActionScript,
ambos encontrados no menu Ajuda.

91

Potrebbero piacerti anche