circular tweening text

[mrzzrm 0 Likes (Newbie)]

hi all

is this effect posibble in gsap that used in this video?

http://hn8.asset.aparat.com/aparat-video/ffc8b63d232a337d28551041165687ab1509331.mp4

if is

how?

 

i want that beautiful circular text effect

 

i'm beginner please describe!

thnk

[Carl 9,066 Likes (Superhero)]

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.

[mrzzrm 0 Likes (Newbie)]

well ...

we can move forward step by step!

 

I start with text in circle

is this example suitable?

http://krasimirtsonev.com/blog/article/AS3-dynamic-text-field-to-curve-textfield-on-an-arcing-path

 

the tweening of it is duty to you!!!

 

thnk again

[Carl 9,066 Likes (Superhero)]

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