Tutorial: Crear efecto de reflexión del agua con la animación
Escribir Comentario 18 de noviembre 2008
Resumen
En este tutorial aprenderás cómo crear un reflejo del agua, aplicar un clip de película en movimiento.
Aquí el resultado final:
Requerimientos
Flash 8, Flash CS3 o Flash CS4.
Nota: Las capturas de pantalla en este tutorial están hechos en Flash CS3. Funciona exactamente igual en Flash 8. Este tutorial es ActionScript 2 (Aunque no se requiere de ActionScript).
Paso 1 - Instale el efecto de componentes
Descargue el Efecto Reflejo de agua 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 pato MovieClip
Importe el pato de la imagen [Ctrl-R] o "File" -> "Importar" -> "Importar en el escenario ...". Asegúrese de que la imagen es un pato. Png con fondo transparente.
Seleccione esta imagen y convertirla en una] MovieClip [presione F8 o haga clic derecho en el clip de película -> "Convertir en símbolo ...". Dar el movieclip el nombre de "pato".
Paso 3 - Crear MovieClip Animación
Crear un nuevo clip de película con [Ctrl-F8] o Insertar -> "Nuevo símbolo ...". Nombre este movieclip "animación".
Arrastre el clip de película de pato de la biblioteca para el primer fotograma en la línea de tiempo. Ahora haga clic en el fotograma 60 y crear un nuevo fotograma clave pulse el botón [F6] o 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 este movieclip con la tecla de cursor a la derecha (digamos 100px). Usted puede consultar la nueva posición en el panel de información.
Regresar a la primer fotograma clave de la línea de tiempo. En el panel de propiedades seleccione Tween: "Movimientos". Si hace clic en algún lugar de la línea de tiempo ahora, se ve que el pato MovieClip se mueve de izquierda a derecha.
Paso 4 - Ponga 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 movieclip pato sigue allí, retírelo.
Mueva el clip de película de animación de la biblioteca para el primer fotograma de la línea de tiempo.
Establezca el nombre de instancia del clip de película a "animation_mc" (se 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 de componentes
Crear una nueva capa, seleccione el primer fotograma y arrastre el componente efecto de la biblioteca en el clip de película de animación. El componente automáticamente se ajustará.
Establezca el parámetro del componente dentro del panel del inspector de componentes como en la captura de pantalla. Movieclips Todos con nombres de instancia en este marco se enumeran en el "Target MovieClip" lista de selección. Dado que sólo tiene un clip de película, el componente asume, 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 clip de película (en algún otro lugar dentro del fla. O en un nuevo proyecto) tiene que establecer la configuración de nuevo.
Ahora a la exportación (pulse [Ctrl-Enter] o ...). Verás que la cabeza del pato es de alguna manera corte. Eso es porque el componente tiene exactamente el tamaño de la MovieClip pato. Pero desde la ola de reflexión aumentará el tamaño no caben más.
Paso 6 - Ajuste de animación MovieClip
Para solucionar esto, se le insertará una forma invisible en segundo plano de los patos MovieClip, que el tamaño de la MovieClip un poco.
Regresa a la MovieClip pato haciendo doble clic en él en su biblioteca.
Crear una nueva capa debajo de la capa de interpolación.
Seleccione el rectángulo de la herramienta y dibujar una forma con la anchura de los patos. La altura debe ser un píxel pocas superiores a los de pato (alrededor de 10 píxeles). Puede ser útil para establecer el icono de esquema en la línea de tiempo, para ver sólo las dimensiones de la imagen del pato.
Con la forma seleccionada abrir el panel de color y establecer el alfa a 0.
Al probar la película ahora, verás que la reflexión se aplica sobre el pato agujero.
Paso 6 - Agregar imagen de fondo
Crear una nueva capa debajo de la capa con la animación y de los componentes. Importar una imagen de ese partido. Ahora puede cambiar la posición del clip de película de animación para que se ajuste con 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 del efecto, que sólo funciona en el IDE de Flash (Flash 8, Flash CS3 o CS4 Flash), pero no dentro del navegador.
También puede descargar el efecto del agua Reflejo aquí .






















Escriba un comentario