RICARDO TEIXEIRA (40 pts)

MAURO ROCHA TAVARES (40 pts)

EDUARDO PERROUD (52 pts)

RÔMULO NUNES (32 pts)

MUZAK (45 pts)

GUILHERME G.G. (137 pts)

SASHA GUDEY (235 pts)

FLASHGURU (155 pts)

NILTON BICALHO (61 pts)

RICARDO FIGUEIRA (33 pts)

STICKMAN (155 pts)

GUILHERME SCHEIBE (49 pts)
Treinamento PontoFlash de Flash e ActionScript

Como utilizar a função para procurar valores dentro de uma variável?

Porque um campo de texto (text field) com uma rotação de 90 graus desaparece?

Como posso dessaturar uma foto para seus níveis de preto e branco?

Tem como eu controlar um movieclip de outro movieclip?

Como verificar a resolução do usuário e abrir um filme compatível?

Alguém poderia me dizer o que é streaming?

Duplicate Movieclip com movimento, perspectiva, escala e serInterval.

Como alterar o alpha (fade) de um botão no mouseOver e mosuseOut?

Botões feitos no Fireworks não funcionam em um e-mail.

Como fazer um autorun em um CD para abrir um .EXE feito pelo Flash já em tela cheia?

Como carregar e posicionar dinamicamente seis JPGs?

Qual a maneira de colocarmos uma figura (gif) como plano de fundo em um fla?

Tenho um botão dentro de um movieclip e quero que este movieclip desapareça quando eu clicar no botão.

Como que faz para um gif ou uma imagem seguir o mouse?
Carregando SWFs em diferentes níveis.

Integrando o Flash com Arquivos de Vídeos II.

Como fatiar um site modelo portal no Fireworks

Máscara percorrendo um caminho.

3D Wireframe - segunda parte

O desenho animado abrindo sites.

Motion Guide (guia de movimento).

Avaliação do site de O Boticário

Escrevendo e lendo arquivos TXT com o FlashMX.

Macromedia Flash - Tendências

Flash Turbine (integração Flash com PHP ou ASP)

Programando objetos 3D em Plataformas 2D como a do Flash
DragVariable

Ir e voltar

F5scrolltext

Planeta girando

Imagem transparente

Swirl2

F5 loading scene

Nome obrigatório

Raysoflight 2

Cleopalyer

Colisao e swap

To Lower Case
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