FLASH 5 – AVANÇADO

Trabalhar no Flash 5 é realmente muito gostoso e ainda, para os que têm conhecimento
prévio de outras ferramentas de desenho e noções de animação, muito fácil!
Certos conceitos conhecidos durante o curso básico devem ser revistos para o melhor
aprendizado da parte programada do aplicativo (objetivo do estudo deste material). Mas, sem
dúvida, o mais importante para o Curso de Flash avançado é o conceito do símbolo Movie Clip.
Além dos conceitos que começamos a aprender no curso passado, vamos conhecer
dezenas de novos recursos e ampliar os horizontes do que podemos fazer em Flash 5 usando
apenas a programação (se bem que “apenas” é uma palavra que não combina muito com a
quantidade de possibilidades que temos com a programação).
Espero que este material seja útil à sua vida de Webdesigner ou mesmo de curioso, pois o
flash é muito mais que apenas “tweenings motion” que aprendemos no nosso primeiro curso.

MOVIE CLIPS – SÍMBOLOS QUE PODEM RECEBER ORDENS

Símbolos são objetos reutilizáveis, armazenados na Library do arquivo do flash. Os
símbolos podem assumir 3 comportamentos (Behaviors), são eles: Graphic, Button e Movie
Clip.
Os símbolos possuem timelines próprias, dependentes ou não, da timeline principal,
dependendo do comportamento. Os símbolos podem ser inseridos diretamente na linha do tempo
principal do filme, ou em linhas do tempo de outros símbolos (ou seja, um símbolo dentro do
outro).
Graphic é um comportamento que faz com que o símbolo tenha uma linha do tempo
sincronizada com a linha do tempo onde foi inserido, por exemplo, um símbolo Graphic que tenha
10 frames em sua linha do tempo, chegará a essa posição 10 frames após ter sido inserido em
alguma timeline. Normalmente, este símbolo é conhecido como símbolo estático.
Button é o comportamento que transforma o símbolo em um objeto interativo, onde o
usuário vai poder clicar para obter uma resposta. Pode haver buttons visíveis ou invisíveis.
Movie Clip foi explicado, no curso anterior, como um símbolo que tem uma linha do tempo
independente da linha principal, e que ficaria ali, rodando e rodando seu conteúdo, em loop
constante, até que algum comando fosse enviado àquela instância para que ela parasse ou coisa
parecida. Na verdade, o Movie Clip é muito mais que isso: a característica que faz do Movie Clip
um símbolo tão importante para a programação é que ele pode servir como Target (alvo) para
vários comandos de Action Script como Tell Target, Duplicate Movie Clip e SetProperty.
O que possibilita a utilização de um Movie Clip como alvo é o fato de suas instâncias
poderem receber nomes (nenhum outro tipo de instância de símbolo pode receber nome, apenas
as instâncias do tipo Movie Clip).
Verifique na figura abaixo, a criação de um Movie Clip a partir de um objeto no Stage
(palco) do nosso arquivo. O objeto em questão ainda era uma forma (Shape) quando foi
diretamente transformado em um Movie Clip através do comando Insert / Convert To Symbol.

O Movie Clip não precisa, necessariamente, ter movimento próprio. É possível que seja
apenas um objeto estático que vá receber ordens externas através de actions. A maioria das
animações pode ser conseguida apenas com a alteração das propriedades de um Movie Clip.

http://www.joaocarvalho.cjb.net - 1
MÉTODO DE ESTUDO DESSE MATERIAL
Devido à grande quantidade de informações e técnicas que devem ser aprendidas no
assunto que engloba esta apostila, resolvi separá-la em exercícios práticos, que proporcionarão
maior efetividade ao nosso estudo. Acompanhe-os, passo a passo, para que não se perca.
Durante o decorrer dos exercícios, será necessário mostrar alguns conceitos e maneiras de
execução de comandos para que seja possível prosseguir, portanto, não pule nenhum exercício!

EXERCÍCIO 1 – COMANDANDO UM MOVIE CLIP

1) Acione o comando Window / Common Libraries / Movie Clips para acessar a biblioteca
comum de Movie Clips.
2) Arraste o Movie Clip chamado Fish Movie Clip para o palco.
3) Coloque-lhe o nome de instância de Peixe. (Este passo é IMPORTANTÍSSIMO)

4) Renomeie a Layer 1 (camada onde o peixe foi colocado) para Aquário.

5) Crie, então, uma nova Layer e renomeie-a para Actions. Esta Layer será utilizada
somente para a inserção de ações, ou seja, não colocaremos objetos nela (esta prática nos
será muito útil, e largamente utilizada).
6) Crie um Keyframe (F6) na posição 10 e um Frame (F5) na posição 20 da Layer Actions.
Crie também um Frame na posição 20 da Layer Aquário (verifique na figura).

7) Clique com o botão auxiliar do mouse no Keyframe 1 da Layer Actions, para abrir o
painel das actions, como é possível ver na próxima figura. Adicione (no sinal de +) uma
action chamada Tell Target, que se encontra na categoria Actions.
Nota: Verifique que, na janela das actions que se abre, podemos escolher as actions de duas
maneiras, ou através do sinal de +, ou pelos livrinhos azuis que acompanham o painel onde a
programação será escrita. Eu não utilizo estes livrinhos, apenas o sinal de +, para ter uma tela
mais livre (para liberar a tela dos livrinhos, clique na divisória entre o painel dos livros e o da
programação).
Nota 2: Verifique que existe um campo na parte inferior deste painel que solicita um Target,
este Target pode ser uma instância de Movie Clip ou um Level (nível onde um outro Movie
SWF tenha sido carregado). Podemos escrever diretamente o nome do alvo, ou escrevê-lo
com uma expressão ou ainda, apontá-lo através da pequena mira azul na extremidade inferior
direita desta janela. Lembre-se que muitas actions solicitam Target, isso não é
exclusividade da Action Tell Target.

2 - João Antonio Carvalho – Flash 5 Avançado

8) No campo Target, escreva /Peixe, dê Enter e não marque a caixa Expression.
9) Após a confirmação do comando, adicione mais uma ação, desta vez contida na categoria
Basic Actions, chamada Stop.
10) Clique no Keyframe 10 para adicionar-lhe as mesmas ações e o mesmo alvo, mudando
apenas o final, em vez de Stop, a ação será Play. Verifique a tela dos dois momentos lado
a lado abaixo:

Keyframe 1 Keyframe 10
11) Teste o filme através do comando Control / Test Movie e observe o resultado
(infelizmente não podemos mostrá-lo aqui nesta apostila, não é mesmo?).
CONCLUSÃO DO EXERCÍCIO
• O comando Tell Target nos permite “apontar” para um alvo que não seja nossa atual linha
do tempo, podendo ser um Movie Clip ou um Level onde está um filme carregado. Os
comandos que o Tell Target irá executar sempre deverão estar entre as chaves que
sucedem o comando propriamente dito.
• Quando queremos apontar para um alvo, podemos usar modos de referência absolutos ou
relativos. Os absolutos, exigem o caminho completo até encontrar o objeto solicitado
(como no caso do peixe em que nós utilizamos /). A Barra indica o nível raiz, o mais baixo,
o nível 0 (zero) do nosso filme, ou seja, a linha do tempo principal, e era justamente onde
o alvo estava. Se usássemos a referência relativa (que iria funcionar também), não
necessitaríamos da barra, pois a ação e o alvo foram colocados na mesma timeline, ou
seja, bastaria apontar para Peixe, em vez de /Peixe.
CONTINUAÇÃO DO EXERCÍCIO (ESSE É COM VOCÊ)
Tente fazer com que dois peixes se alternem na movimentação, ou seja, quando um
estiver em movimento, o outro esteja parado e vice-versa. Dica: Num Keyframe, coloque
duas ações Tell Target, uma para parar um peixe, e outra para dar Play no outro.

http://www.joaocarvalho.cjb.net - 3
EXERCÍCIO 2 – FAZENDO O MOVIE CLIP SE MOVER
1) Busque, da Common Library de Movie Clips, o símbolo chamado Biplane.
2) Redimensione-o para que ele caiba no Stage e sobre muito espaço para ele se mover.
3) Renomeie a Layer 1 para Avião. Crie uma nova Layer e coloque-a o nome de Actions.
4) Coloque o nome da instância de teco-teco. (esse é um passo muito importante).
5) Crie um Frame na posição 30 para as duas Layers. Crie, somente na camada Actions,
alguns Keyframes, nas posições 5, 10, 15, 20, 25 e 30. Se você fez tudo certo, a sua tela
ficará mais ou menos assim:

6) Clique duas vezes no primeiro Keyframe da Layer Actions. No painel que se abrirá,
selecione a Action (na categoria Actions) setProperty. Complete as informações
solicitadas por esta ação com os seguintes dados: Property: _x (X Position), Target:
teco-teco, Value: 0 (zero). Lembre-se de que, quando informamos algum valor numérico,
devemos marcar a caixinha Expression ao lado do campo em questão. A figura abaixo
mostra isso mais claramente:

Nota: Acabamos de solicitar que o Flash altere a propriedade _x (que indica a posição horizontal)
do alvo teco-teco, para que tenha o valor 0 (zero). Ou seja, após este comando, o teco-teco irá
se localizar no canto esquerdo da tela (que é considerado o ponto 0 horizontal). O ponto 0 (zero)
vertical é o topo do palco. Portanto, o ponto 0,0 (origem) do palco é a extremidade superior
esquerda do mesmo.
Nota 2: Podemos alterar outras propriedades dos Movie Clips, como _y (posição vertical),
_alpha (percentual de transparência), _xscale (percentual de dimensionamento de largura),
_yscale (percentual de dimensionamento de altura), _visible (visibilidade), _height (altura),
_Width (largura), _rotation (ângulo de rotação), entre outros...
7) Ainda com a janela de Actions aberta, clique nos demais Keyframes da Layer Actions e
coloque a mesma ação, mudando apenas o Value para, respectivamente: 10, 20, 30, 40,

4 - João Antonio Carvalho – Flash 5 Avançado

 50, e 60. Ou seja, a cada Keyframe que o filme alcançar, o Movie Clip mudará sua posição
como foi descrito na ordem acima.
8) Teste o filme com o comando Control / Test Movie (CTRL+ENTER).
9) Se quiser que o teco-teco ande mais rápido, aumente a diferença entre os Values dos
Keyframes, como de 20 em 20, ou de 30 em 30, etc...
CONCLUSÃO DO EXERCÍCIO
• A Action setProperty tem a capacidade de mudar as propriedades de uma instância na
hora da execução do filme. As propriedades podem ser _x, _y, _alpha, _xscale, _yscale,
_width, _height, _rotation, entre outras...
• Todas as vezes que necessitarmos aplicar um valor numérico, utilizamos o campo como
Expression (também utilizado para expressões, como veremos a seguir).
CONTINUAÇÃO DO EXERCÍCIO
Tente agora fazer com que o avião não só altere sua posição na horizontal, mas que ele
possa também ir descendo enquanto anda para o lado. Dica: em cada Keyframe da linha do
tempo coloque duas Actions, uma que altere o _x e a outra que altere o _y.

EXERCÍCIO 3 – BRINCANDO COM GETPROPERTY

1) Num arquivo novo, coloque um Movie Clip. (pode ser o Biplane do exercício anterior).
2) Coloque-o numa posição boa e num tamanho adequado para “voar” pela tela.
3) Coloque o nome de instância de cobaia.
4) Crie uma nova Layer e chame-a de Actions (original, não?). Renomeie a primeira Layer
para Movie.
5) Crie um Keyframe na posição 2 e outro na posição 3 da Layer Actions. Crie um frame
na posição 3 da Layer Movie. Se eu expliquei direito e você fez certo, está assim:

6) Clique duas vezes no Keyframe 2 e, na janela Actions que se abrirá, escolha a Action
chamada setProperty (a mesma do exercício anterior) e marque a propriedade _x para
alterar. O target é Cobaia.
7) No Value, não escreva nada, apenas vá ao sinal de + e adicione uma function chamada
getProperty. Nos argumentos desta function (ou seja, dentro dos parênteses), coloque
“/cobaia”,_x, e fora dos parênteses, coloque + 2. Marque a opção Expression deste
campo, resultando em getProperty ("/cobaia", _x) + 2.

http://www.joaocarvalho.cjb.net - 5
 8) No Keyframe 3 adicione a ação Go To 2 (e marque a opção Go To and Play).
9) Teste o filme. Se tudo estiver como manda o figurino, o avião vai se mover do canto
esquerdo da tela para o canto direito, mas cuidado: Ele vai andar pra sempre, mesmo que
ultrapasse os limites da tela.
CONCLUSÃO DO EXERCÍCIO
• Functions são pedaços de código reutilizável que nos retornam um valor qualquer. Por
exemplo, supondo que a instância Cobaia se encontra na posição 30,200 (x,y) da tela, o
resultado da function getProperty(“Cobaia”, _x) será 30.
• Utilizamos o Go To no terceiro Keyframe para fazer com que o filme retorne sempre ao
Keyframe onde se encontra a ação de setProperty, fazendo com que a execução do
comando aconteça sempre, repetidas vezes.
• Durante a escrita de qualquer comando que utiliza um Target, podemos, em vez de
escrever o nome do Target, utilizar o botão que marca o alvo (aquele que tem o formato
de uma mira azul, na janela das ações) para colocar o nome do alvo. Mas lembre-se:
Target em qualquer Expression deve vir entre aspas.
CONTINUAÇÃO DO EXERCÍCIO
Faça o avião andar também para baixo, enquanto se movimenta para a direita. Utilize,
para isso, a ação setProperty para _x e _y. A ação Go To garantirá a repetição contínua das
ações colocadas no segundo Keyframe.

EXERCÍCIO 4 – USANDO CONDIÇÕES COM IF

1) Utilize o mesmo exercício anterior (o mesmo arquivo já pronto e já com as ações devidas).
2) Vá ao Menu Modify e solicite a opção Movie para alterar as propriedades do filme.
Coloque, nas dimensões do Stage, 770 pixels de largura (Width) e 440 pixels de altura
(Height).
3) Utilizando o Painel Info (Window / Panels / Info), coloque o avião na posição 50,50 do
Stage. (cuidado para não colocar esta informação no campo de largura e altura).
4) Utilizando a mesma linha do tempo anterior, exclua as ações existentes no segundo
Keyframe e mantenha a ação de Go To no terceiro.
5) No segundo Keyframe, coloque uma ação chamada If (se). Dentro da condição solicitada
pela ação em questão coloque, position < 700, o comando deve resultar na seguinte tela:

6) Insira, dentro da ação if, uma ação setProperty para a Propriedade _x do Target
Cobaia, para que ela tenha o valor, em Expression de Cobaia._x +10. Atenção: utilizar
a sintaxe Alvo.Propriedade é a mesma coisa que usar getProperty( “Propriedade”,
Alvo).
7) Insira uma ação chamada set variable (para definir o valor de uma variável) cuja variável
será position e o seu valor será Cobaia._x (em Expression).
Nota: Todas as vezes que definimos um valor de uma variável como sendo um texto, algo literal,
ou seja, que irá aparecer exatamente como escrevemos, não utilizamos Expression. Para todos
os outros casos, como números e referências a outras variáveis e propriedades, devemos utilizar
o modo Expression. No nome da variável normalmente não colocamos em Expression.

6 - João Antonio Carvalho – Flash 5 Avançado

 8) Insira uma ação else que fará com que as chaves do if se dividam. Logo após o else,
insira a ação setProperty para o target Cobaia, com a propriedade _x em valor 50
(Expression).
9) Insira, ainda dentro do else, uma ação set variable para a variável position ter valor 50.
O resultado deve ser como mostrado na figura abaixo:

10) Teste o filme e veja o resultado, o avião voltará ao início do movimento quando sua
posição horizontal atingir 700 pixels em relação à borda esquerda do Stage.
CONCLUSÃO DO EXERCÍCIO
• Utilizamos o if para gerar um momento de decisão para o Flash durante a execução do
filme. Podemos inserir diversos comandos dentro do if, ou seja, associado à sua condição
verdadeira. Podemos, também, inserir diversas condições contrárias, através das ações de
else if e else, criando assim, um emaranhado de decisões e opções a serem tomadas.
• Variáveis são pequenas caixas onde podemos colocar valores. Variáveis são recursos
muito importantes para a programação, sem elas, por exemplo, não poderíamos
armazenar valores durante a execução de um programa. A variável, no flash, pode ser
definida pela ação set variable, e através desta mesma ação, ter seu valor alterado.
• Uma variável estará valendo desde o momento em que foi definida pela primeira vez até o
fim da execução do filme e vale somente na linha do tempo onde foi definida. Isso
significa que, se uma variável for definida dentro da linha do tempo de um Movie Clip, só
terá validade dentro deste, e para ser acessada de fora do mesmo, deve-se ter o cuidado
de indicar o caminho completo, como /Cobaia/Giro (seria a variável Giro dentro da
instância Cobaia).
• No comando anterior, o if está testando se a variável position tem seu valor menor que
700. Caso isso seja verdadeiro, acrescente 10 à propriedade _x da instância Cobaia e
defina o valor da variável position como sendo igual ao valor desta propriedade. Se o
valor encontrado para position não for menor que 700 defina-as como 50 (fazendo o
avião voltar à posição inicial).
CONTINUAÇÃO DO EXERCÍCIO
Faça com que o avião dependa da posição vertical, ou seja, faça o mesmo andar para o
lado e para baixo ao mesmo tempo (constituindo um movimento em diagonal) e faça-o voltar
à posição inicial quando chegar à base da tela (extremidade inferior). Defina os números
iniciais e finais do movimento do avião.

EXERCÍCIO 5 - DUPLICANDO MOVIE CLIPS

1) Com um arquivo novo, solicite o Movie Clip do peixe, na Common Library dos Movie
Clips. Coloque o nome da instance de Peixe. Coloque-o exatamente na posição 200,50
(conseguido através do Panel Info).
2) Altere as propriedades do filme (em Modify / Movie) e defina suas dimensões em 770 de
largura (Width) por 440 de altura (Height).
3) Crie um Frame na posição 3 da timeline e renomeie a Layer 1 para Peixe.

http://www.joaocarvalho.cjb.net - 7
 4) Crie uma nova Layer e crie um Keyframe na posição 2 e um Keyframe na posição 3
desta nova Layer. Renomeie a nova Layer para actions.
5) Coloque, no Keyframe 3 da Layer Actions, uma ação Stop.
6) No segundo Keyframe da Layer Actions, coloque uma ação chamada
duplicateMovieClip. No campo Target, informe /Peixe, no campo New Name informe
peixe1, e em Depth, informe o valor 1. Verifique a figura abaixo para comparar:

7) Teste o filme e veja que, em vez de um único peixe, existem dois, que apresentam uma
diferença muito pequena em relação aos movimentos.
8) Ainda com o mesmo arquivo, tentemos o seguinte: Arraste os dois últimos Keyframes da
Layer Actions para a posição 10, crie um frame na layer Peixe de forma a coincidir com
o final da Layer Actions. Ficará assim:

9) Teste o Filme e veja a diferença entre os dois Movie Clips, o original, que fica por baixo e
está mais adiantado e a cópia, que fica à frente e está um pouco mais atrasado.
10) Mudando ainda o caso, no segundo Keyframe da Layer Actions, abaixo da ação
duplicateMovieClip, coloque a ação setPorperty para mudar o _x do Peixe1 para 400.
Utilize uma segunda ação setProperty para alterar o _y do Peixe1 para 200. O resultado
é o que aparece na próxima figura. Após isto, Teste o filme.

8 - João Antonio Carvalho – Flash 5 Avançado

CONCLUSÃO DO EXERCÍCIO
• A ação duplicateMovieClip cria uma cópia de uma instância no mesmo local onde ela se
encontrava (_x, _y) no momento do comando. A ação solicita o Target que será copiado, o
New Name (nome da nova instância) e o Depth, que é a “profundidade” da cópia em relação
à instância. Quanto maior o Depth, mais à frente estará a cópia. Não é necessário seguir
nenhuma ordem no Depth, ou seja, podemos colocar uma duplicata no depth 4 sem ter que
passar pelos anteriores. Cada Depth pode conter apenas uma cópia, ou seja, se tentarmos
atribuir uma cópia a um depth que já possuía algo, este será substituído pelo novo conteúdo.
• Podemos alterar as propriedades de qualquer cópia de Movie Clip, visto que esta receberá um
nome no momento da ação duplicateMovieClip. Portanto, é possível alterar as características
de qualquer cópia, desde que se saiba o nome correto.
CONCLUSÃO DO EXERCÍCIO
Agora é a sua vez! Tente fazer mais de uma cópia. Crie 3 cópias em tempos diferentes,
fazendo com que sua tela fique com 4 peixes em movimentos diferentes. Dica: Vai ser necessário
usar mais do que apenas 10 frames. Boa Sorte!

EXERCÍCIO 6 - APARIÇÕES ALEATÓRIAS

1) Utilizando o mesmo exercício anterior, clique no Keyframe 9, onde estão localizadas as
ações que duplicam o movie clip. Arraste este Keyframe para a posição 2 da linha do
tempo.
2) Altere a ação que existe no Keyframe 10 (Stop) para gotoAndPlay (2). Isso irá fazer
com que o filme chegue ao final e retorne automaticamente ao segundo frame.
3) No Keyframe 2, clique na primeira ação e adicione uma ação de set variable, onde a
variável index vai ter o valor random(10)+1. Esse random vai ser encontrado nas
functions, no botão de adicionar ação. Arraste esta nova ação para antes da primeira,
fazendo-a aparecer antes de todas.
Nota: A função random(x) escolhe, aleatoriamente, um número entre 0 (zero) e x-1. Por
exemplo, se escrevermos a função random(3), nossa resposta pode ser: 0, 1, 2.
Nota 2: Quando somamos valores à função random, estamos restringindo os valores de
resposta, como em random(5)+2, que pode apresentar apenas: 2, 3, 4, 5, 6.
4) Na ação duplicateMovieClip, que já existia no exercício anterior, altere o New Name
para “peixe” + index, e coloque Expression. No Depth, coloque index.
5) Nas ações de setProperty posteriores, altere o target, de peixe1 para “peixe” + index,
e coloque Expression em ambos os target. Ainda nestas ações, altere os Value para
random(550) na ação que altera o _x e random(400) na ação que altera o _y. Marque
Expression nos dois Values. Verifique na tela abaixo o resultado.

6) Teste e veja um montão de peixes aparecendo e desaparecendo aleatoriamente.

http://www.joaocarvalho.cjb.net - 9
 CONCLUSÃO DO EXERCÍCIO
• Utilizamos a função random() para obter resultados aleatórios dentro de uma faixa de
valores.
• Podemos utilizar o random como parte do valor de qualquer campo que permita a opção
Expression, como um target, ou o novo nome de uma instância copiada.
• “peixe” + index significará peixe3 caso a variável index tenha valor 3.
CONTINUAÇÃO DO EXERCÍCIO
Agora faça o seguinte: Faça com que possa haver até um máximo de 20 peixes, e que não
só apareçam em locais diferentes, mas que também nadem com inclinações diferentes (e
agora?) Dica: faça que haja até 20 Depths, e depois disso, altere _rotation para um valor
aleatório entre 0 e 360º. Agora está fácil!

EXERCÍCIO 7 – ARRASTANDO INSTÂNCIAS

1) Desenhe uma “janela” como as de um Sistema Operacional. Depois de terminado o
desenho, agrupe os objetos.
2) Crie um retângulo, mais ou menos do tamanho da Barra de título da sua janela recém-
criada. Selecione-o e transforme-o num símbolo Button (através do comando Insert /
Convert to Symbol). Dê a ele o nome de Invisível.
3) Dê um clique duplo no símbolo que você acabou de criar, para entrar na área de edição do
mesmo. Arraste o Keyframe Up para a posição do Keyframe Hit. Fazendo com que o
botão não apresente conteúdo nos três primeiros frames, apenas no último. Verifique isso
na figura abaixo:

4) Volte ao Stage e clique com o botão direito do mouse no botão para poder solicitar a
janela das Actions.
5) Dentro da janela de Actions, solicite a action startDrag. Aponte para o target chamado
/janela (não se preocupe, eu sei que ele não existe – ainda). Não esqueça de associar
esta ação ao evento de On Press, e não On Release como está atualmente. Clique nas
chaves que fecham este evento (terceira linha) e mande adicionar uma ação stopDrag
associada ao evento On Release.
6) Feche a janela das ações, ou minimize-a. Selecione todos os objetos (o botão invisível e o
grupo de objetos que forma a janela). Transforme-os em um Símbolo Movie Clip através
do comando Insert / Convert to Symbol. Coloque-lhe o nome de Janela.
7) No Panel Instance, coloque-lhe o nome de instância de janela. (Pronto, aqui está ela, a
instância que nos referenciamos no botão invisível).
8) Teste o filme e tente arrastar a janela pela barra de título.
CONCLUSÃO DO EXERCÍCIO
• Para se arrastar algum Movie Clip no Flash, deve-se criar um botão, dentro deste Movie
Clip, que execute a ação startDrag na instância onde ele estiver, associada ao evento de
Press (segurar o botão do mouse). Para que se solte, usamos, no mesmo botão, a ação
stopDrag associada ao evento de Release (soltar o botão do mouse).
• É possível, para criarmos algo mais geral, que possa ser reutilizado em outras instâncias
de janelas, usar o Target .. (ponto ponto) indicando assim, que o alvo a ser arrastado é
a linha do tempo que possui o botão em questão.

10 - João Antonio Carvalho – Flash 5 Avançado

CONTINUAÇÃO DO EXERCÍCIO
Agora crie três janelas diferentes, completamente independentes entre si. Dica: têm que
ser três símbolos diferentes.

EXERCÍCIO 8 – NEVE CAINDO (Exemplo no site)

1) Crie uma bolinha branca bem pequena e transforme-a num gráfico (este exercício funciona
melhor com um filme que tenha fundo escuro).
2) Ainda estando no Palco (Stage), clique na bola branca recém transformada em Graphic e
transforme-a num Movie Clip (isso fará com que a bolinha seja um Graphic dentro de um
Movie Clip) permitindo o uso de Tweening Motion dentro do Clip.
3) Dê a esse Movie Clip o nome de instância de Snow. Renomeie a Layer 1 para Neve.
4) Crie um Frame na posição 3 da Timeline e crie uma nova layer. Chame-a de actions.
5) Na Layer Actions, crie um Keyframe na posição 2 e outro na posição 3, o resultado é o
seguinte:

6) Clique duas vezes na instância Snow para editar sua linha do tempo na Library, crie um
movimento de queda em quatro pontos:
Keyframe 1: Ponto mais alto, Alpha do Graphic: 0%
Keyframe 10: Descer pouco, Alpha do Graphic: 90%
Keyframe 40: Descer muito, Alpha do Graphic: 90%
Keyframe 50: Descer pouco, Alpha do Graphic: 0% (colocar Action de Stop)
O resultado da linha do tempo do Movie Clip pode ser visto abaixo:

7) Volte à sua linha do tempo principal (clicando apenas no botão Scene 1) e adicione as
seguintes ações aos seguintes Keyframes:
Keyframe 1: Coloque set variable index com valor 1 (O resultado, na tela é index = 1).
Keyframe 2: É onde as ações propriamente ditas estarão. Coloque o código abaixo (mas é
muito importante para o seu aprendizado que você consiga entendê-lo. Tente compreender o
código antes de inserí-lo):
duplicateMovieClip ("/snow", "snow"+index, index);
setProperty ("snow"+index, _x, random (770));
setProperty ("snow"+index, _y, random (5));

http://www.joaocarvalho.cjb.net - 11
 tamanho = random (80) + 60;
setProperty ("snow"+index, _xscale, tamanho);
setProperty ("snow"+index, _yscale, tamanho);
index = index+1;
Keyframe 3: Coloque o seguinte código:
if (index<60) {
gotoAndPlay (2);
} else {
index = 1;
gotoAndPlay (2);
}
8) Teste o filme e verifique o resultado. Teremos flocos de neve por todo o filme (tomando-se
por base um Stage de 770 pixels de largura).
9) Você ainda pode tornar o efeito mais realista, editando o symbol da bolinha branca na
Library e colocando-lhe um degradê do Branco Central para o Branco Periférico com
Alpha 0%. Este efeito pode ser visto em meu Site, na seção FLASH – EXEMPLOS. Veja
uma imagem do arquivo funcionando:

10) Agora começa a parte BOA! Antes de passar para a Conclusão do Exercício, responda a
algumas perguntas:
a. Quantos flocos de neve, no máximo, poderão estar simultaneamente na tela?
b. Os flocos de neve copiados do original poderão aparecer na posição 10,20? Por quê?
c. Explique o que faz: duplicateMovieClip ("/snow", "snow"+index, index);
d. Uma cópia pode ser criada com 50% da largura do objeto original? Por quê?
e. A cópia chamada Snow100 estará acima ou abaixo da cópia Snow99?

CONCLUSÃO DO EXERCÍCIO
• No primeiro Keyframe, setamos uma variável chamada index para ter o valor 1.
• O código presente no segundo Keyframe parece ser meio louco, mas é fácil de entender,
como poderemos ver a seguir:

duplicateMovieClip ("/snow", "snow"+index, index);

Esta linha duplica o Movie Clip Snow (na raiz do filme) para que sua cópia tenha um
nome SnowX (onde X é um número, adquirido da variável index, que também origina
o Depht da nova cópia). Por exemplo, se a variável index for igual a 34, a cópia será
Snow34 presente no depht 34.

setProperty ("snow"+index, _x, random (770));

setProperty ("snow"+index, _y, random (5));

Estas duas linhas atribuem, respectivamente, valores aleatórios entre 0 e 769 para a
propriedade _x e entre 0 e 4 para a propriedade _y do alvo denominado snowX (onde
X é o valor da variável index). Isso faz com que as cópias não apareçam no mesmo
local que a original, apresentando-se por toda a extensão horizontal do Stage.

12 - João Antonio Carvalho – Flash 5 Avançado

 tamanho = random (80) + 60;

Esta linha atribui à variável tamanho um valor entre 60 e 139, pois a primeira parte
desta expressão permite obter um valor aleatório entre 0 e 79, que depois será somado
com o número 60.

setProperty ("snow"+index, _xscale, tamanho);

setProperty ("snow"+index, _yscale, tamanho);

Estas duas linhas atribuem, respectivamente, às propriedades _xscale (percentual de

escala horizontal) e _yscale (percentual de escala vertical) do alvo snowX, o valor
conseguido na variável tamanho. Por exemplo, se tamanho for 80, o alvo em questão
reduzir-se-á a 80% do tamanho atual, tanto na vertical como na horizontal. Isso
garante que as cópias não terão, necessariamente, o mesmo tamanho.

index = index+1;

Esta linha incrementa em 1 o valor da variável index. Por exemplo, se, até aqui, a
variável index possuía valor 8, passará a ter o valor 9.

• No terceiro Keyframe o código é bastante simples de entender:

if (index<60) {
gotoAndPlay (2);
} else {
index = 1;
gotoAndPlay (2);
}

Quando o Flash chegar a esse Keyframe, vai verificar se a variável index é menor que
60, se SIM, retorna ao Keyframe 2 para executar as ações novamente. Se a variável
index NÃO for menor que 60, ou seja, se atingir o valor 60, voltará a ser 1, e o Flash
então se dirige ao Keyframe 2 para executar as ações novamente, só que começará a
contar os SnowX e Dephts a partir de 1 novamente. Isso garante que não haverá
mais de 60 cópias simultâneas na tela.

CONTINUAÇÃO DO EXERCÍCIO
Utilize a mesma idéia do exercício anterior para criar um ambiente cheio de vaga-lumes
(que, na verdade, serão apenas pequenas luzes que aparecem e somem) que aparecem
aleatoriamente por toda a extensão do Stage.

EXERCÍCIO 9 – SIMULAÇÃO DE FOGO (Exemplo no site)

1) A simulação de fogo utiliza quase as mesmas configurações do exercício anterior para
obter o resultado esperado. Antes de começar, visite http://www.joaocarvalho.cjb.net na
seção FLASH/EXEMPLOS e localize o exemplo do fogo para ver o resultado.
2) Desenhe um círculo branco pequeno no Stage. (Para este efeito ficar mais realista, é
preferível usar um círculo com Gradiente radial, cuja cor central é o Branco e a cor
periférica é o Branco com Alpha 0%). Utilize o panel info para colocar o Movie Clip na
posição 385,215 (o centro da tela).
3) Configure o Stage para 770 pixels de largura por 430 pixels de altura.
4) Transforme este círculo em um symbol Graphic chamado chama, e, em seguida,
transforme-o em um Movie Clip chamado fogo. Coloque o nome de instância de fogo.

http://www.joaocarvalho.cjb.net - 13
 5) Clique duas vezes no Movie fogo para entrar na área de edição do mesmo. Configure a
linha do tempo para que assuma as características mostradas abaixo, tanto no tocante à
posição e formato dos círculos, como aos Effects apresentados:

Keyframe 20:
Alpha 0%

Keyframe 15:
Tint Vermelho 100%

Keyframe 10:
Tint Vermelho 100%

Keyframe 5:
Tint Laranja 100%

Keyframe 1:
Tint Amarelo 100%
6) Coloque uma ação de stop no último frame da animação.
7) Crie tweenings motion entre todos os Keyframes do movie clip, para que o movimento
fique completo. Teste se a animação está funcionando, voltando a Timeline principal e
solicitando CTRL+ENTER.
8) Agora vamos criar o ambiente para que o fogo se duplique e dê a impressão de chama
ativa mesmo. Deixe a linha do tempo como mostrada na figura (sei que não é necessário
explicar mais):

9) Coloque uma ação goTo 2 no terceiro frame para que o filme repita sucessivas vezes os
comandos que estarão presentes no segundo frame.
10) No primeiro frame, use o comando set variable para atribuir o valor 1 à variável index.
11) No segundo frame, crie o seguinte código:

if (index < 25) {

index = index + 1;
duplicateMovieClip ("_root.fogo", "fogo1", index);
setProperty ("_root.fogo", _x, 385 + random (8) - 5);
setProperty ("_root.fogo", _y, 210 + random (8) - 5);
} else {
gotoAndPlay (1);
}
Nota: a sintaxe _root.fogo é a mesma coisa que /fogo, ou seja, aponta para a instância
fogo no nível mais baixo, só que escrita com dots (pontos) em vez de slashes (barras).
12) Teste o filme e veja o resultado.

14 - João Antonio Carvalho – Flash 5 Avançado

 CONCLUSÃO DO EXERCÍCIO
• O comando setProperty ("_root.fogo", _x, 385 + random (8) - 5); faz com que o
Flash altere a propriedade _x do alvo fogo (no nível raiz) para um valor que está entre
380 e 388 (pelo random (8) – 5). O mesmo acontece com a propriedade _y, que, no
comando setProperty ("_root.fogo", _y, 210 + random (8) - 5); pode variar entre
205 e 213.
• A estrutura condicional if (index < 25) {...} else {...} faz com que o Flash execute os
comandos do If se a propriedade index estiver com um valor menor que 25, garantindo
que este é o número máximo de chamas solitárias que aparecem simultaneamente na tela.
Caso a variável index atinja o valor 25, o filme retornará para o frame 1, iniciando
novamente o ciclo.

CONTINUAÇÃO DO EXERCÍCIO
Tente, com uma estrutura parecida com o exercício anterior, criar uma simulação de água
jorrando de uma fonte, ou de um chafariz... A imaginação é sua, mas tem que ser bem
parecida com uma fonte mesmo!

EXERCÍCIO 10 – CARACOL (Exemplo no site)

1) Desenhe um círculo utilizando um efeito de gradiente radial. Altere o centro deste
Gradiente para que ele não coincida com o centro do objeto e retire-lhe a linha de contorno
(Stroke), o resultado fica como podemos ver abaixo:

2) Transforme o objeto em um Movie Clip e coloque-lhe o nome de instância de caracol.

3) Entre na área de edição do Symbol através do duplo clique na instância e arraste a esfera
para o lado esquerdo, para fazer com que a posição da bola NÃO coincida com o centro do
Symbol (chamado de Registration Point) onde ela está inserida. Verifique na figura
abaixo:

Registration Point
(Centro do Symbol)

4) Volte à cena e, novamente, crie a estrutura de frames que utilizamos na maioria dos
exercícios:

5) No primeiro Keyframe, atribua o valor 1 à variável Index.

6) No terceiro Keyframe, faça o filme retornar ao Keyframe 2 repetidas vezes.
7) No segundo Keyframe, coloque o seguinte código:

if (index < 300) {

setProperty ("caracol", _rotation, caracol._rotation + 8);
setProperty ("caracol", _xscale, caracol._xscale - 3);
setProperty ("caracol", _yscale, caracol._yscale - 3);
http://www.joaocarvalho.cjb.net - 15
 duplicateMovieClip ("caracol", "caracopia”, index);
index = index + 1;
}

8) Teste o filme e veja o resultado.

CONCLUSÃO DO EXERCÍCIO
• O comando setProperty ("caracol", _rotation, caracol._rotation + 8); realiza, a cada
execução, um incremento de 8 graus no ângulo de rotação do alvo caracol.
• Os comandos seguintes decrementam os percentuais de escala horizontal e vertical em 3
pixels, o que o fará diminuir até 0. Se isto acontecer, tornando os valores negativos, o
caracol começará a crescer de forma invertida (rodando no sentido inverso).
• O comando duplicateMovieClip ("caracol", "caracopia”, index); cria cópias do alvo
caracol com um único nome (caracopia) e em dephts diferentes, indicados pela variável
index. A única desvantagem de se criar várias cópias com o mesmo nome reside no fato
de as cópias não poderem ter suas propriedades alteradas individualmente, o que não é
necessário neste exemplo (mas foi necessário no exemplo da NEVE).

CONTINUAÇÃO DO EXERCÍCIO
O nosso caracol aumenta de tamanho em uma progressão aritmética (tendo se tamanho
diminuído em 3 pontos a cada execução do comando). O desafio agora é: Criar uma espiral
que não aumente de tamanho de forma regular, mas que a cada passada ela aumente mais e
mais, como em uma aceleração. Para ser mais claro, vamos supor, na primeira passagem, ele
aumentou 3 pontos, na segunda, aumentou 7 pontos, na terceira, aumentou 11 pontos, e
assim por diante.

EXERCÍCIO 11 – DYNAMIC E INPUT TEXT FIELDS

1) Crie um novo arquivo e defina o tamanho do stage para 770 por 430 pixels (X,Y).
2) Crie, com a ferramenta de texto, um campo de texto, com a fonte VERDANA, em
tamanho 20 e Negrito, com o parágrafo centralizado, na cor preta, e escreva TESTANDO
TEXT OPTIONS.
3) Copie este texto para duas outras linhas abaixo, pintando a segunda linha de azul e a
terceira linha de vermelho, o resultado é o seguinte:

4) Clique na segunda linha e, no Panel Text Options, selecione, em vez de Static Text, a
opção Input text. Associe este novo campo de texto à variável mensagem. Não esqueça
de marcar a opção Border/BG
5) No terceiro campo de texto, selecione a opção Dynamic Text, associando também este
campo à variável mensagem. Desmarque a opção Border/BG neste campo.
6) Teste o Filme e, durante a execução do mesmo, ainda na área de teste, clique sobre a
segunda linha, apague seu conteúdo e escreva qualquer coisa... Note que o valor que você
digita é atribuído automaticamente ao terceiro campo, o qual não pode ser alterado
diretamente. Verifique, na figura seguinte, que podemos selecionar o texto de ambos os
campos, porque mantivemos a opção Selectable marcada na guia Text Options.

16 - João Antonio Carvalho – Flash 5 Avançado

 Texto no campo Static Text serve
com Input Text e apenas para
Border/BG ilustrar o filme.

Texto selecionado
no campo com
Dynamic Text

Nota: Vamos aproveitar para conhecer um pouquinho a guia Text Options que é muito
importante para os programadores em Flash.
Static Text: texto simples, apenas ilustrativo.
Dynamic Text: texto associado a uma variável e que
não pode ser alterado em tempo de execução pelo
usuário que assiste ao filme.
Input Text: texto que pode ser alterado pelo usuário
no momento da execução do filme.
Single Line: Uma única linha.
Multiline: Várias linhas, mas para que a passagem de
linhas seja automática, deve-se marcar a opção
Wordwrap.
Border/BG: Exibe a borda e o fundo do text field.
Variable: Indica a que variável o campo de texto estará asociado.
Selectable: Indica que o texto do campo será selecionável (ou seja, o usuário poderá selecioná-lo
para copiar e colar em outros locais).
Embed Fonts: Indica quais os caracteres que terão o código de sua fonte anexado ao arquivo
SWF, para que o campo seja apresentado com suavização de serrilhado.

EXERCÍCIO 12 – OPERAÇÕES COM TEXTO E VARIÁVEIS

1) Crie a seguinte estrutura no seu Stage:

Input Text
Variável nome

Input Text
Variável tel
Botão

Dynamic Text
Variável mensagem
Sem Border/BG
Multiline com Wordwrap

2) Clique com o botão direito do mouse no Botão ENVIAR e solicite a janela das ações.
3) Coloque a seguinte ação no botão:
on (release) {
mensagem = "Oi, "+ nome +", seja bem vindo ao nosso site!";
}
4) Lembre-se que na ação set variable, o Value é em formato Expression. Escreva-o
exatamente como está no comando acima, com as aspas e tudo!
5) Teste o filme, escrevendo seu nome e telefone e clicando no botão enviar.

http://www.joaocarvalho.cjb.net - 17
EXERCÍCIO 13 – RECEBENDO VARIÁVEIS DE UM TXT
1) Utilize o Bloco de Notas do Windows para escrever o seguinte texto (o ENTER, como eu
usei pra separá-los aqui, pode ser utilizado antes dos &, e estes, próximos aos caracteres
seguintes):
mensagem1=Oi, estamos testando isso!
&mensagem2=Visite o site www.invasao.com.br
&mensagem3=não deixe de visitar www.joaocarvalho.cjb.net
2) Salve este arquivo como mensagens.txt no mesmo diretório onde está salvando os
arquivos FLA e SWF do curso.
3) Entre no Flash e crie um arquivo com a seguinte estrutura:

4) Cada retângulo branco mostrado acima é um Dynamic Text, associado a uma das três
variáveis a seguir: mensagem1, mensagem2 e mensagem3. Estes retângulos têm a
propriedade Multiline Wordwrap marcada.
5) No botão RECEBER, coloque a ação loadVariables, com a URL: mensagens.txt, o
Level 0 (zero) e Variables em Don’t Send.
6) Salve o arquivo no mesmo diretório dos outros (e onde salvou o arquivo .txt).
7) Teste o filme e Clique no botão.

CONCLUSÃO DO EXERCÍCIO
1. Quando utilizamos a ação loadVariables, estamos solicitando o carregamento de variáveis
de algum local para o nosso filme, ou de nosso filme para algum local, como é visto em
alguns formulários de envio de dados para páginas ASP e Scripts CGI.
2. Para receber as variáveis, é só marcar a última opção como Don’t Send, para ENVIAR os
dados de um formulário Flash para algum local, usamos, neste campo, uma das duas
opções, POST ou GET (duas maneiras diferentes de enviar variáveis). Atualmente, o mais
utilizado pelos Scripts da Internet é o POST e colocamos, no campo URL, o endereço para
localizar a página ou Script que receberá os dados.
3. Num arquivo de Texto, as variáveis devem ser listadas da seguinte forma nome=valor e
se o arquivo possuir mais de uma variável, deve-se separá-las por &.

EXERCÍCIO 14 – CÁLCULOS MATEMÁTICOS

1) Crie um novo arquivo no Flash com 770 pixels de largura por 430 pixels de altura.
2) Mesmo sem criar nada no Stage, Crie uma nova layer com o nome de Actions.
3) Solicite as ações do primeiro frame da layer actions e insira a ação set variable,
nomeando a variável soma.
4) No Value da ação, acione a opção Expression e insira uma Function chamada Number,
coloque então, nos parênteses, a letra a (sem aspas). Complete o Value com + Number
(b). O resultado é: soma = Number (a) + Number (b);
5) Repita a operação de criação de variáveis para mais 3 outras, listadas a seguir:
sub = Number (a) - Number (b);
mult = Number (a) * Number (b);
div = Number (a) / Number (b);

18 - João Antonio Carvalho – Flash 5 Avançado

 6) Agora com as nossas quatro variáveis construídas, construa, no Stage, o seguinte
ambiente de trabalho:

Dois Input Text, variáveis a

e b respectivamente

Quatro botões Dynamic Text

invisíveis Variável resultado
Sem Border/BG

7) Solicite as ações do primeiro botão, utilize um set variable para imprimir à variável
resultado o Value soma (em Expression). Esta ação informa ao Flash que a variável
resultado terá o mesmo valor que existe na variável soma. A ação do botão fica:
resultado = soma;
8) Altere as ações dos outros botões para que realizem, respectivamente, o seguinte:
resultado = sub;
resultado = mult;
resultado = div;
9) Teste o filme, escreva dois valores nos Input Text Fields e Escolha a operação
matemática desejada. Avalie o que aconteceu.
10) O que? Não aconteceu nada? Deu problema? Por que será? Esta é para você descobrir!
11) Explique, com suas palavras, porque a variável resultado não apresentou os valores das
somas:
___________________________________________________________________________

___________________________________________________________________________

___________________________________________________________________________

CONCLUSÃO DO EXERCÍCIO
• Utilizamos a Function Number por uma razão muito simples: Se usarmos dois Input Text
Fields e somarmos seus valores (a+b), o que acontecerá é uma concatenação do texto,
pois os dois valores dos Text Fields são interpretados como Textos, e não como Números.
• Por exemplo: se a=12 e b=15, o resultado de a+b será 1215 (string), enquanto que, se
usarmos Number(a) + Number(b), o resultado será, como esperado, o número 27.

CONTINUAÇÃO DO EXERCÍCIO
Corrija o erro detectado na nossa calculadora simples e faça-a funcionar, sem mexer na
estrutura dos objetos, apenas alterando a programação.

EXERCÍCIO 15 – RELÓGIO ANALÓGICO (Exemplo no site)

1) Solicite um arquivo novo, com 300 X 300 pixels.
2) Desenhe um círculo perfeito (enquanto arrasta, mantenha
pressionada a tecla SHIFT).
3) Com a ajuda de 6 linhas retas de comprimento maior que o
diâmetro do círculo, divida-o em 12 partes iguais (exatamente
onde ficam as horas).
4) Corte as linhas para que apenas sobre um pequeno traço em
cada extremidade, próximo à circunferência do relógio. É
preferível agrupar os objetos para que eles não se cortem nem
se fundam. Alinhe o nosso relógio ao centro do Stage. Veja
como deve ficar:

http://www.joaocarvalho.cjb.net - 19
 5) Crie uma nova layer no filme e chame-a de ponteiros, nela crie um retângulo fino e uma
linha reta, ambos na vertical, para fazermos os ponteiros do relógio (eu sei que o relógio
tem três ponteiros, calma!).
6) Selecione a linha reta de transforme-a em símbolo do tipo Movie Clip. Dê-lhe o nome de
instância de ps.
7) Selecione o retângulo e transforme-o em símbolo do tipo Movie Clip. Dê o nome de
instância de pm.
8) Copie a instância pm ou retire outra idêntica da Library e chame-a de ph.
9) Para que haja um movimento perfeito por parte dos ponteiros, faça o seguinte: edite o
símbolo do ponteiro dos segundos, arrastando o ponteiro para cima do registration
point, o centro do símbolo. Faça o mesmo com o ponteiro do retângulo. O resultado deve
ser o seguinte:

Corpo do ponteiro
Girará no decorrer das
horas se passando.

Registration Point
Ponto central do símbolo, durante
um movimento de rotação, este
ponto permanecerá intacto.

10) Coloque os três ponteiros sobrepostos, coincidindo o registration point com o centro do
“corpo do relógio”, que havíamos feito anteriormente, e apontando para o local do número
12 (início das contagens).
11) Estenda a linha do tempo das duas layers para a posição 3 (F5). Crie uma nova layer
chamada Actions e crie duas Keyframes, uma na posição 2 e a outra na posição 3.
12) Na Keyframe da posição 3 coloque a ação gotoAndPlay (2); para voltar à segunda
Keyframe (para variar, não é?).
13) Na segunda Keyframe, coloque o seguinte código:
hora = new Date();
setProperty ("ps", _rotation, hora.getSeconds() * 6);
setProperty ("pm", _rotation, hora.getMinutes() * 6);
setProperty ("ph", _rotation, hora.getHours() * 30);
14) Salve o arquivo e teste o filme. Você verá que o relógio apontará automaticamente para o
horário apresentado no relógio do seu sistema.
15) Verifique que o ponteiro das horas não vai se aproximando gradativamente do próximo
estágio a cada minuto que passa, por exemplo, ajuste o horário do windows para 9:59:00
e aguarde um minuto, veja que o ponteiro das horas será “jogado” bruscamente da
posição das 9 horas para as 10.

CONCLUSÃO DO EXERCÍCIO
• Quando executamos um setVariable para uma classe (como new Date(), ou new
Array()), estamos criando um novo objeto baseado nas características daquela classe. É o
caso do nosso objeto hora que tem as propriedades da classe Date().
• Visite o anexo para saber mais sobre Classes, métodos e objetos.
• Citados nas últimas linhas, os métodos .getSeconds(), getMinutes() e getHours()
realizam exatamente o que os nomes propõem, “pegar” os segundos, minutos e horas,
respectivamente, do objeto hora, que é do tipo Date(). Ainda existem outros métodos,
como getFullYear(), getDay(), getMiliSeconds(), entre outros...

CONTINUAÇÃO DO EXERCÍCIO
Tente, sozinho, criar o código que permitirá ao ponteiro das horas alterar a cada 15
minutos a sua rotação. Lembre-se que, por exemplo, quando o ponteiro dos minutos estiver
em 30, o ponteiro das horas andou duas “casas” em minutos (12°) em relação à sua posição.

20 - João Antonio Carvalho – Flash 5 Avançado

EXERCÍCIO 16 – ARRAYS (MATRIZES)
1) Crie, num novo filme de dimensões 770 x 430, com Background branco, a seguinte
estrutura:

Botão 2
Botão 1

Dynamic Text
Variável mostralista

Botão 3

Input Text
Dynamic Text Variável digitado
Variável mensagem

2) Como você pode ver, os botões são, na verdade, três instâncias diferentes de um mesmo
símbolo (se você quiser colocar três botões diferentes, sinta-se à vontade). Numerei-os
para que fique mais fácil fazer referências aos códigos contidos neles.
3) Crie uma nova layer com o nome actions, coloque o seguinte código na primeira frame
desta layer:

lista = new Array();

lista.push("Sport");
lista.push("Palmeiras");
lista.push("São Paulo");
lista.push("São Caetano");
lista.push("Vasco");
lista.push("Íbis");
a = -1;

4) No evento release() do botão 3, coloque a seguinte seqüência de ações:

lista.push(digitado);
mensagem = "";

5) No botão 1, no evento de release(), adicione as ações a seguir:

if (a > 0) {
a = a - 1;
mostralista = lista[a];
mensagem = "";
} else {
mensagem = "Início da listagem";
}

http://www.joaocarvalho.cjb.net - 21
 6) No botão 2, também no evento release(), coloque as ações abaixo, todas elas serão
explicadas detalhadamente na conclusão do exercício.

if (a < lista.length - 1) {
a = a + 1;
mostralista = lista[a];
mensagem = "";
} else {
mensagem = "Fim da listagem";
}

7) Salve o arquivo e teste o filme. Clique nos botões 1 e 2 para navegar entre os itens da
listagem, e escreva algo no campo para inseri-lo com o botão 3.

CONCLUSÃO DO EXERCÍCIO
• Quando associamos a uma variável a ação new Array(), estamos criando uma listagem
de valores dentro desta variável, como aconteceu em lista = new Array();, na primeira
frame. Criamos uma listagem chamada lista.
• O método .push é responsável por incluir um valor na próxima posição vazia da listagem
em questão. Como em lista.push(“Sport”).
• Quando inserimos valores em um Array, eles começam em 0 (zero) e vão até n-1 (onde n
é a quantidade de valores que foram inseridos). Por exemplo, o valor contido em lista[1]
é Palmeiras, e em lista[4] é Vasco. Nos referenciamos aos itens de um Array através
do nome do Array seguido do índice do valor entre colchetes.
• A propriedade .length do objeto Array é responsável por contar a quantidade de itens de
uma listagem. Por exemplo, lista.length é igual a 6 (pois, no nosso exemplo, apresenta 6
itens).
• Não colocamos Santa Cruz e Náutico porque, como você pode notar, esta é uma listagem
de times de futebol, e os referidos exemplos de mau gosto não chegam a ser considerados
times de futebol (eh eh eh eh, brincadeira de rubro-negro).

EXERCÍCIO 17 – USANDO A ESTRUTURA DE REPETIÇÃO FOR

1) Usando o mesmo exercício anterior, vamos construir uma estrutura que proíba a inclusão
de valores que já existam na listagem.
2) No evento release() do botão 3, apague o código existente e troque-o pelo que segue:
for (index=0; index<lista.length; index++) {
if (lista[index] == digitado) {
mensagem = "O valor " + digitado + " já está na posição " + index;
achou = true;
index = lista.length;
} else {
achou = false;
}
}
if (not achou) {
lista.push(digitado);
mensagem = "";
achou = true;
}

22 - João Antonio Carvalho – Flash 5 Avançado

 3) Teste o filme e veja o resultado da tentativa de inserir um item que já existe.

CONCLUSÃO DO EXERCÍCIO
• O Laço FOR é usado para a realização de diversas ações em seqüência, baseadas em um
índice, normalmente numérico. É escrito da seguinte forma for (início, condição,
incremento). Onde início é o valor inicial do índice, a condição é testada em todas as
vezes que laço vai repetir e o incremento é o valor aumentado do índice a cada
passagem.
• Por exemplo, no nosso caso, o for (index=0, index<lista.length, index++) faz com
que o nosso contador (index), inicie no valor 0 (zero), seja incrementado de 1 (index++) e
a condição de funcionamento do laço é que o valor de index seja menor que o número de
itens da Array lista (index<lista.length).
• Quando o Flash estiver realizando o laço for, todos os valores que apresentarem referência
a index, serão substituídos pelo valor atual deste indexador. Por exemplo, quando o for
estiver realizando sua primeira execução, o valor de index será 0 (zero), então, a linha
representada por if (lista[index] == digitado), na verdade terá valor if (lista[0] ==
digitado), e assim por diante, a cada retorno do laço, até que a condição não seja mais
satisfeita.
• O índice pode ter qualquer nome, usei index para ficar mais claro.
• O laço for é completamente executado antes do usuário ver a ação feita, ou seja, não
participamos das mudanças do que acontece no for, simplesmente vemos os resultado. Se
colocarmos um laço for num frame, o flash só irá passar para o próximo frame depois que
o laço tiver sido completamente realizado.
• A linha if (not achou) testa se a variável booleana achou está com valor falso. Verifique
que, no for do nosso código, existe um if que atribui os valores true ou false para a
variável em questão.
• Estudando o código acima, vemos que, no for, o programa procura saber se em alguma
das posições da listagem existe um valor igual ao que se está tentando inserir neste
momento, isso é visto em if (lista[index] == digitado), é claro que este teste será
realizado com cada posição da lista, uma a uma, por causa do laço for. Quando a
ocorrência de igualdade for detectada, a variável mensagem exibirá "O valor " +
digitado + " já está na posição " + index, que mostrará que o valor já existe e em que
posição ele se encontra. Além disso, o flash atribuirá o valor true à variável achou,
impossibilitando a inserção do valor que está no Input digitado. Por último, a variável
index passará a ter o valor lista.length, que fará com que o laço seja desfeito,
executando os próximos comandos depois do for (lembre-se que a condição para o for
continuar funcionando é que index seja menor que lista.length).
• Caso o Flash, dentro de todo o laço for, não encontre nenhuma ocorrência que seja igual
ao valor que está no campo digitado, ele simplesmente atribuirá o valor false à variável
achou.
• Por fim, quando o laço for estiver desfeito, ou seja, cessar sua execução, haverá um teste
para saber se a variável achou é falsa (em if (not achou)). Caso isto ocorra, o flash
permitirá a inclusão do valor digitado, como é visto em lista.push(digitado), além de
atribuir valor vazio à mensagem e true à variável achou.
• UFA!!! TERMINOU...

EXERCÍCIO 18 – CONSTRUINDO UMA FUNÇÃO

1) Vamos utilizar o mesmo arquivo do exercício anterior. Clique no primeiro frame da layer
actions e solicite as ações da mesma.
2) Clique na última linha das ações e solicite, no botão +, a ação Function, para construir o
seguinte código:
function upper (a) {
maiusculas = a.toUpperCase();
return maiusculas;
}
3) Nas ações do botão 3, vamos corrigir algumas linhas, para que o código seja exatamente o
seguinte:

http://www.joaocarvalho.cjb.net - 23
 on (release) {
for (index=0; index<lista.length; index++) {
if (lista[index] == upper(digitado)) {
mensagem = "O valor " + upper(digitado) + " já está na posição " + index;
achou = true;
index = lista.length;
} else {
achou = false;
}
}
if (not achou) {
lista.push( upper(digitado));
mensagem = "";
achou = true;
}
}

4) Teste o filme, tente inserir algum valor em minúsculas e veja o resultado dele quando
inserido na listagem.

CONCLUSÃO DO EXERCÍCIO
• Quando usamos a ação function, estamos solicitando ao Flash que crie uma função, que
é, na verdade, um pedaço de código que pode ser utilizado diversas vezes. Dentro de uma
function pode haver cálculos, estruturas condicionais, laços de repetição e tudo o mais
que há em qualquer parte do programa. Todas as variáveis declaradas dentro de uma
função só existem dentro da função, ou seja, não podem ser vistas nem referenciadas em
nenhuma parte do código fora da mesma.
• No código da função, criamos uma função chamada upper(), que solicita um valor (no
caso, dentro da função ele é conhecido como a). Para usarmos a função upper(), basta
solicitar seu nome em relação a qualquer texto, como em upper (“Joao”).
• O que a função upper faz? Ela recebe um valor (que, no exemplo acima, é “Joao”), utiliza
o método .toUpperCase() (que transforma caracteres para maiúsculas) e retorna o
resultado disso.
• Toda função tem que ter uma linha de return para indicar o resultado da função pedida.
• O resultado de upper (“Joao”) é JOAO.
• Podemos construir funções para não ter que escrever sempre o “Joao”.toUpperCase()
ou qualquer outra parte do código que irá se repetir muito em nosso filme.

CONTINUAÇÃO DO EXERCÍCIO
Construa, em um filme novo, uma função que soma quaisquer dois valores e outra função
que multiplica quaisquer dois valores. Dica: Na linha function soma(...), os valores devem vir
separados por vírgula.

EXERCÍCIO 19 – SMART CLIP

1) Crie um novo arquivo e nele crie um botão retangular, com um Dynamic Text em frente a
ele. A este Dynamic Text, associe a variável label, com texto centralizado, e alinhado ao
centro do botão. Desmarque a opção selectable do Campo de texto. Veja:

24 - João Antonio Carvalho – Flash 5 Avançado

2) Não é necessário escrever nada no Dynamic text.
3) Solicite as ações do botão, e selecione a ação getURL. Marque, em URL, a opção
expression e escreva, neste mesmo campo, a palavra pagina.
4) Volte ao palco e selecione os dois objetos, transformando-os em um Movie Clip.
5) Abra a biblioteca do arquivo, encontre o nome do seu recém criado Movie Clip e
selecione, com o botão direito do mouse, a opção Define Clip parameters. A janela que
irá aparecer é a seguinte:

6) Defina, usando o botão +, um valor para cada variável no seu Movie Clip (nós temos duas
neste exemplo, a variável label e a variável pagina).
7) Depois de clicar OK, note que o ícone do Movie Clip da biblioteca mudou, indicando que
este é agora um Smart Clip.
8) Arraste, da biblioteca, mais 2 diferentes instâncias deste mesmo Smart Clip. Coloque-as
lado a lado e clique, na segunda delas, com o botão direito do mouse, solicitando, em
panels, a opção Clip parameters. Com isso, você estará alterando apenas os parâmetros
daquela instância. O resultado pode ser visto na figura abaixo, temos três botões que
apontam para três diferentes URLs e apresentam três diferentes Rótulos. E todos eles são
instâncias de um mesmo símbolo (no Flash 4 era necessário criar três botões diferentes,
para obtermos o mesmo resultado).

9) O resultado, depois de ter alterado todos os labels e paginas solicitados, é visto na figura
a seguir:

http://www.joaocarvalho.cjb.net - 25
CONSIDERAÇÕES FINAIS
Este material teve por objetivo demonstrar o potencial do Flash 5 em matéria de
programação, e não o faz de maneira completa. Inúmeros exemplos podem (e devem) ser criados
a partir dos conhecimentos mostrados aqui, mas com iniciativa de cada um.
Não se prenda ao que aprendeu aqui, sem construir nada novo, afinal, os clientes irão
solicitar cada vez mais coisas novas, inventivas, diferentes e urgentes (ô raça!!!).
Qualquer dúvida a respeito deste material, ou qualquer correção que seja necessária, favor
entrar em contato comigo através do meu site (http://www.joaocarvalho.cjb.net), visitem
constantemente para baixarem alguns exemplos legais de efeitos em FLA.
Espero que este material seja de muita utilidade. Bom trabalho!

João Antonio Carvalho

Macromedia Authorized Instructor
Flash – Dreamweaver – Fireworks – Ultradev
Recife - PE

26 - João Antonio Carvalho – Flash 5 Avançado