Comunidad de diseño web y desarrollo en internet online

Efecto de movimiento elástico para texto con ActionScript 2

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 U_U.

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]

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

El autor de este artículo ha cerrado los comentarios. Si tienes preguntas o comentarios, puedes hacerlos en el foro

Entra al foro y participa en la discusión

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate