Resumo

Neste tutorial você vai aprender como criar um efeito de transição cubo em capotamento mouse.

Aqui o resultado final:


Requisitos

Flash CS3 ou Flash CS4.

Nota: A imagem deste tutorial é feito em Flash CS3. Ela funciona exatamente da mesma no Flash CS4.

Passo 1 - Instalar o componente do efeito

Adquira o Efeito de Transição Cube aqui. Por favor, siga as instruções de instalação e arraste o componente do painel de componentes para a biblioteca do seu arquivo FLA..

Arrastar componente em biblioteca

Passo 2 - Crie uma nova camada

Para manter as coisas arrumadas você deve criar uma nova camada na timeline principal e dar-lhe um nome. Faça isso como mostrado na imagem abaixo.

Criar camada na timeline principal

Passo 3 - Criar um fundo

Agora você cria um fundo com um gradiente. Embora isso não é necessário para fazer funcionar o efeito que isso mostra que o efeito também funciona com conteúdo transparente (mais sobre isso mais tarde).

Selecione o primeiro quadro no bg "camada e desenhe uma forma com a ferramenta retângulo na tela. Selecione o retângulo e ajuste as configurações de cor para ter um gradiente nice (você também pode usar qualquer outra cor).

Criar forma de fundo

As definições de cor gradiente

Passo 4 - Criar um botão

O efeito cubo deve reagir de forma dinâmica para o estado do mouse usuários (rollover / rollout). Ele não é o melhor prática para adicionar o ouvinte de eventos para o efeito em si e use um "branco" botão.

Clique o primeiro quadro da camada "btn" e desenhe um retângulo com o tamanho da tela (cor não mater uma vez que o botão não será visível). Selecione o retângulo e convertê-lo para um botão com [F8] ou com o botão direito sobre o MovieClip -> "Convert to Symbol ...".

Converter a forma de botão

Defina o nome do botão para "btn" e certifique-se que o tipo é "Button".

Defina o nome do botão

Dê um duplo clique no botão. Agora, arraste o primeiro quadro-chave "Up" para o último frame "Hit". Isso torna-se, que o botão vai ser interativo, mas não visível.

Mudar-chave dentro do botão

Voltar para a timeline principal e definir o nome de instância do botão para "btn".

Definir nome de instância do botão

Passo 5 - Criar iniciar Movieclip

O efeito deve ter os dois Movieclip onde as informações visuais são retirados. Você vai agora criar o MovieClip a transição irá começar.

Clique no primeiro quadro da camada "img1". Importar uma imagem com o tamanho da tela pressionando [pressione Ctrl-R] ou "File" -> "Import" -> "Importar on Stage ...".

Importação de imagens

Agora converter essa imagem em um movieclip com o nome "img1".

Converter imagem para Movieclip

Defina o nome do Movieclip

Definir o nome da instância do recém-criado Movieclip com "img1".

Definir nome de instância

Passo 6 - Criar End Movieclip

Fim do movieclip irá conter texto em vez de uma imagem. A conseguir isso, você vai precisar de uma abordagem um pouco diferente.

Selecione o primeiro quadro da camada "img2" (ok nomeação, ruim, fique à vontade para corrigir essa :) ) E desenhe um retângulo com o tamanho da tela. Você quer ter certeza de que o MovieClip End tem as mesmas dimensões que o MovieClip Iniciar. Isso é porque você primeiramente elaborar uma forma invisível com o mesmo tamanho que o MovieClip Iniciar.

Forma Draw

Selecione a forma e defina o valor alpha para 0 (a forma ainda está lá, mas invisível).

Definir alfa de forma

Converter a forma de uma prima F8 Movieclip [] ou com o botão direito sobre o MovieClip -> "Convert to Symbol ..." com o nome "img2".

Converter para Movieclip

Dê um duplo clique no Movieclip acabou de criar, crie uma nova camada vazia e colocar algum texto em que a camada recém-criada.

Adicionar texto a Movieclip

Chefe de volta para a timeline principal e definir o nome de instância do movieclip a "img2".

Definir nome de instância

Passo 7 - Adicionar rollover ActionScript

Selecione a camada "script" e abra as Ações "janela" com o "Windows" -> "Ações" ou [F9].

Abra a janela ActionScript

Se você simplesmente quer ter uma transição em capotamento (e não para trás, a transição em implantação) copie as seguintes linhas na janela de código. 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 _onOver function (e: MouseEvent) (
  myFilter var: CubeTransitionEffectAS3 CubeTransitionEffectAS3 = new ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  myFilter addChild ();

  myFilter.init (img1, img2, 75, "l-> r", 2, "easeInOutCubic", false);
 )

Na primeira linha que você adicionar o ouvinte de evento para o botão de rolagem. Na função "_onOver" (linha 3) você primeiro criar uma instância da CubeTransitionEffectAS3 antes de interatividade desativar o mouse do componente (linha 4 e 5). Lembre-se, o botão que você criou anteriormente está cuidando dos efeitos do mouse e você não quer que o efeito de interferir nisso.

Na linha 9, finalmente, você inicializar o efeito (documentação do parâmetro aqui). O importante é o parâmetro dois primeiros. Você define que a transição começa com "img1" e termina com "img2".

Exporte seu arquivo FLA. Como você vê, o componente do efeito funciona perfeitamente com o fundo transparente "img2".

Passo 8 - Mais complexa do ActionScript

OK, com o código anterior a rolagem funciona perfeitamente. Mas e se você também quiser ter uma função de rolagem que reverte a transição de "img2" para "img1"? Para conseguir o que você precisa de um código mais complexo. Eliminar o script e insira o seguinte: 

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);
 btn.addEventListener (MouseEvent.ROLL_OUT, _onOut);

 var running = false;
 goin var = false;
 goOut var = false;

 _onOver function (e: MouseEvent) (
  if (running) (
  _createAnimation ( "in");
  running = true;
  ) else (
  goin = false;
  goOut = true;
  )
 )

 _onOut function (e: MouseEvent) (
  if (running) (
  _createAnimation ( "out");
  running = true;
  ) else (
  goin = true;
  goOut = false;
  )
 )

 _inAnimationDone function (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  if (goin) (
  _createAnimation ( "out");
  ) else (
  running = false;
  goOut = false;
  )
 )

 _outAnimationDone function (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  if (goOut) (
  _createAnimation ( "in");
  ) else (
  running = false;
  goin = false;
  )
 )

 _createAnimation função (Dir: String) (
  myFilter var: CubeTransitionEffectAS3 CubeTransitionEffectAS3 = new ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  myFilter addChild ();

  if (dir == "no") (
  myFilter.init (img1, img2, 24, "l-> r", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) else if (dir == "out") (
  myFilter.init (img2, img1, 24, "r-> l", 2, "easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _outAnimationDone);
  )
 )

É importante saber que você não pode inverter a direção da transição durante o efeito está sendo executado. Em vez disso você pode "lembrar" a ação do usuário, aguarde até que o efeito é feito e aplicar a transição Revers.

As variáveis "Goin" e "goOut" (linha 5 e 6) são utilizados para esse fim. Você defini-las quando as funções _onOver "e" _onOut "(linha 8 e 18) são executadas. Mas só se o funcionamento var é verdadeiro, se é falso (linha 9 e 19), você começa a transição imediatamente (linha 10 e 20).

A função "_createAnimation" (linha 52) é a sua função de auxiliar o início da animação, dependendo da direção "dir" que você passou como parâmetro.

Observe que depois de chamar o removeFilter "método" (linha 29 e 41), tanto o MovieClip Início e Fim do Movieclip são definidos como visíveis (fora do efeito). Isso é porque você definir a visibilidade Movieclip - a transição iniciado com - a linha (false 30 e 42).

Resultado final

Baixar

Clique aqui para baixar o fla deste tutorial. Nota: O FLA. Não inclui o componente efeito. A fim de fazer funcionar o fla, você precisa comprar o Transition Effect Cube aqui.

Aqui você pode encontrar um vídeo tutorial de como implementar um efeito diferente.

  • Share / Bookmark