..:: MX Studio Fóruns ::..: Fazer uma bandeira tremular da direita para a esquerda [RESOLVIDO] - ..:: MX Studio Fóruns ::..

Jump to content

Publicidade




ATENÇÃO

Para evitar posts desnecessários e que não influam para o andamento e desenvolvimento do fórum, clique aqui e leia todas as regras.
Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic

Fazer uma bandeira tremular da direita para a esquerda [RESOLVIDO]

#1 User is offline   Marcos Bin 

  • Group: Membros
  • Posts: 25
  • Joined: 13-March 07

Posted 09 November 2009 - 03:45 AM

Olá. Eu comprei um banner para adaptá-lo e consegui fazer isso até certo ponto. Trata-se do efeito de uma bandeira tremulando ao vento. Acontece que o AS utilizado pelo autor só faz a bandeira tremular da esquerda para a direita - ou seja, o lado esquerdo é pouco movimentado, ao contrário do direito. Como eu quero fazer uma faixa puxada por um avião, e há um texto nela, o efeito precisa ser da direita para a esquerda, por causa da cordinha que o avião puxa. Espelhando a imagem funciona, mas eu quero que o avião vá da esq. para a dir., pois esta é a forma de leitura ocidental. Por favor, alguém pode me ajudar? Tentei mexer no AS de todas as formas mas não consegui. O código está abaixo, mas vcs podem pegá-lo no arquivo FLA tb, que está no link http://www.marcosbin.com/downloads/teste.rar.

Obrigado.


Eis o AS:

Stage.scaleMode = 'noScale';

/*
Here, perlin noise is used to create random waves in
a movie clip that is used as a displacement map for a
flag movie clip making it appear as though it is waving
*/

// create a movie clip in displace_mc to
// draw perlin noise in
displace_mc.createEmptyMovieClip("perlin", 1);
// ramp is a movie clip already in displace_mc that is
// used to ease the perlin noise from non effective on the
// left side of the flag to fully effective on the right
var ramp:MovieClip = displace_mc.ramp;
ramp.swapDepths(2); // place ramp above perlin noise

// ** 50% red is no displacement in the displacement map
// the ramp goes from 50% red to transparent letting
// the perlin noise show through as you move further right

// GENERAL variables
var speed = 8; // speed at which noise is shifted (causes flap)
var channel = 1; // red - red used to displace pixels along


// DISPLACEMENT variables
var flapX = 20; // power of pixel displacement along x axis
var flapY = 40; // power of pixel displacement along y axis
var mode = "clamp"; // clamp the image so none of the original is seen
// ** inside the flag movie clip there is an invisible border that is
// used to extend the bounds of the clip beyond that of the flag image
// this lets the displacement map extend further past the extents of the flag
var offset = new flash.geom.Point(0, 0); // displacment map offset

// create BitmapData object encompasing the size of the displace ramp
// for the displacement and create a displace filter that uses it
var displaceBitmap:flash.display.BitmapData = new flash.display.BitmapData(ramp._width, ramp._height);
var displaceFilter:flash.filters.DisplacementMapFilter = new flash.filters.DisplacementMapFilter(displaceBitmap, offset, channel, channel, flapX, flapY, mode);


// PERLINNOISE variables
var baseX = 80; // size of noise in x axis
var baseY = 0; // size of noise in y axis
var octs = 1; // noise functions for noise (smaller = faster)
var seed = Math.floor(Math.random() * 50); // random seed for noise
var stitch = true; // stitching makes the noise wrap making it easy to repeat
var fractal = true; // use fractal noise
var gray = false; // grayscale is not used because the red channel is

// create BitmapData object for the noise and apply perlinNoise. It will be repeated
// along y so it only needs to be 1 pixel high. How long it is determines the
// variants of noise produced. With the stitching and thanks to beginGradientFill,
// we will just loop the noise over time.
var noiseBitmap:flash.display.BitmapData = new flash.display.BitmapData(500, 1);
noiseBitmap.perlinNoise(baseX, baseY, octs, seed, stitch, fractal, channel, gray);

// the shift matrix allows for the noise to be moved over time
// using beginBitmapFill since the noise is only created once
// and just looped for the flag effect
var shift:flash.geom.Matrix = new flash.geom.Matrix();

// every frame
onEnterFrame = function(){

// move the matrix by speed along x to shift the noise
shift.translate(speed, 0);

// drawing in the perlin movie clip,
// create a rectangle with the perlin noise
// drawn in it with an offset supplied by the
// shift matrix
with (displace_mc.perlin){
clear();
beginBitmapFill(noiseBitmap, shift);
moveTo(0,0);
lineTo(ramp._width, 0);
lineTo(ramp._width, ramp._height);
lineTo(0, ramp._height);
lineTo(0, 0);
endFill();
}

// draw the displacement movie clip in the
// displaceBitmap (used in displaceFilter)
displaceBitmap.draw(displace_mc);
// apply displaceFilter to the flag
flag_mc.filters = [displaceFilter];
}


// show the displacement image when the mouse is pressed
onMouseDown = function(){
displace_mc._visible = false;
flag_mc._visible = true;
}
// go back to showing main image when the mouse is released
onMouseUp = function(){
displace_mc._visible = false;
flag_mc._visible = true;
}

// initiate
onMouseUp();
0

#2 User is offline   Rodrigo Pixel 

  • Group: Moderadores
  • Posts: 1279
  • Joined: 07-May 07

Posted 09 November 2009 - 08:16 AM

blz?

2 coisas que fiz:

1º - pra mudar a direção do movimento da bandeira, apenas alterei valores da linha 23 na variável speed colocando valor negativo.
Alterando o valores também irá alterar a velocidade do efeito. Numero 8 é o padrão de velocidade do arquivo.

linha 23 coloque valor positivo vai fazer efeito esquerda pra direita ---------->>>
CÓDIGO
var speed = 8;


linha 23 coloque valor negativo vai fazer efeito direita pra esquerda <<<<----------
CÓDIGO
var speed = -8;




2º - pra mudar a intensidade do movimento da bandeira e bem como a posição onde esse movimento acontece, deverá alterar o alpha das cores em gradiente do seu MC na biblioteca com nome ramp (que tem retângulo com 2 cores em vermelho em gradiente)

Tem 2 cores de gradientes nesse MC ramp.

No painel de cores de gradiente:
No quadrado da cor da esquerda tem cor vermelha sem alpha (100% de alpha)
No quadrado da cor da direita tem cor vermelha com alpha (0% de alpha)

Basta inverter a ordem das cores de alpha e opaca pra mudar posição de força de movimento,...
o que você tem que perceber é, que onde tem a cor com alpha 0% sofrerá alteração com mais força no movimento, e onde tem cor sem alpha ou menos alpha em %, terá pouca ou nenhuma alteração no movimento, basta ajustar essas cores.

Arquivo CS3/CS4:
http://rapidshare.com/files/304438386/teste.fla.html

Abraço.
0

#3 User is offline   Marcos Bin 

  • Group: Membros
  • Posts: 25
  • Joined: 13-March 07

Posted 09 November 2009 - 04:30 PM

Rodrigo, muito obrigado pela explicação. Ainda não pude testar - farei isso à noite - mas já queria agradecer. Depois que eu fizer, te mostro o resultado. Abs
0

#4 User is offline   Marcos Bin 

  • Group: Membros
  • Posts: 25
  • Joined: 13-March 07

Posted 10 November 2009 - 02:33 AM

Rodrigo, funcionou direitinho. Valeu pela dica do gradiente, ajudou muito. Consegui até incrementar o banner fazendo ondas no mar, com esse mesmo esquema. Se quiser ver online, me diga que eu te passo o link por e-mail. Obrigado por dividir seus conhecimentos com a galera. Abs
0

Share this topic:


Page 1 of 1
  • You cannot start a new topic
  • You cannot reply to this topic



Publicidade




1 User(s) are reading this topic
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)