Flash AS2 08: Drag and Drop

1. Arrastar e soltar objetos na tela: drag and drop

Existem v árias formas de interagir com objetos na tela. Uma delas é arrastar e soltar objetos. Este recurso é muito usado, principalmente quando se trata de promover algum tipo de encaixe entre objetos ou quando um jogo exige que o usuário conduza um objeto evitando obstáculos.



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


Tente clicar em um dos painéis e arrastá-lo para outro lugar.

O código que faz isso é este:

painel1.onPress = function (){
  startDrag(this);
}
painel1.onRelease = function (){
  stopDrag();
}

Repare que são duas ações disparadas por dois eventos: ao clicar (on press) o objeto é arrastado, isto é, ele “gruda” no mouse. Ao soltar o botão do mouse (on release) o objeto se descola do movimento do mouse. No caso, a palarva this significa “isto”, isto é, o próprio objeto que contém o código.

2. Teste de sobreposição

É também muito freqüente que, ao arrastar um objeto, você queira saber se ele está sobrepondo algum outro objeto. Digamos, por exemplo, que num jogo, você tenha que arrastar um certo número de objeto para dentro de uma caixa. Como saber se o objeto que você arrasta está em contato com a caixa?

Para isso, existe uma função do Flash chamada hitTest. Ela verifica se existe sobreposição entre dois objetos. Caso haja sobreposição a função retorna o valor true, isto é, verdadeiro. Caso contrário, retorna false.

No nosso exemplo, eu criei um campo de texto chamado verifica. O código abaixo, também colocado no movie clip, acusa se houve ou não sobreposição.

painel1.onEnterFrame=function(){
  verifica.text = this.hitTest(painel2);
}

O evento onEnterFrame faz com que o hitTest seja feito a cada frame, isto é, enquanto a animação estiver acontecendo. Se você quisesse que a sobreposição fosse verificada somente no momento em que o usuário solta o objeto, bastaria usar o evento onRelease.

O exemplo acima é uma demonstração de como funciona a verificação de sobreposição. Uma aplicação mais prática seria desviar a animação para um determinado frame a partir do momento em que o usuário solta um objeto sobre outro. Neste caso, o código ficaria assim:

if(this.hitTest(painel2)){
  gotoAndStop(2);
}



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player

No evento onPress, o objeto é arrastado. No onRelease, ele pára de ser arrastado e, caso haja sobreposição com o objeto painel2, a animação é desviada para o segundo frame da timeline principal.

3. Melhorias

Você lembra daqueles jogos de antigamente, dos primeiros que surgiram em computadores? Uma barra que se movimentava, e a cada vez que uma bola colidia com ela, a bola voltava. Caso não houvesse colisão, o jogador tomava um gol… Com estes dois recursos, você pode agora tentar fazer um jogo com este abaixo.



Content on this page requires a newer version of Adobe Flash Player.

Get Adobe Flash player


4. Video

Social media & sharing icons powered by UltimatelySocial