Então, qual é a boa?

Antes que você se empolgue, é melhor esclarecer que não vou mostrar aqui como criar animações 3D em tempo real - esse é um trabalho para alguém que saiba um pouquinho de matemática (ou seja, não eu). Meu assunto é apenas desenhar formas com linhas e deixar que o Flash "complete" a forma quando terminarmos.

Para clarificar ainda mais nosso objetivo: queremos poder começar sem nenhuma linha e, clicando em algum lugar da tela, desenhar uma série de linhas conectadas. Enquanto desenhamos, veremos um esboço de linha que segue o mouse. Quando acharmos que uma linha está posicionada corretamente, poderemos clicar o mouse para fixá-la em seu lugar e começar uma nova. Quando terminarmos, daremos Enter e veremos o Flash unir o fim da última linha ao início da primeira, fechando a figura.

Pontos e linhas

A técnica que usamos para unir dois pontos com uma linha não podia ser mais simples. Praticamente não envolve cálculos matemáticos. É por isso que gosto dela.

Começamos com um movie clip (chamado Line) que contém uma única linha diagonal hairline (você vai encontrar Hairline no painel Stroke). A característica mais importante dessa linha é que ela começa no ponto 0,0 e termina no ponto 100,100 (é só criar uma linha à mão e usar o painel Info para posicionar exatamente os pontos de início e final). Porque os pontos de início e final são significativos? Porque agora podemos usar "scale" para mudar à vontade sua largura e altura.

Por exemplo: queremos que nossa linha comece em 70,60 e termine em 150,240. Posicionamos então o ponto de início de nosso movie clip Line em 70,60 e o redimensionamos para encaixar. Subtraindo os valores iniciais e finais das coordenadas x e y, temos 150 - 70 = 80 e 240 - 60 = 180. A escala opera com percentagens, o que é muito conveniente: 100 é o tamanho normal, 50 é metade do tamanho, 200 é o dobro e assim por diante. Tudo o que precisamos fazer, então, é usar os valores que acabamos de calcular (80 e 180) para determinar os valores _xscale e _yscale de nossa linha e pronto! O ponto final está agora em 150,240. Simples!

Agora o código

O próximo passo de nossa tarefa é combinar essa técnica de desenho de linha que acabamos de usar com um pouco de código ActionScript, para que de fato aconteça alguma coisa. Para simplificar, coloquei todo o código em Object Actions de um movie clip chamado Control (para acessar o código, clique no movie clip Control, que está em 0,0 na linha do tempo principal. Em seguida, clique com o botão direito do mouse e escolha Actions, ou clique na seta azul no Instance Panel. Você vai ver que foram feitos inúmeros comentários para ajudá-lo a compreender o que exatamente cada parte do código faz.

No Flash 5, os movie clips podem ser programados para responder a certos "eventos" - usando onClipEvent() - e essa é a razão da existência do filme Control. O primeiro evento ao qual ele responde é Load, o que acontece só uma vez - quando o clip aparece pela primeira vez na linha do tempo - e é usado para tornar invisível o movie clip Line original, assim como para inicializar certas variáveis.

Criando uma linha

A parte seguinte do código, a mais longa, responde a um evento mouseUp - ou seja, entra em ação a cada vez que o usuário solta o botão do mouse. Isso porque a cada vez que o botão do mouse é solto, é porque vamos começar a desenhar uma linha nova.

A primeira coisa que essa seção do código faz é saber a posição atual do mouse - com as propriedades _xmouse e _ymouse - e armazenar essa informação nas variáveis origin_x e origin_y. Esse é o ponto de partida de nossa nova linha. Em seguida, vamos aumentar em uma unidade o número de linhas registrado pelo contador (number_lines) e usar o resultado obtido para gerar o Instance Name da nova linha (a palavra "line" mais o número armazenado em number_lines, ou seja, line1, line2...line10, line11 e assim por diante) e armazená-lo no nome da variável. Agora vamos de fato criar a nova linha, duplicando a original e usando name como Instance Name e number_lines para a profundidade (todo movie clip duplicado precisa de um valor único de "depth", que determina se ele é desenhado na frente ou atrás de outros movie clips duplicados).

A parte seguinte se refere ao posicionamento e manipulação da nova linha, conforme descrito na seção "Pontos e linhas". O primeiro passo é determinar o ponto de início da linha usando as coordenadas que capturamos antes (origin_x e origin_y). A seguir, determinamos a largura e altura da linha com scale, usando os valores que resultam de subtrair as coordenadas do ponto de início da linha das coordenadas da posição atual do mouse (_xmouse - origin_x) e (_ymouse - origin_y).

As últimas linhas desse código são usadas apenas quando a linha que acabou de ser criada é a primeira de uma forma. A variável line_active está lá simplesmente para nos dizer se isso é verdade ou não: se seu valor for igual a zero, trata-se da primeira linha, se for igual a um, não. Você vai ver que o "if" fica assim:

if (!line_active) {...

O ponto de exclamação (!) aqui é uma abreviação de "não", portanto isso significa: "se line_active não tem valor (ou seja, se é igual a zero), então execute as ações a seguir". O código que se segue estabelece que o valor de line_active é 1, para mostrar que agora estamos desenhando uma linha (e antes não estávamos) e também define as variáveis start_x e start_y para os mesmos valores de origin_x e origin_y. Vamos precisar dessas variáveis mais tarde.

Atualizando uma linha

O onClipEvent seguinte - mouseMove - responde, como é de se esperar, apenas quando o mouse é movido. Nós o utilizamos para atualizar a posição de nossa linha-esboço - a linha que segue o mouse - e que logicamente só precisa mudar quando a posição do mouse é alterada.

Antes de mais nada, usamos um "if" para ter certeza de que line_active é igual a um (na verdade, esse 'if' apenas verifica se não é igual a zero, o que é informação suficiente, nesse caso) e então usamos o mesmo código para atualizar a posição de dimensões da linha como fizemos na seção acima "Criando a linha".

A última linha nessa seção usa uma pequena função muito útil, chamada updateAfterEvent(), que torna o movimento da linha muito mais suave. Assim, o Flash é forçado a redesenhar a linha não somente uma vez por frame, mas a cada vez que o mouse é atualizado - o que em geral acontece muito mais rápido que o seu filme. Se quer ver a diferença que isso faz, suprima essa linha do código e teste o filme. Viu?

Concluindo uma forma

A seção final do código se refere ao que acontece, graças ao evento keyUp, quando uma tecla é pressionada. Antes de mais nada, o Flash verifica qual foi a tecla pressionada, usando a função Key.getascii(). Essa função retorna o valor do código ASCII da última tecla pressionada (cada letra e caracter no seu teclado está representado internamente por um número entre 0 e 255 - esses números são chamados valores ASCII). Estamos interessados somente em saber se a tecla Enter foi pressionada, portanto estamos procurando pelo número ASCII 13.

Usamos um if aqui para checar esse valor e, se for o que procuramos, executamos apenas três linhas do código. Primeiro, unimos o ponto final da linha anterior ao ponto inicial da primeira linha da forma. Felizmente armazenamos aqueles primeiros valores (nas variáveis start_x e start_y) e portanto tudo o que precisamos fazer é subtrair deles os valores das coordenadas do ponto inicial da linha-esboço atual, ou seja (start_x - origin_x) e (start_y - origin_y).

Finalmente, definimos como zero a variável line_active. Isso faz com que a linha pare de ser atualizada a cada vez que o mouse se move e diz ao Flash que, da próxima vez em que o mouse for clicado, uma nova forma está começando.

Agora é com você

Isso é tudo o que eu tinha a dizer. Como já mencionei, o código está cheio de comentários que explicam o que está acontecendo, portanto, analise-o - não é tão difícil.

Copyright de todos os arquivos e textos de ©Stickman 1998 - 2001. Sobre copyright, termos de uso e informações, por favor visite www.the-stickman.com/terms.

Baixe aqui o arquivo FLA desse tutorial.