Cortinas deslizantes

Autor: Gustavo Henrique Carneirinho

Data de publicação: 11/03/2004
Parte do Tutorial: 1
Quantidade de Visualização: 27100
Cortinas deslizantes,

Vamos fazer agora um efeito de cortina para ser usado nos sites e aplicativos
multimídia.É um arquivo fácil de fazer e se bem aproveitado, vocês poderão criar muitas
coisas com ele, como um menu, um album de fotos, ou mesmo um site inteiro só com
esse arquivo, então vamos-lá.

Preparação do trabalho:

Esse tipo de animação vai abrir menus como se fossem uma sanfona, então precisaremos
criar entre 3 ou mais movieclips, nesse caso pelo padrão do site ou trabalhar com um
arquivo com 400 px de largura por 150 px de altura, vou criar o primeiro movieclip junto
com vocês e depois sozinhos vocês criarão os demais, mas vou ajudar aquí com as ações,
portanto, juntem aí material para colocar nos slides, aquí vou usar somente 5, mas o
numero de slides é ilimitado e fácil de acrescentar ao trabalho.

Criando a lateral do movieclip:

Com a ferramenta Rectangle Tool, vamos fazer um retangulo em pé, ele não terá bordas,
o preenchimento vou usar aquele degradê de branco para preto, que já vem pronto na
ferramenta de preenchimento do flash:

Desenhe o retangulo e aplique essa cor a ele:

Abram a paleta Color Mixer, com o objeto selecionado, vamos alterar as pontas preta e
branca, para um alpha de 40%:

Agora vamos selecionar o retangulo, apertar a tecla F8 e salvar ele como gráfico com o
nome de barras e clicar em OK.

Então agora temos um gráfico padrão pra ser a lateral da nossa cortina, fizemos esse
modo de transparencia, para poder aplicar a propriedade Tint ao nosso gráfico e colocar
ele de várias cores usando somente 1 símbolo da biblioteca, o resultado é economía de
tempo e de kbs do arquivo, pois assim a biblioteca fica mais fazía e só usamos cópias
desse gráfico.

Montando os movieclips das cortinas:

Vamos aproveitar essa instancia do gráfico que está no palco e vamos selecionar ele e
apertar a tecla F8 para salvar como um movieclip, esse será o movieclip "azul", vamos
dar um duplo clique no movieclip que está no palco para entrar na timeline desse
movieclip azul, vamos colocar o nome desse layer para coluna lateral, vamos clicar no
objeto no palco, colocar ele na posição 0 em x e y na barra de propriedades, e na
janelinha Color, vamos aplicar uma cor no tint Azul, com 60%:

Depois disso vamos criar um novo layer, com o nome conteudo, e vamos colocar algum
conteudo do lado direito da coluna, o legal sería jogar esse layer para baixo do layer
coluna lateral e fazer um retangulo por baixo do gráfico:
Isso vai até deixar a coluna com uma cor mais forte, usem mais layer para colocar
conteudo do lado direito da coluna, veja um exemplo:

Agora vamos criar um novo layer com o nome "Botão", nele vamos desenhar um
retangulo que peque toda a area do filme, depois salvaremos o retangulo como botão, e
edita-lo para ficar sua area só como HIT:
Agora vamos destrancar todos os layers, selecionar tudo o que estiver no palco, e na barra
de propriedades, vamos definir a posição em y do grupo todo para 0 (zero):

Fizemos isso, para que o movieclip tenha seu ponto 0 em X na ponta esqurda do
movieclip, notem que o grupo de objetos ficarão a direita do ponto central do movieclip.

Vamos então voltar para o palco principal, vamos clicar no movieclip e colocaremos a
posição dele em X para 0:
Agora repetiremos todas as ações encima, adicionando layers e colocando movieclip
sobre movieclip, até se formarem 5 movieclips, a unica diferença será o final, que vocês
deverão colocar aa posição em X no palco a olho, sempre forumando uma coloca
embaixo da outra, como o exemplo abaixo:

Para ficar com essa aparencia, eu joguei o layer dos botões para baixo de todos, façam 1
por 1 pos 5 movieclips, até chegar nesse resultado:
Agora que fizemos os 5 movieclips, é hora de começar a colocar as ações, vamos criar
um novo layer com o nome ações, e vamos colocar a seguinte ação nele:

function movermc(mc)
{
if (_root.mc_ativo == Falso)
{
novoX = mc.originalX;
}
else if (mc == _root.mc_ativo || mc._x < _root.mc_ativo._x)
{
novoX = mc.abertoX;
}
else
{
novoX = mc.fechadoX;
}
distanciaX = novoX - mc._x;
mc._x = mc._x + distanciaX / _root.velocidade;
}
mc_ativo = Falso;
velocidade = 6;

Aquí criamos os 3 estágios do nosso movieclip, ele com a posição normal, ele quando se
fecha e quando se abre, agora vamos para a parte mais chata que é declarar esses valores,
então vamos clicar em View/ Rules ele abrirá as guias pra gente trabalhar melhor, vamos
então adiantar e colocar essa ação em cada um dos movieclips:

onClipEvent (load)
{
originalX = this._x;
abertoX = 0;
fechadoX = 0;
}
onClipEvent (enterFrame)
{
_root.movermc(this);
}

Depois de colocar essa ação em todos os movieclips será a hora de altera-las, esses
movieclips terão 3 posições, que é quando ele começa, quando abre para mostrar o
conteudo e quando se fecha pra mostrar o conteudo dos outros, então o OriginalX é o
valor em X do moviclip de quando ele começa, vamos fazer agora o fechadoX.

Quando o usuário passar o mouse em uma das cortinas elas vão se deslocar para a direita,
para a selecionada mostrar o conteudo, então vamos fazer o seguinte, vamos deixar todos
os layers invisíveis, clicando naquele olho ao lado do cadeado:

Agora com o palco em branco vamos puxar uma linha guía para o final do palco:

Vamos destrancar os layers e desocultar a visualização denovo, com a tecla SHIFT

pressionada, vamos selecionar todos os movieclips do segundo em diante, e arrastar eles
para a direita até a coluna do ultimo movieclip tocar na linha guía, como na figura
abaixo:
com os movieclips nessa posição, vamos clicar no primeiro movieclip do grupo da
direita, e na barra de propriedades vamos pegar o valor que aparecerá em x, e vamos
adicionar esse valor a ação do mesmo movieclip:

Notem que o movieclip laranja acima, está com o valor 279 em x, então vamos clicar no
movieclip e abrir o painel de ações e adicionar esse valor ao fechadoX:

onClipEvent (load)
{
originalX = this._x;
abertoX = 0;
fechadoX = 279;
}
onClipEvent (enterFrame)
{
_root.movermc(this);
}

O mesmo processo faremos com os outros movieclips, vamos clicar no verde, fazer a
leitura da sua posição em x e adicionar a posição ao código no fechadoX, assim
sucessivamente até o ultimo movieclip.

Feito isso vamos pegar o primeiro movieclip da direita, e vamos com a tecla Shift + seta
para a esquerda (left), trazer ele até cobrir a metade da primera coluna, como na figura
abaixo:

Notem que o movieclip laranja ficou sobre o movieclip azul, o mesmo fazemos com o
resto,, o verde encima do laranja, o mermelho encima do verde e assim por diante até
chegar a esse ponto:

Essa posição será o abertoX, então vamos repetir o mesmo processo, vamos clicar do
movieclip laranja em diante, vamos pegar o valor dele em x e colocar na ação do frame
em abertoX:
Como podem notar o movieclip laranja está com a posição 13 em x, então vou abrir a
barra de ações dele e colocar a seguinte ação:

onClipEvent (load)
{
originalX = this._x;
abertoX = 13;
fechadoX = 279;
}
onClipEvent (enterFrame)
{
_root.movermc(this);
}

E o mesmo fazemos com os outros movieclips, só não é necessário fazer ao primeiro pois
ele não se move em tempo algum, então façam o mesmo procedimento até o ultimo
movieclip da direita.

Depois disso vamos retornar os movieclips as suas posições originais:

Agora nosso trabalho está quase pronto, só falta dar as ações aos botões que estão dentro
do movieclip.Então abram o primeiro movieclip e coloquem essa ação no botão:

on (rollOver)
{
_root.mc_ativo = this;
}
on (rollOut)
{
_root.mc_ativo = Falso;
}

Essa mesma ação vocês vão colocar nos outros botões dos outros movieclips, no final de
todo esse trabalho o resultado deverá ser esse: