4 replies to this topic

[macromotion]

Olá pessoal, estava navegando na net. e me deparei, com ele site do Bacardi mto loko, ai pintou umas dúvidas dos efeitos, como foram feitos, espero que vc's possam me exclarecer.
1 - como fazer aquele preloader que, conforme vai carregando o desenho vai enchendo ou modificando.
2 - depois de carregado, passe por cima do logo, e veja o efeito, como faz?
3 - o ultimo(ufa), qdo está aparecendo o dj, aquele efeito de que vem para o rosto (tipo blur)?
4 - já ia equecendo o que achei mais loko, aquele efeito de luz que vem passadn o no DJ3.0, sempre tentei fazer mais nunca consegui (hehe)?
Obrigado,

Edição feita por: macromotion, 10/07/2004, 17:04.

[G3r4ld0]

Oi !

Tipo cara...

O efeito do preload acho que não é tão difícil... uma vez que você tem um preload com barra, apenas modifique onde tem x para y, para ele carregar para cima (ou para baixo, depende do valor que você atribui ao código... mais ou menos)...

Aí você usa máscara... Tipo, não lembro muito bem se é assim o preload dele, mas acho que com a minha explicação você já pega:

1º camada onde vai ficar o desenho que você quer q apareça, por motivos óbvios, da cor do fundo...

2º Uma bola, que será a máscara...

3º a barra do preload...

Pronto... A medida que a barra em outra cor for subindo (somente na bola, por causa da máscara), ela também vai revelando o desenho, por que o fundo vai mudar a cor...


Tipo... Tem muita coisa aí que da pra simplificar... mas to falando assim, sem fazer... Tipo... quando tu for fazendo tu vai perceber o que vai dar pra descartar ou modificar..
(to levando em conta que você já sabe algo... qualquer coisa avisa que eu posto algo mais exlpicado)...


2 - logo...

me pareceu muito fácil.. : /


Ele pode ter feito de outro jeito, mas assim também da:

No "over" do logo, criou um MC com um circulo, o mesmo com um gradiente (degradê), radial, com o meio branco e ponta preta (acredito que com 100% de transparência fique melhor.. : / Mas ele não parece ter colocado a tal transparência).

Nesse MC com o circulo, ele criou um tween (em portuguÊs acho que é interpolação de movimento : / ), e com um alpha 0 no final. (e óbviamente um stop)... só.. : /


Tipo, o do reflexo no logo, é bem fácil.. (uso bastante).. Um pouco complicfado de explicar, mas tenta acompanhar:

Provavelmente aquilo é um JPG, aí ele criou no flash um texto, com a mesma palavra, no mesmo tamanho e colocou uma camada acima... Agora:

quando o texto normal do flash estiver tampando o do JPG, aperte F8 e transforme em um MC,... nesse mc:

Aperte CTRL+B (desagrupar), aí ele vai fazer um negocio de texto para cada letra... depois, aperte de novo.. viu o que acontece ? Daí você j[á deve ter matado....

mas como jah escrevi até aki.. ;P vo terminar:


Crie uma camada abaixo, e nela faça um retangulo, grosso, sem bordas... preenchimento gradiente linear...
Transparente / 50% branco / transparente...

Pegue o baldim (hehe) e pinte até vc achar q ta maneira a centralização, ta disfarçando bem (não dando pra ver as retas do triangulo)... depois, (ou no passo anterior já poderia até ter feito, mas costumo fazer agora.. )...

Incline ele, pode ser rotacionando normalmente.. Sei lá quantos graus,.. ;P Como você preferir o refrexo...

posicione o reflexo antes do texto, coloke interpolação (tween), vá alguns frames a frente (nesse efeito, eu acho que quanto mais devagar ele for, melhor, então acho que bem pra frente fika legal )... E adicione um keyframe.. agora coloke o refrexo depois do texto.. ;P

coloke o texto ateh o frame onde o refrexo termina também... (óbvio)... e pimba ! máscara..

pronto... olha o efeito q da.. (foi assim que fiz no: www.hogsmeade.com.br )

Tipo, eu tirei da minha cabeça isso.. : / por isso acredito que deve ter maneiras melhores.. ;P mas essa funciona... auahuhuaa..


Tipo, exlpiquei achando que você já saca algo, caso não tenha entendido, fala que eu tento exlpicar melhor.. ; )

Flw !

[macromotion]

com relação, ao efeito do texto, entendi perfeitamente, mas o do preloader, não entendi, tem como vc explicar mais detalhadamente ou postar um exemplo? Grato,

[G3r4ld0]

Bem... Vou tentar...

Aqui no fórum mesmo tem um exemplo de preload mais ou menos assim:

No código, tem que criar uma barra:
No caso naquele quadradin dos pontinhos, hehe, quando você ta fazendo o MC, voce deixa marcado o ponto da esquerda... Agora, deixei o de baixo.. ;P e crie a barra... instancie ela... (no exemplo que to seguindo ta como "barra" sem aspas).

this.barra._xscale = 0;

xscale é largura, certo ? Mas o que nós queremos é altura, então troque por:

this.barra._yscale = 0;

E na segunda mensão a isso, mais a frente:

bem, esse valor é em porcentagem. Então acabamos de dizer que ele é 0. No desenrolar do código ele diz:

this.barra._xscale = pct;

(essa pct já ta declarada... no código... (de qualquer jeito vou dar o código todo mais abaixo, é só pra você ir entendendo)...

basta trocar o xscale agora, por yscale de novo..

this.barra._yscale = pct;


Perfeito, código feito... Agora:

crie 3 camadas, e:

na 1º desenhe o que você quer que vá aparecendo dentro da bola;

na 2º a bola (ciirculo).

na 3º a camada que já tinha, com a barra.

Posicione de forma que a barra cubra o ´circulo (ou seja, onde tenha circulo, tenha barra)... agora, transforme o circulo (segunda camada), em máscara...

E pimba !



bem, aqui ta o código completo d preload:

this.stop();
this.barra._yscale = 0;
this.carregador = function() {
	var total = this.getBytesTotal();
	var carregado = this.getBytesLoaded();
	var pct = Math.floor(carregado*100/total);
	this.porcentagem.text = pct+'%';
	this.barra._yscale = pct;
	if (total>4 && pct == 100) {
  this.gotoAndPlay('1', 'Scene 1');
  clearInterval(this.interval);
	}
};
this.interval = setInterval(this, "carregador", 200);

Ele ta com uma coisa a mais... o "porcentagem"... que exibe tipo : 99%, saca ?

Então, para exibir basta criar um campo de texto dinâmcio com instancia "porcentagem", sem aspas...


Como eu explico mt mal.. ;P aqui ta um .fla

tipo, não testeí o código, mas não vejo motivo para que não decerto... rs

Para baixar o .fla, clique aqui !


Flw !

[macromotion]

vlw,