Animación Sencilla 1 – Vueltas de CD

Hoy vamos a realizar una animación sencilla, aprovechando que he realizado un par, las he realizado para 2 artistas del mundo del reggae, Supa Bassie y Señor Wilson, que pertenecen a esa gran masa de grupos musicales que se dan a conocer con myspace. Una de las animaciones consiste en conseguir un efecto de humo con letras, esta animación esta inspirada de la web de mi amigo sargento, la otra todavía más sencilla se trata de conseguir un efecto de giro sobre su mismo eje de un objeto, al estilo de CD.

Bueno empezaremos con la más sencilla, efecto de giro de CD.

Para ello he utilizado un tamaño de película no muy grande ya que esta pensado para utilizar en comentarios y información de webs hechas con myspace, el tamaño será aproximadamente de 350×300, se que myspace redimensiona los tamaños pero mejor trabajar con un tamaño pequeño ya que la distorsión no afectará tanto al resultado final en la Web.
Para empezar necesitamos una imagen, esta funcionará como la parte de arriba del CD o vinilo de música. Con cualquier programa de edición de imágenes deberemos recortar y conseguir un círculo perfecto, ATENCIÓN PERFECTO, ya que sino al dar vueltas este dará la sensación de estar estropeado. Una vez conseguido esto la importamos a la biblioteca de la película flash.

Una vez importado a la biblioteca la convertimos a MovieClip y lo instanciamos como disco_mc, entramos en él y separamos tres capas: una con el CD, otra para el exterior y otra por tenerlo ordenado para el script.
Convertimos nuevamente la imagen en MovieClip para que posteriormente poder aplicarle filtros. En la capa exterior vamos a dibujar dos círculos concéntricos, para conseguir un efecto más conseguido de CD, ya que depende del fondo puede notarse más o menos que es una imagen cortada por nosotros y más aún sino ha sido un circulo perfecto.

Ahora nos vamos a la línea de tiempo y creamos tantos keyframes como se puede observar en la imagen (Recordad para que erá cada capa):

Bueno para que os hagáis una idea del funcionamiento, la línea de tiempo se va a comportar como si fuera un botón creado por nosotros. Fijaros en la capa de script que existen diferentes nombres en los fotogramas de esta manera es más fácil de identificar en el código. En el primer fotograma de la capa de script el único código que tiene es un stop(); para que este no se reproduzca al ser ejecutada la película.
Vemos que el trozo que corresponde a “play” tiene un keyframe en medio esto es para dar la sensación de que el CD va cogiendo velocidad para ello en ese mismo keyframe le damos al movieClip creado a partir de la imagen (ese que hemos creado para poder aplicarle filtros) y le añadimos un filtro de desenfoque este no tiene que ser muy alto y no tiene porque tener una calidad muy alta. Una vez hecho esto este mismo filtro deben de tenerlo todos los keyframes de la imagen menos el último del bloque “stop” para que de el efecto de parada. Ahora empezamos a darles “animaciones de movimiento” a todos los keyframes hasta que tenga el aspecto de la imagen anterior, empezamos de izquierda a derecha:

1ºBloque – “play”:

1.1  Primer keyframe: MovieClip normal sin filtros y animación de movimiento con 1 giro en sentido horario.

1.2  Segundo keyframe: MovieClip con filtro de desenfoque y animación de movimiento con 3 giros.

2ºBloque – “repro”:

2.1 Primer keyframe: MovieClip con filtro de desenfoque y animación de movimiento con 7 giros.
2.2 Segundo keyframe: MovieClip con filtro de desenfoque. (y en la capa script ponemos el siguiente código “gotoAndPlay(“repro”);”.

3ºBloque – “stop”:

3.1 Primer keyframe: MovieClip con filtro de desenfoque y animación de movimiento con  2 giros.
3.2 Segundo keyframe: MovieClip con filtro de desenfoque y animación de movimiento con 1 giro.
3.3 Tercer keyframe: MovieClip sin filtro de desenfoque (y en la capa script colocamos un “stop();”.

Una vez realizado esto volvemos a la escena principal. En la mía tengo colocadas un par de imágenes más con una máscara, y un texto que he convertido en MovieClip y lo he instanciado con el nombre de titulo_mc dentro de este siguiendo la misma idea anterior he realizado una pequeña animación en línea de tiempo en la cual tengo un keyframe llamado “on” indicándome que ahí empieza la animación que corresponde a un paso por encima con el ratón y un keyframe “off” indicando que empieza la animación de salida acabando con un stop() que correspondería a un pulsado y soltado fuera y el paso del ratón hacia fuera. Bueno eso es otra historia vamos a lo que nos interesa, que queremos que cuando se pase el ratón por encima de este titulo empiece a girar el CD como si se reproduciera para ello colocamos el siguiente código:

titulo_mc.onRollOver=function(){
titulo_mc.gotoAndPlay(“on”);
disco_mc.gotoAndPlay(“play”);
}

titulo_mc.onRollOut=titulo_mc.onReleaseOutside=function(){
titulo_mc.gotoAndPlay(“off”);
disco_mc.gotoAndPlay(“stop”);
}

Podemos observar que cuando este onRollOver llamará a la animación de on del titulo, y lo que nos interesa llamará la animación “play” de nuestro disco_mc que empezará a girar. Y lo mismo ocurrirá cuando nos salgamos pero parará.

Ahora queremos que al pulsar sobre el disco empiece a girar y se quede pulsado hasta que se vuelva a pulsar, y aparte que llame a un movieClip máscara que realizara como título una animación de entrada dejando ver otra imagen en el centro de la película, para ello colocamos el siguiente código:

contador=2;
disco_mc.onRelease=function(){
if(contador%2==0){
maskara_mc.gotoAndPlay(“on”);
disco_mc.gotoAndPlay(“play”);
}else{
maskara_mc.gotoAndPlay(“off”);
disco_mc.gotoAndPlay(“stop”);
}
contador++;
}

Podemos ver que tenemos un contador inicializado a 2, lo que hacemos cuando clicamos sobre el CD es que evaluamos este contador y según nos de su resto realizamos una cosa u otra, si el resto es igual a 0 significa que el CD no había sido pulsado y lo iniciamos, si es diferente a 0 que si lo habíamos pulsado ya y lo paramos al final antes de salir de la función deberemos incrementar el contador para que esto sea verdad. Pero que ocurre si lo reproducimos, cuando esta dando vueltas hace un pequeño bug, y el 50% de los clicks no los recoge, eso ocurre porque el movieClip esta en animación y no lo reconoce como un objeto que se pueda pulsar, para solucionarlo vamos a colocar un nuevo movieClip instanciado como zona_mc que será un circulo blanco con el mismo tamaño que el disco_mc lo situamos justamente encima (una capa superior!!!) y le damos alpha, lo suficiente para que no se vea pero que si que lo reconozca el ratón y del código anterior sólo cambiamos lo siguiente:

…
zona_mc.onRelease=function(){
…

Bueno y aquí tenemos el resultado final:

SEÑOR WILSON:

La imagen es un enlace pincha sobre ella para ver el resultado final