Resumo

Neste tutorial vai aprender como crear un efecto de transición cubo en capotamento rato.

Aquí o resultado final:


Requisitos

Flash CS3 ou Flash CS4.

Nota: A imaxe deste tutorial está feito en Flash CS3. Ela traballa exactamente da mesma en Flash CS4.

Paso 1 - Instalar o compoñente do efecto

Adquira o Efecto de Transición Cube aquí. Por favor, siga as instrucións de instalación e arrastra o compoñente do panel de compoñentes para a biblioteca do seu arquivo fla ..

Arrastrar compoñente na biblioteca

Paso 2 - Crear unha nova capa

Para manter as cousas arrumadas ten que crear unha nova capa na timeline principal e darlle un nome. Faino como se mostra na imaxe de abaixo.

Crear capa na timeline principal

Paso 3 - Crear un fondo

Agora vostede crea un fondo con un gradiente. Aínda que isto non é necesario para facer funcionar o efecto que isto demostra que o efecto tamén funciona con contido transparente (máis sobre isto máis tarde).

Seleccione o primeiro cadro no bg "capa e deseño dunha forma coa ferramenta rectángulo na pantalla. Selecciona o rectángulo e axuste as opcións de cor para ter un gradiente nice (tamén pode usar calquera outra cor).

Crear forma de fondo

As opcións de cor gradiente

Paso 4 - Crear un botón

O efecto cubo debe reaccionar de forma dinámica o estado do rato usuarios (rollover / rollout). Non é o mellor práctica para engadir o oínte de eventos para o efecto en si e use un "baleiro" botón.

Prema o primeiro marco da capa "btn" e deseñar un rectángulo co tamaño da pantalla (cor non mater xa que o botón non será visible). Selecciona o rectángulo e convertela para un botón con [F8] ou co botón dereito sobre o MovieClip -> "Convert to Symbol ...".

Converter a forma de botón

Define o nome do botón para "btn" e asegúrese de que o tipo é "Button".

Define o nome do botón

Dun dobre clic no botón. Agora, arrastra o primeiro cadro clave "Up" para o último recadro Hit ". Isto fai-se, que o botón vai ser interactivo, pero non visible.

Cambiar clave dentro do botón

Voltar timeline principal e establecer o nome de instancia do botón para "btn".

Definir nome de instancia do botón

Paso 5 - Crear iniciar Movieclip

O efecto debe ter os dous Movieclip onde as informacións visuais son tirados. Vai agora crear o MovieClip a transición ha comezar.

Prema no primeiro cadro da capa "img1". Importar unha imaxe co tamaño da pantalla premendo [Ctrl-R] ou "File" -> "Import" -> "Importar on Stage ...".

Importación de imaxes

Agora converter esta imaxe en un movieclip co nome "img1".

Convertir imaxe para Movieclip

Define o nome do Movieclip

Definir o nome da instancia do recén criado Movieclip con "img1".

Definir nome de instancia

Paso 6 - Crear End Movieclip

Fin do movieclip contén texto en vez dunha imaxe. A conseguir isto, vai ter unha visión un pouco diferente.

Seleccione o primeiro marco da capa "img2" (ok nomeamento, malo, sexa a vontade para corrixir esta :) ) E deseño dun rectángulo co tamaño da pantalla. Quere estar seguro de que o MovieClip End ten as mesmas dimensións que o MovieClip Inicio. Isto é porque en primeiro lugar elaborar unha forma invisible co mesmo tamaño que o MovieClip Inicio.

Forma Draw

Seleccione a forma e define o valor alpha a 0 (a forma aínda está aí, pero invisible).

Establecer alfa de forma

Converter a forma dunha prema F8 Movieclip [] ou co botón dereito sobre o MovieClip -> "Convert to Symbol ..." co nome "img2".

Converter a Movieclip

Dun dobre clic no Movieclip acabou de crear, crea unha nova capa baleira e poñer algún texto no que a capa recén criada.

Engadir texto a Movieclip

Xefe de volta para a timeline principal e establecer o nome de instancia do movieclip a "img2".

Definir nome de instancia

Paso 7 - Engadir rollover ActionScript

Seleccione a capa "guión" e abra as Accións "fiestra" con "Windows" -> "Accións" ou [F9].

Abra a fiestra ActionScript

Se simplemente quere ter unha transición en capotamento (e non cara atrás, a transición en implantación) Copia as seguintes liñas na fiestra 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 liña que engadir o oínte de evento para o botón de rolagem. Desde a función "_onOver" (liña 3) vostede primeiro crear unha instancia da CubeTransitionEffectAS3 antes de interactividade desactivar o rato do compoñente (liña 4 e 5). Lembre, o botón que creou anteriormente está coidando dos efectos do rato e non quere que o efecto de interferir niso.

Na liña 9, finalmente, lle arrincar o efecto (documentación do parámetro aquí). O importante é o parámetro dous primeiros. Vostede define que a transición comeza con "img1" e remata con "img2".

Exporta seu arquivo fla. Como ve, o compoñente do efecto funciona perfectamente co fondo transparente "img2".

Paso 8 - máis complexa do ActionScript

OK, co código anterior a rolagem funciona perfectamente. Pero e se tamén quere ter unha función de rolagem que reverte a transición de "img2" para "img1"? Para conseguir o que precisa dun código máis complexo. Eliminar o script e introduce 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: evento) (
  e.target.removeFilter ();
  img1.visible = false;

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

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

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

 _createAnimation función (Dir: cadea) (
  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 non pode invertir a dirección da transición durante o efecto está sendo executado. En canto pode "lembrar" a acción do usuario, agarde ata que o efecto é facer e aplicar a transición no reverso.

As variables "goin" e "goOut" (liña 5 e 6) son utilizados para este fin. Vostede define-las cando as funcións _onOver "e" _onOut "(liña 8 e 18) son executados. Pero só se o funcionamento var é verdadeiro, se é falso (liña 9 e 19), comeza a transición de inmediato (liña 10 e 20).

A función "_createAnimation" (liña 52) é a súa función de auxiliar o inicio da animación, dependendo da dirección "dir" que pasou como parámetro.

Teña en conta que despois de chamar o removeFilter "método" (liña 29 e 41), tanto o MovieClip Inicio e Fin do Movieclip son definidos como visibles (fóra do efecto). Isto é porque vostede definir a visibilidade Movieclip - a transición iniciada con - a liña (false 30 e 42).

Resultado final

Descargar

Prema aquí para baixar o fla deste tutorial. Nota: O fla. Non inclúe o compoñente efecto. Co fin de facer funcionar o fla, ten que mercar o Transition Effect Cube aquí.

Aquí pode atopar un video tutorial de como implementar un efecto diferente.

  • Share / Bookmark