Paginas Amigas

Efecto de letras Giratorias PDF Imprimir E-mail
1
Escrito por Fernando   
Jueves, 23 de Abril de 2009 23:39


Muchos hemos visto que en algunas paginas donde muestran textos que rota alrededor de algún elemento, o que van detrás del mouse así que les voy ha indicar varias formas de hacer que el texto gire al rededor de un objeto y también que siga al mouse primero que nada copiamos el siguiente código en el primer fotograma de la película




Código :AS2
 
 
function RotaTexto(Texto:String, EjeX:Number, EjeY:Number, AmplitudX:Number, AmplitudY:Number, Velocidad:Number, FormatoTexto:TextFormat, Contenedor:Array) {
	var _contenedor:Array = new Array();
	var Letras:Array = new Array();
	Letras = Texto.split("");
	var incremento:Number = (2*Math.PI)/Letras.length;
	var eje_x = EjeX;
	var eje_y = EjeY;
	var amp_x = AmplitudX;
	var amp_y = AmplitudY;
	var velocidad = Velocidad;
	var FormatTexto:TextFormat;
	if (FormatoTexto.constructor == TextFormat) {
		FormatTexto = FormatoTexto;
	} else {
		FormatTexto = new TextFormat();
		FormatTexto.font = "Verdana";
		FormatTexto.size = 10;
	}
	for (var i:Number = 0; i<Letras.length; i++) {
		var NuevaLetraMC:MovieClip = this.createEmptyMovieClip("_letra"+i, this.getNextHighestDepth());
		var metrics:Object = FormatTexto.getTextExtent(Letras[i]);
		var NuevaLetraTX:TextField = NuevaLetraMC.createTextField("LetraLabel", 1, 0, 0, metrics.textFieldWidth+5, 0);
		NuevaLetraTX.wordWrap = true;
		NuevaLetraTX.text = Letras[i];
		NuevaLetraTX.setTextFormat(0,1,FormatTexto);
		NuevaLetraMC.angulo = incremento*i;
		NuevaLetraMC.onEnterFrame = function() {
			this._x = (Math.cos(this.angulo)*amp_x)+eje_x;
			this._y = (Math.sin(this.angulo)*amp_y)+eje_y;
			this.angulo += velocidad;
		};
		NuevaLetraTX.autoSize = true;
		NuevaLetraTX._x = -NuevaLetraMC._width/2;
		NuevaLetraTX._y = -NuevaLetraMC._height/2;
		Contenedor.push(NuevaLetraTX);
	}
}
 
 
Analizado en 0.026 segundos ha 56.12 KB/s, GeSHi 1.0.8.2-- CFX.GHCode Programado Por Crea-Flash.com



Simplemente con poner este código RotaTexto("Hola Saludos Desde Crea Flash .com --",200,200,50,50,-0.1); obtenemos algo parecido a esto



Explicare un poco los parametros de la función el


Texto:String : En este paramento se coloca el texto que deseamos animar.


EjeX:Number: Con este parametro indicamos la posición como su nombre lo indica del eje X


EjeY:Number: Con este parametro indicamos la posición como su nombre lo indica del eje Y


AmplitudX:Number:Con este parametro indicamos la amplitud de la posición X. si este valor es mayor AmplitudY genera un recorrido de elipse horizontal


AmplitudY:Number:Con este parametro indicamos la amplitud de la posición Y. si este valor es mayor AmplitudX genera un recorrido de elipse vertical


Velocidad:Number: En este paramento se indica la velocidad del recorrido de cada letra, este valor es dependiente de la cantidad de frames en la que la película se reproduzca entre mayor sea los frames mayor sera la velocidad de recorrido:


FormatoTexto:TextFormat: Con este paramento alterar el tipo de letra tanto como su tamaño y color


Contenedor:Array:Aquí se almacenan los TextFields creados para cada letra esto es muy útil ya que si luego queremos eliminarlos o cambiar sus letras



Ahora vamos hacer un menú con 3 botones, donde las letras de cada uno de los menús estarán girando a su alrededor, cuando el mouse pase por cada botón las letras lo seguirán si el mouse pasa sobre otro botón las letras que lo están siguiendo en ese momento volverán a su sitio



Creamos tres botones en el escenario y les colocamos el nombre de intace boton_1 boton_2 boton_3

una ves copiado el código de arriba podemos añadir lo siguiente

 




Código :AS2
//Crearemos 3 MovieClip que seran los contenedores, de las letras creadas 
var LetrasMac:MovieClip = this.createEmptyMovieClip("Mac", this.getNextHighestDepth());
var LetrasWin:MovieClip = this.createEmptyMovieClip("Win", this.getNextHighestDepth());
var LetrasLin:MovieClip = this.createEmptyMovieClip("Linux", this.getNextHighestDepth());
//Seguido creamos tambien 3 variables de tipo Array las cuales nos serviran para localizar las letras 
// dentro de los contenedores,  
var ArrayLetrasMac:Array = new Array();
var ArrayLetrasWin:Array = new Array();
var ArrayLetrasLin:Array = new Array();
//Creamos las letras y las colocamos dentro de su respectivo contenedor 
//Tambien podemos hacer un calculo lógico para saber la amplitud tanto del eje de X como el de Y simplemente 
//dividiendo por 2 el alto y el ancho de cada botón respectivamente,
LetrasMac.f = RotaTexto;
LetrasMac.f("Mackintosh Mackintosh ",0,0,boton_1._width/2+10,boton_1._height/2+10,-0.1,null,ArrayLetrasMac);
LetrasWin.f = RotaTexto;
LetrasWin.f("Windows Windows ",0,0,boton_2._width/2+10,boton_1._height/2+10,-0.1,null,ArrayLetrasWin);
LetrasLin.f = RotaTexto;
LetrasLin.f("Linux Linux ",0,0,boton_3._width/2+10,boton_1._height/2+10,-0.1,null,ArrayLetrasLin);
 
//Colocamos los MovieClip que contiene las letras sobre sus respectivos botones
LetrasMac._x = boton_1._x;
LetrasMac._y = boton_1._y;
 
LetrasWin._x = boton_2._x;
LetrasWin._y = boton_2._y;
 
LetrasLin._x = boton_3._x;
LetrasLin._y = boton_3._y;
 
//LLEGADO HA ESTE PUNTO PUEDES PROBAR LA PELICULA PARA VER EL RESULTADO
 
//Ahora vamos a utilizar los Array creados para evitar que se seleccione el texto 
// para ello crearemos un simple función,
function NoSelectText(Letras:Array) {
	for (var i in Letras) {
		Letras[i].selectable = false;
	}
}
// Enviamos los Array a la función NoSelectText para que desactive la selección de texto
NoSelectText(ArrayLetrasMac);
NoSelectText(ArrayLetrasWin);
NoSelectText(ArrayLetrasLin);
 
//PRUEVA LA PELICULA Y VERAS QUE EL TEXTO YA NO SE SELECCIONA 
 
//Seguido vamos hacer que el texto se incline dependiendo del centro,
// creamos otra función para colocar la rotación de cada letra
 
//NOTA :--------------------------------------------------------------------------------------
//Antes que continúes es importante que sepáis, los valores de giro no se admiten para campos de texto
// que utilizan fuentes de dispositivo.
//Debes utilizar fuentes incorporadas en la biblioteca para utilizar _rotation con un campo de texto. 
// si tenéis una duda de como hacer esta vinculación consultarlo en el foro de Crea-Flash.com
//:-------------------------------------------------------------------------------------------
//Con esta función nos vamos ha ahorra memoria de procesador ya que tal como esta ocupa mas memoria debido 
// a que cada letra posee un enterFrame para poder moverse, con esto se pretende conseguir que en ves de que cada 
// letra tenga que calcular su posicion mientras rota, lo haga unicamente su contenedor 
 
function InclinaLetras(Cont:Array, Contenedor:MovieClip, Boton:Object) {
	for (var i in Cont) {
		//Copiamos el TextFormat aplicado en el texto 
		var f:TextFormat = Cont[i].getTextFormat();
		// Activamos embedFonts para que el texto se pueda ver cada ves que rote,
		Cont[i].embedFonts = true;
		// Recejemos de la biblioteca nuestra font vinculada
		f.font = "VerdanaT";
		// Volvemos añadir en nuevo TextFormat modificado a los TexFields 
		Cont[i].setTextFormat(f);
		// Desactivamos el onEnterFrame de los MovieClip que mueven las letras
		Cont[i]._parent.onEnterFrame = null;
		// Colocamos la letras alrededor del botón 
		Cont[i]._parent._x = (Math.cos(Cont[i]._parent.angulo)*(Boton._width/2+20));
		Cont[i]._parent._y = (Math.sin(Cont[i]._parent.angulo)*(Boton._height/2+20));
	}
	//Añadimos un único onEnterFrame que se encargara de rotar las letras que contiene, ademas de rotar el mismo
	Contenedor.onEnterFrame = function() {
		this._rotation -= 5;
		for (var i in Cont) {
			//Gracias a Math.atan2 podremos calcular el angulo en que deben inclinarse las letras con respecto a su eje
			Cont[i]._parent._rotation = -(Math.atan2(Cont[i]._parent._x, Cont[i]._parent._y)*180/Math.PI)+180;
		}
	};
 
}
//Enviamos a la función InclinaLetras ,los Array que contienen las letras, su contenedor y el botón,
// este ultimo es para poder volver a calcular sus parámetros ,  
InclinaLetras(ArrayLetrasMac,LetrasMac,boton_1);
InclinaLetras(ArrayLetrasWin,LetrasWin,boton_2);
InclinaLetras(ArrayLetrasLin,LetrasLin,boton_3);
 
//PRUEBA LA PELICULA PARA VER EL RESULTADO  
 
//Por ultimo vamos hacer que las letras sigan al mouse cuando este pase sobre los botones 
// y que vuelvan a su sitio si el mouse pasa sobre otro botón 
function SigeMouse(NombreBoton:Object) {
	//En Esta parte de la función detectamos por que botón el mouse ha pasado 
	switch (NombreBoton._name) {
		case boton_1._name :
			//Con esta función hacemos que las letras sigan al mouse
			this.onEnterFrame = function() {
				LetrasMac._y = _ymouse;
				LetrasMac._x = _xmouse;
			};
			//Con esto devolvemos a las letras a su respectiva posición 
			Retorna(LetrasWin,boton_2);
			Retorna(LetrasLin,boton_3);
			break;
		case boton_2._name :
			this.onEnterFrame = function() {
				LetrasWin._y = _ymouse;
				LetrasWin._x = _xmouse;
			};
			Retorna(LetrasMac,boton_1);
			Retorna(LetrasLin,boton_3);
			break;
		case boton_3._name :
			this.onEnterFrame = function() {
				LetrasLin._y = _ymouse;
				LetrasLin._x = _xmouse;
			};
			Retorna(LetrasWin,boton_2);
			Retorna(LetrasMac,boton_1);
			break;
	}
}
//No se si a veis visto alguna ves la clase Tween, si no es así pedir información en el foro 
// que esto es un tema interezante,
import mx.transitions.Tween;
function Retorna(McLetra:Object, McBoton:Object) {
	var tweenX = new Tween(McLetra, "_x", null, McLetra._x, McBoton._x, 2, true);
	var tweenY = new Tween(McLetra, "_y", null, McLetra._y, McBoton._y, 2, true);
}
//Cremos una variable global que no servirá de llave para que no este activando la funcion SigeMouse() a cada rato,
_global.activado = '';
 
boton_1.onRollOver = function() {
	//Comparamos si la variable _golbal es distinta a  boton_1._name se activa la función SigeMouse(),
	//  a su ves le damos un nuevo valor a dicha variable 
	if (_global.activado != boton_1._name) {
		SigeMouse(boton_1);
		_global.activado = boton_1._name;
	}
	//Siempre que el mouse pase sobre este botón restablece el alpha, que luego lo reducimos a 50 con onRollOut  
	boton_1._alpha = 100;
};
boton_1.onRollOut = function() {
	//Cada ves que el mouse salga fuera del área del botón este reduce su alpha a 50 
	boton_1._alpha = 50;
};
boton_2.onRollOver = function() {
	if (_global.activado != boton_2._name) {
		SigeMouse(boton_2);
		_global.activado = boton_2._name;
	}
	boton_2._alpha = 100;
};
boton_2.onRollOut = function() {
	boton_2._alpha = 50;
};
boton_3.onRollOver = function() {
	if (_global.activado != boton_3._name) {
		SigeMouse(boton_3);
		_global.activado = boton_3._name;
	}
	boton_3._alpha = 100;
};
boton_3.onRollOut = function() {
	boton_3._alpha = 50;
};
 
// Reducimos el alpha a 50 en todos los botones 
boton_1._alpha = 50;
boton_2._alpha = 50;
boton_3._alpha = 50;
 
 
Analizado en 0.045 segundos ha 161.64 KB/s, GeSHi 1.0.8.2-- CFX.GHCode Programado Por Crea-Flash.com

 



Por ultimo le coloco el código con el que se realizo el ejemplo que se muestra en la cabecera , este código no lleva explicación ya que esta optimizado, y tambien muestra otra forma de programar ,




Código :AS2
 
var LetrasMac:MovieClip = this.createEmptyMovieClip("Mac", this.getNextHighestDepth());
var LetrasWin:MovieClip = this.createEmptyMovieClip("Win", this.getNextHighestDepth());
var LetrasLin:MovieClip = this.createEmptyMovieClip("Linux", this.getNextHighestDepth());
var ArrayLetrasMac:Array = new Array();
var ArrayLetrasWin:Array = new Array();
var ArrayLetrasLin:Array = new Array();
var TF:TextFormat = new TextFormat();
TF.font = "VerdanaT";
TF.size = 20;
TF.color = 0x00FF00;
LetrasMac.f = RotaTexto;
LetrasMac.f("Mackintosh Mackintosh ",0,0,0,0,0,TF,ArrayLetrasMac);
LetrasWin.f = RotaTexto;
LetrasWin.f("Windows Windows ",0,0,0,0,0,TF,ArrayLetrasWin);
LetrasLin.f = RotaTexto;
LetrasLin.f("Linux Linux ",0,0,0,0,0,TF,ArrayLetrasLin);
LetrasMac._x = boton_1._x;
LetrasMac._y = boton_1._y;
LetrasWin._x = boton_2._x;
LetrasWin._y = boton_2._y;
 
LetrasLin._x = boton_3._x;
LetrasLin._y = boton_3._y;
function FormarText(Letras:Array, Contenedor:Object, Boton:Object) {
 
	for (var i in Letras) {
		Letras[i].selectable = false;
		Letras[i].embedFonts = true;
		Letras[i]._parent.onEnterFrame = null;
		Letras[i]._parent._x = (Math.cos(Letras[i]._parent.angulo)*(Boton._width/2+20));
		Letras[i]._parent._y = (Math.sin(Letras[i]._parent.angulo)*(Boton._height/2+20));
 
	}
	Contenedor.onEnterFrame = function() {
		this._rotation -= 5;
		for (var i in Letras) {
			Letras[i]._parent._rotation = -(Math.atan2(Letras[i]._parent._x, Letras[i]._parent._y)*180/Math.PI)+180;
		}
	};
}
FormarText(ArrayLetrasMac,LetrasMac,boton_1);
FormarText(ArrayLetrasWin,LetrasWin,boton_2);
FormarText(ArrayLetrasLin,LetrasLin,boton_3);
var tiempoEspera:Number=0
function SigeMouse(NombreBoton:Object) {
	tiempoEspera = 0;
	var tim:Number = 100;
	var cont:Number
	switch (NombreBoton._name) {
		case boton_1._name :
			this.onEnterFrame = function() {
				LetrasMac._y = _ymouse;
				LetrasMac._x = _xmouse;
				if (cont == _xmouse) {
					tiempoEspera+=1
				}else{
					tiempoEspera=0
				}
				if (tiempoEspera>tim) {
					Retorna(LetrasMac,boton_1);
					delete(this.onEnterFrame )
					_global.activado = '';
				}
				cont=_xmouse
			};
			Retorna(LetrasWin,boton_2);
			Retorna(LetrasLin,boton_3);
			break;
		case boton_2._name :
			this.onEnterFrame = function() {
				LetrasWin._y = _ymouse;
				LetrasWin._x = _xmouse;
				if (cont == _xmouse) {
					tiempoEspera+=1
				}else{
					tiempoEspera=0
				}
				if (tiempoEspera>tim) {
					Retorna(LetrasWin,boton_2);
					delete(this.onEnterFrame )
					_global.activado = '';
				}
				cont=_xmouse
			};
			Retorna(LetrasMac,boton_1);
			Retorna(LetrasLin,boton_3);
			break;
		case boton_3._name :
			this.onEnterFrame = function() {
				LetrasLin._y = _ymouse;
				LetrasLin._x = _xmouse;
				if (cont == _xmouse) {
					tiempoEspera+=1
				}else{
					tiempoEspera=0
				}
				if (tiempoEspera>tim) {
					Retorna(LetrasLin,boton_3);
					delete(this.onEnterFrame )
					_global.activado = '';
				}
				cont=_xmouse
			};
			Retorna(LetrasWin,boton_2);
			Retorna(LetrasMac,boton_1);
			break;
	}
}
import mx.transitions.Tween;
function Retorna(McLetra:Object, McBoton:Object) {
	var tweenX = new Tween(McLetra, "_x", null, McLetra._x, McBoton._x, 2, true);
	var tweenY = new Tween(McLetra, "_y", null, McLetra._y, McBoton._y, 2, true);
}
_global.activado = '';
boton_1.onRollOver = function() {
	if (_global.activado != boton_1._name) {
		SigeMouse(boton_1);
		_global.activado = boton_1._name;
	}
	boton_1._alpha = 100;
};
boton_1.onRollOut = function() {
	boton_1._alpha = 60;
};
boton_2.onRollOver = function() {
	if (_global.activado != boton_2._name) {
		SigeMouse(boton_2);
		_global.activado = boton_2._name;
	}
	boton_2._alpha = 100;
};
boton_2.onRollOut = function() {
	boton_2._alpha = 60;
};
boton_3.onRollOver = function() {
	if (_global.activado != boton_3._name) {
		SigeMouse(boton_3);
		_global.activado = boton_3._name;
	}
	boton_3._alpha = 100;
};
boton_3.onRollOut = function() {
	boton_3._alpha = 60;
};
 
boton_1._alpha = 60;
boton_2._alpha = 60;
boton_3._alpha = 60;
Analizado en 0.042 segundos ha 97.77 KB/s, GeSHi 1.0.8.2-- CFX.GHCode Programado Por Crea-Flash.com



Descargar Archivo de ejemplo
Última actualización el Viernes, 24 de Abril de 2009 00:41
 

Articulos Relacionados