Efecto de movimiento elástico para texto con ActionScript 2

Por: penHolder + 10.12.2007

Antes que nada debo decir que este tip no seria posible sin la ayuda de algunos grandes Clabbers como eldervaz, HernanRivas, y the Fricky!, pero principalmente, y con mucho odio en el corazón, debo aceptar que es gracias a Zguillez, quien logró el gran ajuste final.
Ahora si, la explicación, si bien es un efecto simpático y vistoso es una de esas cosas que solo son bonitas pero carecen de mucha utilidad .

Esto es lo que vamos a hacer:



Lo primero que hacemos es importar la clase tween y sus suavizados

Código :

import mx.transitions.Tween;
import mx.transitions.easing.*;

Luego creamos una variable de tipo String, la cual será el texto principal y eje de nuestro código

Código :

var word:String = "cristalab";

A continuación declaramos tres Arrays donde almacenaremos: cada letra del texto, cada nueva letra convertida en clip, y la posición en x de estas ultimas respectivamente

Código :

var matrix:Array = word.split("");
var models:Array = new Array();
var modelsPosX:Array = new Array();

Ahora vamos con un poco de estilo para el texto y la variable spacing que será, en parte, la que defina la separación de las letras

Código :

var spacing:Number = 1.7
var style = new TextFormat();
style.color = 0xFF9900;
style.font = "Verdana";
style.bold = true;
style.size = 30;

Bien, vamos con lo divertido, primero una variable que almacene el largo del Array que contiene a cada letra del texto

Código :

var t:Number = matrix.length;

Luego un for seteado por ésta variable

Código :

for (var i:Number = 1; i<=t; i++) {

Y dentro del for lo siguiente:
Un MovieClip creado por cada letra de la palabra

Código :

var modelLetter:MovieClip = this.createEmptyMovieClip("letter"+i, this.getNextHighestDepth());

Un TextField en cada MovieClip creado

Código :

modelLetter.createTextField("textLetter", this.getNextHighestDepth(), 0, 0, null, null);

A cada TextField le asignamos una letra del texto almacenada en el Array

Código :

modelLetter.textLetter.autoSize = true;
modelLetter.textLetter.text = matrix[i-1];

Y a los TextField le asignamos el estilo antes definido

Código :

modelLetter.textLetter.setTextFormat(style);

Ahora la magia de Zguillez:
Llenamos el Array con cada nueva letra creada

Código :

models.push(modelLetter);

Asignamos una posición inicial a las letras

Código :

var posXini:Number = 0;

Y mediante un condicional vamos ubicando una a continuación de la otra separadas por el valor antes seteado

Código :

var posX:Number = (i != 1) ? (models[i-2]._x+models[i-2]._width*spacing+modelsPosX[i-2]) : posXini;
modelsPosX.push(posX);

Bien, ahora en un nuevo for vamos a crear los movimientos mediante tweens aplicadas a cada letra

Código :

for (var i:Number = 1; i<=t; i++) {
      var fadeInYs:Tween = new Tween(models[i-1], "_yscale", Elastic.easeOut, 100, 200, i, true);
      var fadeInXs:Tween = new Tween(models[i-1], "_xscale", Elastic.easeOut, 100, 200, i, true);
      var fadeInX:Tween = new Tween(models[i-1], "_x", Elastic.easeOut, 0, modelsPosX[i-1], i, true);
   }

bien, espero les sirva para algo,
[aqui esta el fla]

actionscript

Deja un comentario

IMPORTANTE

Recuerda ser respetuoso, no insultes a otras personas, ni uses palabrotas, hay una persona al otro lado de la pantalla.

Habla bien, NO ESCRIBAS EN MAYUSCULA TODO, no escribas como en un SMS, evita cosas como "ke", "x q" y demás abreviaciones.

Aquí funcionan las etiquetas de los foros, puedes usar [b] para negrita, [img] para las imágenes, [url] para los enlaces, etc.

Si tienes preguntas técnicas, envíalas mejor al foro.

Nombre

Comentario