RODRIGO AMARAL (56 pts)

MARCELO SIQUEIRA (96 pts)

IRAPUAN MARTINEZ (45 pts)

RICARDO FIGUEIRA (33 pts)

GABRIEL SPORCH (53 pts)

MAURO ROCHA TAVARES (40 pts)

MARLOS ALVES CARMO (90 pts)

KEN AWAMURA (130 pts)

ZECA BALA (45 pts)

AMAURY BENTES (123 pts)

JOTA LAGO (40 pts)

MUZAK (45 pts)
Treinamento PontoFlash de Flash e ActionScript

Como criar uma seqüência para a tecla TAB num formulário?

Como criar um sitema de senha e login usando apenas o Flash?

Como faço um olho ficar apontando para o ponteiro sem se deslocar?

Como abrir uma janela popup no Flash?

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

Como é que faz para aparecer aquela animação de Carregando e a porcentagem?

Como colocar elementos separados por vírgula em uma posição específica de um array?

Como fazer um ponteiro de um relógio girar sem parar?

Como redimensionar um objeto até parar em um determinado tamanho?

Objeto Cookie no Flash que grava arquivos XML.

Como faço para sortear (random) uma imagem de fundo a cada vez que o filme é carregado?

Quero que mouse seja substituído por um mocieclip apenas num determinado local.

Tem como fazer uma barra de rolagem (scroll bar) colorida?

Tem como importar paletas de cores para o Flash?
Relógio analógico

Configurando texto via actionscript.

Objeto Array

Mouse trail.

Aprendendo a interagir Flash e ASP

Carregando SWFs em diferentes níveis.

Níveis dentro do Flash - Load Movie e Load Variables (segunda parte)

Configurando o FTP do Dreamweaver MX

Fade Out.

Jogo dos 7 erros.

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

Flash MX 2004 - class e prototype
Sashacircle 4

Rater2

Texto matrix

Preloader com percent

Cyber efect

Radio button 1

ComboBox duplo

Colours

Color

Menu Tsunami

Radio button 2

Primeira letra maíscula
HOME | TUTORIAIS
Gravidade no Flash.
por Keith Peters

Este é um tutorial de como simular forças gravitacionais diversas em um objeto no Flash.
Estou escrevendo este tutorial em estágios, cada estágio com um exemplo completo. Cada próximo estágio adicionará algo ao estágio anterior. Eu achei melhor fazer desta forma, trabalhando alguma coisa, desenvolvendo um pouco mais depois...
Nós estudaremos:

A. Criando um objeto e fazendo-o se mover em uma direção.
B. Fazendo o objeto rebater em um lado da tela, depois em dois.
C. Movimentando o objeto tanto vertical quanto horizontalmente, e rebatendo em
    todos os lados da tela.
D. Simulando gravidade.
E. Simulando atrito.
F. Adicionando um nível variável de "rebote".
G. Fazendo com que você pegue a bola e a jogue.

OK, vamos começar.

A. CRIANDO UM OBJETO E MOVENDO-O

Aqui nós vamos criar um objeto e fazê-lo mover-se usando apenas Action Script.

1. Crie um novo filme. Mude a cor de fundo para preto e o Frame Rate para 20. Isso fará com que o movimento pareça mais bonito e suave. Defina o tamanho como 550x400.
2. Desenhe um círculo, selecione-o, e transforme-o em um Movie Clip.
3. Dê duplo-clique no Movie Clip e edite-o.
4. Mude o nome da primeira camada para "bola".
5. Crie outra camada, chamada "actions".
6. Crie 3 key frames (F7) na camada "actions". Clique no frame 3 da camada "bola" e aperte F5.
7. O primeiro key frame irá inicializar o objeto. Selecione o quadro, abra o Action Panel e digite o seguinte (eu recomendo usar o Expert Mode):

_x=10;
_y=200
velocidadex=5;

   É fácil ver que isso posiciona o objeto nas coordenadas 10, 200 e atribui o valor 5 para variável velocidadex. Este passo também poderia ser feito com um "onClipEvent(load)" aplicado à instância, mas eu colocarei todo o código nesta Timeline, para ficar mais claro.

8. Agora edite as actions do segundo frame, e digite o seguinte:

_x=_x+velocidadex;

   De novo, muito simples. Isso simplesmente aumenta a coordenada x em 5 (o valor de "velocidadex").

9. Agora, edite as ações do frame 3:

gotoAndPlay(2);

   Isso causará um loop contínuo entre os frames 2 e 3, trocando constantemente o local do objeto de acordo com a variável da velocidade.

10. Teste o filme. A bola deve movimentar-se da esquerda para a direita e sair da tela. Tente mudar a velocidade e veja a bola indo mais rápido ou devagar. Nada muito legal ainda, mas isto será necessário para o resto do filme. Se funcionar como esperamos, agora nós podemos passar para o próximo estágio. Vamos criar o efeito "Rebote".

B. CRIANDO O EFEITO REBOTE

Fazer nossa bola ir embora da tela não é muito legal. Então vamos fazê-la rebater quando trombar na borda da tela.

1. Primeiro nós precisamos saber onde está a parede da tela e precisamos saber quando nós a acertamos. Então, edite a ação do primeiro quadro do Movie Clip, onde nós começamos, e adicione esta linha:

bordadireita=550;

Eu coloquei esse valor porque é o tamanho padrão do Flash Movie (550 pixels).

2. OK, agora que nós sabemos onde está a parede, precisamos saber quando a acertamos. Vá ao frame 2, onde nós fazemos a bola andar. Antes disso, temos que saber se tocamos a borda. Se isso aconteceu, nós a colocamos EM CIMA da borda da tela, e depois temos que mudar a direção, ou a bola irá embora.

if (_x + _width/2 > bordadireita) {
_x = bordadireita - _width/2;
velocidadex =- velocidadex;
}

O que é "_width/2" (largura/2)?

Lembre que a posição _x do seu objeto é o centro dele. Se você o colocar sobre a borda da tela, a bola ficará metade fora. Então, você pega metade da largura e adiciona ou subtrai da sua posição.

   Na primeira linha, você está checando se a posição da borda direita do objeto é maior que a posição da borda da tela. Se sim, você coloca a borda da bola EM CIMA da linha. Isso faz parecer que a bola bateu na parede. Este pode não ser o jeito mais preciso posicionar seu objeto, particularmente quando você trabalha em duas dimensões, mas é o mais simples e fica muito bom no final.

   A última linha muda a velocidade de positivo para negativo, o que reverte a direção da bola. Como você verá em breve, a mesma linha irá mudar a velocidade de negativo para positivo quando a bola bater na parede oposta.

3. Teste o filme agora. A bola irá acertar o lado direito da tela e rebater, indo com a mesma velocidade na outra direção. Ainda não muito legal, mas estamos chegando lá. Agora vamos fazer a bola bater na parede esquerda.

4. Adicione a seguinte linha ao frame 1.

bordaesquerda=0;

Eu não tenho que explicar porque...


5. Agora no frame 2 adicione:

if(_x - _width/2 < bordaesquerda) {
_x = bordaesquerda + _width/2;
velocidadex =- velocidadex;
}

   Este é essencialmente o mesmo código anterior, mas você está checando se a bola passou da borda direita, e caso positivo, colocando a bola EM CIMA da borda direita e mudando a sua direção.

6. Teste de novo. A bola deve bater nos dois lados agora. Continua não sendo uma superanimação, mas está ficando melhor. E nós temos agora uma base sólida para trabalhar.


C. MOVIMENTO VERTICAL

Agora nós queremos fazer a bola mover-se em duas dimensões. Basicamente, tudo o que temos que fazer é duplicar tudo o que já fizemos e aplicar à dimensão _y.

1. Primeiro nós precisamos de uma velocidade vertical. Vá ao primeiro frame e digite:

velocidadey=20;

Eu mudei a velocidadex para 20 também apenas para fazer a coisa ir mais rápido.

2. Agora nós temos que saber onde o teto e chão da tela ficam, assim como esquerda e direita. Então escreva:

tetotela=0;
chaotela=400;

3. Agora vá ao frame 2. Copie tudo, e cole a cópia abaixo das ações existentes. Mude o seguinte:

Mude _x para _y
Mude velocidadex para velocidadey
Mude bordaesquerda para chaotela
Mude bordadireita para tetotela
Mude _width para _height

   Eu odeio ter que dizer, mas isso é tudo! Teste o filme. A bola deve ficar quicando pela tela, rebatendo nas paredes.

D. ADICIONANDO GRAVIDADE

Este passo será de grande utilidade se você quiser que o movimento da bola seja mais realista. Para isto, temos que saber o que a gravidade é ou faz. Na prática, é uma força que atrai todos os corpos uns aos outros (no caso da Terra, que é muito mais pesada do que nós, a tendência é irmos para baixo). No seu filme, há um pedaço de código que constantemente aumenta o valor de y.

   Se você jogar um objeto de um edifício alto, ele vai começar com uma certa velocidade (valor positivo de y), mas irá ficando cada vez mais rápido até chegar no chão. Em outras palavras, a velocidadey aumenta constantemente. Se você jogar a bola para o ar, você estará dando a ela uma velocidadey negativa. A gravidade irá puxá-la para baixo, tornando a velocidadey positiva. Então, em nosso código, a gravidade será simplesmente um número que adicionaremos a velocidadey em cada loop. Novamente, será muito simples.

1. Vá ao frame 1 e dê à gravidade o valor 2:

gravidade = 2;

2. Agora vá ao frame 2 e coloque o seguinte, depois do código existente:

velocidadey = velocidadey + gravidade;

3. Novamente, eu odeio dizer, mas é tudo por agora. Teste o filme. A bola deve ficar quicando de uma forma muito mais realista. Porém, a bola nunca perde energia, continuando cada vez mais rápido, o que não acontece realmente, por dois motivos: o primeiro é o atrito, a bola perde energia porque tem que vencer a resistência do ar. A outra é que quando a bola bate no chão, ela transmite parte da energia para ele. Nós vamos simular os dois fatores agora.

E. ATRITO

Se você dá um tiro no espaço, a bala teoricamente irá continuar com a mesma velocidade para sempre. Nada irá diminuir sua velocidade. Aqui na Terra, porém, qualquer objeto em movimento irá atritar com ar, água ou qualquer outra coisa onde esteja. Se você joga um pedaço de papel no ar, ele não irá muito longe. O ar o faz parar. Agora nós vamos simular essa força no Flash. Nós vamos criar algum atrito. Atrito é o fator que reduz qualquer velocidade em uma pequena porcentagem. Então tudo o que temos que fazer é multiplicar nossa velocidade por digamos, 0.98 em cada loop.

1. De volta ao frame 1, crie a variável atrito:

atrito=.98;

Também, para deixar as coisas interessantes, mude as linhas de velocidade para:

velocidadex=Math.random()*30;
velocidadey=Math.random()*30;

   Math.random() sorteia um número entre 0 e 1. Multiplicar esse número por 30 nos dá velocidades entre 0 e 30. Serão diferentes cada vez que rodarmos o filme.

2. No frame 2 mude a linha:

velocidadey=velocidadey+gravidade;

para:

velocidadey=velocidadey*atrito+gravidade;

e escreva o seguinte.

velocidadex=velocidadex*atrito;

3. Teste o filme. Legalzinho, não? Agora está parecendo bem realista. Incrível o que umas poucas linhas podem fazer. De novo, brinque com os valores e veja o que pode acontecer quando você aumenta ou diminui a gravidade, o atrito, etc.

F. ADICIONANDO UM NÍVEL DE ELASTICIDADE

Então a nossa bola está ficando realista. É uma bola de borracha muito legal. Mas e se você quiser uma bola de madeira, ou uma bola de aço, etc? Não ficaria bom pulando tanto. Ela teria que bater no chão (ou parede, ou teto) como uma velocidade e voltar com outra bem mais baixa.

   Então nós temos que criar algo que reduza a velocidade para uma certa porcentagem, muito parecido com atrito. Mas nesse caso a velocidade será reduzida apenas quando a bola atingir uma superfície. Vamos chamar esse fator de elasticidade. Uma "superbola" teoricamente perfeita teria uma fator elasticidade de 1. Ela voltaria de um choque na exata velocidade com que chegou. Uma bola de chumbo tem um fator "elasticidade" perto de zero. Ela bate no chão e fica no lugar. Muitas outras substâncias estão entre essas duas.

1. Você provavelmente deve saber que estamos no frame 1 adicionando a variável "elasticidade".

elasticidade=.9;

2. Agora nós temos que ir ao frame 2 e adicionar esse fator do mesmo modo como fizemos com atrito, mas apenas na batidas. Nós temos quatro comandos "if" aqui. Cada um tem

velocidadex=-velocidadex;

ou

velocidadey=-velocidadey;

Este é o ponto da batida. Nós apenas temos que colocar o valor "elasticidade" aqui. Mude estes quatro comandos para;

velocidadex=-velocidadex*elasticidade;

e

velocidadey=-velocidadey*elasticidade;

3. Agora teste o arquivo. Não muito diferente, certo? É porque nós colocamos um fator elasticidade alto, .9. Mude para algo menor, com .3, e veja a diferença. Com isso você pode mudar o material de que a bola é feita. Na próxima seção, nós vamos aprender como agarrar a bola e atirá-la, que é mais complicado que os últimos passos. Antes disso, aqui está o código que já deveremos ter para nossa bola:

No frame 1:

_x=10;
_y=200;
velocidadex=Math.random()*30;
velocidadey=Math.random()*30;
bordadireita=550;
bordaesquerda=0;
tetotela=0;
chaotela=400;
gravidade=2;
atrito=.98;
elasticidade=.9;


No frame 2:
_x=_x+velocidadex;
if(_x+_width/2>bordadireita) {
_x=bordadireita-_width/2;
velocidadex=-velocidadex*elasticidade;
}
if(_x-_width/2<bordaesquerda) {
_x=bordaesquerda+_width/2;
velocidadex=-velocidadex*elasticidade;
}
_y=_y+velocidadey;
if(_y+_height/2>chaotela) {
_y=chaotela-_height/2;
velocidadey=-velocidadey*elasticidade;
}
if(_y-_height/2<tetotela) {
_y=tetotela+_height/2;
velocidadey=-velocidadey*elasticidade;
}
velocidadey=velocidadey*atrito+gravidade;
velocidadex=velocidadex*atrito;

G. PEGANDO E JOGANDO A BOLA

Então, a bola aparece, move-se em uma direção qualquer, fica quicando por um tempo, pára e o show acabou. Agora, nós vamos adicionar interatividade e aprender como pegar a bola e atirá-la. Nós queremos ser capazes de jogar a bola em qualquer direção, e que a bola voe com a velocidade com que a atirarmos. Sem problema. Para fazer isso, nós temos que tornar o Movie Clip arrastável. Eu espero que você saiba algo sobre MCs arrastáveis, mas se não, você irá aprender aqui.

1. Primeiro nós precisamos de um botão invisível. Crie um novo símbolo, dê a ele o nome "botaoinvisivel" e mude o behavior para Button.

2. Um botão invisível é um que tem apenas o quadro "hit". Você não pode vê-lo, mas pode interagir com ele. Crie um key frame no frame "hit" e desenhe um círculo nele. Não precisa enfeitar nem nada, apenas faça um círculo sem contorno deixe-o centralizado.

3. Volte para o MC da bola e crie uma nova camada "botão".

4. Abra sua Library e arraste uma cópia do "botaoinvisivel" para o MC. Tenha certeza de que está na camada "botão". Você verá uma linha azul em volta do botão. É só para você ver que o botão está ali, ela não aparecerá durante a apresentação.

5. Posicione o botão diretamente sobre a bola, e altere o tamanho para ficarem exatamente um sobre o outro.

6. Selecione o botão, abra o Actions Panel e digite o seguinte.

on(press) {
startDrag(this);
arrastando=true;
}
on(release, releaseOutside) {
stopDrag();
arrastando=false;
}

   Isso irá fazer com que, quando você pressione o botão, o MC comece a seguir o mouse, e define o valor da variável "arrastando" como True. Quando você solta o mouse, o arrasto acaba e a variável "arrastando" fica como False. Você verá como nós usaremos esta variável mais tarde.

7. Se você testar o filme agora, você verá que poderá pegar a bola e arrastá-la. Porém, por mais força que você use, ela apenas cai da sua mão. Nós temos que desligar nossa gravidade, atrito e "rebote" enquanto estamos segurando a bola. A variável "arrastando" é para isso. Ela nos deixa saber quando estamos arrastando e quando a soltamos. Vá ao frame 2, e coloque esta linha no topo do código:

if(!arrastando) {

e, na última linha, feche as chaves:

}

   O ponto de exclamação significa "não". Então nós estamos falando, se "arrastando" é false então aplique gravidade, etc. Mas se estamos arrastando o MC, este bloco de código será ignorado. Teste o filme. Agora você verá que pode pegar a bola pingá-la. Estamos chegando lá.

8. Agora nós queremos atirar a bola, e determinar sua velocidade e direção. Você verá que é mais fácil do que imagina. Tudo o que temos que fazer é ver onde o MC está enquanto estamos arrastando. Nós vamos guardar essa informação de "xvelho" e "yvelho". No próximo loop, nós vamos subtrair "xvelho" do valor "_x" atual e teremos a velocidade com que você estará arrastando. Vou dar um exemplo:

Quando você começa a arrastar a bola, _x é igual a 100. Nós vamos guardar isso em "xvelho". Na próxima vez que o loop começar, você terá movido a bola para a direita, então o valor de _x agora é 110.

110 - 100 = 10 ou _x - xvelho = velocidadex.

Digamos que você usou mais força, então a bola estava no 130 no segundo loop.

130 - 100 = 30, uma velocidade mais rápida.

Digamos que você moveu a bola para a esquerda. _x agora é igual a 90.

90 - 100 = -10.

É uma velocidade negativa, ou um movimento para a esquerda. Nós temos que fazer o mesmo com _y, "yvelho" e velocidadey.

Nós queremos fazer isso apenas quando estamos arrastando a bola. Nós já temos uma instrução "if" checando isso, e código que roda quando não estamos arrastando. Colocando uma instrução "else", nós podemos dizer o que fazer quando ESTAMOS arrastando. Coloque um "else" à direita do "fecha-chaves" no fim do código.

} else {
velocidadex=_x-xvelho
velocidadey=_y-yvelho
xvelho=_x
yvelho=_y
}

E aqui está. Eu disse que seria fácil.

O código final para cada frame está aí abaixo.

Frame 1:

_x=10;
_y=200;
velocidadex=Math.random()*60-30;
velocidadey=Math.random()*60-30;
bordadireita=550;
bordaesquerda=0;
tetotela=0;
chaotela=400;
gravidade=2;
atrito=.98;
elasticidade=.9;



Frame 2:
if (!arrastando) {
_x = _x+velocidadex;
if (_x+_width/2>bordadireita) {
_x = bordadireita-_width/2;
velocidadex = -velocidadex*elasticidade;
}
if (_x-_width/2<bordaesquerda) {
_x = bordaesquerda+_width/2;
velocidadex = -velocidadex*elasticidade;
}
_y = _y+velocidadey;
if (_y+_height/2>chaotela) {
_y = chaotela-_height/2;
velocidadey = -velocidadey*elasticidade;
}
if (_y-_height/2<tetotela) {
_y = tetotela+_height/2;
velocidadey = -velocidadey*elasticidade;
}
velocidadey = velocidadey*atrito+gravidade;
velocidadex = velocidadex*atrito;
} else {
velocidadex=_x-xvelho;
velocidadey=_y-yvelho;
xvelho=_x;
yvelho=_y;
}
Frame 3:
gotoAndPlay(2);
//e as actions do botão invisível:
on(press){
startDrag(this);
arrastando=true;
}
on(release, releaseOutside){
stopDrag();
arrastando=false;
}

Eu espero que você possa pegar o que fizemos aqui e tornar em algo mais interessante e atraente. Se você fizer isso, por favor me mostre. Boa sorte.

Faça um download do arquivo fonte e estude-o cuidadosamente.

Tradução:
Daniel Rossato de Oliveira
kelme_kelme@yahoo.com.br



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 Willian Hoffmann
| 18/6/2013 - 14:22 |


Muito, muito, muito obrigado pelo tutorial. Além de você saber Flash, você é um ótimo professor. Deus abençoe