Enfriar Efecto Tutoriales Flash!

Resumen

En este tutorial aprenderás cómo crear un efecto de transición cubo en rollover del ratón.

Aquí el resultado final:

Requerimientos

Flash CS3 o Flash CS4.

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

Paso 1 - Instale el efecto de componentes

Compre el efecto de transición Cubo aquí . Por favor, siga las instrucciones de instalación y arrastrar 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 se debe crear una nueva capa en la línea de tiempo principal y darle un nombre. Haga esto como se muestra en la pantalla de abajo.

Paso 3 - Creación de 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 transparentes (más sobre esto más adelante).

Seleccione el primer fotograma de la "bg" capa y dibujar una forma con la herramienta de rectángulo en el lienzo. Seleccione el rectángulo y ajustar las opciones de color para tener un gradiente agradable (también se puede usar cualquier otro color).

Paso 4 - Crear botón

El efecto de cubo debe reaccionar de forma dinámica al estado del ratón usuarios (rollover / lanzamiento). Lo mejor es la práctica de no añadir el detector de eventos con el propio efecto 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 (el color no mater ya que el botón no será visible). Seleccione el rectángulo y convertirlo en un botón con pulsar [F8] o clic derecho sobre el clip de película -> "Convertir en símbolo ...".

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

Haga doble clic en el botón. Ahora arrastre el primer fotograma clave "Up" hasta el último fotograma "Hit". Esto se asegura de que el botón se interactivo pero no es visible.

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

Paso 5 - Crear inicio MovieClip

El efecto de las necesidades de los dos MovieClip donde la información visual se han tomado de. Ahora vamos a crear el movieclip la transición comenzará con.

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

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

Establezca el nombre de instancia del clip de película que acaba de crear "img1".

Paso 6 - Crear MovieClip Fin

El MovieClip Fin contendrá texto en lugar de una imagen. El lograr esto tendrá un enfoque ligeramente diferente.

Seleccione el primer fotograma de la capa "img2" (ok, nombrando mal, no dude en corregir esa ) Y dibuje un rectángulo con el tamaño del lienzo. Usted quiere asegurarse de que el clip de película final tiene la misma dimensión que el clip de película de comienzo. Es por eso que primero dibuje una forma invisible con el mismo tamaño que el movieclip Inicio.

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

Convierta la forma de un] MovieClip [presione F8 o haga clic derecho en el clip de película -> "Convertir en símbolo ..." y el nombre "img2".

Haga doble clic en el clip de película que acaba de crear, crear una nueva capa vacía y poner un poco de texto en esa capa de nueva creación.

Vuelve a la línea de tiempo principal y establecer el nombre de instancia del clip de película a "img2".

Paso 7 - Añadir vuelco ActionScript

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

Si simplemente desea tener una transición en rollover (y no volver a la transición de lanzamiento) copia las líneas siguientes en la ventana de código.

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver);

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

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

En la primera línea de agregar el detector de eventos de transferencia al botón. En la función "_onOver" (línea 3) crear por primera vez una instancia de la CubeTransitionEffectAS3 antes de desactivar la interactividad del ratón del componente (línea 4 y 5). Recuerde que el botón que ha creado anteriormente se ocupa de los efectos de ratón y no desea que el efecto de interferir en eso.

En la línea 9, finalmente se inicializa el efecto ( la documentación de los parámetros que aquí ). La parte importante son los dos primeros parámetros. Se 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 ActionScript

Bien, 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 ello se necesita un código más complejo. Eliminar el guión y añadir lo siguiente:

 btn.addEventListener (MouseEvent.ROLL_OVER, _onOver); btn.addEventListener (MouseEvent.ROLL_OUT, _onOut), corriendo var = false; Goin var = false; goOut var = false; _onOver función (e: MouseEvent) (if (! correr) (_createAnimation ("in"); ejecuta = true;) else (Goin = false; goOut = true;)) _onOut función (e: MouseEvent) (if (! correr) (_createAnimation ("fuera"); ejecuta = true; else () Goin = true; goOut = false;)) _inAnimationDone función (e: Event) (e.target.removeFilter (); img1.visible = false; if (Goin) (_createAnimation ("fuera");) else ( ejecuta = false; goOut = false;)) _outAnimationDone función (e: Event) (e.target.removeFilter (); img2.visible = false; if (goOut) (_createAnimation ("in");) else (ejecuta = false ; Goin = false;)) _createAnimation función (dir: String) (var myFilter: CubeTransitionEffectAS3 nueva CubeTransitionEffectAS3 = (); myFilter.mouseEnabled = false; myFilter.mouseChildren = false; addChild (myFilter); if (dir == "en" ) (myFilter.init (img1, img2, 24, "-r> l", 2 ", easeInOutCubic", false); myFilter.addEventListener (CubeTransitionEffectAS3.ANIMATION_DONE, _inAnimationDone);) else if (dir == "out") (myFilter.init (img2, img1, 24, "-l> r", 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 lugar de eso puede "recordar" la acción del usuario, espere hasta que el efecto se lleva a cabo y aplicar la transición solapas.

Las variables "Goin" y "goOut" (línea 5 y 6) se utilizan para tal fin. Se establece que cuando las funciones "_onOver" y "_onOut" (línea 8 y 18) se ejecutan. Pero sólo si la var correr es verdad, si es falso (línea 9 y 19), de iniciar la transición de inmediato (la línea 10 y 20).

La función "_createAnimation" (línea 52) es su 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 al removeFilter "método" (línea 29 y 41) tanto en el MovieClip de inicio y de finalización el movieclip se establecen en visible (fuera del efecto). Es por eso que se establece la visibilidad MovieClip - la transición comenzó con - en false (la 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 el trabajo fla, necesita adquirir el efecto de transición Cubo aquí .

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