EDUARDO CARREGA (150 pts)

ILVA RUDEV (90 pts)

FLASHGURU (155 pts)

RICARDO TEIXEIRA (40 pts)

PEDRO CLAUDIO (50 pts)

MANGOOST (80 pts)

GABRIEL SPORCH (53 pts)

MARLOS ALVES CARMO (90 pts)

BÁRBARA TOSTES (64 pts)

RICARDO TAKAHASHI (180 pts)

DAUTON JANOTA (255 pts)

ZECA BALA (45 pts)
Treinamento PontoFlash de Flash e ActionScript

Como colocar uns floquinhos de neve caindo somente com javascript?

Como coloco uma senha no Flash?

Qual a vantagem de exportar alguma coisa do Fireworks para o Flash?

Gostaria de arrastar um objeto em apenas uma área determinada da página.

Tamanho de banners

Dicas para seu movie ficar mais enxuto.

Problemas com o caminho do tell target.

Criação de objetos e classes do Actionscript.

Gostaria de saber pra que servem os levels?

Como atribuir um valor numérico às letras de uma palavra e depois somar esses valores?

Como validar campos de um formulário com javascript?

Como faço um objeto se movimentar pelo teclado? E esse objeto Key, como funciona?

Como coloco diversas horas ao mesmo tempo, de acordo com o fuso horário?

Design para quem não é designer: sobre tipos.
Bookmak (Adicionar a favoritos).

Objeto XML - introdução.

Variáveis no Flash MX

Objeto array.

Duplo clique.

Sistema de busca utilizando Flash + ASP.

Logo com aparência 3D - Fireworks

Flash no Espaço Geográfico

Turbine seu Fireworks

Variáveis de arquivos de texto.

Efeito de texto esticado (stretched text).

AttachSound.
Mapa do Brasil e da América do Sul

Barra de Scroll

Menu vai e vem

Preloader run

Menu popop de pastas 2

Rater1

Rayoflight

Combobox

Cmponente Radio Button

3d Splines

Control Sound

Hitest eat
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!