Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
mrzzrm

circular tweening text

Recommended Posts

Hi and welcome to the GreenSock forums,

 

Thanks for the video, its always helpful to see an example in such a case.

 

That is a fairly advanced effect and I'm guessing that even a seasoned expert would need a few hours to recreate it. There are many factors involved including

 

  • Breaking text apart into characters
  • Making it perfectly wrap around a circle in varying rings with different radiuses (radii?)
  • Targetting and animating columns of characters in multiple rings
  • Targetting and animating rings of characters

 

Sorry, but this is no small task, and unfortunately not the type of example we can just whip together.

Link to comment
Share on other sites

Yes, that tutorial may be a good starting point to understand the complexity involved in curving text.

From looking at the code, the developer did not intend for each character to be easily accessible via code.

Unlike our SplitTextField tool which provides an Arrays of all chars, words and lines, this curvedtext tool is more of a "black box". Its only job is to create curved text. That is all. 

 

In other words there is no clean way of saying "give me the third character in the curved text" so that it can be animated.

 

My professional assessment is that it is going to take a fair amount of hacking (requiring some fairly advanced ActionScript coding) to make this tool work for you.

 

Out of curiosity I was able to create a cryptic loop through the children of the first child in the CurvedText instance like so:

private function drawCurvedText(e:Event = null):void {


// remove the previous added text
if(_text && contains(_text)) {
removeChild(_text);
}


// setting TextFormat options
_tf = new TextFormat();
_tf.font = "Verdana";
_tf.size = fontSize.value;
_tf.color = 0x000000;


// creating the CurvedText object
_text = new CurvedText(txt.text, radius.value, startAngle.value, endAngle.value, direction.selectedItem.data, _tf);
_text.showCurve= showCurve.selected;
_text.showLetterBorder = lettersBorder.selected;
_text.draw();
addChild(_text);


// BEGIN code for animation this is the code for animation


var t = _text.getChildAt(0);
for (var i:int = 0; i < t.numChildren; i++){
TweenLite.from(t.getChildAt(i), 1, {rotation:-36, scaleX:4, scaleY:4});
}


// END code for animation this is the code for animation




// positioning the CurvedText object 
_text.x = (550 - _text.width) / 2;
_text.y = ((300 - _text.height) / 2);


}

I attached a zip of the working result for you to experiment with. 

 

I would recommend using the CurvedText as file as a starting point and adding more features like a public variable that gives you an Array of all the letters. Then you can do things like

TweenLite.to(myText.chars[2], 1, {alpha:0});

Also, you should use the files from the tutorial and make a very simple file that only contains just the curved text and none of those controls or other extraneous code in app.as

 

Its best to start really small.

 

Good luck with your project. If you have questions about the GSAP code, please let us know.

 

 

 

 

 

 

curvedtext-tween.zip

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.
×