O
que é isso? Um filme Flash que é simplesmente um ponto
branco? Sim, mas se você clicar em qualquer lugar na área
(300x100) do filme, irá desenhar uma linha do ponto até
o local do clique. Excitante, não? Veja agora como fazer:
Para
minimizar distorções quando o movieclip linha é
escalado, use uma linha bem fina. Crie um movieclip com uma linha que
comece em 0,0 e termine abaixo e à direita em 100,100. Dessa
maneira, definindo o xscale (ou yscale) o movieclip linha mudará
o valor de x (x-value ou y-value) correspondente mas o comprimento da
linha (width) não será afetado. Delete o clip do palco
e defina as configurações de exportação
desse movieclip na biblioteca (ctrl-L) de maneira que você possa
anexá-lo mais tarde (botão direito, Linkage, identifier=baseLine,
selecione Export this symbol).
Crie
uma função para desenhar a linha:
Para desenhar a linha de um ponto com coordenadas x/y (xStart, yStart)
para um ponto escolhido (xStop, yStop), a função anexará
uma nova instância do movieclip linha, posicionando-a para começar
em (xStart, yStart), definindo xscale e yscale para a diferença
entre xStop/xStart e yStop/yStart.
Com
essa função, você pode criar uma linha de (30,100)
para (200,20) chamando-a com aquelas coordenadas. Eis a função
e a chamada:
Para
desenhar uma linha de por exemplo (30,100) para (200,20), chame a função
diretamente com esses números ou com variáveis. Desenhe
um botão invisível para cobrir todo seu filme e coloque
nele:
on
(release) {
_root.iDepth = 1;
// Deve-se especificar um valor para a profundidade
para esse movieclip
xStart = 30;
yStart = 100;
xStop = 200;
yStop = 20;
drawLine(xStart, yStart, xStop, yStop);
}
Para
simular o efeito do exemplo acima, você tem que manter xStrt e
yStart fixo e definir xStop e yStop para a posição do
mouse na hora do clique (_root._xmouse e _root._ymouse). Além
disso, incremente uma variável profundidade (iDepth) para que
novas linhas possam ser criadas. Veja como ficaria o botão invisível
No
exemplo acima, 50 linhas são desenhadas com pontos iniciais randômicos.
O ponto final de todas as linhas é o mesmo (150,60). Clicar em
qualquer lugar no filme redesenha a linha com seus pontos finais igual
ao ponto onde foi clicado.
Crie
50 linhas usando a função previamente definida:
Eis
o código que chama a função drawLine para desenhar
50 linhas começando em pontos randômicos em nosso filme
300x100. O ponto final inicial de todas as linhas é definida
arbitrariamente em (150,60).
iDepth
= 0;
nLines = 50;
xStart = new Array(nLines);
yStart = new Array(nLines);
xMid = 150;
yMid = 60;
for (i=0; i < nlines; i++) {
xStart[i] = Math.random()*300;
yStart[i] = Math.random()*100;
drawLine(xStart[i], yStart[i], xMid, yMid);
iDepth++;
}
stop();
Encontre
o ponto clicado (mouseclick point), redesenhe as linhas:
Encontrar
o ponto mouseclick é simples. Coloque um botão invisível
sobre o filme todo. O ponto mouseclick é bem simples (_root._xmouse,
_root._ymouse). O botão também precisa deletar os movieclips
linha existentes para depois criar outras. Eis o código:
on
(release) {
// delete linhas existentes
for (i=(iDepth-nLines); i < iDepth; i++)
{
_root["Line" + i].removeMovieClip();
}
// desenhe novas linhas com novos pontos médios
for (i=0; i < nlines; i++) {
xMid = _root._xmouse;
yMid = _root._ymouse;
drawLine(xStart[i], yStart[i],
xMid, yMid);
iDepth++;
}
}
Tente
algumas variações:
Uma
vez você tenha uma idéia básica de como funcina
o sistema, você poderá experimentar centenas de exemplos
usando movieclips com shapes em vez de linhas ou animações
no lugar de objetos estáticos. Aqui está um no qual usamos
um movieclip com um gradiente e um movieclip controller adicional para
variar o ponto final randomicamente, mas com a mesma fucionalidade mouseclick
como descrito acima.
Tradução:
Alê Porto
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
2 comentários
Comentário de adriano | 6/10/2010 - 09:52 |
adasdasdasd
Comentário de marcelo prudente | 22/3/2010 - 17:31 |
Parabéns pelo site e a reformulação, só pra informar como pediram, os links desse tutorial estão quebrados