Anyone know how to Shape Tween TEXT in AS3? *TRICKY*

[Snivvle]

Hi all,

For those of you who know how to shape tween TEXT, you can do it by breaking it apart(under the MODIFY tab) in the GUI part of Flash. In AS3 however, you can't do that.

End Result wish - To simply have the text font increase in size starting from say, font size of 10 to 300 as if it is coming out of the screen. Imagine a dot, and then imagine the dot shape tweening out to become a large dot until it fills up your screen, now imagine your text box being able to do the same thing.

Here is my dilemma:

Assume I have created the following:
var textbox:TextField = new TextField();
addChild(textbox);
//whatever else I want my new text field to look like//

I have 1,000 different text words that I randomly fill my textbox with. Now, on the GUI side as I said, if I just had some text I want to shape tween, I would select it and break it apart. Here I obviously can't do that, since it is random text being placed into the textbox.

Would anyone know how to Shape Tween this textbox? Maybe somehow break the text apart within AS3? Maybe there is a loophole, attaching it to a MovieClip that is Shape Tweened? I don't know, those are some ideas. I need a clear head on this one, or several clear heads :D.

Thanks

[Krilnon]

You would have to code your own shape tween… AS3 doesn't have anything built-in that would be particularly helpful.

[Snivvle]

You would have to code your own shape tween… AS3 doesn't have anything built-in that would be particularly helpful.

There has to be a loophole. There has to be another way to do it. There are always loopholes in code.

If anyone has any ideas, I would be grateful.

Thanks Krilnon for the quick response. If I figure this out, I will post it.

[sebrofm]

i was able to do this with htmltext and a stylesheet but the maximum font size i could get it to was ~128. maybe if you embed a large font to do this it would work. you can have the code regardless, it doesn't get that big though.



package
{
import flash.text.StyleSheet;
import flash.text.TextField;
import flash.display.Sprite;
import flash.events.Event;
/**
* ...
* @author Matt Forbes
*/
public class tf extends Sprite
{
private var ss:StyleSheet;
private var growText:TextField;

private var counter:int;
public function tf()
{
ss = new StyleSheet();
ss.setStyle("p", { fontSize:1 } );

growText = new TextField();
growText.multiline = true;
growText.wordWrap = true;
growText.width = stage.stageWidth;
growText.height = stage.stageHeight;

counter = 0;

addChild(growText);


stage.addEventListener(Event.ENTER_FRAME, onEnterFrame);
}
private function onEnterFrame(e:Event):void {
if (counter < 300) {
counter++;
ss.setStyle("p", { fontSize:counter.toString() } );

growText.styleSheet = ss;
growText.htmlText = "<p>" + counter + "</p>";
}
}

}

}

[Snivvle]

Nice Sebro I will look into this. I did something similar to that just before reading this post and it was a fail, perhaps this will work wonders :D

[IQAndreas]

Simple.

I'm not sure if you can scale up textFields, so for this example, I'll just place it inside of a container sprite.


var textbox:TextField = new TextField();
textbox.text = "dfjsd;fnalbkajnriht4n;lsdkcna;erighgiargknasd;ckln a;lghiajklahfglakjndflkafglrnlkvm oerijargjadlgjkfl";

var container:Sprite = new Sprite();
container.addChild(textbox);
textbox.x = (this.stageWidth / 2) - (textbox.textWidth / 2);
textbox.y = (this.stageHeight / 2) - (textbox.textHeight / 2);

//This code can be simplified using tweens, but for this example I will hardcode everything.
this.addEventListener(Event.ENTER_FRAME, loop);
function loop(e:Event):void
{
container.scaleX += .1;
container.scaleY += .1;
Center(container);
}

function Center(sp:Sprite):void
{
sp.x = (sp.stageWidth / 2) - (sp.width / 2);
sp.y = (sp.stageHeight / 2) - (sp.height / 2);
}


This should work. If not, I'll try to debug it and see where I went wrong.



And if you are using CS4, all you have to do is start the "z" value of the textField at negative something (like -900), and then each frame, move it forward 10 or so pixels.

[Snivvle]

Interesting, I will see how well this can work. Thanks.

[Krilnon]

Wait, what does this have to do with shape tweening? You're just making the text bigger.

[Snivvle]

Yeah that is true. It is just making the text bigger, so it isn't a perfect and timely tween. For now I am going to have to go the long route, meaning the randomized text will call upon its movieclip owner, and shape tween that way. It is unfortunate and timely, but I have to get this done. AS3 needs to build in some way to do this, but then again it probably isn't in high demand :D

[sekasi]

I don't really see how that would be particularily difficult.

If each textbox lives inside a class that has a breakapart method and extends sprite, the method could loop through the text and place a new sprite inside itself consisting of the letter in the loop iteration. So you'd end up with the exact same thing but each letter inside a sprite. After that all bets are off for what you wanna do with it..