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.
Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados