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.addEventListener(MouseEvent.MOUSE_DOWN, arrasta1);
painel1.addEventListener(MouseEvent.MOUSE_UP, solta1);
 
function arrasta1(event:MouseEvent):void {
    painel1.startDrag();
}
function solta1(event:MouseEvent):void {
    painel1.stopDrag();
}

 

Repare que são duas ações disparadas por dois eventos: ao clicar (evento MOUSE_DOWN), o objeto é arrastado, isto é, ele “gruda” no mouse. Ao soltar o botão do mouse (evento MOUSE_UP) o objeto se descola do movimento do mouse.

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.addEventListener(MouseEvent.MOUSE_DOWN, arrasta1);
painel1.addEventListener(MouseEvent.MOUSE_UP, solta1);
painel2.addEventListener(MouseEvent.MOUSE_DOWN, arrasta2);
painel2.addEventListener(MouseEvent.MOUSE_UP, solta2);
stage.addEventListener(Event.ENTER_FRAME, verifica);
 
function arrasta1(event:MouseEvent):void {
    painel1.startDrag();
}
function solta1(event:MouseEvent):void {
    painel1.stopDrag();
}
function arrasta2(event:MouseEvent):void {
    painel2.startDrag();
}
function solta2(event:MouseEvent):void {
    painel2.stopDrag();
}
 
function verifica(event:Event):void {
    sobrepos.text = painel1.hitTestObject(painel2);
}

 

O evento ENTER_FRAME faz com que o hitTestObject 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 MOUSE_UP.

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:

stop();
painel1.addEventListener(MouseEvent.MOUSE_DOWN, arrasta1);
painel1.addEventListener(MouseEvent.MOUSE_UP, solta1);
painel2.addEventListener(MouseEvent.MOUSE_DOWN, arrasta2);
painel2.addEventListener(MouseEvent.MOUSE_UP, solta2);
 
function arrasta1(event:MouseEvent):void {
    painel1.startDrag();
}
function solta1(event:MouseEvent):void {
    painel1.stopDrag();
    if (painel1.hitTestObject(painel2)){
        gotoAndStop(2);
    }
}
function arrasta2(event:MouseEvent):void {
    painel2.startDrag();
}
function solta2(event:MouseEvent):void {
    painel2.stopDrag();
    if (painel1.hitTestObject(painel2)){
        gotoAndStop(2);
    }
}

 




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

Get Adobe Flash player

Repare que, neste caso, seria necessário que se criasse um segundo frame, com a palavra “sobrepos”, como aparece no aplicativo acima. Neste caso, o eventoENTER_FRAME não é mais usado, e a função verifica não é mais necessária, uma vez que a verificação é efetuada dentro da função solta1 e solta2.

No evento MOUSE_DOWN, o objeto ? arrastado. No MOUSE_UP, 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, onde está escrito “sobrepos”.

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

Lembre-se de usar o código AS3, que está acima, e não o código AS2 do video.

Social media & sharing icons powered by UltimatelySocial