Flash Tutorials Cool Effect!

Resumo

Neste tutorial, você aprenderá a criar um efeito de transição cubo no rato capotamento.

Aqui o resultado final:

Requisitos

Flash CS3 ou Flash CS4.

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

componente Passo 1 - Instale o efeito

Adquira o efeito da 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.

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.

background Passo 3 - Criar

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

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

botão Passo 4 - Criar

O efeito cubo deve reagir dinamicamente para o estado do mouse utilizadores (rollover / rollout). É melhor prática para não adicionar o ouvinte de eventos para o efeito em si e sim para usar um botão em branco ".

Clique no primeiro quadro da camada btn "e desenhar um retângulo com o tamanho da tela (de 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 a prima [F8] ou o botão direito sobre o MovieClip -> "Converter em símbolo ...".

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

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 será interativa, mas não visível.

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

Passo 5 - Criar iniciar Movieclip

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

Clique no primeiro frame da camada "img1". Importar uma imagem com o tamanho da tela pressionando [Ctrl-R] ou "File" -> "Importar" -> "Importar no palco ...".

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

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

Passo 6 - Criar um Movieclip Fim

O Movieclip End irá conter um texto em vez de uma imagem. A conseguir isso, você vai precisar de uma abordagem ligeiramente diferente.

Selecione o primeiro frame da camada "img2" (ok, nomeando ruim, sinta-se livre para corrigir essa ) E desenhe um retângulo com o tamanho da tela. Você quer ter a certeza que o Movieclip End tem as mesmas dimensões do Movieclip Start. Isso é porque você primeiro desenha uma forma invisível com o mesmo tamanho que o Movieclip Start.

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

Converta a forma de um [Movieclip] pressionar F8 ou clique direito sobre o MovieClip -> "Converter em símbolo ..." com o nome "img2".

Clique duas vezes no Movieclip recém-criada, crie uma nova camada vazia e colocar algum texto sobre a camada recém-criada.

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

Passo 7 - Adicionar rollover ActionScript

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

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

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

 _onOver função (e: MouseEvent) (
  myFilter var: CubeTransitionEffectAS3 CubeTransitionEffectAS3 = new ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  r myFilter.init (img1, img2, 75, "l->" 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 desativar a interatividade do 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 ). A parte importante é o parâmetro dois primeiros. Você define a transição que começa com "img1" e termina com "img2".

Exportar o arquivo fla. Como você pode ver, o componente de efeito funciona perfeitamente com o fundo transparente "img2".

Passo 8 - Mais complexo ActionScript

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

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

 execução var = false;
 indo var = false;
 goOut var = false;

 _onOver função (e: MouseEvent) (
  if (! executando) (
  _createAnimation ("in");
  executando = true;
  Else ()
  indo = false;
  goOut = true;
  )
 )

 _onOut função (e: MouseEvent) (
  if (! executando) (
  _createAnimation ("out");
  executando = true;
  Else ()
  indo = true;
  goOut = false;
  )
 )

 _inAnimationDone função (e: Event) (
  e.target.removeFilter ();
  img1.visible = false;

  se indo () (
  _createAnimation ("out");
  Else ()
  execução = false;
  goOut = false;
  )
 )

 _outAnimationDone função (e: Event) (
  e.target.removeFilter ();
  img2.visible = false;

  se goOut () (
  _createAnimation ("in");
  Else ()
  execução = false;
  indo = false;
  )
 )

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

  if (dir == "in") (
  r myFilter.init (img1, img2, 24, "l->" 2 ", easeInOutCubic", false);
  myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);
  ) Else if (dir == "fora") (
  l myFilter.init (img2, img1, 24, "r>", 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á em execução. Em vez disso você pode "lembrar" a ação do usuário, aguarde até que o efeito é feito e aplicar a transição avesso.

As variáveis indo "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 executados. Mas só se a var execução é 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 auxiliar o início da animação, dependendo da direção" dir "que você passou como parâmetro.

Observe que, após chamar o removeFilter "método" (linha 29 e 41), tanto o Movieclip Start e End Movieclip estão definidos para visíveis (fora do efeito). É por isso que você definir a visibilidade Movieclip - a transição iniciado com - para a linha (false 30 e 42).

Baixar

Clique aqui para baixar o fla deste tutorial. Nota: A. Fla não inclui o componente de efeito. A fim de fazer o trabalho fla, você precisa comprar o Efeito de transição Cube aqui .

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