Introdução

O Flash MX tem a possibilidade de desenhar linhas e curvas dinamicamente, usando o novo método de desenho, o MovieClip Object. Neste tutorial, tentaremos transmitir-vos a maneira de criar simples linhas de desenho usando a API de desenho.

Downloads:

Ficheiro Fla Tutorial em PDF

A função principal que será usada é a seguinte:

myMovieClip.createEmptyMovieClip (instanceName, depth)

Descrição:

Este método cria um movie clip vazio de modo a que possamos começar desde logo a desenhar. Este método é similar ao método de attachMovie, não existindo necessidade de prover um nome para uma ligação ao novo movie clip. O ponto de registo para criar um novo e vazio movie clip é o canto superior esquerdo. Este método falha se algum dos parâmetros necessários não estiver incluído.

---------------------------------------
myMovieClip.lineStyle (thickness,rgb,alpha)

Descrição:

Este método especifica um estilo de linha que o Flash usará para as funções de lineTo e curveTo até que chamemos a função de lineStyle com diferentes parâmetros. Poderemos chamar à lineStyle no meio do desenho, um caminho para especificar diferentes estilos para diferentes segmentos de linha dentro de um caminho.

---------------------------------------
myMovieClip.moveTo (x, y)

Descrição:

Este método desloca a corrente posição de desenho para (x,y). Se algum dos parâmetros estiver a faltar, este método falha e a posição corrente do desenho não será alterada.

---------------------------------------
myMovieClip.lineTo (x, y)

Descrição:

Este método desenha uma linha usada no estilo corrente da linha de desenho obtida na posição corrente de desenho (x,y); a posição corrente de desenho é então actualizada para (x,y). Se o movie clip em que estamos a desenhar contém algum conteúdo que foi criado com as ferramentas de desenho do Flash, – chama o método lineTo que desenha por debaixo do conteúdo. Se chamarmos a função lineTo antes da função moveTo, a posição corrente de desenho por defeito será (0,0). Se alguns parametros estiverem a faltar, este método falha e a posição corrente de desenho não será alterada.

O processo:

1. Criem um novo filme e seleccionem a primeira frame. Abram a janela de Actionscript e insiram o seguinte código:

createEmptyMovieClip("Line",1);

O código acima referido cria um movieclip em branco com uma instance nomeada de Line com um depth de 1.

2. De seguida deveremos inserir o seguinte código para definir o estilo de linha:

Line.lineStyle(1,0x000000,100);

O código acima descrito programa o estilo de linha para que esta seja dinâmica. A Line será 1 ponto mais fina, terá uma cor preta, e um valor de alpha na casa dos 100.

Insiram agora, o código que permitirá desenhar a linha:

onMouseDown = function (){
Line.moveTo(_xmouse, _ymouse);

onMouseMove = function (){
Line.lineTo(_xmouse, _ymouse);}
}

onMouseUp=function(){
onMouseMove=null;
}

O código acima descrito, programa o Flash, para que se possa desenhar as linhas ou círculos assim que clicamos e arrastamos o rato.

Este é o código na sua totalidade:

createEmptyMovieClip("Line",1);
Line.lineStyle(1,0x000000,100);
onMouseDown = function ()
{
Line.moveTo(_xmouse, _ymouse);
onMouseMove = function ()
{ Line.lineTo(_xmouse, _ymouse);}
}

onMouseUp=function()
{
onMouseMove=null;
}

Testem de seguida o vosso filme. Cliquem e arrastem o rato de maneira a que possam ver as linhas ou círculos a serem criados. Se seguiram correctamente os passos anteriormente descritos, obterão o resultado esperado.

Esperamos que este trabalho vos tenha sido de alguma ajuda para os vossos trabalhos futuros. Se tiveres alguma dúvida ou questão, não hesites em utilizar os nossos Fóruns de Discussão.

Bons trabalhos!
Pedro Teixeira
pedro.teixeira@flashwebtraining.com