PANDOGO (82 pts)

LUIZ HERRERA (117 pts)

RÔMULO NUNES (32 pts)

ZEBEDIAH (35 pts)

ILVA RUDEV (90 pts)

JOTA LAGO (40 pts)

ALEXANDRE PORTO (1281 pts)

BÁRBARA TOSTES (64 pts)

PEDRO CLAUDIO (50 pts)

GUILHERME G.G. (137 pts)

MANGOOST (80 pts)

DAUTON JANOTA (255 pts)
Treinamento PontoFlash de Flash e ActionScript

O que é melhor para importar textos no Flash, TXT ou XML?

Como fazer meu filme ficar parado um tempo em um determinado frame e depois ande novamente.

Como otimizar um filme no Flash?

Preciso de um Script de Contagem regressiva para o Flash.

Quero criar uma animação em Flash que fique igual a uma galáxia.

Como colocar uns floquinhos de neve caindo somente com javascript?

Como colocar um Ícone na Barra de Endereços no IE?

Existe uma maneira de aproveitar um objeto criado num filme em outro?

Como arrastar um objeto somente na horizontal?

Como eu faço para abrir um site em fullscreen?

Que ação devo usar no flash 5 para criar um link p/ email?

Como validar campos de um formulário com javascript?

Como colocar links em campo de texto estáticos (static text)?

Como fazer uma variável receber um valor aleatório (randômico) entre 50 e 100?
Roof e Marciowebmaster - Avaliação de sites

LOAD vs XMLConnector, vantagens e diferenças no carregamento do XML

Colisão

Load Movie into level (nível)

Logo com aparência 3D - Fireworks

Funções : localToglobal() e globalToLocal()

Gerenciando camadas no CorelDraw

Imagens transparentes usando PhotoShop, Fireworks e Flash.

Introdução ao Droptarget

Colisão (hitTest)

Fórmula do efeito de elasticidade

Texto difuso
Tocha de fogo

Overscroll

Texto html

Bolhas de sabão

Friction

Velocímetro

Chinese dragoon

Notícias

Calculadora simples

Barra interativa

Supermascara

Rippled
HOME | TUTORIAIS
Desenhando interativamente no Flash 5
por Stickman

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.



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
1 comentário


Comentário de Tec House
| 13/9/2010 - 15:18 |
http://www.techouse.com.br

Excelente artigo, me ajudou bastante!