LUIZ HERRERA (117 pts)

MARLOS ALVES CARMO (90 pts)

DAAFY (55 pts)

SASHA GUDEY (235 pts)

ÉMERSON ROCHA (85 pts)

EDUARDO CARREGA (150 pts)

MARCOS JOSÉ PINTO (44 pts)

JONAS GALVEZ (521 pts)

DANIELA PIRES (86 pts)

HELEN TRIOLO (444 pts)

RICARDO TAKAHASHI (180 pts)

MARCELO SIQUEIRA (96 pts)
Treinamento PontoFlash de Flash e ActionScript

Como tirar o menu do FlasPlayer que se abre quando se clica com o botão direito do mouse?

Quero fazer uma busca de texto no Flash.

Como abrir uma janela popup no Flash?

Como criar rótulos para um botão criados dinamicamente, sem precisar declarar um a um?

Preciso fazer com que o Flash capture 2 teclas pressionadas ao mesmo tempo.

Qual o comando (e qual linguagem) eu utilizo para tirar as informações que aparecem na barra de status?

Usar uma variável importada de um TXT numa função do Flash.

Algumas dicas sobre fontes e tipografia

Como faço para checar se os campos de um formulário foram preenchidos?

Como fazer a timeline em vez de passar o filme para frente volte o filme?

Tem como importar paletas de cores para o Flash?

Como duplicar um movieclip (duplicateMovieclip) e colocá-los abaixo do original?

Como fazer movieclips rodarem em seqüência com intervalo de 3 segundos?

Como alterar o alpha (fade) de um botão no mouseOver e mosuseOut?
Sistema de newsletter utilizando Flash + ASP.

Jogo da Forca

Blend - Fireworks

Menu dinâmico a partir de um xml.

Macromedia Flash - Tendências

Animate - Fireworks

Desvendando cookies

Desenvolvendo um Tocador de Vídeo em Flash

Gerenciando camadas no CorelDraw

RIA, Macromedia Flex e Laszlo Presentation Server

Scroll - Rolagem de textos e Imagens

Texto difuso
Menu Tsunami

Search

RGB random

Following

WDDGmask

Rachadura

Text fx1

Imã

Photo album

Lightings

Drag MC 2

Cubes2
HOME | TUTORIAIS
Aspectos Básicos das Ferramentas de Desenho.
por Helen Triolo

Novos métodos para o objeto Movieclip foram incluídos no Flash MX. Entre eles o API (interface para programação de aplicativos - para desenho do Flash MX) que permite a criação dinâmica de movieclips em tempo de execução. Esta poderosa característica, junto com o novo método "createTextField", permite que o filme seja criado completamente do script, sem nada no palco ou na biblioteca se desejado, ou para modificar movieclips existentes no tempo de execução. Estes são os métodos principais para criar um movieclip e carregá-lo com um conteúdo desenhado:

· createEmptyMovieClip, para criar um movieclip em branco
· lineStyle, para definir o traço de um objeto de desenho
· beginFill, para definir o preenchimento de um objeto de desenho
· endFill, para fechar um objeto de desenho e aplicar a configuração de preenchimento em "beginFill"
· moveTo, para mover o "cursor" (ferramenta de desenho) para um novo local
· lineTo, para traçar uma linha do local atual para um novo
· curveTo, para traçar uma curva do local atual para um novo local

Note que todos estes são métodos de um objeto "MovieClip", até "createEmptyMovieClip" (porque o movieclip recém criado deve ser ligado a alguma linha de tempo - ou a outro movieclip, ou a linha de tempo principal). Os seis métodos abaixo do "createEmptyMovieClip" são aplicados ao clip recém criado.

Uma versão maior da forma mostrada à esquerda, abaixo, pode ser criada com os comandos mostrados à direita. Em seguida a este está o código script de ação (actionscript) equivalente (corte-o e cole-o nas ações do quadro 1 de um filme vazio e rode o Teste de Controle (Control Test) para ver por si):

// crie um movieclip em branco para conter as formas
// com traço de 2-pichels verde médio (00ee00 hex)
// e preenchimento em verde claro (00cc00) a 50% de opacidade
// inicie a forma em x=50, y=50// desenhe uma linha para 200, 150
// desenhe uma linha para 80, 210// feche a forma (mesmo que nenhuma linha retorne à origem)
// inicie uma nova forma no mesmo movieclip, linha de 3 pichel azul-verde
// preenchimento = azul, opacidade de 60%
// inicie esta forma em 180, 130
// desenhe uma curva para 250, 70 usando 200, 80 como controle
// desenhe outra curva para 40, 90 usando controle 200, 10
// finalize a curva 2 e aplique preenchimento

 

this.createEmptyMovieClip("someshapes", 1);
this.someshapes.lineStyle(2, 0x00ee00, 100);
this.someshapes.beginFill(0x00cc00, 50);
this.someshapes.moveTo(50, 50);
this.someshapes.lineTo(200, 150);
this.someshapes.lineTo(80, 210);
this.someshapes.endFill();
this.someshapes.lineStyle(3, 0x00eeee, 30);
this.someshapes.beginFill(0x0000cc, 60);
this.someshapes.moveTo(180, 130);
this.someshapes.curveTo(200, 80, 250, 70);
this.someshapes.curveTo(200, 10, 40, 90);
this.someshapes.endFill();

   Onde "this" é o equivalente para _root (se este código for colocado dentro do quadro 1 da linha de tempo principal), e "this.someshapes" se refere ao movieclip com nome de instância "someshapes em _root". Note que o comando "endFill" faz com que a forma fique próxima, mesmo que nenhum comando específico "lineTo" ou "curveTo" seja dado para a origem. O mesmo exemplo pode ser codificado mais eficientemente assim:

this.createEmptyMovieClip("someshapes", 1);
with (this.someshapes) {
   lineStyle(2, 0x00ee00, 100);
   beginFill(0x00cc00, 50);
   moveTo(50, 50);
   lineTo(200, 150);
   lineTo(80, 210);
   endFill(); lineStyle(3, 0x00eeee, 30);
   beginFill(0x0000cc, 60);
   moveTo(180, 130);
   curveTo(200, 80, 250, 70);
   curveTo(200, 10, 40, 90);
   endFill();
}

(E deve ser notado também, que em vez de recorrer a um movieclip criado por seu caminho ("this.someshapes"), uma pessoa pode também atribuir o valor retornado do método "createEmptyMovieClip" a uma variável e usar isso para recorrer ao movieclip):

var newclip = this.createEmptyMovieClip("someshapes", 1);
with (newclip) {
   lineStyle(2, 0x00ee00, 100);
   beginFill(0x00cc00, 50);
   // etc...
   endFill();
}

Isto se torna especialmente útil quando o caminho para o movieclip é mais complicado do que o simples "this.someshapes".

Desenhar curvas e círculos

Para traçar uma curva com a API para desenho do Flash, você utiliza o método "curveTo", que requer um ponto de controle e uma âncora ("endpoint"). O ponto de controle é um "nó" ("handle") em uma curva quadrática bezier que entorta a curva até a forma desejada. Porque existe somente um nó por curva ao invés de dois (como em um cubo bezier), este deve ser manipulado com cuidado para traçar corretamente os arcos que forem maiores do que 45 graus.

   Para ângulos até 45 graus e menores (um ponto arbitrário baseado em experimentação, mas, de fato, é um múltiplo de 360), o ponto de controle que fornecerá o melhor arco para um dado ângulo teta é x=r, y=r * tan(theta/2). Você pode constatar isto mexendo aleatoriamente com o ponto de controle nesta página.

   Utilizando este ponto de controle para um arco de 45-graus, podemos conectar oito arcos semelhantes para formar um círculo (45 * 8 = 360) com seus centros em x=100, y=100 e raio = 80 pixels:

MovieClip.prototype.drawCircle = function(r, x, y) {
   this.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);
               // control:
      // (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);
   }
}
var c80 = this.createEmptyMovieClip("c", 1);
c80.lineStyle(3, 0xaaaaaa, 100);
c80.beginFill(0xcccccc, 100);
c80.drawCircle(80, 100, 100);
c80.endFill();

Métodos de desenhar personalizados

O último trecho de código utiliza um método definido pelo usuário do objeto Movieclip, na forma:

MovieClip.prototype.drawCircle = function(r, x, y) {
   this.<drawing command>
}

   Atribuir um método ao objeto "Movieclip.prototype" permite que ele seja usado com qualquer movieclip em qualquer lugar do filme que inclua este código. Assim, caso queira desenhar um largo círculo amarelo de 10 pixels com uma borda verde em x=50, y=300, este código fará isto (enquanto a definição de "Movieclip.prototype.drawCircle" esteja incluída no filme, normalmente como um arquivo #incluído externamente):

var c = this.createEmptyMovieClip("c", 1);
c.lineStyle(1, 0x00aa00, 100);
c.beginFill(0xcccc00, 100);
c.drawCircle(10, 50, 300);
c.endFill();

Um método movieclip retângulo pode ser criado (e usado) de modo similar como a seguir:

MovieClip.prototype.rectangle_1 = function(w, h, x, y) {
   this.moveTo(x, y);
   this.lineTo(x + w, y);
   this.lineTo(x + w, y + h);
   this.lineTo(x, y + h);
}
var c1 = this.createEmptyMovieClip("clip", 1);
c1.lineStyle(1, 0x00aa00, 100);
c1.beginFill(0xffff00, 100);
c1.rectangle_1(60, 40, 100, 70);
c1.endFill();

Obtendo o "ponto de registro" correto para um movieclip criado dinamicamente
(ou, por que o retângulo amarelo continua a desaparecer)

O problema com o retângulo desenhado anteriormente é que seu ponto de registro (seu ponto de referência, quer dizer, para posicionamento, rotação, ou mudança de tamanho) não é bem como você pode imaginar. Porque o retângulo começa em x=100, y=70, a pessoa pode presumir que se trata do ponto de registro do movieclip, mas não é. Na verdade, o ponto de registro de um movieclip dinamicamente gerado será sempre x=0, y=0. Para fazê-lo em 100, ao invés de 70, a pessoa deve criar o clip e então movê-lo para sua posição desejada - desse modo, o canto superior esquerdo do objeto de desenho é o ponto de registro atual. Para fazer isto dentro do método Movieclip, as informações sobre cor e preenchimento também devem ser fornecidas ao método, de tal maneira que "beginFill" e "endFill" possam ser feitos antes que o clip seja movido (tudo dentro do método). Aqui está um exemplo, com informações sobre traço e preenchimento, fornecidas nos objetos correspondentes:

MovieClip.prototype.rectangle = function(w, h, x, y, stroke, fill) {
   this.lineStyle(stroke.width, stroke.color, stroke.alpha);
   this.beginFill(fill.color, fill.alpha); this.moveTo(0, 0);
   this.lineTo(w, 0);
   this.lineTo(w, h);
   this.lineTo(0, h);
   this.endFill();
   this._x = x;
   this._y = y;
}
var c = this.createEmptyMovieClip("c", 1);
var cstroke = {width:1, color:0x0000aa, alpha:50};
var ccolor = {color:0xcc0000, alpha:50};
c.rectangle(60, 40, 100, 70, cstroke, ccolor);

Isto produz um movieclip no qual o ponto de registro será seu canto superior esquerdo, o retângulo azul no filme acima, que foi criado pelo corte e colagem dos dois últimos fragmentos de código dentro do quadro 1 de um filme 300x150 vazio, seguido por isto aqui:

this.onEnterFrame = function() {
   c1._rotation += 5;
   c._rotation += 5;
}

Uma questão de direção

Como Peter Hall e outros notaram na lista de flashcoders, a direção (no sentido e contra o movimento dos ponteiros do relógio) na qual a forma é desenhada faz diferença se uma pessoa está desenhando mais do que uma forma dentro de um movieclip. Desenhar numa direção oposta a que foi desenhada antes, antes que o "endFill" seja aplicado, produzirá um corte na forma original:

var c = this.createEmptyMovieClip("c", 1);
with (c) {
   beginFill(0x00cc00, 100);
   moveTo(0, 0); // make big rectangle
   lineTo(100, 0);
   lineTo(100, 70);
   lineTo(0, 70);
   lineTo(0, 0);
   moveTo(80, 20); // cut out small rectangle
   lineTo(50, 20);
   lineTo(50, 40);
   lineTo(80, 40);
   lineTo(80, 20);
   endFill();
}

Tradução
Sergio 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
0 comentário