Cool Tutoriales Efecto Flash!

Resumen

En este tutorial aprenderemos a crear un efecto de cubo en la transición de vuelco del ratón.

Aquí el resultado final:

Requisitos

Flash CS3 o Flash CS4.

Nota: La captura de pantalla en este tutorial está hecho en Flash CS3. Funciona exactamente de la misma en Flash CS4.

Paso 1 - Instalar el componente de efecto

Compre el efecto de la transición Cube aquí. Por favor, siga las instrucciones de instalación y arrastre el componente desde el panel de componentes en la biblioteca de su archivo. FLA.

Paso 2 - Crear una nueva capa

Para mantener las cosas ordenadas debe crear una nueva capa en la línea de tiempo principal y darle un nombre. Haga esto como se muestra en la siguiente imagen.

Paso 3 - Crear un fondo

Ahora se crea un fondo con un degradado. Aunque esto no es necesario para hacer que el efecto que muestra que el efecto también trabaja con el contenido transparente (más sobre esto más adelante).

Seleccione el primer cuadro en bg la "capa" y dibujar una forma con la herramienta rectángulo en el lienzo. Seleccione el rectángulo y ajustar los valores de color para tener un gradiente de Niza (también se puede utilizar cualquier otro color).

Paso 4 - Crear un botón

El efecto de cubo debe reaccionar dinámicamente a los usuarios el estado del ratón (rollover / implantación). NO se trata de las mejores prácticas para añadir el detector de eventos en el sentido de sí mismo y en lugar de utilizar un "blanco" botón.

Haga clic en el primer fotograma de la capa "btn" y dibuja un rectángulo con el tamaño del lienzo (color no mater desde el botón no será visible). Seleccione el rectángulo y lo convierten en un botón con [presione F8] o haga clic derecho sobre el movieclip -> "Convertir en símbolo ...".

Establecer el nombre del botón de "btn" y asegúrese de que el tipo es "Button".

Haga doble clic en el botón. Ahora arrastre el primer fotograma clave "arriba" hasta el último fotograma "Hit". Esto asegura, que el botón será interactiva, pero no es visible.

Volver a la línea de tiempo principal y establecer el nombre de instancia del botón de "btn".

Paso 5 - Crear iniciar MovieClip

El efecto de las necesidades de los dos movieclip donde la información visual se han extraído. Ahora vamos a crear el movieclip la transición va a empezar.

Haga clic en el primer fotograma de la capa "img1". Importar una imagen con el tamaño del lienzo pulsando [pulse Ctrl-R] o "File" -> "Importar" -> "Importar en el escenario ...".

Ahora convertir esta imagen a un clip de película y el nombre "img1".

Establecer el nombre de instancia de la recién creada MovieClip a "img1".

Paso 6 - Crear Fin MovieClip

El movieclip final contendrá el texto en lugar de una imagen. El lograr esto tendrá un enfoque ligeramente diferente.

Seleccione el primer fotograma de la capa de "img2" (ok, nombres mal, no dude en corregir ese ) Y dibujar un rectángulo con el tamaño del lienzo. Usted quiere asegurarse de que el movieclip final tiene la mismas dimensiones que el movieclip de inicio. Es por eso por primera vez establecer una forma invisible, con el mismo tamaño que el movieclip de inicio.

Seleccione la forma y establecer el valor de alfa a 0 (la forma sigue ahí, pero invisible).

Convierta la forma en F8 un [MovieClip prensa] o haga clic derecho sobre el movieclip -> "Convertir en símbolo ..." y el nombre "img2".

Haga doble clic en el movieclip acaba de crear, crear una nueva capa vacía y poner un poco de texto en la capa de nueva creación.

Jefe de vuelta a la línea de tiempo principal y establecer el nombre de instancia del movieclip a "img2".

Paso 7 - Añadir vuelco de ActionScript

Seleccione la capa de "script" y abra el "Acciones" ventana "Windows" -> "Acciones" o [F9].

Si simplemente desea tener una transición en rollover (y sin el respaldo directo de transición en el despliegue) copia de las siguientes líneas en la ventana de código.

 (btn.addEventListener MouseEvent.ROLL_OVER, _onOver);

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

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

En la primera línea de agregar el detector de eventos de vuelco al botón. En la función "_onOver" (línea 3), primero debe crear una instancia de la CubeTransitionEffectAS3 antes de desactivar la interactividad del ratón de la componente (línea 4 y 5). Recuerde que el botón que se creó anteriormente se ocupa de los efectos de ratón y no desea que el efecto de interferir en ello.

Por último en la línea 9 inicializar el efecto (la documentación de los parámetros de aquí). La parte importante son los dos primeros parámetros. Usted define que la transición comienza con "img1" y termina con "img2".

Exportar el archivo FLA. Como puede ver, el componente de efecto funciona perfectamente con el fondo transparente de "img2".

Paso 8 - Más complejo de ActionScript

OK, con el código anterior el traspaso funciona bien. Pero lo que si usted también quiere tener una función de despliegue que invierte la transición de "img2" a "img1"? Para lograr que se necesita un código más complejo. Elimine la secuencia de comandos e insertar el texto siguiente:

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

 var ejecutando = false;
 goin var = false;
 goOut var = false;

 _onOver function (e: MouseEvent) (
  if (! running) (
  _createAnimation ( "en");
  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;

  si (Goin) (
  _createAnimation ( "out");
  ) else (
  running = false;
  goOut = false;
  )
 )

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

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

 _createAnimation función (dir: String) (
  myFilter var: CubeTransitionEffectAS3 = CubeTransitionEffectAS3 nuevo ();
  myFilter.mouseEnabled = false;
  myFilter.mouseChildren = false;
  addChild (myFilter);

  if (dir == "en") (
  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);
  )
 )

Es importante saber, que no se puede invertir la dirección de la transición durante el efecto se está ejecutando. En su lugar se puede "recordar" la acción del usuario, espere hasta que el efecto se lleva a cabo y aplicar la transición Revers.

Las variables "Goin" y "goOut" (línea 5 y 6) se utilizan para ese fin. Se establece cuando las funciones "_onOver" y "_onOut" (línea 8 y 18) son ejecutados. Pero sólo si el funcionamiento var es cierto, si es falsa (línea 9 y 19), se inicia la transición de inmediato (la línea 10 y 20).

La función "_createAnimation" (línea 52) es una función auxiliar del comienzo de la animación en función de la dirección "dir" le pasa como parámetro.

Tenga en cuenta que después de llamar a la "removeFilter método" (línea 29 y 41) tanto en el movieclip de inicio y de finalización del movieclip se establecen en visible (de efecto). Es por eso que establecer la visibilidad MovieClip - comenzó con la transición - a falso (línea 30 y 42).

Descargar

Haga clic aquí para descargar el fla de este tutorial. Nota: El archivo. Fla no incluye el componente de efecto. Con el fin de hacer que el fla, usted necesita comprar el efecto de la transición de cubo aquí.

Aquí usted puede encontrar un vídeo tutorial de cómo aplicar un efecto diferente.