Desenhando com o mouse

Olá amigos do MXSTUDIO!

Algo muito interessante nos sites em Flash é o recurso de desenhar utilizando o mouse. Hoje explicarei como fazer isso.

Pré-requisitos:

Conhecimento básico em ActionScript

Objetivo:

Capacitar o leitor para que com um pouco de criatividade possa criar recursos interessantes utilizando o método que estudaremos hoje.

Mãos a obra:

Vamos criar um filme que enquanto estivermos com o botão do mouse pressionado, irá desenhar em nossa tela e quando soltarmos o botão irá parar de desenhar.

Crie um novo arquivo(Ctrl+N) e salve com o nome desenhando.fla

Nomeie a primeira camada do filme com AS, selecione o primeiro Frame, pressione F9 e vamos as Actions:

this.createEmptyMovieClip(“controlando_mc”,1); //aqui estamos criando um clipe de filme em branco na linha de tempo principal(this) chamado “controlando_mc”, que ocupa a ordem de empilhamento 1.
x=1; // aqui estamos criando uma variável chamada x que recebe (=) inicialmente o valor 1
atencao=new Object( ); //aqui críamos o primeiro “ouvinte”, digamos que irá “prestar atenção” no mouse
atencao.onMouseDown = function( ) { //aqui definimos o evento ao qual esse ouvinte irá ser acionado ao presionar o botão do mouse
x++ // aqui inicialmente incrementamos a variável X que críamos anteriormente
desenhar=true; //aqui foi críada a variável desenhar e seu valor definido (=)como (true)
_root.createEmptyMovieClip(“linha”+x,x); //aqui críamos na raiz do nosso filme um novo clipe de filme em branco cujo nome de instância sera (linha) concatenado (+) ao valor que a variável x tiver no momento (gerando nomes como, linha2, linha3, etc…) e definimos (através do segundo parâmetro dentro das chaves deste método que se localiza logo após a vírgula) a ordem de empilhamento para o valor da variável x.

_root["linha"+x].lineStyle(1,0×000000,100); //aqui definimos que para a instância referente a junção do texto”linha” e da variável x (linha2,linha3,etc) através da sintaxe utilizando colchetes o estilo da linha (método lineStyle()) terá espessura 1 , a cor preta (0×000000) e a opacidade 100.
_root["linha"+x].moveTo(_xmouse,_ymouse); //aqui definimos que mesma instância (_root["linha"+x]) posicionará seu inicio na posição no eixo x do mouse (propriedade _xmouse) e no eixo y do mouse (_ymouse).
}
Mouse.addListener(atencao); //aqui registramos ao objeto Mouse através do método addListener() o “ouvinte” que críamos (cujo o nome é “atencao”) digitando-o dentro do parenteses do método addListener(). atencao2=new Object ( ); // bastante parecido com o anterior, aqui o ouvinte chama-se atencao2, o evento é o de liberar o botão do mouse (onMouseUP), ou seja ,quando o botão do mouse está pressionado, a variável “desenhando” tem como valo verdadeiro; quando o botão é liberado, ela recebe o valor falso.
atencao2.onMouseUp = function( ) {
desenhar=false;
}
Mouse.addListener(atencao2);

controlando_mc.onEnterFrame = function( ){ // aqui críamos um evento de atualização constante para a instância que críamos logo no início do nosso código (controlando_mc).
if(desenhar==true){ //aqui críamos uma estrutura condicional para verificar se o valor da variável desenhar é igual ( = = ) a True (verdadeiro).

_root["linha"+x].lineTo(_xmouse,_ymouse);; //aqui definimospara a instância resultante da junção do texto”linha” e da variável x para que desenhe uma linha (lineTo ( )) até a posição que o mouse se encontrar atualmente no eixo x(_xmouse) e no eixo y(_ymouse) .

}

}

Considerações Finais:

Resumindo pessoal, cada vez que pressionamos o botão do mouse, a variável desenhando tem o valor True, então é criado um Clipe de filme vazio, em seguida definida sua posição inicial e traçadas retas até as posições em que seu mouse se encontrar enquanto o botão estiver pressionado. Ao soltar o botão do mouse, como a variável desenhando tem valor diferente de true, não se desenham mais linhas até que se pressione o botão novamente.

Forte abraço , abraço especial ao Natan que me ajudou nessa coluna

Autor: Danilo Forte – Colunista de Flash do Portal MXSTUDIO

Qualquer dúvida envie um e-mail para danilo_forte@mxstudio.com.br ou acesse nosso fórum