Animación Sencilla 2 – Humo con Palabras

Continuamos con las animaciones sencillas, hoy toca una que hice para supa bassie, en ella podemos ver el efecto humo conseguido con letras, estas son de forma indefinida, creándose y eliminándose solas según su valor alpha transparencia. Veremos que este efecto lo conseguiremos  con poco más de 30 líneas de código.

Empecemos, Efecto Humo con Letras.

Este efecto esta basado, en uno del abanico de animaciones de sargento, la cual la llama humocedario. Vamos a ver que es muy sencilla, como en la animación sencilla 1, esta pensado para colgar en myspace, y por ello vamos a trabajar con un tamaño de película de 350×300 para que esta si es reducida no pierda calidad ni se deforme.
Aquí solo vamos a explicar lo referente a como hacer el efecto, ya que la animación resultante final tiene también efecto sobre el titulo cuando el ratón se pasa por encima, al estilo de un botón (onRollOver, onRollOut), también posee un par de imágenes en la cual podemos ver al artista en cuestión pinchando un disco, PERFECTO! Ya tenemos el sitio de donde saldrá el humo jejeje.

Bueno una vez tenemos la imagen en la escena, vamos a escribir una letra con la herramienta de cuadro de texto, y la convertimos a MovieClip no la instanciamos, pero si que le damos nombre de instancia en las propiedades de vinculación, recordad:

Luego la podemos eliminar de la escena y desde la biblioteca podemos entrar dentro de su escena haciendo doble clic sobre el MovieClip, tenemos que tener en cuenta que la letra debe ser texto dinámico y lo instanciamos con el nombre de texto_text para luego poder darle diferentes valores, bien como vamos a aplicarle un efecto de alpha seguramente tendremos problemas con la letra y mucho más motivo si el tipo de letra que utilicemos no es una fuente predeterminada del sistema operativo, para ello la tendremos que embeber (minúsculas y mayúsculas sobraría) dándole al botón incorporar:

Ahora que tenemos controlada la letra volvemos a la escena principal y comenzamos a introducir código:

//HACIENDO HUMO

i = 0; // lo utilizaremos como contador de letras para no tenerlas todas attachadas con el mismo nombre

onEnterFrame = function(){
_root.attachMovie( “letra”, “letra” + i, 100 + i );
ref = this[ "letra" + i ];
ref._x = 36; // Posición horizontal inicial
ref._y = 180; // Posición vertical inicial
ref._alpha = 70;
ref._xscale = ref._yscale = 1; // Escala inicial de 1%
// Obtenemos un valor aleatorio de 97 a 122
codigo_ascii = random( 26 ) + 97;
// Asignamos el valor a nuestro texto dinámico
ref.letra_text.text = String.fromCharCode(codigo_ascii);
ref.rot = ( Math.random() * 6 ) – 2; // Rotación
ref.vel = ( Math.random() * 2 ) + 0.6; // Velocidad
i++;
}

Paso a explicarlo:
Tenemos un contador inicializado a 0 (i) y realizamos un evento onEnterFrame sobre la escena en el cual vamos a introducir movieClips de letra con la attachMovie, para ello utilizamos el contador i para darle nombres diferentes a los movieClips ya que este no parará de créalo mientras estemos en la escena, de esta manera no tendremos problemas para referirnos a cada uno por individual. Lo siguiente que tenemos que hacer es instanciar una variable con el movieClip recién creado para facilitar su modificación, de ahí el uso de la variable ref.
Ahora empezamos a aplicarle unas pequeñas modificaciones:
Vamos a decirle su posición inicial indicándole la x y la y… aquí tenemos un problema ¿Cómo sabemos la posición que queremos que salga? Fácil nos vamos a la escena y hacemos un cuadrado o circulo donde queramos que empiecen a salir, clicamos sobre el y nos vamos a sus propiedades e wala! Ahí tenemos las x y las y, estos serán los valores a colocar en el código. Continuemos, para realzar el efecto de humo tendremos que darle una transparencia (alpha al 70%) y que su tamaño empiece pequeño y vaya agrandadose (escala al 1%). Vale como queremos que las letras no sean siempre las mismas vamos a utilizar código ASCII para indicar cual queremos, porque utilizamos código ASCII porque de esta manera podremos olvidarnos de las letras y trabajar con números cosa que cuando es un “bucle” nos facilitará la forma de trabajar.

“Los caracteres de la a a la z minúsculas corresponden al rango de valores de 97 a 122 de la tabla de valores ASCII. Para obtener cualquiera de los valores comprendidos dentro del rango la fórmula es muy sencilla:

random( 26 ) + 97;

Les explico: la función random( 26 ) nos arrojará un valor aleatorio entero desde 0 hasta 25, le incrementamos 97 para obtener valores entre 97 y 122, los cuales equivalen a los valores ASCII para las letras minúsculas de la a a la z.”, Sargento.

Sólo nos queda dar un valor para indiciarle posteriormente la rotación y su velocidad.

Si en este punto ejecutamos nuestra película, nos encontramos un par de problemas, vemos que se van creando una serie de letras superpuestas sin ningún tipo de animación, a continuación le daremos este efecto.

Volvemos dentro del movieClip letra, desde la biblioteca, y vamos a introducir este código en un evento propio del movieClip onEnterFrame:

onEnterFrame = function() {
this._rotation += rot;
this._y -= vel;
this._xscale += 1.3;
this._yscale += 1.3;
this._alpha -= 0.3;
}

Aquí vamos a ir incrementando su atributo de rotación mediante la variable creada en la escena principal (ref.rot), y disminuyendo su velocidad, he aquí un matiz que tenemos que tener en cuenta, hacia donde queremos que vaya el humo hacia arriba, derecha, izquierda… en mi caso quería que fuera hacia arriba entonces debe disminuir las y con la variable vel (ref.vel). El humo parece que se agrande conforme se va alejando de su origen, para conseguir esto solo tenemos que ir agrandando su escala (ladox e ladoy) y también parece que desaparezca disminuimos su alpha.

Ahora podemos volver a ejecutar y veremos que ya tenemos el efecto deseado, pero nos queda el segundo problema y bastante importante, si tenemos la película ejecutándose un largo periodo de tiempo empieza a ralentizarse y a funcionar mal, esto es debido a que tenemos un bucle sin fin creando movieClips “letra”. Para solucionar esto podemos pensar de eliminar el movieClip en algún momento, y cuando es este momento, pues cuando el movieClip desaparece (alpha=0) para ello en lo último que hemos escrito añadimos una evaluación de su alpha y si es menor que cero lo eliminamos de la escena:

onEnterFrame = function() {
this._rotation += rot;
this._y -= vel;
this._xscale += 1.3;
this._yscale += 1.3;
this._alpha -= 0.3;
if( this._alpha <= 0 ){
this.removeMovieClip();
}
}

Y ahora ya lo tenemos:

Bueno ahora ya depende de cada uno, podemos ir aplicándole cosas a lo escrito, por ejemplo que no salga de un mismo punto haciendo un random sobre su posición inicial. O darle un movimiento armónico como flotando… Flash es un mundo.