Creative Commons License
Efectos Flash: Sensación de Velocidad. por Julio Laguna is licensed under a Creative Commons Reconocimiento-No comercial-Sin obras derivadas 2.5 España License.

Efectos Flash: Sensación de Velocidad.
por Julio Laguna - redribera

1 Capítulo 1.
    1.1 Resultado final del tutorial en swf.
    1.2 Creación del efecto visual de desvanecimiento.
    1.3 Generar un movimiento desacelerado con sensación de velocidad.

1 Capítulo 1.

1.1 Resultado final del tutorial en swf.

Vamos a generar un efecto de sensación de velocidad como el que os mostramos en el ejemplo que hay bajo estas lineas.
Es necesario tener instalado Flash Player 7 o superior para poder visualizar correctamente este ejemplo.
Si no lo visualiza correctamente, puede obtener el plug-in correspondiente de la página de Adobe. En esta misma página en el margen izquierdo existe un enlace para obtener el plug-in de flash Player adecuado para su navegador.
Para ver el efecto pulse tantas veces como desee sobre el botón shoot de la película flash, observará una bola moviendose con un suave movimiento decelearando hasta pararse. El movimiento no es muy veloz para que pueda observar realmente al efecto que nos referimos.


1.2 Creación del efecto visual de desvanecimiento.

Para conseguir el efecto de velocidad, necesitamos proporcionar al objeto que estamos moviendo, un efecto de desvanecimiento, para producir una sensación similar a la que se produce en nuestro ojo cuando observamos un objeto con una velocidad determinada.
Esto es fácilmente conseguible generando una clip de película en Flash con el objeto que queremos mover y aplicandole una animación que decremente la propiedad alpha del clip creado conforme avanzamos fotogramas en la animación. Creamos un nuevo documento Flash (si no lo hemos hecho aun nosotros hemos utilizado una velocidad de fotogramas por segundo de 36 para el ejemplo). En nuestro caso vamos a animar una simple bola (un circulo), pero el proceso es similar para cualquier objeto que deseemos animar. Por tanto dibujamos un círculo en el area de dibujo (de 100x100) y lo convertimos en un símbolo de clip de pélicula (Modificar --> Convertir en simbolo o con F8 y el circulo seleccionado). Lo llamamos por ejemplo ball.
Ahora creamos un nuevo simbolo de película al que llamaremos ball_anim .En el fotograma 1 insertaremos el nuevo simbolo ball.
En el fotograma 10 crearemos un nuevo fotograma clave en el que estará insertado otra instancia del simbolo ball.
Ahora solo resta poner la propiedad alpha del simbolo ball del fotograma 10 a un valor de 0 y generar una animación de movimiento. Además crearemos una nueva capa la linea de tiempo del clip ball_anim a la que llamaremos Acciones y en el fotograma 10 creamos un nuevo fotograma clave. Desplegamos la carpeta de Acciones y escribimos la instruccion stop(); para que la animación pare al final y no se reproduzca indefinidamente.

Figura 1.1 - Linea de tiempo para el clip ball_anim
Figura 1.1 - Linea de tiempo para el clip ball_anim
Al final lo que hemos conseguido es generar una animación del objeto (un círculo) similar a esta:


La animación de arriba es una animación infinita para que veaís el efecto, en nuestro caso nosotros debemos limitarla a una ejecución con la instrucción stop(); que insertamos en el fotograma 10 de la capa Acciones.

Esta animación es la que va a producir la sensación de velocidad al igual que en la retina de nuestro ojo, simulando un desvanecimiento del objeto cuando este pase moviendos por un punto dado de la escena.

IMPORTANTE: Debemos asegurarnos de que el clip ball_anim se exporta para su uso con ActionScript. Para ello con el botón derecho del ratón presionar sobre el clip ball_anim en la biblioteca de elementos y seleccionar la opción propiedades. Verificar que está marcada la opción Exportar para ActionScript y en el identificador podemos llamarlo igual que el clip ball_anim.

   
Siguiente »