Classe per animare testi

[Stan]

Ciao a tutti,
c'è FlashEff che fa cose egregie anche in versione free, che però non supporta il codice.
In AS2 qualcosa avevo fatto da solo, ma il sistema consisteva nel non usare un textfield, ma bensi mettere una lettera in un textfield a parte e animare questi.

Mi sa che in AS3 si può agire in modo diverso.
Pensavo che si potrebbe creare un textfield con il testo, trovare la posizione di ogni lettera (ho visto che c'è un esempio che lo fa, e "ritagliarla" copiandola in una bitmap da animare.

Che ne pensate? Dite che è possibile?

[Stan]

Ok, sto facendo qualche prova come diceva qualcuno "Si-può-fare"


Mettete sullo stage un clip chiamato testo con all'interno una textfield dinamica chiamata testo

Un problema per ora è che alcune lettere sono tagliate male, in Arial la f minuscola da problemi, volevo risolvere cambiando il kerning, ma anche mettendolo a 100 non cambia, mi sa che tralascio qualcosa.

Ah, tweenlite è una libreria di animazioni, mi serve per animare lettera lettera per far vedere che sono diverse!

import flash.display.Bitmap; 
import flash.display.BitmapData; 
 
import gs.TweenLite;

//var testo:TextField = new TextField()
testo.length

var formato:TextFormat = new TextFormat()


formato.kerning=100
formato.color=0xCC0000

//testo.text = "PIPPO"
testo.testo.setTextFormat(formato)


var copia:BitmapData = new BitmapData (testo.width, testo.height, true, 0xFFCC00);
copia.draw(testo)

/*
var copiaTesto:Bitmap = new Bitmap(copia)
addChild(copiaTesto)
copiaTesto.x=0
copiaTesto.y=0
*/


for (var i=0;i<testo.testo.length;i++){
	var frame:Rectangle = testo.testo.getCharBoundaries(i);
	
	var rett:Sprite = new Sprite()
	
	rett.graphics.clear();    
	rett.graphics.lineStyle(.01)
	rett.graphics.beginFill(0xFFFF00, .35);
	rett.graphics.drawRect((frame.x)+testo.x, (frame.y)+testo.y, frame.width, frame.height);            
	rett.graphics.endFill();
	rett.alpha=.3
	
	addChild(rett)
	

	var bmd = new BitmapData (frame.width, frame.height, true, 0);
	
	var pt:Point = new Point(0,0);
	
	bmd.copyPixels(copia,frame,pt)
	var bm = new Bitmap (bmd);
	
	bm.x = frame.x;
	bm.y = frame.y;

	bm.smoothing = true;
	
	TweenLite.from(bm, 1, {alpha:0, delay:.5*i})
	
	addChild (bm);	

	
	//removeChild(testo)
	

}

[Stan]

C'ho ripensato!

Lo scopo del procedimento era avere una replica fedele della textarea.
Ma visto che posso ricavarne ogni posizione mi conviene farlo creando comunque tante textarea quante lettere, e posizionarle "sopra" la lettera giusta.

Provo

[Stan]

Sto lavorando, direi che ho quasi fatto. Ho ricreato una casella di testo con tanti clip separando lettere e parole, posizionandole perfettamente sopra (giusto qualche pixel di differenza), e centrando l'originale in modo da ruotare parole e lettere.

Ora dovrei riconvertire il codice in classe. Ma non sono molto pratico nella scrittura della classi. Quando ho concluso ve la posto così se volete mi date una mano ad aggiustarla.

[Stan]

/*
# Classe MagicText AS3
# date: 30-10-09
# author: Alesssandro Pomili
# copyright: Alessandro Pomili
*/
package
{
    import flash.display.*;
	import flash.text.TextField;
	import flash.text.TextFormat;
	import flash.geom.Rectangle;
    
    public class MagicText extends MovieClip
    {
		private var __target:DisplayObjectContainer; //il parent della casella di testo passata
		private var __formato:TextFormat;	//il textformat del testo passato
		private var __stringa:String; //la stringa letta nella textfield
		private var __conta:Number; //contatore per le lettere
		private var __textfield:TextField; //riferimento
		
		private var __MagicText:MovieClip; // il clip che contiene tutto il testo
		
		private var __arrayParole:Array; // array contentente le parole
		private var __arrayLettere:Array; // array contentente tutte le lettere
		private var __rimuovi:Boolean
		
		
		function MagicText(textfield:TextField=null, rimuovi:Boolean=false){
			if (textfield==null){
				trace("la textfield passata alla class MagicText è vuota")
			}else{				
				__conta=0;
				__arrayParole = new Array();
				__arrayLettere = new Array();				
				__rimuovi = rimuovi;
				__textfield = textfield;
				
				__target = textfield.parent; // il parent della mia textfield
				
				__MagicText = new MovieClip();
				__MagicText.x = textfield.x;
				__MagicText.y = textfield.y;
				
				
				//textfield.visible=false; //nascondo la textfield originale
				if (rimuovi){
					__target.removeChild(textfield)
				}


				__target.addChild(__MagicText);
				
				
				__formato = textfield.getTextFormat();
				
				__stringa = textfield.text.split("\r").join(" "); //sostituisco gli a capo con uno spazio vuoto
				__stringa = __stringa.split("  ").join(" "); //sostituisco il doppio spazio vuoto lasciato dagli a capo con uno solo
				
				var arrParole:Array = __stringa.split(" ");	//splitto sugli spazi per ottenere le parole
				
				for (var i=0;i<arrParole.length;i++){
					
					var parola:MovieClip = new MovieClip()
					parola.name="p"+i
					
					parola.lettere = new Array();
		
					for (var j=0;j<arrParole[i].length;j++){

						var frame:Rectangle = textfield.getCharBoundaries(__conta);
						
						//salvo la posizione della prima lettere della parola
						if (j==0){
							var inizioFraseX = frame.x;
							var inizioFraseY = frame.y;
						}
						
						/*
						//verifica area lettere
						var rett:Sprite = new Sprite()						
						rett.graphics.clear();    
						rett.graphics.lineStyle(1)
						rett.graphics.beginFill(0xFFFF00, .5);
						rett.graphics.drawRect((frame.x)+textfield.x, (frame.y)+textfield.y, frame.width, frame.height);            
						rett.graphics.endFill();
						rett.alpha=.3
						__target.addChild(rett)
						*/												
						
						var cLett:MovieClip = new MovieClip()
						
						var tt:TextField = new TextField();
						tt.autoSize="left";
						tt.selectable = false;
						tt.embedFonts=true
				
						tt.text = textfield.text.substr(__conta,1);
						tt.setTextFormat(__formato);
	
						tt.x = -tt.width/2;
						tt.y = -tt.height/2;
				
						tt.name= "l"+j;	
				
						cLett.addChild(tt);
				
						cLett.x = frame.x-tt.x-inizioFraseX;
						cLett.y = frame.y-tt.y-inizioFraseY;
				
						parola.addChild(cLett);
						
						__conta++;		
						
						parola.lettere.push(cLett);
						__arrayLettere.push(cLett);
						
					}
					//sposto l'origine della parola in modo da averla al centro
					var offx = parola.width/2;  //calcolo il centro della parola
					var offy = parola.height/2;
					
					//sposto tutte le lettere al centro		
					for (var z:Number=0;z<parola.lettere.length;z++){
						parola.lettere[z].x -= offx;
						parola.lettere[z].y -= offy;
					}

					//sposto l'intera parola per recuperare lo spostamento delle lettere
					parola.x += offx+inizioFraseX;
					parola.y += offy+inizioFraseY;

					__MagicText.addChild(parola);
					__arrayParole.push(parola);

					__conta++;
					if (textfield.text.substr(__conta,1)=="\r"){ //se questo carattere corrisponde ad un a capo lo salto
						__conta++;
					}
				}								
			}
		}
		/*
		public function get parole():Array {
			return __arrayParole;
		}
		public function get lettere():Array {
			return __arrayLettere;
		}
		*/
		public function getParole():Array {
			return __arrayParole;
		}		
		public function getLettere():Array{
			return __arrayLettere;
		}
		public function getLettereParola(parola:MovieClip=null):Array{
			if (parola==null){
				return new Array();
			}else{
				return parola.lettere;
			}
		}
		
		public function showText(){
			__textfield.visible=true
			if (__rimuovi){
				__target.addChild(__textfield)
			}
		}
		public function hideText(){
			__textfield.visible=false
			if (__rimuovi){
				__target.removeChild(__textfield)
			}
		}		
    }
}

Utilizzo

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;

TweenPlugin.activate([BlurFilterPlugin]);

OverwriteManager.init();

var magica = new MagicText(testo, true)  // testo è una casella di testo sullo stage

var parole:Array = magica.getParole()
var lettere:Array = magica.getLettere();


for (var i=0;i<parole.length;i++){
	TweenLite.from(parole[i], .5, {alpha:0,scaleX:1.5, scaleY:1.5, rotation:"-30", delay:i*.2})
	
	var lettereParola:Array = magica.getLettereParola(parole[i])
	
	/*for (var j=0;j<lettereParola.length;j++){
		TweenLite.from(lettereParola[j], .5, {scaleY:2.5, delay:j*.05+i*.2})
	}*/
	
}

for (i=0;i<lettere.length;i++){
	//TweenLite.from(lettere[i], .1, {alpha:0, scaleY:2.5, delay:i*.05})	
	
	TweenLite.from(lettere[i], 2, {alpha:0, x:"+100", scaleY:2.5, delay:i*.05, blurFilter:{blurX:20}, rotation:50, ease:Elastic.easeOut})		
	
}

}