BlogBlogs.Com.Br

domingo, 24 de fevereiro de 2008

Drag and Drop Usando OO + AS 2.0

Eu estava fazendo alguns testes com OO e AS 2.0, no meio de tudo fiz uma experiência com um sistema simples de Drag/ Drop usando a idéia de orientação a objetos. Com o resultado disso temos esse tópico. O código não é o ideal, não segui as convenções de nomes para MCs por exemplo. Para fim de estudos acredito que seja útil.

A idéia é criar uma classe contendo os métodos para iniciar e parar a propriedade de “arrastamento” de um Movie Clip. A classe Arrastavel fica responsável também por verificar se o Movie Clip está em uma determinada região do cenário.

Vamos lá:

Crie um novo Flash Document.com duas camadas: Actions e símbolos.
Na camada símbolos, desenhe um retângulo, que será sua área onde o Movie Clip deve ser arrastado. Com F8 transforme o retângulo em um Movie Clip chamado area Na aba properties nomeie a instancia de areaSelect.

Ainda na camada símbolos, desenhe um quadrado que será o Movie Clip a ser arrastado. Nomeie esse novo MC e na aba properties chame a instancia por mc66.

Na camada Actions use o todo o código abaixo que está dentro das caixas.


Toda classe criada precisa de ser importada.

import Arrastavel.as;

Para acessar as funções da classe Arrastavel um objeto dessa classe é criado. Neste casso passei as dimensões da instancia areaSelect como parâmetros para o contrutor da classe.
A variável valor será apenas para receber o retorno do método release.

var objDrag:Arrastavel = new Arrastavel(areaSelect._x, areaSelect._y, areaSelect._width, areaSelect._height);
var valor:Boolean = true;

As funções Starter , Stoper e Releaser são chamadas pelos eventos de mouse. Essas funções apenas repassam o nome do Movie Clip em questão na hora em que o objeto chama o método.
A linha this.swapDepths(this.getNextHighestDepth()); apenas assegura que o ultimo MC clicado ficaria por cima dos demais caso houvessem outros.

function Starter():Void { //Start Drag

Movie = this._name;
objDrag.Start(Movie);
this.swapDepths(this.getNextHighestDepth());

}
function Stoper():Void { //Stop Drag

Movie = this._name;
objDrag.OutSide(Movie);

}
function Releaser():Void { //Release

Movie = this._name;
valor = objDrag.Release(Movie, this._x, this._y);
this.enabled = (valor);
}

Esses eventos irão chamar as funções.

mc66.onRelease = Releaser;
mc66.onPress = Starter;
mc66.onReleaseOutside = Stoper;

Brevemente explicando Orientação a Objetos, teremos um arquivo que será a classe Arrastavel , nele teremos os métodos ( funções ) que são acionadas pelos objetos da classe. Do Stage principal do flash usando os objetos certos podemos chamar funções de quaisquer classes existentes. De certa forma o flash já funciona assim, o que vamos fazer é criar uma classe personalizada e acessar suas funções.

Agora basta escrever o código da classe.
Crie um novo arquivo, mas desta vez um Action Script file e use o todo o código abaixo:

Declaração da classe.

class Arrastavel {

Variáveis para a fronteira da caixa.

private var Area_hitLeft_x;
private var Area_hitTop_y;
private var Area_hitRight_x;
private var Area_hitBottom_y;
public var conter:Number = 0;
public var valor1:Boolean = true;

Construtor da classe que armazena os limites do retângulo do palco principal.

public function Arrastavel(areaSelectX:Number, areaSelectY:Number, areaSelectW:Number, areaSelectH:Number) {

this.Area_hitLeft_x = areaSelectX;
this.Area_hitTop_y = areaSelectY;
this.Area_hitRight_x = areaSelectW+areaSelectX;
this.Area_hitBottom_y = areaSelectH+areaSelectY;}

Função que compara a posição do Movie Clip e retorna um valor true ou fase se o MC estiver ou não dentro do retângulo área.

public function Release(Movie:MovieClip, MovieX:Number, MovieY:Number):Boolean {

stopDrag();
if (MovieX > Area_hitLeft_x && MovieY > Area_hitTop_y && MovieX <>

valor1 = false;
conter++;
return valor1;

} else {
valor1 = true;
return valor1;
}
}

//Inicia Drag

public function Start(Movie:MovieClip):Void {
startDrag(Movie);

}

// Libera do Drag

public function OutSide(Movie:MovieClip):Void {

stopDrag();
}

}

O nome da classe deve iniciar com letra maiúscula, alem disso lembre-se de preencher o cabeçalho de descrição da classe. Por se tratar de um componente personalizado é sempre bom documentar o máximo possível o funcionamento e a utilidade. Não deixe por conta da memória.

Veja um exemplo funcionando : Link