GUILHERME G.G. (137 pts)

NETO LEAL (116 pts)

ZEBEDIAH (35 pts)

ALEXANDRE PORTO (1281 pts)

LEANDRO AMANO (83 pts)

GABRIEL SPORCH (53 pts)

DENIS CARAVALHO (85 pts)

ZECA BALA (45 pts)

MAURO ROCHA TAVARES (40 pts)

MANGOOST (80 pts)

EDUARDO PERROUD (52 pts)

EDUARDO CARREGA (150 pts)
Treinamento PontoFlash de Flash e ActionScript

Como faço para redimensionar dinamicamente (via AS) um campo de texto dinâmico?

Como fazer um objeto isqueiro acender quando arrasto sobre outro (fogão)?

Como fazer um objeto ter um movimento elástico?

Quero chamar um determinado frame na timeline do flash a partir de outro frame Html?

Como fazer para o flash puxar um texto de um arquivo externo?

Como justificar um texto e criar uma barra colorida?

Tenho um filme e gostaria de fazer um loading pois o shockwave deu 100 kb.

Quero fazer um efeito ALT (tooltip) num botão do Flash.

Quero que quatro movie clips percorram o stage e parem um abaixo do outro.

Como fazer uma timeline andar mais lenta que outra?

Quero colocar as propriedades _xmouse e _ymouse em só um campo dinâmico.

Um movie clip, em uma cena, pode continuar, em outra cena, de onde parou?

Usando o método split para criar uma array de uma string?

Alguém sabe se existe um jeito de fazer um movie clip aparecer em locais aleatorios da tela?
Carregamento dinâmico de JPG e máscara por AS

Scroll Text.

Eventos no FlashMX

Menu com tooltip usando actionscript.

Máscara arrastável no Flash 5.

Betinhocarreiro e Dysney.

Sistema de newsletter utilizando Flash + ASP

Efeito de texto esticado (stretched text).

Configurando texto via actionscript.

Flash e as mudanças do IE

Máscaras no Fireworks MX, o mistério!

Guias de movimento (motion guide)
Mouseline

Drag and zoom

F5 Scroll

Barra de som

Tension

3d All

Motionblur

Type 2

Type sound

Alpha

Foto mask

Menu rotativo
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