flash - cortinas deslizantes

14
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:

Upload: api-3831772

Post on 07-Jun-2015

631 views

Category:

Documents


5 download

TRANSCRIPT

Page 1: Flash - Cortinas Deslizantes

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:

Page 2: Flash - Cortinas Deslizantes

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

Page 3: Flash - Cortinas Deslizantes

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:

Page 4: Flash - Cortinas Deslizantes

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:

Page 5: Flash - Cortinas Deslizantes

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:

Page 6: Flash - Cortinas Deslizantes

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:

Page 7: Flash - Cortinas Deslizantes

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){

Page 8: Flash - Cortinas Deslizantes

_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:

Page 9: Flash - Cortinas Deslizantes

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)

Page 10: Flash - Cortinas Deslizantes

{_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:

Page 11: Flash - Cortinas Deslizantes

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:

Page 12: Flash - Cortinas Deslizantes

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: