Desenhar e resgatar a velocidade do mouse
Se você observar, no menu existe uma nova categoria, Respostas, nesta categoria vou postar questões solucionadas por mim em listas de discussões, fóruns, e-mail, etc; pretendo postar apenas as questões mais elaboradas, esta nova categoria deverá aquecer a frequência de posts no blog.
A questão aqui é a seguinte, o usuário quer desenhar no Flash ao pressionar o botão do mouse e além disto ele quer saber a velocidade em que está sendo desenhado. Para poder desenhar com o mouse use os métodos lineStyle(), lineTo() e moveTo() da classe MovieClip.
- lineStyle - formata a linha, ele possui diversos parâmentros, para este exemplo os três primeiros são sulficientes, espessura, cor e alpha.
- lineTo - desenha a linha ponto-a-ponto formando uma reta, os parâmetros são x e y.
- moveTo - move o atual ponto de desenho para _x e _y.
Vamos ver na prática
this.createEmptyMovieClip("mcDraw", 1); mcDraw.lineStyle(2, 0x66FF00, 100); mcDraw.lineTo(0, 100); mcDraw.lineTo(100, 100); mcDraw.lineTo(100, 0); mcDraw.lineTo(0, 0);
Um quadrado desenhado ponto-a-ponto com linhas retas, para uma melhor compreensão, experimente editar e comentar as linhas. E o méto moveTo()? Hmm.. se você quiser desenhar dois quadrados no mesmo movieclip, o segundo vai continuar a partir do primeiro, veja no código abaixo e depois experimente descomentar a linha do método moveTo().
this.createEmptyMovieClip("mcDraw", 1); mcDraw.lineStyle(2, 0x66FF00, 100); mcDraw.lineTo(0, 100); mcDraw.lineTo(100, 100); mcDraw.lineTo(100, 0); mcDraw.lineTo(0, 0); //mcDraw.moveTo(200, 50); //descomente esta linha mcDraw.lineTo(200, 150); mcDraw.lineTo(300, 150); mcDraw.lineTo(300, 50); mcDraw.lineTo(200, 50);
Desenhar com o mouse
Depois de ter entendido os exemplos acima, basta alterar os valores para a posição do mouse _xmouse e _ymouse e utilizar os eventos onMouseMove, onMouseDown e onMouseUp da classe Mouse.
//objeto com as configurações da linha var propLine:Object = {thickness: 3, color: 0x0000FF, alpha: 100}; //se está desenhando ou não var drawing:Boolean = false; //movieclip que armazenará o desenho this.createEmptyMovieClip("mcDraw", this.getNextHighestDepth()); //ouvinte dos eventos da classe Mouse var mouseListener:Object = new Object(); //evento onMouseDown, invocado quando o botão do mouse é pressionado mouseListener.onMouseDown = function() { //desenhando drawing = true; //estilo da linha mcDraw.lineStyle(propLine.thickness, propLine.color, propLine.alpha); //mudando o ponto de desenho para o novo ponto, a posição do mouse mcDraw.moveTo(_xmouse, _ymouse); }; //evento onMouseMove, invocado quando o mouse é movido mouseListener.onMouseMove = function() { //se estiver desenhando if(drawing) { //desenha por onde o mouse passar estando pressionado mcDraw.lineTo(_xmouse,_ymouse); //atualiza independente do FPS updateAfterEvent(); }; }; //evento onMouseUp, invocado quando o botão do mouse é solto mouseListener.onMouseUp = function() { //soltou o botão do mouse não desenha mais drawing = false; }; //Registando o objeto ouvinte mouseListener Mouse.addListener(mouseListener);
Velocidade do mouse desenhando
Para calcular a velocidade do mouse, o cálculo é a razão da distância pelo tempo. Para obter a distância é usado geometria, a fórmula para calcular a distância entre dois pontos é:
raiz quadrada da (posição atualX - posição incialX)² + (posição atualY - posição incialY)²
Em actionscript fica:
//Math.sqrt - raiz quadrada //Math.pow - eleva o valor do primeiro parâmetro ao valor passado no segundo parâmetro distance = Math.sqrt(Math.pow(_xmouse - oldX, 2) + Math.pow(_ymouse - oldY, 2));
O tempo usado, será obtido pela função global getTimer() que retorna o valor passado desde que o SWF foi iniciado. A função para o cálculo da velocidade:
//calcula a velocidade function showSpeed():Void { //distância distance = Math.sqrt(Math.pow(_xmouse - coord.oldX, 2) + Math.pow(_ymouse - coord.oldY, 2)); //tempo decorrido elapsedTime = (getTimer() / 100) - oldTimes; //armazena a velocidade na variável speed speed = Math.floor(distance / elapsedTime); //armazena o tempo atual oldTimes = getTimer() / 100; //armazenas as posições atuais no objeto coord coord.oldX = _xmouse; coord.oldY = _ymouse; };
O script final fica da seguinte forma:
//objeto com as configurações da linha var propLine:Object = {thickness: 3, color: 0x0000FF, alpha: 100}; //se está desenhando ou não var drawing:Boolean = false; //variáveis e objetos var elapsedTime:Number, speed:Number = 0, oldTimes:Number; var coord:Object = new Object(); //ouvinte dos eventos da classe Mouse var mouseListener:Object = new Object(); //evento onMouseDown, invocado quando o botão do mouse é pressionado mouseListener.onMouseDown = function() { //remove o movieclip mcDraw mcDraw.removeMovieClip(); //movieclip que armazenará o desenho createEmptyMovieClip("mcDraw", 1); //desenhando drawing = true; //estilo da linha //comente a linha abaixo se a linha de cor colorida foi descomentada mcDraw.lineStyle(propLine.thickness, propLine.color, propLine.alpha); //mudando o ponto de desenho para o novo ponto, a posição do mouse mcDraw.moveTo(_xmouse, _ymouse); }; //evento onMouseMove, invocado quando o mouse é movido mouseListener.onMouseMove = function() { //se estiver desenhando if(drawing) { //descomente a linha abaixo para desenhar colorido //mcDraw.lineStyle(propLine.thickness, Math.random() * 0xFFFFFF, propLine.alpha); //desenha por onde o mouse passar estando pressionado mcDraw.lineTo(_xmouse,_ymouse); //atualiza independente do FPS updateAfterEvent(); //calcula a velocidade showSpeed(); //exibe a velocidade do mouse trace("Speed: " + speed); }; }; //evento onMouseUp, invocado quando o botão do mouse é solto mouseListener.onMouseUp = function() { //soltou o botão do mouse não desenha mais drawing = false; }; //Registando o objeto ouvinte mouseListener Mouse.addListener(mouseListener); //calcula a velocidade function showSpeed():Void { //distância distance = Math.sqrt(Math.pow(_xmouse - coord.oldX, 2) + Math.pow(_ymouse - coord.oldY, 2)); //tempo decorrido elapsedTime = (getTimer() / 100) - oldTimes; //armazena a velocidade na variável speed speed = Math.floor(distance / elapsedTime); //armazena o tempo atual oldTimes = getTimer() / 100; //armazenas as posições atuais coord.oldX = _xmouse; coord.oldY = _ymouse; };
Deixei uma opção para desenhar colorido, basta descomentar e comentar as linhas indicadas no script, são apenas duas.
January 23rd, 2007 at 9:51
iradaço!! Parabéns pelo post!! Muito bom!
October 1st, 2007 at 12:01
Cara, é simples mas mesmo assim tu consegue aloprar… muito show!!!
April 19th, 2008 at 14:21
kra… agora q achei teu site na loka aki… tipo tava procurando curso de desenhos com o mouse e vi teu site….tipo só vi esta página me parece q vc da cursos de action script… resumindo tudo de flash 8 ou cs3 né? ^^
kra quero saber como é… vc da aulas ta tudo postado as aulas no teu site jah? ou vc espera formar uma turma? flw me mande respota por favor comecei nesse ramo agora mais sempre quis seguir a carrera de design grafico ou melhor dizendo de gamer degin msm… se vc puder me ajudar no falsh fico mto grato kra… se postar tudo ai em texto msm eu baxo tudo e faço em ksa… vlw kra deiz de jah teh masi e abraço