Cool Tutoriales Efecto Flash!

Resumen

En este tutorial aprenderemos a crear un reflejo de agua a aplicar en un MovieClip en movimiento.

Aquí el resultado final:

Requisitos

Flash 8, Flash CS3 o Flash CS4.

Nota: Las capturas de pantalla en este tutorial se hacen en Flash CS3. Funciona exactamente de la misma en Flash 8. Este tutorial es ActionScript 2 (ActionScript Aunque no es obligatorio).

Paso 1 - Instalar el componente de efecto

Descargue el Efecto Reflejo en el agua 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 MovieClip pato

Importe la imagen del pato [pulse Ctrl-R] o "File" -> "Importar" -> "Importar en el escenario ...". Asegúrese de que la imagen es un pato. Png con fondo transparente.

Seleccione la imagen y convertirla en F8 un [MovieClip prensa] o haga clic derecho sobre el movieclip -> "Convertir en símbolo ...". Dar el movieclip el nombre de "pato".

Paso 3 - Crear animaciones MovieClip

Crear un nuevo clip de película con [pulse Ctrl-F8] o Insertar -> "Nuevo símbolo ...". El nombre de este "clip de película de animación".

Arrastre el movieclip pato de su biblioteca al primer fotograma de la línea de tiempo. Ahora haga clic en el fotograma 60 y crear un nuevo fotograma clave [pulse F6] o haga clic derecho y "Insertar fotograma clave".

Haga clic en el fotograma clave recién creada y seleccione el movieclip pato en el lienzo. Ahora mueva el movieclip con la tecla de cursor a la derecha (digamos 100px). Puede comprobar la nueva posición en el panel de información.

Volver a la primer fotograma clave de la línea de tiempo. En el panel de la propiedad Tween seleccionar: "Motion". Si hace clic en algún lugar de la línea de tiempo, verá que el pato MovieClip se mueve de izquierda a derecha.

Paso 4 - Coloque MovieClip animación en la línea de tiempo principal

Ahora haga clic en "Escena 1" para volver a la línea de tiempo principal. Si el pato MovieClip todavía está allí, quitarla.

Mueva el clip de película de animación de la biblioteca al primer fotograma de la línea de tiempo.

Establecer el nombre de instancia del movieclip a "animation_mc" (usted puede elegir un nombre diferente si lo desea. Asegúrese de que el nombre de la instancia es única). Sin un nombre de instancia, el componente no es capaz de detectar el movieclip.

Paso 5 - Aplicar efecto componente

Crear una nueva capa, seleccione el primer fotograma y arrastre el componente de efecto de la biblioteca en el movieclip animación. El componente se ajustarán automáticamente.

Establezca el parámetro del componente dentro del panel inspector de componentes como en la captura de pantalla. Todos los clips de película con nombres de instancia en este marco se enumeran en la lista de "Objetivo movieclip" Select. Dado que sólo tiene un MovieClip, el componente supone, que desea aplicar el efecto sobre el movieclip "animation_mc".

Nota: Estos ajustes sólo se aplican a esta instancia de uno de los componente de efecto. Si dibuja el componente en otro movieclip (en otro lugar dentro del archivo. FLA o en un nuevo proyecto) tiene que establecer la configuración de nuevo.

Ahora (a la exportación [pulse Ctrl-Enter], o ...). Usted verá que la cabeza del pato es de alguna manera de corte. Eso es porque el componente tiene exactamente el tamaño del movieclip pato. Sin embargo, desde la ola de reflexión aumentará el tamaño no caben más.

Paso 6 - Ajuste de clip de película de animación

Para solucionar esto, se le inserte una forma invisible en el fondo del pato MovieClip, que el tamaño de hasta el movieclip un poco.

Volver a la MovieClip pato haciendo doble clic en él en su biblioteca.

Crear una nueva capa debajo de la capa de interpolación.

Seleccione la herramienta rectángulo y dibujar una forma con la anchura de los patos. La altura debe ser un píxel algunos superiores a los de pato (unos 10 píxeles). Podría ayudar a establecer el icono de esquema en la línea de tiempo, para ver únicamente las dimensiones de la imagen del pato.

Con la forma seleccionada abrir el panel de color y establecer el alfa a 0.

Al probar su película ahora, verás que la reflexión se aplica en el pato agujero.

Paso 6 - Añadir imágenes de fondo

Crear una nueva capa debajo de la capa con la animación y de componentes. Importar una imagen que coinciden. Ahora usted puede cambiar la posición del movieclip animación para hacerla encajar en el fondo.

Descargar

Haga clic aquí para descargar el fla de este tutorial. Nota: El archivo. Fla incluye la versión de prueba del componente de efecto, que sólo funcionan en el IDE de Flash (Flash 8, Flash CS3 o Flash CS4), pero no dentro del navegador.

También puede descargar el Efecto Reflejo en el agua aquí.