Flash 5 - Avancado

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 da coloque uma ação chamada Keyframe Layer Actions, 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émcriada. 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 com Input Text e Border/BG

Static Text serve apenas para 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

Botão

Input Text Variável tel

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 invisíveis

Dynamic Text 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 Variável digitado

Dynamic Text 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