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 álbum 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
400px de largura por 150px de altura, vou criar o primeiro movieclips junto com vocês e depois
sozinhos vocês criarão os demais, mas vou ajudar aqui com as ações, portanto, juntem aí
material para colocar nos slides, aqui 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: