BÁRBARA TOSTES (64 pts)

MAURO ROCHA TAVARES (40 pts)

ÉMERSON ROCHA (85 pts)

ILVA RUDEV (90 pts)

MARCOS JOSÉ PINTO (44 pts)

GÉRIO (93 pts)

DEN IVANOV (260 pts)

DANIELA PIRES (86 pts)

FÁBIO DUARTE (79 pts)

EDUARDO CARREGA (150 pts)

AUTOR DESCONHECIDO (100 pts)

MARLOS ALVES CARMO (90 pts)
Treinamento PontoFlash de Flash e ActionScript

Com eu faço para chamar um script em PHP, usando flash4, passando para e este uma variável digitada num form?

Eu não sei como que muda as cores gradientes no Flash5.

Quero um botão com duas funções diferentes.

Para que serve "umMovieClip.onMouseMove = updateAfterEvent;"?

Como passar parâmetros para um arquivo swf por meio de uma página html?

Importar variáveis de um TXT, com loadVars em um compontente scrollBar (rolagem).

Alguém tem um chat (de preferência .fla) ou sabe onde conseguir um?

Quero controlar dois movieclips com sons. Tocar um, parar outro e vice-versa.

Gente, estou com um probleminha com o cachê no IE.

Tenho vários objetos e queria fazê-los aleatoriamente mudar a propriedade alpha.

Alguém conhece algum emulador ou algo do tipo que transforme arquivos de plataforma mac p/ plataforma PC?

Qual exatamente é o retorno de _ymouse e _xmouse?

Estou com dificuldades de usar fontes true type sem anti-aliasing.

Quero que executar uma ação dinamicamente, usando uma variável importada de um TXT.
Detecção do FlashPlayer.

Usando XML com Fireworks MX.

GuestBook usando integração Flash e PHP.

Simulando 3D.

Rave Generation no PhotoShop.

Ação Imprimir.

Includes.

Duplo clique.

Como usar o Flash com o FrontPage?

Como criar objetos 3D no Fireworks.

Jogo tiro ao alvo

Degradé com tons metálicos - Fireworks
Volume

Fill bitmap

Mapa - Países com C

Pêndulo

3d shadow

Texto com fade

Menu Flash e XML

Lineas

Lettercase

Macromedia

Grass and wind

Slide menu fotos
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!