easeDrag() e DepthControl()

outubro 18, 2006 | Arquivado em: Flash | Escrito por: joaoguilherme

easeDrag() e DepthControl()

Pré-Requisitos

Macromedia Flash 8, conhecimento intermediário de actionscript.

Conteúdo

Vocês gostaram e eu voltei. Com mais novidades e dicas rápidas para usar no Flash. Hoje nós vamos discutir uma questão muito conhecida por ser uma das interfaces mais agradáveis e intuitivas para o usuário, mas com certeza representam um terror para a maioria dos desenvolvedores. SIM, estamos falando das técnicas de arrastar objetos, ou simplesmente Drag.

O Flash um método da classe MovieClip chamado startDrag que para muitos os casos quebra um galho. Mas imagine se sua interface toda fosse baseada em objetos arrastáveis? Isso seria um problema devido às limitações do startDrag, além disso para simular algo mais parecido com o mundo real você precisará usar uma fricção, outro detalhe omisso no método da Macromedia. Tudo bem, ninguém é perfeito. Então vamos fazer o nosso próprio prototype de ease com fricção e bom controle.

MovieClip.prototype.easeDrag = function(speed, limitLeft, limitRight, limitTop, limitBottom) {
refx = (_root._xmouse-this._x);
refy = (_root._ymouse-this._y);

this.onEnterFrame = function() {
newX = this._x-Math.floor(((this._x+refx)-(_root._xmouse))/speed);
newY = this._y-Math.floor(((this._y+refy)-(_root._ymouse))/speed);
if (newX>=limitLeft and newY>=limitTop and newY<=limitBottom and newX<=limitRight) {
this._x = newX;
this._y = newY;
}
};
this.onMouseUp = function() {
delete this.onEnterFrame;

};
};

Pronto. Esse é um bom começo para a nossa interface arrastável. Mas alguns probleminhas surgem: Se eu tiver muitos objetos arrastáveis, eu quero que o que eu estiver clicando fique em cima, certo? Aí você me diz: ah jota essa é fácil. é só usar o swapDepths(), certo? ERRADASSO! Vejamos, você já está usando um prototype para o seu drag, por que voltar aos padrões do flash no controle dos níveis. Ah jota, quer dizer que eu vou ter que fazer outro prototype só para controlar os niveis dos meus emicêzinhos??? NÃÃÃO!!! Você pode usar A CLASSE NÃO DOCUMENTADA DA MACROMÉÉÉÉÉÉDIA! A mx.behaviors.DepthControl!!!!! Vamos dar uma olhada na classe e analisar os principais métodos:

class mx.behaviors.DepthControl extends Object {
public function DepthControl() {
}
public static function sendToBack(target:MovieClip):Void {
var isLowest = false;
while (isLowest == false) {
sendBackward(target);
isLowest = (target == getInstanceAtLowest(target._parent));
}
}
public static function bringToFront(target:MovieClip) {
var isHighest = false;
while (isHighest == false) {
bringForward(target);
isHighest = (target == getInstanceAtHighest(target._parent));
}
}
public static function sendBackward(target:MovieClip) {
var dOrder = trackDepths(target._parent);
if (target != getInstanceAtLowest(target._parent)) {
target.swapDepths(getInstanceLowerThan(target));
}
}
public static function bringForward(target:MovieClip) {
if (target != getInstanceAtHighest(target._parent)) {
target.swapDepths(getInstanceHigherThan(target));
}
}
private static function trackDepths(mcParent:MovieClip):Array {
var dOrder:Array = [];
for (var i in mcParent) {
if (typeof mcParent[i] == “movieclip”) {
dOrder.push({mc:mcParent[i], depth:mcParent[i].getDepth()});
}
}

continua…

Deixa eu dá uma explicadinha nos métodos:

sendToBack(): leva o movieclip indicado para o menor nível;
bringToFront(): leva o movieclip indicado para o maior nível;
sendBackward(): diminui 1 nível no movieclip;
bringForward(): aumenta 1 nível no movieclip;
trackDepths(): gera uma matriz indicando os níveis superiores e inferiores ao movieclip indicado;

Observe que a diferença entre o DepthControl e o tradicional swapDepths é que você pode controlar de uma maneira mais eficaz o nível dos seus movieclips, colocando-os exatamente onde você os quer, sem muito trabalho. No swapDepths isso é mais dificil porque você nem sempre sabe o nível ou o nome do movieclip que você quer usar. Além do mais o swapDepths permite apenas fazer uma troca entre dois níveis de movieclips, o DepthControl permite que você manipule toda a estrutura do seu swf.

A última questão para o nosso drag ficar perfeito é melhorar a aparência do cursor no filme. A resposta do usuário seria melhor se houvesse, por exemplo um cursor que simulasse a sua mão. Algo que quando arrastasse o objeto ilustrasse exatamente isso. Para isso, basta criar um movieclip com 3 frames e um desenho de cursor em cada um: cursor normal, cursor mão e cursor “arrastando”, respectivamente. Assim, você poderia colocar um código em cada evento do botão a ser arrastado para que o movieclip cursor mude de frame de acordo com a sua tragetória em relação ao botão.

Para finalizar, é prudente, se você estiver usando muitos objetos arrastáveis, que você utilize alguma forma de loop para controlar os eventos dos botões de uma forma mais fácil, economizando linhas e otimizando o seu código. Você pode ler mais sobre loops no meu tutorial Simplificando a Vida com o FOR, publicado no fórum flashmasters.

Aqui, uma prévia do nosso swf montado, onde eu coloquei em prática todos os parâmetros discutidos acima:

E aqui um exemplo do código desse filme:

MovieClip.prototype.easeDrag = function(speed, limitLeft, limitRight, limitTop, limitBottom) {
refx = (_root._xmouse-this._x);
refy = (_root._ymouse-this._y);
_root.cursor.gotoAndStop(3)
mx.behaviors.DepthControl.bringToFront(_root.cursor)
this.onEnterFrame = function() {
newX = this._x-Math.floor(((this._x+refx)-(_root._xmouse))/speed);
newY = this._y-Math.floor(((this._y+refy)-(_root._ymouse))/speed);
if (newX>=limitLeft and newY>=limitTop and newY<=limitBottom and newX<=limitRight) {
this._x = newX;
this._y = newY;
}
};
this.onMouseUp = function() {
delete this.onEnterFrame;
_root.cursor.gotoAndStop(2)
};
};
_root.cursor.startDrag(true)
Mouse.hide()
logos = [logo1,logo2,logo3]
for(var i=0;i<logos.length;i++){
logos[i].onRollOver = function(){
_root.cursor.gotoAndStop(2)
}
logos[i].onPress= function(){
mx.behaviors.DepthControl.bringToFront(this)
this.easeDrag(3.00000, 0, 650-this._width, 45,355-this._height)
}
logos[i].onRollOut=function(){
_root.cursor.gotoAndStop(1)
}
}

Se alguém reparou, ainda está faltando um detalhe para o nosso sistema de navegação com drag ficar 100%. Um sistema de colisão entre os movieclips. Mas isso eu deixo como exercício para vocês treinarem a massa cinzenta. Valeu galera, até a próxima.

Autor: João Guilherme Ribeiro – Colunista Flash do Portal MXSTUDIO

Qualquer dúvida acesse o nosso fórum.

Escrito por joaoguilherme on outubro 18, 2006. Arquivado em Flash. Você pode seguir as respostas a esse artigo pelo RSS 2.0. Você pode deixar respostas para esse artigo

easeDrag() e DepthControl()