Abaixo
está um exemplo de um filme Flash MX que foi inteiramente codificado
em script (nada no Palco, nada na Biblioteca), utilizando as novas ferramentas
de desenho em script.
Você
pode desenhar linhas e formas em Flash utilizando esses métodos
movieclip:
- moveTo, para mover o "cursor" (ferramenta de desenho) para
um novo local;
- lineTo, para desenhar uma linha do local onde você está
até um novo local;
- curveTo, para desenhar uma linha curva do ponto onde você está
até um novo local;
Os métodos lineStyle, beginFill e endFill serão utilizados
para fornecer traços (stroke) e informações de
preenchimento para as formas que você desenhar. Os dois primeiros
métodos são de uso direto - apenas especifique a localização
X e Y do pixel a partir do qual você deseja iniciar, ou para o
qual você deseja se mover. Por exemplo, para criar um novo movieclip
que contenha um trapezoide verde que parta em 100,100 coloque este código
no quadro 1 de um filme diferentemente vazio (ou não):
Que
criará um novo movieclip com um box de nome de instância,
dentro do movieclip onde você entrou com o código (a linha
de tempo principal, _root, nesse caso), a 4 de profundidade (dentro
da _root).
Desenhar uma curva
Para desenhar uma curva, você necessita utilizar o método
curveTo, que requer um ponto de controle e uma âncora (endpoint).
O ponto de controle é uma "alça" numa curva
bezier quadrática que dobra a curva até a forma desejada.
Porque existe somente uma alça por curva ao invés de duas
(como numa bezier cúbica), alguma manipulação deve
ser feita para corrigir os arcos desenhados que forem maiores que 45
graus.
Para ângulos de 45 graus (um ponto arbitrário, baseado
em experimentação, o fato é que ele é múltiplo
de 360) e menores, o ponto de controle que fornece o melhor arco para
um ângulo teta dado é x=r, y=r * tan(theta/2). Você
pode verificar se isso está certo medindo em volta com o ponto
de controle nesta página.
Então, para desenhar um círculo completo, desenhamos simplesmente
oito arcos de 45 graus em seqüência:
function drawCircle(r, x, y) {
lineStyle(1, 0x000000);
moveTo(x+r, y);
a = Math.tan(22.5 * Math.PI/180);
for (var angle = 45; angle<=360; angle += 45) {
// endpoint
var endx = r*Math.cos(angle*Math.PI/180);
var endy = r*Math.sin(angle*Math.PI/180);
// anchor
// (angle-90 is used to give the correct sign)
var cx =endx + r*a*Math.cos((angle-90)*Math.PI/180);
var cy =endy + r*a*Math.sin((angle-90)*Math.PI/180);
this.curveTo(cx+x, cy+y, endx+x, endy+y);
}
}
drawCircle(80, 100, 100);
Como
alternativa, para maior rapidez, a equivalência numérica
correta de cada valor pode ser substituída. A mesma idéia
pode ser utilizada para desenhar um arco de qualquer número de
graus. Simplesmente divida o arco em segmentos iguais ao tamanho da
base, utilizando curveTo para desenhá-los, e então desenhe
qualquer "extra" residual após a divisão. Para
os nossos segmentos de gráfico circular, utilizamos um arco de
30 graus como base e o seguinte código para desenhar cada arco:
Math.rad = Math.PI/180; // conversion, degrees to radians
var nSeg = Math.floor(angle/30); // eg 2 if angle is 80
var pSeg = angle - nSeg*30; // eg 20 degrees if angle is 80
var a = 0.268; // tan(15)
for (var i=0; i 0) {
a = Math.tan(pSeg/2 * Math.rad);
endx = r*Math.cos((i*30+pSeg)*Math.rad);
endy = r*Math.sin((i*30+pSeg)*Math.rad);
cx = endx+r*a*Math.cos((i*30 + pSeg-90)*Math.rad);
cy = endy+r*a*Math.sin((i*30 + pSeg-90)*Math.rad);
this.curveTo(cx, cy, endx, endy);
}
Para
ver o código completo utilizado no exemplo acima, verifique
aqui. Nossos agradecimentos a Martin Dubuc pelo magnífico
marcador (highlighter) AS.
Para dar uma olhada em como criar campos de texto (textfields) rapidamente,
continue no Criar Textos.
Ou para obter os objetos que você criou para fazer alguma coisa,
verifique a página Event Handlers (Identificadores de Eventos).
Tradução:
Sérgio Ramalho
Devido à reformulação implementada no site, pode ser que você encontre alguns links quebrados. Por favor, ajude-nos a corrigir eventuais problemas nos informando links quebrados