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]
¿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.
Por eldervaz el 10 de Diciembre de 2007
Por The Fricky! el 10 de Diciembre de 2007
Por M@U el 10 de Diciembre de 2007
Se ve muy bien TheTangerine !!!...
Por Zguillez el 10 de Diciembre de 2007
penHolder :
Juas! ni que fuera Harry Potter...
Mirándomelo con más calma te solucioné otro problema...
Fíjate que al tener la opción de texto seleccionable en las cajas al querer seleccionar la palabra en realidad solo podrás seleccionar una letra
Doble-click en la palabra solo selecciona una letra
Esto se puede solucionar sustituyendo al final de la animación de los tweens todas las cajas de las letras por una cajaj de igual tamaño con la palabra entera.
Doble-click en la palabra al final de la animación seleccionas toda la palabra
Básicamente es con un onMotionFinished
Aquí el código
Por M@U el 10 de Diciembre de 2007
Zguillez :
Doble-click en la palabra al final de la animación seleccionas toda la palabra
Básicamente es con un onMotionFinished
Por Zguillez el 10 de Diciembre de 2007
M@U :
Naturalmente esta sería una solución para el caso de que te interesase mantener el texto seleccionable... si fuese una animación para un texto de párrafo, o asi... Evidentemente haciéndolo no seleccionable no te dará problemas de selección...
Por Señor Oz el 10 de Diciembre de 2007
Por M@U el 10 de Diciembre de 2007
Zguillez :
Naturalmente esta sería una solución para el caso de que te interesase mantener el texto seleccionable... si fuese una animación para un texto de párrafo, o asi... Evidentemente haciéndolo no seleccionable no te dará problemas de selección...
Ese obviamente no era mi punto... En fin, buen Tip...
Por Kinduff el 10 de Diciembre de 2007
Por enjoydasilence el 11 de Diciembre de 2007
Esto me huele a imitación del Swish
Por GustavoGarzón el 12 de Diciembre de 2007
"MASTER OF THE OBVIOUS"... Esa imagen debería aparecer en los diccionarios como "own3d".
Por christopher el 12 de Diciembre de 2007
Por Elias el 12 de Diciembre de 2007
Por ychuss el 14 de Diciembre de 2007
saludos
atte
ychuss
[email protected]
Por Carlos el 14 de Diciembre de 2007
Por german-wasem el 15 de Diciembre de 2007
Por shadow-host el 16 de Diciembre de 2007
Por nadie el 17 de Diciembre de 2007
Por nicolas el 03 de Abril de 2008
Por anfafesa el 24 de Septiembre de 2008