Jump to content
Search Community

XML Split Text Field

un4given test
Moderator Tag

Recommended Posts

Hey,

 

I

seem to be having a problem animating text that is brought in through XML, is this a common problem?

 

Below is the code I am using. If I do a test on text that it not brought in from XML it works fine.

 

var stf:SplitTextField = new SplitTextField(Comments_txt0);
for (var i:int = stf.textFields.length - 1; i > -1; i--) {
TweenMax.to(stf.textFields[i], 1, {blurFilter:{blurX:10, blurY:10}, x:Math.random() * 650 - 100, y:Math.random() * 350 - 100, scaleX:Math.random() * 4 - 2, scaleY:Math.random() * 4 - 2, rotation:Math.random() * 360 - 180, autoAlpha:0, delay:Math.random() * 0.5, ease:Quad.easeIn, repeat:1, yoyo:true, repeatDelay:1.2});
}

Link to comment
Share on other sites

There isn't much that can be assessed from the code you displayed.

 

are you sure that you are creating the SplitTextField AFTER the xml is loaded AND the textfield that is to be split has been populated with the text from the xml?

 

if so, perhaps you can post more code or a very simplified example fla

 

Carl

Link to comment
Share on other sites

I managed to fix the problem I was having by removing the random generator.

 

but I'm still having a problem with tweening text in and out. It works fine for the first enter and exit, but doesnt work after that.

 

I have attached a very simplified version of what im talking about.

Link to comment
Share on other sites

thanks for providing the converted file. it really helped me see what was happening.

I appreciate that you stripped out all the non-essentials and made something that was easy to trouble-shoot.

 

 

first you had code like this:

 

inclick.addEventListener(MouseEvent.CLICK, goin);

function goin(evt) {
TweenMax.allFrom(videoin.textFields, 1, {y:50,x:300, autoAlpha:0}, 0.05);
}


outclick.addEventListener(MouseEvent.CLICK, goout);

function goout(evt) {
TweenMax.allTo(videoin.textFields, 1, {y:50,x:300, autoAlpha:0}, 0.05);
}

 

 

so when you first do a goin() all the characters TWEEN FROM x50, y300, alpha0 TO where they initially are positioned on the stage when the tween is generated.

 

when you do a goout() they all go BACK TO x50, y300, alpha0 (works great)

 

the next time you do goin() they try to TWEEN FROM x50, y300, alpha0 and guess what? they are already there, so there is no where to go and nothing to see.

 

this is a great time to use TimelineLite as it will allow you to create the series of allFrom tweens once and then play() and reverse();

 

slam this into the file you sent

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.TweenMax;
import com.greensock.text.SplitTextField;

var videoin:SplitTextField=new SplitTextField(test);

//create a TimelineLite
var textAnimation:TimelineLite = new TimelineLite();

//add your allFrom to the TimelineLite
textAnimation.appendMultiple(TweenMax.allFrom(videoin.textFields, 1, {y:50,x:300, autoAlpha:0}, 0.05));

inclick.addEventListener(MouseEvent.CLICK, goin);

function goin(evt) {
//play the timeline forward
textAnimation.play();
}


outclick.addEventListener(MouseEvent.CLICK, goout);

function goout(evt) {
//reverse the timeline
textAnimation.reverse();
}

 

what is great about this is that you can jam on the in out buttons while the animation is playing in either direction and it switch direction seamlessly.

 

If you have any questions let me know.

 

Carl

Link to comment
Share on other sites

One more question.

 

Is there a way to delay the split text field variable?

 

the reason I ask is that I load the text via XML. And if I put the var in the main area rather then within a function, it breaks the animation as there is no text loaded when the var looks for it.

 

If you understand me?

 

I will make a striped down version again and attach it later

Link to comment
Share on other sites

Ok I have attached the files.

 

As you will see the one that works has the vars buried inside a function, but the effect of this is that reverse(); will not work because that has to be in a function.

 

I think it doesnt work because the var is created before the XML is loaded in.

 

sorry to keep bugging you.

Link to comment
Share on other sites

hello un4given,

 

you are exactly right, you were creating the SplitTextField before your comments were loaded and inserted into the proper dynamic TextField.

 

this will work

 

import com.greensock.*;

import com.greensock.easing.*;

import com.greensock.TweenMax;

import com.greensock.text.SplitTextField;

 

//declare videoin outside of any functions

var videoin:SplitTextField;

var loader:URLLoader = new URLLoader()

loader.dataFormat = URLLoaderDataFormat.TEXT

loader.addEventListener(Event.COMPLETE, onLoadXML)

loader.load(new URLRequest("expert.xml"))

function onLoadXML(ev:Event){

try{

//Convert the downloaded text into an XML

var myXML:XML = new XML(ev.target.data)

var list:XMLList = myXML..title

 

//walks the list and show in textfields

for(var i=0; i

//trace(list.@name+"-"+list.comments+" - "+list.image)

this["Title_txt"+i].text = list.@name

this["Comments_txt"+i].text = list.comments

 

//populate videoin AFTER the xml has loaded and Comments_txt0 has its text property set

videoin=new SplitTextField(Comments_txt0);

 

 

var loader:Loader = new Loader()

this["holder_mc"+i].addChild(loader)

loader.load(new URLRequest(list.image))

}

} catch (e:TypeError){

//Could not convert the data, probavlu because

//because is not formated correctly

trace("Could not parse the XML")

trace(e.message)

}

}

 

good luck with the rest of it. looks neat.

 

Carl

Link to comment
Share on other sites

Glad to hear it worked.

 

I know quite a bit about xml but I've never used LiquidStage.

 

I STRONGLY suggest you check out the GreenSock ImageLoader.

It allows you to load an image with one line of code like:


//create loader
var loader:ImageLoader = new ImageLoader("img/photo1.jpg", {name:"photo1", container:this, x:180, y:100, width:200, height:150", centerRegistration:true, onComplete:onImageLoad});

//begin loading
loader.load();

 

read more here:

http://www.greensock.com/as/docs/tween/ ... oader.html

 

Its a lot to read as there are a TON of features, but it is the most painless way to load images AND the images are smoothed by default.

for the time it takes to figure out how to load one image it will save you all the reading and hassle of figuring out how to manually create BitMapData thingies, copy pixels, apply smoothing and all that other nonsense.

 

If you have time investigate LoaderMax which allows you to have all your external assets and their properties listed in a very clean XML file. LoaderMax will load the XML and then automatically load all your assets, place them where they need to be, and report the progress of how everything is loading. Furthermore you can prioritize the loading of your assets so if while image2 is loading the user wants to see image10 right away, no problem. LoaderMax jumps in, loads image10 and when its done it goes back to image2.

 

there is a lot to read about and play with, but it is well worth the time investment. I can honestly say that after using LoaderMax on a project once, I will never load another mp3, swf, image or video without it.

 

http://www.greensock.com/loadermax/

Link to comment
Share on other sites

My sites preloader is made using LoaderMax, the reason I didnt use Loadermax for the images is because my teammate had already set up the XML. But if LoaderMax smooths by default, looks like my hands a tied.

 

again, thank you Carl.

 

I'm sure we will talk again haha

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...